Merge pull request #1023 from jprochazk/auto-dark-mode

Add dark mode

Author: shepmaster

ui/frontend/.stylelintrc.json

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

ui/frontend/BuildMenu.module.css

@@ -1,4 +1,4 @@
 .code {
-  background: #eee;
+  background: var(--code-background-color);
   padding: 0 0.25em;
 }

ui/frontend/ButtonSet.module.css

@@ -76,11 +76,7 @@ $radius: 4px;
 
 .secondary {
   composes: -border -button;
-  background: linear-gradient(
-    to bottom,
-    var(--button-secondary-bg-color-top),
-    var(--button-secondary-bg-color-bottom)
-  );
+  background: var(--button-secondary-bg-color);
   border-color: var(--button-secondary-border-color);
   color: var(--button-secondary-color);
 
@@ -122,3 +118,8 @@ $radius: 4px;
   aspect-ratio: 1/1;
   justify-items: center;
 }
+
+a.iconLink svg,
+a.iconLink:visited svg {
+  fill: var(--font-color) !important;
+}

ui/frontend/ButtonSet.tsx

@@ -79,7 +79,7 @@ IconButton.displayName = 'IconButton';
 
 export const IconLink = React.forwardRef<HTMLAnchorElement, LinkProps>(
   ({ children, ...props }, ref) => (
-    <Link ref={ref} className={styles.icon} {...props}>
+    <Link ref={ref} className={`${styles.icon} ${styles.iconLink}`} {...props}>
       {children}
     </Link>
   ),

ui/frontend/ConfigElement.module.css

@@ -20,6 +20,15 @@
 
 .select {
   width: 100%;
+  background: var(--button-secondary-bg-color);
+  border-color: var(--button-secondary-border-color);
+  color: var(--button-secondary-color);
+
+  & option {
+    background-color: var(--button-secondary-bg-color-top);
+    border-color: var(--button-secondary-border-color);
+    color: var(--button-secondary-color);
+  }
 }
 
 .toggle {

ui/frontend/ConfigMenu.tsx

@@ -14,7 +14,9 @@ import {
   Orientation,
   PairCharacters,
   ProcessAssembly,
+  Theme,
 } from './types';
+import { showThemeSelector } from './selectors';
 
 const MONACO_THEMES = [
   'vs', 'vs-dark', 'vscode-dark-plus',
@@ -24,17 +26,21 @@ 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);
   const assemblyFlavor = useAppSelector((state) => state.configuration.assemblyFlavor);
   const demangleAssembly = useAppSelector((state) => state.configuration.demangleAssembly);
   const processAssembly = useAppSelector((state) => state.configuration.processAssembly);
 
+  const showTheme = useAppSelector(showThemeSelector);
+
   const dispatch = useAppDispatch();
   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 +104,13 @@ const ConfigMenu: React.FC = () => {
       </MenuGroup>
 
       <MenuGroup title="UI">
+        {showTheme && (
+          <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/Help.module.css

@@ -1,13 +1,14 @@
 .container {
   margin: 1em auto;
-  background-color: #fff;
+  color: var(--font-color-high-contrast);
+  background-color: var(--background-color-high-contrast);
   padding: 1em;
   max-width: 800px;
   line-height: 1.5;
 }
 
 .code {
-  background: #eee;
+  background: var(--code-background-color);
   padding: 0 0.25em;
 }
 
@@ -22,7 +23,7 @@
 }
 
 .headerLink {
-  color: black;
+  color: var(--header-link-color);
   text-decoration: none;
 
   &:hover {

ui/frontend/Notifications.module.css

@@ -10,7 +10,7 @@ $space: 0.25em;
   margin-right: auto;
   margin-left: auto;
   border: 2px solid #428bca;
-  background: white;
+  background: var(--background-color);
   max-width: 50em;
 }
 
@@ -25,7 +25,6 @@ $space: 0.25em;
 .close {
   composes: -buttonReset from './shared.module.css';
   cursor: pointer;
-  background: #e1e1db;
   padding: $space;
 }
 

ui/frontend/Output.module.css

@@ -1,6 +1,3 @@
-$current-tab: #f9ffff;
-$background-tab: #fcfcfc; /* desaturate($current-tab, 100%); */
-
 .container {
   display: flex;
   flex-direction: column;
@@ -13,11 +10,12 @@ $background-tab: #fcfcfc; /* desaturate($current-tab, 100%); */
 }
 
 .tab {
+  color: var(--font-color);
   flex: 1 1 auto;
   cursor: pointer;
   border: var(--border);
   border-right: none;
-  background-color: $background-tab;
+  background-color: var(--output-background-tab);
   line-height: 1.5em;
 
   &:last-of-type {
@@ -29,7 +27,7 @@ $background-tab: #fcfcfc; /* desaturate($current-tab, 100%); */
   composes: tab;
   cursor: default;
   border-bottom: none;
-  background-color: $current-tab;
+  background-color: var(--output-current-tab);
 
   &:focus {
     outline: none;
@@ -44,7 +42,7 @@ $background-tab: #fcfcfc; /* desaturate($current-tab, 100%); */
 .body {
   border: var(--border);
   border-top: none;
-  background-color: $current-tab;
+  background-color: var(--output-current-tab);
   padding: 0.5em;
   height: 100%;
   overflow: scroll;

ui/frontend/Output/Header.module.css

@@ -1,6 +1,6 @@
 .container {
   display: flex;
-  color: var(--border-color);
+  color: var(--font-color);
   white-space: nowrap;
 
   &::before,