Hide dark mode behind a feature flag for initial deployment

Author: shepmaster

ui/frontend/ConfigMenu.tsx

@@ -16,6 +16,7 @@ import {
   ProcessAssembly,
   Theme,
 } from './types';
+import { showThemeSelector } from './selectors';
 
 const MONACO_THEMES = [
   'vs', 'vs-dark', 'vscode-dark-plus',
@@ -33,6 +34,8 @@ 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]);
@@ -101,11 +104,13 @@ 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>
+        {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/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 = window.matchMedia('(prefers-color-scheme: dark)').matches;
+  const prefersDarkTheme = false && window.matchMedia('(prefers-color-scheme: dark)').matches;
   const initialThemes = prefersDarkTheme ? editorDarkThemes : {};
 
   const initialGlobalState = {

ui/frontend/index.module.css

@@ -151,11 +151,13 @@
   @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,6 +6,7 @@ import { createWebsocketResponse } from '../websocketActions';
 interface State {
   forced: boolean;
   showGemThreshold: number;
+  showThemeThreshold: number;
 }
 
 const ENABLED = 1.0;
@@ -14,12 +15,14 @@ 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(),
   }),
 );
 
@@ -30,10 +33,12 @@ 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) => {
@@ -42,11 +47,15 @@ const slice = createSlice({
         return;
       }
 
-      const { showGemThreshold } = action.payload;
+      const { showGemThreshold, showThemeThreshold } = action.payload;
 
       if (showGemThreshold) {
         state.showGemThreshold = showGemThreshold;
       }
+
+      if (showThemeThreshold) {
+        state.showThemeThreshold = showThemeThreshold;
+      }
     });
   },
 });

ui/frontend/selectors/index.ts

@@ -10,7 +10,6 @@ import {
   Orientation,
   PrimaryActionAuto,
   PrimaryActionCore,
-  Theme,
   Version,
 } from '../types';
 
@@ -445,11 +444,13 @@ 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);