# 主题系统 ## 主题定义 /* 应用程序/globals.css */ @tailwind基地； @tailwind组件； @tailwind实用程序； @层基础{ ：根{ /* 默认：工作室主题 */ --背景：0 0% 100%； --前景：0 0% 3.9%； --卡：0 0% 100%； --卡前景：0 0% 3.9%； --弹出窗口：0 0% 100%； --popover-前景：0 0% 3.9%； --主要：0 0% 9%； --主要前景：0 0% 98%； --次要：0 0% 96.1%； --次要前景：0 0% 9%； --静音：0 0% 96.1%； --静音前景：0 0% 45.1%； --口音：0 0% 96.1%； --重音前景：0 0% 9%； --破坏性：0 84.2% 60.2%； --破坏性前景：0 0% 98%； --边框：0 0% 89.8%； --输入：0 0% 89.8%； --环：0 0% 3.9%； --半径：0.5rem； } /* 主题：地球 - 柔软有机的温暖 */ [数据主题=“地球”]{ --背景：40 33% 98%； --前景：30 10% 15%； --卡：40 30% 97%； --卡前景: 30 10% 15%; --初级：30 30% 35%； --主要前景：40 30% 98%； ——中学：35 25% 92%； --次要前景：30 20% 25%； --静音：35 20% 93%； --静音前景：30 10% 40%； --口音：35 30% 88%； --重音前景：30 20% 20%； --边框：35 20% 85%； --输入：35 20% 88%； --环：30 30% 35%； } /* 主题：工作室 - 干净简约 */ [数据主题=“工作室”] { --背景：0 0% 100%； --前景：0 0% 5%； --卡：0 0% 100%； --卡前景: 0 0% 5%; --主要：0 0% 8%； --主要前景：0 0% 100%； --次要：0 0% 97%； --次要前景：0 0% 10%； --静音：0 0% 96%； --静音前景：0 0% 40%； -- 口音：0 0% 95%； --重音前景：0 0% 10%； --边框：0 0% 92%； --输入：0 0% 94%； --环：0 0% 8%； } /* 主题：运动员 - 带有紫色口音的粗体 */ [数据主题=“运动员”] { --背景：0 0% 99%； --前景：270 5% 10%； --卡：0 0% 100%； --卡前景：270 5% 10%； --主要：270 60% 50%； --主要前景：0 0% 100%； ——中学：270 20% 95%； --次要前景：270 30% 25%； --静音：270 10% 94%； --静音前景：270 5% 40%； --口音：270 40% 92%； --重音前景：270 40% 30%； --边界：270 10% 88%； --输入：270 10% 90%； --环：270 60% 50%； } /* 主题：渐变 - 软渐变英雄 */ [数据主题=“渐变”] { --背景：220 30% 99%； --前景：220 10% 10%； --卡：0 0% 100%； --卡前景: 220 10% 10%; --主要：220 80% 55%； --主要前景：0 0% 100%； ——中学：280 30% 95%； --次要前景：220 20% 20%； --静音：220 20% 95%； --静音前景：220 10% 40%； --口音：280 40% 93%； --重音前景：280 30% 25%； --边框：220 15% 90%； --输入：220 15% 92%； --环：220 80% 55%； /* 特定于梯度的变量 */ --梯度开始：220 80% 60%； --梯度结束：280 60% 65%； } } ## 主题配置 // lib/theme.ts 导出 const 主题 = ['工作室', '地球', '运动员', '渐变'] as const; 导出类型主题 = (主题类型)[数量]; 导出 const defaultTheme: 主题 = '工作室'; 导出函数 isValidTheme(theme: string): 主题是主题 { 返回主题.includes(主题作为主题); } ## 主题提供者 // 组件/ThemeProvider.tsx '使用客户端'；从 'react' 导入 { createContext, useContext, useEffect, useState }; 从 '@/lib/theme' 导入 { type Theme, defaultTheme, isValidTheme }; 接口 ThemeContextType { 主题：主题； setTheme: (主题: 主题) => void; } const ThemeContext = createContext（未定义）；导出函数 ThemeProvider({ 孩子 }: { 孩子: React.ReactNode }) { const [主题，setTheme] = useState<主题>(defaultTheme); 使用效果（（）=> { // 首先检查 URL 参数 const params = new URLSearchParams(window.location.search); const urlTheme = params.get('主题'); if (urlTheme && isValidTheme(urlTheme)) { 设置主题（urlTheme）； document.documentElement.setAttribute('data-theme', urlTheme); 返回； } // 检查本地存储 const store = localStorage.getItem('主题'); 如果（存储&& isValidTheme（存储））{ 设置主题（已存储）； document.documentElement.setAttribute('数据主题', 存储); } }, []); const handleSetTheme = (newTheme: 主题) => { 设置主题（新主题）； document.documentElement.setAttribute('数据主题', newTheme); localStorage.setItem('主题', newTheme); // 更新 URL 而不重新加载 const url = 新 URL(window.location.href); url.searchParams.set('主题', newTheme); window.history.replaceState({}, '', url); }; 返回（ {孩子} ）； } 导出函数 useTheme() { const context = useContext(ThemeContext); 如果（！上下文）{ throw new Error('useTheme 必须在 ThemeProvider 中使用'); } 返回上下文； } ## 主题切换器（开发模式） // 组件/ThemeSwitcher.tsx '使用客户端'；从 './ThemeProvider' 导入 { useTheme } ；从'@/lib/theme'导入{主题，类型主题}； const themeLabels: Record<主题, 字符串> = { 工作室：“工作室”，地球：“地球”，运动员：'运动员'，渐变：'渐变'， }; 导出函数 ThemeSwitcher() { const { 主题, setTheme } = useTheme(); // 仅在开发中或使用 ?dev 查询参数时显示 if (process.env.NODE_ENV === '生产') { 返回空值； } 返回（

{主题.map((t) => ( <按钮键={t} onClick={() => setTheme(t)} className={`px-3 py-1 text-sm 圆角过渡颜色 ${ 主题 === t ？ 'bg-主要文本-主要-前景' : '悬停：bg-静音' }`} > {主题标签[t]} ))}

）； } ## 主题感知组件 // 组件/Hero.tsx '使用客户端'；从 './ThemeProvider' 导入 { useTheme } ；导出函数 Hero() { const { 主题 } = useTheme(); 返回（ <部分类名={` 相对 min-h-[80vh] 弹性项目中心 ${主题 === '渐变' ? 'bg-gradient-to-br 从-[hsl(var(--gradient-start))] 到-[hsl(var(--gradient-end))]' : ''} ${主题==='地球'？ 'bg-[url("/patterns/wave.svg")] bg-cover' : ''} `} > {主题 === '渐变' && (

)}

普拉提和瑜伽

）； } ## 背景装饰品 // 组件/BackgroundOrnament.tsx '使用客户端'；从 './ThemeProvider' 导入 { useTheme } ；导出函数BackgroundOrnament() { const { 主题 } = useTheme(); if (主题 === '工作室') { 返回空值； // 最小，无装饰 } if (主题 === '地球') { 返回（

）； } if (主题 === '运动员') { 返回（

）； } 返回空值； } ## 布局集成 // 应用程序/[语言环境]/layout.tsx 从'@/components/ThemeProvider'导入{ThemeProvider}；从'@/components/ThemeSwitcher'导入{ThemeSwitcher}；导出默认函数 LocaleLayout({ Children }) { 返回（ <主题提供者> {孩子} <主题切换器/> ）； } ## 通过 URL 预览通过查询参数访问主题： * `?theme=studio` \- 干净最小 * `?theme=earth` \- 软有机 * `?theme=athlete` \- 粗体紫色 * `?theme=gradient` \- 渐变英雄

主题系统

包含技能