feat: antd dark theme

src/App.tsx

@@ -9,6 +9,14 @@ import { projectSchedulesAtom, subscriptionSchedulesAtom } from '@/model/schedul
 import { getSchedules } from '@/util/schedule'
 import { getInitalSettings } from '@/util/baseInfo'
 import { getSubCalendarSchedules } from '@/util/subscription'
+import { ConfigProvider } from 'antd'
+
+ConfigProvider.config({
+  prefixCls: 'custom',
+  theme: {
+    primaryColor: 'red',
+  },
+});
 
 const App: React.FC<{}> = () => {
 
@@ -35,19 +43,21 @@ const App: React.FC<{}> = () => {
   }, [])
 
   return (
-    <main className="w-screen h-screen flex">
-      <MemoryRouter>
-        <Sider />
-        <Routes>
-          <Route path="/" element={<Dashboard />} />
-          {
-            MENUS.map(item => (
-              <Route path={item.path} element={item.element} key={item.value} />
-            ))
-          }
-        </Routes>
-      </MemoryRouter>
-    </main>
+    <ConfigProvider>
+      <main className="w-screen h-screen flex" prefix="custom">
+        <MemoryRouter>
+          <Sider />
+          <Routes>
+            <Route path="/" element={<Dashboard />} />
+            {
+              MENUS.map(item => (
+                <Route path={item.path} element={item.element} key={item.value} />
+              ))
+            }
+          </Routes>
+        </MemoryRouter>
+      </main>
+    </ConfigProvider>
   )
 }
 

src/util/util.ts

@@ -37,9 +37,11 @@ export const setPluginTheme = (theme: 'dark' | 'light') => {
   if (theme === 'dark') {
     html?.classList.add('dark')
     html?.classList.remove(lightTheme)
+    insertCss('./antd.dark.min.css')
   } else {
     html?.classList.remove('dark')
     html?.classList.add(lightTheme)
+    insertCss('./antd.min.css')
   }
 }
 export const managePluginTheme = async () => {
@@ -81,3 +83,21 @@ export const getOS = () => {
   if (isLinux) return 'linux'
   return 'unknown'
 }
+
+let antdCssFile: HTMLLinkElement | null = null
+// 插入 css 文件
+export const insertCss = (css: string) => {
+  const style = document.createElement('link')
+  style.rel = 'stylesheet'
+  style.href = css
+
+  const head = document.head || document.getElementsByTagName('head')[0]
+  const firstChild = head.childNodes[0]
+  if (firstChild) {
+    head.insertBefore(style, firstChild)
+  } else {
+    head.appendChild(style)
+  }
+  if (antdCssFile) head.removeChild(antdCssFile)
+  antdCssFile = style
+}

vite.config.ts

@@ -7,11 +7,11 @@ import { resolve } from 'path'
 export default defineConfig({
   plugins: [
     react(),
-    usePluginImport({
-      libraryName: "antd",
-      libraryDirectory: "es",
-      style: "css",
-    }),
+    // usePluginImport({
+    //   libraryName: "antd",
+    //   libraryDirectory: "es",
+    //   style: "css",
+    // }),
   ],
   resolve: {
     alias: {
@@ -23,4 +23,11 @@ export default defineConfig({
     target: "esnext",
     // minify: "esbuild",
   },
+  css: {
+    preprocessorOptions: {
+      less: {
+        javascriptEnabled: true,
+      }
+    },
+  },
 })