feat: enable dark mode for all (#3614)

2025-10-27 11:02:16 +01:00 · 2023-04-25 10:13:06 +02:00 · 2023-04-25 10:13:06 +02:00 · 545e231cae
commit 545e231cae
parent ae60cf05b5
9 changed files with 24 additions and 56 deletions
--- a/frontend/src/component/menu/Header/Header.tsx
+++ b/frontend/src/component/menu/Header/Header.tsx
@ -239,32 +239,22 @@ const Header: VFC = () => {
                        />
                    </StyledLinks>
                    <StyledUserContainer>
-                        <ConditionallyRender
-                            condition={Boolean(
-                                uiConfig.flags.ENABLE_DARK_MODE_SUPPORT
-                            )}
-                            show={
-                                <Tooltip
-                                    title={
-                                        themeMode === 'dark'
-                                            ? 'Switch to light theme'
-                                            : 'Switch to dark theme'
-                                    }
-                                    arrow
-                                >
-                                    <IconButton
-                                        onClick={onSetThemeMode}
-                                        sx={focusable}
-                                    >
-                                        <ConditionallyRender
-                                            condition={themeMode === 'dark'}
-                                            show={<DarkModeOutlined />}
-                                            elseShow={<LightModeOutlined />}
-                                        />
-                                    </IconButton>
-                                </Tooltip>
+                        <Tooltip
+                            title={
+                                themeMode === 'dark'
+                                    ? 'Switch to light theme'
+                                    : 'Switch to dark theme'
                            }
-                        />
+                            arrow
+                        >
+                            <IconButton onClick={onSetThemeMode} sx={focusable}>
+                                <ConditionallyRender
+                                    condition={themeMode === 'dark'}
+                                    show={<DarkModeOutlined />}
+                                    elseShow={<LightModeOutlined />}
+                                />
+                            </IconButton>
+                        </Tooltip>{' '}
                        <ConditionallyRender
                            condition={!isOss()}
                            show={<Notifications />}
--- a/frontend/src/component/providers/UIProvider/UIProvider.tsx
+++ b/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;
-    if (darkmode) {
-        osDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
-    }
+    const osDark =
+        window.matchMedia &&
+        window.matchMedia('(prefers-color-scheme: dark)').matches;

    if (osDark) {
        return 'dark';
@ -20,17 +19,10 @@ const resolveMode = (darkmode: boolean): themeMode => {
    return 'light';
 };

-interface IUiProviderProps {
-    darkmode: boolean;
-}
-
-const UIProvider: React.FC<IUiProviderProps> = ({
-    children,
-    darkmode = false,
-}) => {
+const UIProvider: React.FC = ({ children }) => {
    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(
        () => ({
--- a/frontend/src/component/providers/UIProvider/UIProviderContainer.tsx
+++ b/frontend/src/component/providers/UIProvider/UIProviderContainer.tsx
@ -8,9 +8,5 @@ export const UIProviderContainer: React.FC = ({ children }) => {
        return null;
    }

-    return (
-        <UIProvider darkmode={uiConfig.flags.ENABLE_DARK_MODE_SUPPORT || false}>
-            {children}
-        </UIProvider>
-    );
+    return <UIProvider>{children}</UIProvider>;
 };
--- a/frontend/src/component/tags/TagTypeList/tests/TagTypeList.test.tsx
+++ b/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 }]}
                        >
--- a/frontend/src/interfaces/uiConfig.ts
+++ b/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;
--- a/src/lib/snapshots/create-config.test.ts.snap
+++ b/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,
--- a/src/lib/create-config.ts
+++ b/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]);
 }

--- a/src/lib/types/experimental.ts
+++ b/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,
--- a/src/lib/util/flag-resolver.test.ts
+++ b/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', () => {