mirror of
https://github.com/gristlabs/grist-core.git
synced 2024-10-27 20:44:07 +00:00
ec157dc469
Summary: Adds initial implementation of dark mode. Preferences for dark mode are available on the account settings page. Dark mode is currently a beta feature as there are still some small bugs to squash and a few remaining UI elements to style. Test Plan: Browser tests. Reviewers: jarek Reviewed By: jarek Subscribers: paulfitz, jarek Differential Revision: https://phab.getgrist.com/D3587
51 lines
1.9 KiB
TypeScript
51 lines
1.9 KiB
TypeScript
import {ThemeColors, ThemeName} from 'app/common/ThemePrefs';
|
|
import {GristDark} from 'app/common/themes/GristDark';
|
|
import {GristLight} from 'app/common/themes/GristLight';
|
|
|
|
const THEMES: Readonly<Record<ThemeName, ThemeColors>> = {
|
|
GristLight,
|
|
GristDark,
|
|
};
|
|
|
|
export function getThemeColors(themeName: ThemeName): ThemeColors {
|
|
return THEMES[themeName];
|
|
}
|
|
|
|
/**
|
|
* A simple JS script that handles setting an appropriate background image
|
|
* based on the appearance setting most recently set by the client.
|
|
*
|
|
* The motivation for this snippet is to avoid the FOUC-like effect that can
|
|
* occur when Grist is loading a page, typically manifesting as a momentary flash
|
|
* from a light background to a dark background (and vice versa). By predicting what
|
|
* the appearance should be based on what was last stored in local storage, we can set
|
|
* a suitable background image before the application (and consequently, the user's
|
|
* theme preferences) have loaded, which should avoid the flash in most cases.
|
|
*
|
|
* Simpler alternatives exist, like using the user agent's preferred color scheme, but
|
|
* don't account for the fact that Grist allows users to manually set their preferred
|
|
* appearance. While this solution isn't perfect, it's a significant improvement over the
|
|
* default behavior.
|
|
*/
|
|
export function getThemeBackgroundSnippet() {
|
|
/* Note that we only need to set the property if the appearance is dark; a fallback
|
|
* to the light background (gplaypattern.png) already exists in App.css. */
|
|
return `
|
|
<script>
|
|
try {
|
|
if (localStorage.getItem('appearance') === 'dark' && !window.gristConfig.enableCustomCss) {
|
|
const style = document.createElement('style');
|
|
style.setAttribute('id', 'grist-theme');
|
|
style.textContent = ':root {\\n' +
|
|
' --grist-theme-bg: url("img/prismpattern.png");\\n' +
|
|
' --grist-theme-bg-color: #333333;\\n' +
|
|
'}';
|
|
document.head.append(style);
|
|
}
|
|
} catch {
|
|
/* Do nothing. */
|
|
}
|
|
</script>
|
|
`;
|
|
}
|