feat: Implement dynamic theme switching and dark mode support

e2e/tests/dark-mode.spec.ts

@@ -0,0 +1,119 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { test } from '@e2e/utils/test';
+import type { Page } from '@playwright/test';
+import { expect } from '@playwright/test';
+
+const themeOptionNameByValue = {
+  auto: 'System theme',
+  dark: 'Dark theme',
+  light: 'Light theme',
+} as const;
+
+const themeOption = (page: Page, value: keyof typeof themeOptionNameByValue) =>
+  page.getByRole('radio', { name: themeOptionNameByValue[value], exact: true });
+
+test.describe('Dark Mode', () => {
+  test(
+    'auto mode resolves to dark when OS prefers dark',
+    { tag: '@dark-mode' },
+    async ({ page }) => {
+      await test.step('emulate OS dark preference', async () => {
+        await page.emulateMedia({ colorScheme: 'dark' });
+      });
+
+      await test.step('activate auto mode', async () => {
+        await themeOption(page, 'auto').dispatchEvent('click');
+        await page.reload();
+      });
+
+      await test.step('verify dark scheme applied', async () => {
+        await expect(page.locator('html')).toHaveAttribute(
+          'data-mantine-color-scheme',
+          'dark'
+        );
+      });
+    }
+  );
+
+  test(
+    'theme preference persists across reload',
+    { tag: '@dark-mode' },
+    async ({ page }) => {
+      await test.step('switch to dark mode', async () => {
+        await themeOption(page, 'dark').dispatchEvent('click');
+        await expect(page.locator('html')).toHaveAttribute(
+          'data-mantine-color-scheme',
+          'dark'
+        );
+      });
+
+      await test.step('reload and verify persistence', async () => {
+        await page.reload();
+        await expect(page.locator('html')).toHaveAttribute(
+          'data-mantine-color-scheme',
+          'dark'
+        );
+      });
+
+      await test.step('verify localStorage value', async () => {
+        const stored = await page.evaluate(() =>
+          localStorage.getItem('mantine-color-scheme-value')
+        );
+        expect(stored).toBe('dark');
+      });
+
+      await test.step('clean up: restore auto mode', async () => {
+        await themeOption(page, 'auto').dispatchEvent('click');
+      });
+    }
+  );
+
+  test(
+    'can cycle through all theme modes',
+    { tag: '@dark-mode' },
+    async ({ page }) => {
+      await test.step('switch to light mode', async () => {
+        await themeOption(page, 'light').dispatchEvent('click');
+        await expect(page.locator('html')).toHaveAttribute(
+          'data-mantine-color-scheme',
+          'light'
+        );
+      });
+
+      await test.step('switch to dark mode', async () => {
+        await themeOption(page, 'dark').dispatchEvent('click');
+        await expect(page.locator('html')).toHaveAttribute(
+          'data-mantine-color-scheme',
+          'dark'
+        );
+      });
+
+      await test.step('switch back to auto mode', async () => {
+        await themeOption(page, 'auto').dispatchEvent('click');
+      });
+
+      await test.step('verify auto mode resolves correctly', async () => {
+        const stored = await page.evaluate(() =>
+          localStorage.getItem('mantine-color-scheme-value')
+        );
+        expect(stored).toBe('auto');
+      });
+    }
+  );
+});

index.html

@@ -5,6 +5,31 @@
     <link rel="icon" type="image/svg+xml" href="/src/assets/apisix-logo.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Apache APISIX Dashboard</title>
+    <script>
+      (() => {
+        try {
+          const scheme = localStorage.getItem('mantine-color-scheme-value');
+          if (scheme === 'dark' || scheme === 'light') {
+            document.documentElement.setAttribute('data-mantine-color-scheme', scheme);
+          } else {
+            const prefersDark =
+              window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
+            document.documentElement.setAttribute(
+              'data-mantine-color-scheme',
+              prefersDark ? 'dark' : 'light'
+            );
+          }
+        } catch (error) {
+          // If storage access is restricted, fall back to system preference or a safe default.
+          const prefersDark =
+            window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
+          document.documentElement.setAttribute(
+            'data-mantine-color-scheme',
+            prefersDark ? 'dark' : 'light'
+          );
+        }
+      })();
+    </script>
   </head>
   <body>
     <div id="root"></div>

src/components/Header/ThemeToggle.tsx

@@ -0,0 +1,112 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { SegmentedControl, useMantineColorScheme, VisuallyHidden } from '@mantine/core';
+import { useCallback, useEffect, useRef } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import IconDarkMode from '~icons/material-symbols/dark-mode';
+import IconDesktop from '~icons/material-symbols/desktop-windows';
+import IconLightMode from '~icons/material-symbols/light-mode';
+
+const TRANSITION_DURATION_MS = 200;
+const COLOR_SCHEMES = ['light', 'dark', 'auto'] as const;
+
+type ColorSchemeValue = (typeof COLOR_SCHEMES)[number];
+
+const isColorSchemeValue = (value: string): value is ColorSchemeValue =>
+  (COLOR_SCHEMES as readonly string[]).includes(value);
+
+const iconStyle = { width: 14, height: 14 } as const;
+
+export const ThemeToggle = () => {
+  const { t } = useTranslation();
+  const { colorScheme, setColorScheme } = useMantineColorScheme({
+    keepTransitions: true,
+  });
+  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  const segmentData = [
+    {
+      value: 'light',
+      label: (
+        <>
+          <VisuallyHidden>{t('settings.theme.light')}</VisuallyHidden>
+          <IconLightMode style={iconStyle} />
+        </>
+      ),
+    },
+    {
+      value: 'dark',
+      label: (
+        <>
+          <VisuallyHidden>{t('settings.theme.dark')}</VisuallyHidden>
+          <IconDarkMode style={iconStyle} />
+        </>
+      ),
+    },
+    {
+      value: 'auto',
+      label: (
+        <>
+          <VisuallyHidden>{t('settings.theme.auto')}</VisuallyHidden>
+          <IconDesktop style={iconStyle} />
+        </>
+      ),
+    },
+  ];
+
+  // Clean up pending transition timer on unmount
+  useEffect(() => {
+    return () => {
+      if (timerRef.current) {
+        clearTimeout(timerRef.current);
+        document.body.classList.remove('theme-transitioning');
+      }
+    };
+  }, []);
+
+  const handleChange = useCallback(
+    (value: string) => {
+      if (!isColorSchemeValue(value)) {
+        return;
+      }
+
+      // Clear any pending transition timer from a previous rapid toggle
+      if (timerRef.current) {
+        clearTimeout(timerRef.current);
+      }
+
+      document.body.classList.add('theme-transitioning');
+      setColorScheme(value);
+
+      timerRef.current = setTimeout(() => {
+        document.body.classList.remove('theme-transitioning');
+        timerRef.current = null;
+      }, TRANSITION_DURATION_MS);
+    },
+    [setColorScheme]
+  );
+
+  return (
+    <SegmentedControl
+      size="xs"
+      value={colorScheme}
+      onChange={handleChange}
+      data={segmentData}
+    />
+  );
+};

src/components/Header/index.tsx

@@ -22,6 +22,7 @@ import apisixLogo from '@/assets/apisix-logo.svg';
 
 import { LanguageMenu } from './LanguageMenu';
 import { SettingModalBtn } from './SettingModalBtn';
+import { ThemeToggle } from './ThemeToggle';
 
 const Logo = () => {
   const { t } = useTranslation();
@@ -46,6 +47,7 @@ export const Header: FC<HeaderProps> = (props) => {
           <div>{t('apisix.dashboard')}</div>
         </Group>
         <Group h="100%" gap="sm">
+          <ThemeToggle />
           <SettingModalBtn />
           <LanguageMenu />
         </Group>

src/components/form/Editor.tsx

@@ -14,7 +14,12 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { InputWrapper, type InputWrapperProps, Skeleton } from '@mantine/core';
+import {
+  InputWrapper,
+  type InputWrapperProps,
+  Skeleton,
+  useComputedColorScheme,
+} from '@mantine/core';
 import { Editor } from '@monaco-editor/react';
 import { clsx } from 'clsx';
 import { useEffect, useMemo, useRef, useState } from 'react';
@@ -32,13 +37,12 @@ import { genControllerProps } from './util';
 
 setupMonacoEditor();
 
-const options: monaco.editor.IStandaloneEditorConstructionOptions = {
+const baseOptions: monaco.editor.IStandaloneEditorConstructionOptions = {
   minimap: { enabled: false },
   contextmenu: false,
   lineNumbersMinChars: 3,
   renderLineHighlight: 'none',
   lineDecorationsWidth: 0,
-  theme: 'vs-light',
   acceptSuggestionOnEnter: 'on',
   // auto adjust width and height to parent
   // see: https://github.com/Microsoft/monaco-editor/issues/543#issuecomment-321767059
@@ -55,11 +59,15 @@ export const FormItemEditor = <T extends FieldValues>(
   props: FormItemEditorProps<T>
 ) => {
   const { t } = useTranslation();
+  const colorScheme = useComputedColorScheme('light');
+  const monacoTheme = colorScheme === 'dark' ? 'vs-dark' : 'vs-light';
+  const editorRef = useRef<monaco.editor.IStandaloneCodeEditor | null>(null);
   const { controllerProps, restProps } = genControllerProps(props, '');
   const { customSchema, language, isLoading, required, ...wrapperProps } =
     restProps;
   const { trigger, watch } = useFormContext();
   const monacoErrorRef = useRef<string | null>(null);
+
   const enhancedControllerProps = useMemo(() => {
     return {
       ...controllerProps,
@@ -103,8 +111,20 @@ export const FormItemEditor = <T extends FieldValues>(
       : undefined;
   const value = restField.disabled ? normalizedWatchedValue ?? '' : controlledValue;
 
+  const editorOptions = useMemo(
+    () => ({ ...baseOptions, theme: monacoTheme, readOnly: restField.disabled }),
+    [monacoTheme, restField.disabled]
+  );
+
   const [internalLoading, setLoading] = useState(false);
 
+  // Imperatively switch Monaco theme — prop changes alone don't re-theme after mount
+  useEffect(() => {
+    if (editorRef.current) {
+      monaco.editor.setTheme(monacoTheme);
+    }
+  }, [monacoTheme]);
+
   useEffect(() => {
     setLoading(true);
 
@@ -163,6 +183,7 @@ export const FormItemEditor = <T extends FieldValues>(
           trigger(props.name);
         }}
         onMount={(editor) => {
+          editorRef.current = editor;
           if (process.env.NODE_ENV === 'test') {
             window.__monacoEditor__ = editor;
           }
@@ -175,7 +196,7 @@ export const FormItemEditor = <T extends FieldValues>(
             width="100%"
           />
         }
-        options={{ ...options, readOnly: restField.disabled }}
+        options={editorOptions}
         defaultLanguage="json"
         {...(language && { language })}
       />