gristlabs_grist-core/app/common/Themes.ts

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>
`;
}