Hide dark mode behind a feature flag for initial deployment

rust-lang · Sep 15, 2024 · 9b49b76 · 9b49b76
1 parent 9f3cec8
commit 9b49b76
Show file tree

Hide file tree

Showing 5 changed files with 28 additions and 12 deletions.
diff --git a/ui/frontend/ConfigMenu.tsx b/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.Dark}>Dark</option>
-          <option value={Theme.Light}>Light</option>
-          <option value={Theme.System}>System</option>
-        </SelectConfig>
+        {showTheme && (
+          <SelectConfig name="Theme" value={theme} onChange={changeTheme}>
+            <option value={Theme.Dark}>Dark</option>
+            <option value={Theme.Light}>Light</option>
+            { /* <option value={Theme.System}>System</option> */ }
+          </SelectConfig>
+        )}
         <SelectConfig
           name="Orientation"
           value={orientation}

diff --git a/ui/frontend/configureStore.ts b/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 = {

diff --git a/ui/frontend/index.module.css b/ui/frontend/index.module.css
@@ -151,11 +151,11 @@
   @mixin light-theme-vars;
 }
 
-@media (prefers-color-scheme: dark) {
-  :root {
-    @mixin dark-theme-vars;
-  }
-}
+/* @media (prefers-color-scheme: dark) { */
+/*   :root { */
+/*     @mixin dark-theme-vars; */
+/*   } */
+/* } */
 
 [data-theme='dark']:root {
   @mixin dark-theme-vars;

diff --git a/ui/frontend/reducers/featureFlags.ts b/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;
+      }
     });
   },
 });

diff --git a/ui/frontend/selectors/index.ts b/ui/frontend/selectors/index.ts
@@ -445,11 +445,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);