Add dark mode using media query

jprochazk · shepmaster · commit 14ea53576bad · 2024-09-14T20:50:16.000-04:00
diff --git a/ui/frontend/BuildMenu.module.css b/ui/frontend/BuildMenu.module.css
@@ -1,4 +1,4 @@
 .code {
-  background: #eee;
+  background: var(--code-background-color);
   padding: 0 0.25em;
 }
diff --git a/ui/frontend/ButtonSet.module.css b/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;
+}
diff --git a/ui/frontend/ButtonSet.tsx b/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>
   ),
diff --git a/ui/frontend/ConfigElement.module.css b/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 {
diff --git a/ui/frontend/Help.module.css b/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 {
diff --git a/ui/frontend/Notifications.module.css b/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;
 }
 
diff --git a/ui/frontend/Output.module.css b/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;
diff --git a/ui/frontend/Output/Header.module.css b/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,
diff --git a/ui/frontend/PopButton.module.css b/ui/frontend/PopButton.module.css
@@ -1,6 +1,3 @@
-$fg-color: #222;
-$bg-color: white;
-$vertical-border-color: #cacaca;
 $arrow-height: 10px;
 $arrow-width: 20px;
 
@@ -13,14 +10,18 @@ $arrow-width: 20px;
   }
 }
 
+.arrow {
+  fill: var(--background-color-high-contrast);
+}
+
 .-content {
   margin: $arrow-height;
   box-shadow:
     5px 5px 20px -3px rgb(0 0 0 / 25%),
     0 0 5px -2px rgb(0 0 0 / 90%);
   border-radius: var(--header-border-radius);
-  background: $bg-color;
-  color: $fg-color;
+  background: var(--background-color-high-contrast);
+  color: var(--font-color);
 }
 
 .contentBottom {
diff --git a/ui/frontend/PopButton.tsx b/ui/frontend/PopButton.tsx
@@ -72,7 +72,13 @@ const PopButton: React.FC<NewPopProps> = ({ Button, Menu, menuContainer }) => {
         }}
         {...getFloatingProps()}
       >
-        <FloatingArrow ref={arrowRef} context={context} height={10} width={20} fill="white" />
+        <FloatingArrow
+          ref={arrowRef}
+          context={context}
+          height={10}
+          width={20}
+          className={styles.arrow}
+        />
         <div className={containerClass}>
           <Menu close={close} />
         </div>
diff --git a/ui/frontend/configureStore.ts b/ui/frontend/configureStore.ts
@@ -8,10 +8,24 @@ import reducer from './reducers';
 import initializeSessionStorage from './session_storage';
 import { websocketMiddleware } from './websocketMiddleware';
 
+const editorDarkThemes = {
+  configuration: {
+    ace: {
+      theme: 'github_dark',
+    },
+    monaco: {
+      theme: 'vscode-dark-plus',
+    },
+  },
+};
+
 export default function configureStore(window: Window) {
   const baseUrl = new URL('/', window.location.href).href;
   const websocket = websocketMiddleware(window);
 
+  const prefersDarkTheme = window.matchMedia('(prefers-color-scheme: dark)').matches;
+  const initialThemes = prefersDarkTheme ? editorDarkThemes : {};
+
   const initialGlobalState = {
     globalConfiguration: {
       baseUrl,
@@ -26,6 +40,7 @@ export default function configureStore(window: Window) {
     merge(
       initialAppState,
       initialGlobalState,
+      initialThemes,
       localStorage.initialState,
       sessionStorage.initialState,
     ),
diff --git a/ui/frontend/index.module.css b/ui/frontend/index.module.css
diff --git a/ui/frontend/reducers/configuration.ts b/ui/frontend/reducers/configuration.ts
diff --git a/ui/frontend/shared.module.css b/ui/frontend/shared.module.css

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`	`1`	`.code {`
`2`		`- background: #eee;`
	`2`	`+ background: var(--code-background-color);`
`3`	`3`	`padding: 0 0.25em;`
`4`	`4`	`}`
Original file line number	Diff line number	Diff line change
`@@ -10,7 +10,7 @@ $space: 0.25em;`
`10`	`10`	`margin-right: auto;`
`11`	`11`	`margin-left: auto;`
`12`	`12`	`border: 2px solid #428bca;`
`13`		`- background: white;`
	`13`	`+ background: var(--background-color);`
`14`	`14`	`max-width: 50em;`
`15`	`15`	`}`
`16`	`16`
`@@ -25,7 +25,6 @@ $space: 0.25em;`
`25`	`25`	`.close {`
`26`	`26`	`composes: -buttonReset from './shared.module.css';`
`27`	`27`	`cursor: pointer;`
`28`		`- background: #e1e1db;`
`29`	`28`	`padding: $space;`
`30`	`29`	`}`
`31`	`30`