Commit a43e462

@@ -45,6 +45,8 @@ const { class: className, showText, useDefaultBtnClass, ...rest } = Astro.props;
 </Button>
 
 <script>
+  import { buildConfig } from '@/config';
+
   function setup() {
     const darkmodeBtns = document.querySelectorAll('button.darkmode-btn');
 
@@ -135,7 +137,10 @@ const { class: className, showText, useDefaultBtnClass, ...rest } = Astro.props;
     document.addEventListener('blog:darkmode-change', (e) => {
       // @ts-expect-error CustomEvent.detail is not defined in TypeScript
       const { isDark } = e.detail;
-      document.documentElement.setAttribute('data-theme', isDark ? 'dark' : 'light');
+      document.documentElement.setAttribute(
+        'data-theme',
+        isDark ? buildConfig.themeNames.dark : buildConfig.themeNames.light
+      );
     });
   }
 

@@ -132,6 +132,7 @@ const siteLang = lang.replace('_', '-');
 </script>
 
 <script>
+  import { buildConfig } from '@/config';
   import { convertTimeToRelative } from '@scripts/utils';
 
   // 深色模式切换
@@ -141,8 +142,8 @@ const siteLang = lang.replace('_', '-');
       (!('darkMode' in localStorage) &&
         window.matchMedia('(prefers-color-scheme: dark)').matches)
     ) {
-      document.documentElement.setAttribute('data-theme', 'dark');
-    } else document.documentElement.setAttribute('data-theme', 'light');
+      document.documentElement.setAttribute('data-theme', buildConfig.themeNames.dark);
+    } else document.documentElement.setAttribute('data-theme', buildConfig.themeNames.light);
   }
 
   function setup() {

@@ -1,6 +1,13 @@
 @import 'tailwindcss';
 
 @plugin 'daisyui' {
+  /**
+   * You can modify the light and dark themes by editing below.
+   * But remember to modify any css selectors that depend on the theme colors.
+   * For example, if you change the dark theme to DaisyUI's build-in `black` theme,
+   * you need to replace all `[data-theme="dark"]` in source files to `[data-theme="black"]`.
+   * `buildConfig.themeNames` in `src/config,ts` is also need to be updated accordingly.
+   */
   themes:
     light --default,
     dark --prefersdark;

@@ -244,6 +244,17 @@ export type BuildConfig = {
    * 是否启用图像缩放功能。
    */
   enableImageZoom: boolean;
+  /**
+   * The name of the light and dark themes.
+   * Should be same as the choosen themes in `src/styles/global.css`
+   *
+   * 浅色和深色主题的名称。
+   * 应与 `src/styles/global.css` 中选择的主题相同。
+   */
+  themeNames: {
+    light: string;
+    dark: string;
+  };
 };
 
 export type ProfileConfig = {

@@ -51,6 +51,10 @@ export const buildConfig: BuildConfig = {
     },
   },
   enableImageZoom: true,
+  themeNames: {
+    light: 'light',
+    dark: 'dark',
+  },
 };
 
 export const profileConfig: ProfileConfig = {