(core) Add dark mode to user preferences

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

app/common/Themes.ts

@@ -0,0 +1,50 @@
+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>
+`;
+}