From e7a70e0a5d1c6b21b1cf31c8b3e331bf1cf876a9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Du=C5=A1an=20Simi=C4=87?= Date: Tue, 2 Mar 2021 12:40:49 +0100 Subject: [PATCH] Monitor for changes in class list and update it This fixes dark mode not being set on startup. Messenger website seems to remove the `__fb-dark-mode` class just after Caprine adds it and it disables dark mode on startup. This solution uses MutationObserver to observe when class list in `html` element changes and if it doesn't match the config of the app, it updates the class list. This enables dark mode on every startup. --- source/browser.ts | 20 ++++++++++++++++++++ 1 file changed, 20 insertions(+) diff --git a/source/browser.ts b/source/browser.ts index 206fdcee3..0d1f3191e 100644 --- a/source/browser.ts +++ b/source/browser.ts @@ -383,6 +383,24 @@ function setDarkMode(): void { updateVibrancy(); } +async function observeDarkMode(): Promise { + const observer = new MutationObserver((records: MutationRecord[]) => { + // Find records that had class attribute changed + const classRecords = records.filter(record => record.type === 'attributes' && record.attributeName === 'class'); + // Check if dark mode classes exists + const isDark = classRecords.map(record => { + const {classList} = (record.target as HTMLElement); + return classList.contains('dark-mode') && classList.contains('__fb-dark-mode'); + }).includes(true); + // If config and class list don't match, update class list + if (api.nativeTheme.shouldUseDarkColors !== isDark) { + setDarkMode(); + } + }); + + observer.observe(document.documentElement, {attributes: true, attributeFilter: ['class']}); +} + function setPrivateMode(): void { document.documentElement.classList.toggle('private-mode', config.get('privateMode')); @@ -766,6 +784,8 @@ document.addEventListener('DOMContentLoaded', async () => { // Activate Dark Mode if it was set before quitting setDarkMode(); + // Observe for dark mode changes + observeDarkMode(); // Activate Private Mode if it was set before quitting setPrivateMode();