Web Viewer dark mode

Help
1

So this thread seems to imply that there’s a way to change the background color on a website looked at through webviewer. I’m using one particular site that doesn’t have a darkmode, and I can’t access something like Midnight Lizard to change the theme.

So where do I change this ‘white’ to something else so that I can have a darker website?

The Surfing plugin used to have a dark mode, but it doesn’t seem to be working for me anymore, I assume an update killed it.

2

The Surfing plugin probably achieved this with javascript.

A simple CSS invert is not good enough..

/* Light theme - no invert */
.theme-light .webviewer-content webview {
    background-color: var(--background-primary) !important;
}

/* Dark theme - invert */
.theme-dark .webviewer-content webview {
    background-color: var(--background-primary) !important;
    filter: invert(1) hue-rotate(180deg);
}

Someone may be able to improve it.

Maybe better so it is not black:

/* Light theme - no invert */
.theme-light .webviewer-content webview {
    background-color: var(--background-primary) !important;
}

/* Dark theme - invert */
.theme-dark .webviewer-content webview {
    background-color: var(--background-primary) !important;
    filter: invert(87.5%);
}
3

Trying to replicate Dark Reader functionality employed in Surfing:

import { App, Notice } from 'obsidian';

export async function invoke(app: App): Promise<void> {
    let currentTheme = document.body.classList.contains('theme-dark') ? 'dark' : 'light';

    function isDarkTheme(): boolean {
        return document.body.classList.contains('theme-dark');
    }

    async function injectDarkReaderIntoWebview(webview: any) {
        try {
            if (webview && typeof webview.executeJavaScript === 'function') {
                if (isDarkTheme()) {
                    // Dark mode - load and enable Dark Reader
                    await webview.executeJavaScript(`
                        const element = document.createElement('script');
                        fetch('https://cdn.jsdelivr.net/npm/darkreader/darkreader.min.js')
                            .then((response) => {
                                element.src = response.url;
                                document.body.appendChild(element);
                            })
                            .catch((error) => {
                                console.error('Error loading the script:', error);
                            });
                        element.onload = () => {
                            try {
                                DarkReader?.setFetchMethod(window.fetch);
                                DarkReader?.enable({
                                    brightness: 100,
                                    contrast: 90,
                                    sepia: 10
                                });
                                console.log(DarkReader);
                            } catch (err) {
                                console.error('Failed to load dark reader: ', err);
                            }
                        };0
                    `);
                }
            }
        } catch (error) {
            console.error('Failed to inject Dark Reader into webview:', error);
        }
    }

    function reloadAllWebviews() {
        const webviews = document.querySelectorAll('.webviewer-content webview');
        webviews.forEach((webview: any) => {
            if (webview.reload) {
                webview.reload();
            }
        });
    }

    function attachToWebviews() {
        const webviews = document.querySelectorAll('.webviewer-content webview');
        
        webviews.forEach((webview: any) => {
            if (webview.addEventListener && !webview._darkModeAttached) {
                webview.addEventListener('dom-ready', () => {
                    injectDarkReaderIntoWebview(webview);
                });
                webview._darkModeAttached = true;
            }
            
            injectDarkReaderIntoWebview(webview);
        });
    }

    attachToWebviews();

    const themeObserver = new MutationObserver((mutations) => {
        for (const mutation of mutations) {
            if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
                // Check if theme actually changed
                const newTheme = isDarkTheme() ? 'dark' : 'light';
                if (newTheme !== currentTheme) {
                    currentTheme = newTheme;
                    // Theme changed - reload all webviews
                    reloadAllWebviews();
                }
            }
        }
    });

    themeObserver.observe(document.body, {
        attributes: true,
        attributeFilter: ['class']
    });

    const webviewObserver = new MutationObserver((mutations) => {
        for (const mutation of mutations) {
            if (mutation.addedNodes.length) {
                attachToWebviews();
            }
        }
    });

    webviewObserver.observe(document.body, {
        childList: true,
        subtree: true
    });

    (window as any)._webviewInvertCleanup = () => {
        themeObserver.disconnect();
        webviewObserver.disconnect();
    };

    new Notice('🌙 Dark Reader injector active (reloads on theme change)');
}

On theme changes, it reloads the page to make the change stick.

Save it as ‘Webviewer-dark-mode.ts’ and add it to your Codescript Toolkit startup folder and your main.ts file to have that plugin load this and inject the css programmatically. In that thread, there is info on how to make use of a script like this.
So you main.ts will be like:

import { invoke as webViewerDark } from './Webviewer-dark-mode.ts';
export async function invoke(app: App): Promise<void> {
  await webViewerDark(app);
}
4

Thank you! I had no idea this was possible in obsidian, appreciate the step by step.

5

You did the Toolkit method, correct? If so, I am glad you went with it and it worked out.