{ "slug": "themeswitcher", "curated": true, "mode": "single", "examples": [ { "id": "themeswitcher-ex-1", "title": "基础用法", "titleSrc": "", "desc": "", "html": "
\n

ThemeSwitcher 主题切换

\n

日间 / 夜间 / 自动主题 + 品牌色切换,实时预览。

\n
\n
\n
\n \n 日间\n
\n
\n \n 夜间\n
\n
\n \n 自动\n
\n
\n
\n
\n
\n
\n \n \n 当前主题:\n \n \n
\n
\n
\n
", "preview": { "show": [ [ 0 ] ], "hide": [], "mode": "single" }, "previewSafe": true, "previewUnsafeReasons": [], "source": "curated", "code": { "html": "

ThemeSwitcher 主题切换

\n

日间 / 夜间 / 自动主题 + 品牌色切换,实时预览。

\n
\n
\n \n 日间\n
\n
\n \n 夜间\n
\n
\n \n 自动\n
\n
\n
\n
\n
\n \n \n 当前主题:\n \n \n
", "jsx": "import { useState } from 'react';\nimport { KoleThemeSwitcher } from 'kole-ui/react';\n\nconst BRANDS = ['#2F54EB', '#1677FF', '#722ED1', '#13C2C2', '#FA541C', '#EB2F96'];\n\nfunction ThemePanel() {\n const [mode, setMode] = useState('auto');\n const [brand, setBrand] = useState(BRANDS[0]);\n return (\n \n );\n}", "vue3": "\n\n", "vue2": "\n\n", "tsx": "import { useState } from 'react';\nimport { KoleThemeSwitcher } from 'kole-ui/react';\n\nconst BRANDS = ['#2F54EB', '#1677FF', '#722ED1', '#13C2C2', '#FA541C', '#EB2F96'];\n\nfunction ThemePanel(): JSX.Element {\n const [mode, setMode] = useState('auto');\n const [brand, setBrand] = useState(BRANDS[0]);\n return (\n \n );\n}\n\nexport default ThemePanel;", "vue3ts": "\n\n", "vue2ts": "\n\n" }, "notes": [ "依据 frameworks/ThemeSwitcher.html 第 33-34 行:brands = ['#2F54EB','#1677FF','#722ED1','#13C2C2','#FA541C','#EB2F96'],初始 mode = 'auto'、brand = '#2F54EB';mode 三态 light|dark|auto 与品牌色取值见 site/details/themeswitcher.json 的 contract.dims。", "两端回调名取自四端实现:React onModeChange / onBrandChange(frameworks/ThemeSwitcher.jsx 第 11 行参数表),vue3 与 vue2 均 emit update:mode / update:brand(frameworks/ThemeSwitcher.vue3.vue 第 42 行)。" ] } ] }