[Feature Request] Follow system theme option

[gabrielcarloto]

Is your feature request related to a problem? Please describe.
It is annoying to have to go to settings -> app preferences -> dark mode then select on/off every time I want to change the theme.

Describe the solution you'd like
I'd really like to have a "follow system theme" option to change it automatically.

Additional context
prefers-color-scheme

[johnozbay]

Hi there 👋🏻

Thanks a lot for filing this.

We actually used to have this feature, but had to remove it after discovering the million different inconsistent ways browsers have implemented it after we launched our paper-mode for the document editor. Related threads : #20, #82, #58.

---

To save you time, here's a TLDR;

when you press "print" / "save to pdf" etc :

– some browsers automatically turn off dark mode to make sure exported documents don't have dark background,
(some browsers don't)

– some browsers automatically invert colors light to dark with some weird math
(some browsers don't)

– some browsers use prefers-color-scheme to invert other UI components (i.e. scrollbars etc)
(some browsers don't)

As a result, it required us to keep track of tens of different dark/light mode states and make sure they're on or off, in a really inconsistent cross-browser manner. So we had to get rid of it until browsers have a consistent standard for how they handle prints / pdfs / exports with dark mode enabled. Otherwise, as it stands it's a hot mess right now 😅

We have to watch out for some funny stuff already (even without auto-dark-mode) mainly because of all these inconsistencies :

web-client/source/js/preferences.js

Lines 26 to 120 in b57f29e

	function prepareForPrint() {
	printMode = true;
	darkModePrefBeforePrint = darkMode;
	if (darkModePrefBeforePrint) {
	breadcrumb('[PRINT] Preparing to print, editor was in dark mode');
	} else {
	breadcrumb('[PRINT] Preparing to print, editor was in light mode');
	}
	deactivateDarkMode();
	}
	var printMode = false;
	var darkModePrefBeforePrint;
	try {
	var printMediaQuery = window.matchMedia("print");
	if (!isSafari && !isios && !isipados) {
	printMediaQuery.addEventListener("change", (e) => {
	if (e.matches) {
	prepareForPrint();
	} else {
	printMode = false;
	}
	});
	} else {
	if (printMediaQuery) {
	printMediaQuery.addListener((e) => {
	if (e.matches) {
	prepareForPrint();
	} else {
	printMode = false;
	}
	});
	}
	}
	} catch (error) {
	handleError("Couldn't add matchMedia listener for print mode", error);
	}
	try {
	var darkmodeMediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
	if (!isSafari && !isios && !isipados) {
	darkmodeMediaQuery.addEventListener("change", (e) => {
	if (e.matches && !printMode && darkModePrefBeforePrint) { turnDarkModeOn(); }
	});
	} else {
	if (darkmodeMediaQuery) {
	darkmodeMediaQuery.addListener((e) => {
	if (e.matches && !printMode && darkModePrefBeforePrint) { turnDarkModeOn(); }
	});
	}
	}
	} catch (error) {
	handleError("Couldn't add matchMedia listener for dark mode", error);
	}
	try {
	var lightmodeMediaQuery = window.matchMedia("(prefers-color-scheme: light)");
	if (!isSafari && !isios && !isipados) {
	lightmodeMediaQuery.addEventListener("change", (e) => {
	if (e.matches && !printMode) { turnDarkModeOff(); }
	});
	} else {
	if (lightmodeMediaQuery) {
	lightmodeMediaQuery.addListener((e) => {
	if (e.matches && !printMode) { turnDarkModeOff(); }
	});
	}
	}
	} catch (error) {
	handleError("Couldn't add matchMedia listener for dark mode", error);
	}
	function turnDarkModeOn() {
	try {
	localStorage.setItem("darkMode", 1);
	} catch (error) {}
	darkMode = true;
	activateDarkMode();
	}
	function turnDarkModeOff() {
	try {
	localStorage.removeItem("darkMode");
	} catch (error) {}
	darkMode = false;
	deactivateDarkMode();
	}

I'll close this thread for the time being, since this feature heavily depends on a lot of third parties like browsers and operating systems implementing these dark-mode/light-mode features correctly. We're internally tracking all the browser and platform bugs from their trackers, and I'll keep this thread posted when/if anything changes.

– on behalf of the browser vendors, I'm sorry we can't ship this just yet. Otherwise our document editor, which heavily relies on print-accurate rendering of PDFs/Prints would stop working.

Hoping all this makes sense and helps ✌🏻

Best,

John

[gabrielcarloto]

Thanks for your reply! I didn't know about this inconsistencies between browsers.