feat: enable dark mode for all (#3614)

frontend/src/component/menu/Header/Header.tsx

@@ -239,11 +239,6 @@ const Header: VFC = () => {
                         />
                     </StyledLinks>
                     <StyledUserContainer>
-                        <ConditionallyRender
-                            condition={Boolean(
-                                uiConfig.flags.ENABLE_DARK_MODE_SUPPORT
-                            )}
-                            show={
                         <Tooltip
                             title={
                                 themeMode === 'dark'
@@ -252,19 +247,14 @@ const Header: VFC = () => {
                             }
                             arrow
                         >
-                                    <IconButton
+                            <IconButton onClick={onSetThemeMode} sx={focusable}>
-                                        onClick={onSetThemeMode}
-                                        sx={focusable}
-                                    >
                                 <ConditionallyRender
                                     condition={themeMode === 'dark'}
                                     show={<DarkModeOutlined />}
                                     elseShow={<LightModeOutlined />}
                                 />
                             </IconButton>
-                                </Tooltip>
+                        </Tooltip>{' '}
-                            }
-                        />
                         <ConditionallyRender
                             condition={!isOss()}
                             show={<Notifications />}

frontend/src/component/providers/UIProvider/UIProvider.tsx

@@ -3,16 +3,15 @@ import UIContext, { createEmptyToast, themeMode } from 'contexts/UIContext';
 import { IToast } from 'interfaces/toast';
 import { getLocalStorageItem } from 'utils/storage';
 
-const resolveMode = (darkmode: boolean): themeMode => {
+const resolveMode = (): themeMode => {
     const value = getLocalStorageItem('unleash-theme');
     if (value) {
         return value as themeMode;
     }
 
-    let osDark;
+    const osDark =
-    if (darkmode) {
+        window.matchMedia &&
-        osDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+        window.matchMedia('(prefers-color-scheme: dark)').matches;
-    }
 
     if (osDark) {
         return 'dark';
@@ -20,17 +19,10 @@ const resolveMode = (darkmode: boolean): themeMode => {
     return 'light';
 };
 
-interface IUiProviderProps {
+const UIProvider: React.FC = ({ children }) => {
-    darkmode: boolean;
-}
-
-const UIProvider: React.FC<IUiProviderProps> = ({
-    children,
-    darkmode = false,
-}) => {
     const [toastData, setToast] = useState<IToast>(createEmptyToast());
     const [showFeedback, setShowFeedback] = useState(false);
-    const [themeMode, setThemeMode] = useState(resolveMode(darkmode));
+    const [themeMode, setThemeMode] = useState(resolveMode());
 
     const context = React.useMemo(
         () => ({

frontend/src/component/providers/UIProvider/UIProviderContainer.tsx

@@ -8,9 +8,5 @@ export const UIProviderContainer: React.FC = ({ children }) => {
         return null;
     }
 
-    return (
+    return <UIProvider>{children}</UIProvider>;
-        <UIProvider darkmode={uiConfig.flags.ENABLE_DARK_MODE_SUPPORT || false}>
-            {children}
-        </UIProvider>
-    );
 };

frontend/src/component/tags/TagTypeList/__tests__/TagTypeList.test.tsx

@@ -13,7 +13,7 @@ test('renders an empty list correctly', () => {
         <MemoryRouter>
             <ThemeProvider>
                 <AnnouncerProvider>
-                    <UIProvider darkmode={false}>
+                    <UIProvider>
                         <AccessProviderMock
                             permissions={[{ permission: ADMIN }]}
                         >

frontend/src/interfaces/uiConfig.ts

@@ -36,7 +36,6 @@ export interface IFlags {
     T?: boolean;
     UNLEASH_CLOUD?: boolean;
     UG?: boolean;
-    ENABLE_DARK_MODE_SUPPORT?: boolean;
     embedProxyFrontend?: boolean;
     maintenanceMode?: boolean;
     messageBanner?: boolean;

src/lib/__snapshots__/create-config.test.ts.snap

@@ -66,7 +66,6 @@ exports[`should create default config 1`] = `
       "isEnabled": [Function],
     },
     "flags": {
-      "ENABLE_DARK_MODE_SUPPORT": false,
       "anonymiseEventLog": false,
       "bulkOperations": false,
       "caseInsensitiveInOperators": false,
@@ -93,7 +92,6 @@ exports[`should create default config 1`] = `
   },
   "flagResolver": FlagResolver {
     "experiments": {
-      "ENABLE_DARK_MODE_SUPPORT": false,
       "anonymiseEventLog": false,
       "bulkOperations": false,
       "caseInsensitiveInOperators": false,
@@ -168,9 +166,6 @@ exports[`should create default config 1`] = `
   "strategySegmentsLimit": 5,
   "ui": {
     "environment": "Open Source",
-    "flags": {
-      "ENABLE_DARK_MODE_SUPPORT": false,
-    },
   },
   "versionCheck": {
     "enable": true,

src/lib/create-config.ts

@@ -105,9 +105,6 @@ function loadUI(options: IUnleashOptions): IUIConfig {
         environment: 'Open Source',
     };
 
-    ui.flags = {
-        ENABLE_DARK_MODE_SUPPORT: false,
-    };
     return mergeAll([ui, uiO]);
 }
 

src/lib/types/experimental.ts

@@ -4,7 +4,6 @@ export type IFlags = Partial<typeof flags>;
 export type IFlagKey = keyof IFlags;
 
 const flags = {
-    ENABLE_DARK_MODE_SUPPORT: false,
     anonymiseEventLog: false,
     embedProxy: parseEnvVarBoolean(
         process.env.UNLEASH_EXPERIMENTAL_EMBED_PROXY,

src/lib/util/flag-resolver.test.ts

@@ -7,7 +7,7 @@ test('should produce empty exposed flags', () => {
 
     const result = resolver.getAll();
 
-    expect(result.ENABLE_DARK_MODE_SUPPORT).toBe(false);
+    expect(result.anonymiseEventLog).toBe(false);
 });
 
 test('should produce UI flags with extra dynamic flags', () => {