主题切换

灵动桌面框架内置亮色/暗色主题切换，通过 Ant Design 主题算法实现。

主题配置

// src/theme/antdTheme.ts
import { theme } from 'antd'

export const lightTheme = {
  algorithm: theme.defaultAlgorithm,
  token: {
    colorPrimary: '#1677ff',
    borderRadius: 8,
  },
}

export const darkTheme = {
  algorithm: theme.darkAlgorithm,
  token: {
    colorPrimary: '#1677ff',
    borderRadius: 8,
  },
}

主题状态管理

// src/store/app.ts
import { create } from 'zustand'

interface AppState {
  isDark: boolean
  toggleTheme: () => void
}

export const useAppStore = create<AppState>((set) => ({
  isDark: false,
  toggleTheme: () => set((s) => ({ isDark: !s.isDark })),
}))

应用主题

// src/App.tsx
import { ConfigProvider, theme } from 'antd'
import { useAppStore } from '@/store'

export default function App() {
  const isDark = useAppStore((s) => s.isDark)

  return (
    <ConfigProvider
      theme={{
        algorithm: isDark ? theme.darkAlgorithm : theme.defaultAlgorithm,
      }}
    >
      {/* ... */}
    </ConfigProvider>
  )
}

切换按钮

import { Switch } from 'antd'
import { Sun, Moon } from 'lucide-react'
import { useAppStore } from '@/store'

function ThemeSwitch() {
  const isDark = useAppStore((s) => s.isDark)
  const toggle = useAppStore((s) => s.toggleTheme)

  return (
    <Switch
      checked={isDark}
      onChange={toggle}
      checkedChildren={<Moon size={12} />}
      unCheckedChildren={<Sun size={12} />}
    />
  )
}

CSS 变量适配

/* src/styles/variables.css */
:root {
  --color-bg: #ffffff;
  --color-text: #1f1f1f;
  --color-border: #d9d9d9;
}

[data-theme='dark'] {
  --color-bg: #141414;
  --color-text: #ffffffd9;
  --color-border: #434343;
}

TailwindCSS 中使用 dark: 前缀处理暗色模式特定样式：

<div className="bg-white dark:bg-gray-900 text-black dark:text-white">
  自适应主题内容
</div>