Enable dark mode for everyone and re-enable the system mode

Author: shepmaster

ui/frontend/ConfigMenu.tsx

@@ -16,7 +16,6 @@ import {
   ProcessAssembly,
   Theme,
 } from './types';
-import { showThemeSelector } from './selectors';
 
 const MONACO_THEMES = [
   'vs', 'vs-dark', 'vscode-dark-plus',
@@ -34,8 +33,6 @@ const ConfigMenu: React.FC = () => {
   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]);
@@ -104,13 +101,12 @@ 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="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/configureStore.ts

@@ -23,7 +23,7 @@ export default function configureStore(window: Window) {
   const baseUrl = new URL('/', window.location.href).href;
   const websocket = websocketMiddleware(window);
 
-  const prefersDarkTheme = false && window.matchMedia('(prefers-color-scheme: dark)').matches;
+  const prefersDarkTheme = window.matchMedia('(prefers-color-scheme: dark)').matches;
   const initialThemes = prefersDarkTheme ? editorDarkThemes : {};
 
   const initialGlobalState = {

ui/frontend/index.module.css

@@ -166,13 +166,11 @@
   @mixin light-theme-vars;
 }
 
-/*
 @media (prefers-color-scheme: dark) {
   :root {
     @mixin dark-theme-vars;
   }
 }
-*/
 
 [data-theme='dark']:root {
   @mixin dark-theme-vars;

ui/frontend/reducers/featureFlags.ts

@@ -6,7 +6,6 @@ import { createWebsocketResponse } from '../websocketActions';
 interface State {
   forced: boolean;
   showGemThreshold: number;
-  showThemeThreshold: number;
 }
 
 const ENABLED = 1.0;
@@ -15,14 +14,12 @@ const DISABLED = -1.0;
 const initialState: State = {
   forced: false,
   showGemThreshold: DISABLED,
-  showThemeThreshold: DISABLED,
 };
 
 const { action: wsFeatureFlags, schema: wsFeatureFlagsSchema } = createWebsocketResponse(
   'featureFlags',
   z.object({
     showGemThreshold: z.number().nullish(),
-    showThemeThreshold: z.number().nullish(),
   }),
 );
 
@@ -33,12 +30,10 @@ const slice = createSlice({
     forceEnableAll: (state) => {
       state.forced = true;
       state.showGemThreshold = ENABLED;
-      state.showThemeThreshold = ENABLED;
     },
     forceDisableAll: (state) => {
       state.forced = true;
       state.showGemThreshold = DISABLED;
-      state.showThemeThreshold = DISABLED;
     },
   },
   extraReducers: (builder) => {
@@ -47,15 +42,11 @@ const slice = createSlice({
         return;
       }
 
-      const { showGemThreshold, showThemeThreshold } = action.payload;
+      const { showGemThreshold } = action.payload;
 
       if (showGemThreshold) {
         state.showGemThreshold = showGemThreshold;
       }
-
-      if (showThemeThreshold) {
-        state.showThemeThreshold = showThemeThreshold;
-      }
     });
   },
 });

ui/frontend/selectors/index.ts

@@ -444,13 +444,11 @@ const websocket = (state: State) => state.websocket;
 const clientFeatureFlagThreshold = createSelector(client, (c) => c.featureFlagThreshold);
 
 const showGemThreshold = createSelector(featureFlags, ff => ff.showGemThreshold);
-const showThemeThreshold = createSelector(featureFlags, ff => ff.showThemeThreshold);
 
 const createFeatureFlagSelector = (ff: (state: State) => number) =>
   createSelector(clientFeatureFlagThreshold, ff, (c, ff) => c <= ff);
 
 export const showGemSelector = createFeatureFlagSelector(showGemThreshold);
-export const showThemeSelector = createFeatureFlagSelector(showThemeThreshold);
 
 export const executeViaWebsocketSelector = createSelector(websocket, (ws) => ws.connected);