Allow configuring theme

Author: jprochazk

ui/frontend/.stylelintrc.json

@@ -12,6 +12,9 @@
       "ignoreProperties": [
         "composes"
       ]
+    }],
+    "at-rule-no-unknown": [true, {
+      "ignoreAtRules": ["define-mixin", "mixin"]
     }]
   }
 }

ui/frontend/ConfigMenu.tsx

@@ -14,6 +14,7 @@ import {
   Orientation,
   PairCharacters,
   ProcessAssembly,
+  Theme,
 } from './types';
 
 const MONACO_THEMES = [
@@ -24,6 +25,7 @@ const ConfigMenu: React.FC = () => {
   const keybinding = useAppSelector((state) => state.configuration.ace.keybinding);
   const aceTheme = useAppSelector((state) => state.configuration.ace.theme);
   const monacoTheme = useAppSelector((state) => state.configuration.monaco.theme);
+  const theme = useAppSelector((state) => state.configuration.theme);
   const orientation = useAppSelector((state) => state.configuration.orientation);
   const editorStyle = useAppSelector((state) => state.configuration.editor);
   const pairCharacters = useAppSelector((state) => state.configuration.ace.pairCharacters);
@@ -35,6 +37,7 @@ const ConfigMenu: React.FC = () => {
   const changeAceTheme = useCallback((t: string) => dispatch(config.changeAceTheme(t)), [dispatch]);
   const changeMonacoTheme = useCallback((t: string) => dispatch(config.changeMonacoTheme(t)), [dispatch]);
   const changeKeybinding = useCallback((k: string) => dispatch(config.changeKeybinding(k)), [dispatch]);
+  const changeTheme = useCallback((t: Theme) => dispatch(config.changeTheme(t)), [dispatch]);
   const changeOrientation = useCallback((o: Orientation) => dispatch(config.changeOrientation(o)), [dispatch]);
   const changeEditorStyle = useCallback((e: Editor) => dispatch(config.changeEditor(e)), [dispatch]);
   const changeAssemblyFlavor =
@@ -98,6 +101,11 @@ const ConfigMenu: React.FC = () => {
       </MenuGroup>
 
       <MenuGroup title="UI">
+        <SelectConfig name="Theme" value={theme} onChange={changeTheme}>
+          <option value={Theme.System}>System</option>
+          <option value={Theme.Light}>Light</option>
+          <option value={Theme.Dark}>Dark</option>
+        </SelectConfig>
         <SelectConfig
           name="Orientation"
           value={orientation}

ui/frontend/index.module.css

@@ -11,9 +11,7 @@
   --border: 1px solid var(--border-color);
 }
 
-/* Light theme */
-/* stylelint-disable-next-line no-duplicate-selectors */
-:root {
+@define-mixin light-theme-vars {
   --positive-luminance: white;
   --negative-luminance: black;
 
@@ -107,50 +105,62 @@
   --output-current-tab: #f9ffff;
 }
 
-/* Automatic dark mode */
-@media (prefers-color-scheme: dark) {
-  :root {
-    --positive-luminance: black;
-    --negative-luminance: white;
+@define-mixin dark-theme-vars {
+  --positive-luminance: black;
+  --negative-luminance: white;
 
-    /* Fonts */
-    --font-color: #b4aea6;
-    --font-color-high-contrast: #dcdbd8;
+  /* Fonts */
+  --font-color: #b4aea6;
+  --font-color-high-contrast: #dcdbd8;
 
-    /* Links */
-    --link-color: #308af2;
-    --link-color-visited: #9f5fe1;
+  /* Links */
+  --link-color: #308af2;
+  --link-color-visited: #9f5fe1;
 
-    /* Background */
-    --background-color: #292c2e;
-    --background-color-high-contrast: #17191a;
+  /* Background */
+  --background-color: #292c2e;
+  --background-color-high-contrast: #17191a;
 
-    /* Code */
-    --code-background-color: #3c3c3c;
+  /* Code */
+  --code-background-color: #3c3c3c;
 
-    /* Border */
-    --border-color: #404548;
+  /* Border */
+  --border-color: #404548;
 
-    /* Header */
-    --header-main-border: #363b3d;
-    --header-accent-border: #bdbdbd;
+  /* Header */
+  --header-main-border: #363b3d;
+  --header-accent-border: #bdbdbd;
 
-    /* The big red button */
-    --button-primary-color: #dcdbd8;
-    --button-primary-bg-color: #81331a;
-    --button-primary-border-color: #612714;
+  /* The big red button */
+  --button-primary-color: #dcdbd8;
+  --button-primary-bg-color: #81331a;
+  --button-primary-border-color: #612714;
 
-    /* Not the big red button */
-    --button-secondary-color: #b4aea6;
-    --button-secondary-bg-color-top: #17191a;
-    --button-secondary-bg-color-bottom: #1a1c1d;
+  /* Not the big red button */
+  --button-secondary-color: #b4aea6;
+  --button-secondary-bg-color-top: #17191a;
+  --button-secondary-bg-color-bottom: #1a1c1d;
+
+  /* Output tabs */
+  --output-background-tab: #191b1c;
+  --output-current-tab: #343434;
+}
+
+:root,
+[data-theme='light']:root {
+  @mixin light-theme-vars;
+}
 
-    /* Output tabs */
-    --output-background-tab: #191b1c;
-    --output-current-tab: #343434;
+@media (prefers-color-scheme: dark) {
+  :root {
+    @mixin dark-theme-vars;
   }
 }
 
+[data-theme='dark']:root {
+  @mixin dark-theme-vars;
+}
+
 /* Modify normalized styles */
 button,
 input,

ui/frontend/index.tsx

@@ -25,6 +25,9 @@ import { gotoPosition } from './reducers/position';
 import { addImport, editCode, enableFeatureGate } from './reducers/code';
 import { browserWidthChanged } from './reducers/browser';
 import { selectText } from './reducers/selection';
+import { useAppSelector } from './hooks';
+import { themeSelector } from './selectors';
+import { Theme } from './types';
 
 const store = configureStore(window);
 
@@ -82,13 +85,28 @@ window.rustPlayground = {
   },
 };
 
+const ThemeProvider: React.FC<React.PropsWithChildren> = ({ children }) => {
+  const theme = useAppSelector(themeSelector);
+  React.useEffect(() => {
+    if (theme === Theme.System) {
+      delete document.documentElement.dataset['theme'];
+    } else {
+      document.documentElement.dataset['theme'] = theme;
+    }
+  }, [theme]);
+
+  return <>{children}</>;
+};
+
 const container = document.getElementById('playground');
 if (container) {
   const root = createRoot(container);
   root.render(
     <Provider store={store}>
       <Router store={store} reducer={playgroundApp}>
-        <PageSwitcher />
+        <ThemeProvider>
+          <PageSwitcher />
+        </ThemeProvider>
       </Router>
     </Provider>,
   );

ui/frontend/local_storage.ts

@@ -4,7 +4,7 @@
 
 import { State } from './reducers';
 import {removeVersion, initializeStorage, PartialState} from './storage';
-import { AssemblyFlavor, DemangleAssembly, Editor, Orientation, PairCharacters, ProcessAssembly } from './types';
+import { AssemblyFlavor, DemangleAssembly, Editor, Orientation, PairCharacters, ProcessAssembly, Theme } from './types';
 import { codeSelector } from './selectors';
 
 const CURRENT_VERSION = 2;
@@ -25,6 +25,7 @@ interface V2Configuration {
     monaco: {
       theme: string;
     };
+    theme: Theme;
     orientation: Orientation;
     assemblyFlavor: AssemblyFlavor;
     demangleAssembly: DemangleAssembly;
@@ -70,6 +71,7 @@ export function serialize(state: State): string {
       monaco: {
         theme: state.configuration.monaco.theme,
       },
+      theme: state.configuration.theme,
       orientation: state.configuration.orientation,
       assemblyFlavor: state.configuration.assemblyFlavor,
       demangleAssembly: state.configuration.demangleAssembly,
@@ -93,6 +95,7 @@ function migrateV1(state: V1Configuration): CurrentConfiguration {
       ...configuration,
       ace: { theme, keybinding, pairCharacters },
       monaco: { theme: 'vscode-dark-plus' },
+      theme: Theme.System,
       editor: editor === 'advanced' ? Editor.Ace : Editor.Simple,
     },
     version: 2,

ui/frontend/package.json

@@ -13,6 +13,7 @@
     "immer": "^10.0.3",
     "lodash-es": "^4.17.21",
     "monaco-editor": "^0.50.0",
+    "postcss-mixins": "^11.0.1",
     "prismjs": "^1.6.0",
     "qs": "^6.4.0",
     "react": "^18.2.0",