ThemeStyles 组件

ThemeStyles 组件

概述

ThemeStyles 是一个占位组件，用于动态主题样式的注入。当前版本样式由服务端在 layout.tsx 中应用，此组件保留用于未来可能的动态主题切换功能。

文件路径

src/components/providers/theme-styles.tsx

功能特性

  • 服务端样式应用: 当前样式由服务端处理
  • 未来扩展: 保留用于动态主题切换
  • 无 UI 渲染: 组件不渲染任何 DOM 元素

接口定义

interface ThemeStylesProps {
  radius: "none" | "sm" | "md" | "lg";     // 圆角大小
  variant: "flat" | "default" | "brutal";  // UI 变体
  density: "compact" | "default" | "comfortable";  // 密度
  primaryColor: string;  // 主色调
}

使用示例

import { ThemeStyles } from "./theme-styles";

// 在 Providers 中使用
<ThemeStyles 
  radius="md"
  variant="default"
  density="default"
  primaryColor="#3b82f6"
/>

服务端样式实现

实际主题样式在 layout.tsx 中通过 CSS 变量应用：

// layout.tsx
<style>{`
  :root {
    --radius: ${theme.radius === 'none' ? '0' : theme.radius === 'sm' ? '0.25rem' : theme.radius === 'md' ? '0.5rem' : '0.75rem'};
    --primary: ${theme.colors.primary};
  }
`}</style>

主题配置选项

属性可选值CSS 变量
radiusnone / sm / md / lg--radius
variantflat / default / brutal影响阴影、边框
densitycompact / default / comfortable影响间距
primaryColor任意颜色--primary

依赖

无外部依赖

注意事项

  1. 当前组件返回 null，不执行任何操作
  2. 样式在服务端通过 <style> 标签注入
  3. 这样可以防止页面加载时的主题闪烁
  4. 未来可能添加客户端动态主题切换功能
  5. 所有主题配置来自 prompts.config.ts

未来扩展

可能的增强功能：

export function ThemeStyles({ radius, variant, density, primaryColor }: ThemeStylesProps) {
  // 动态创建样式标签
  useEffect(() => {
    const style = document.createElement('style');
    style.textContent = `
      :root {
        --radius: ${getRadiusValue(radius)};
        --primary: ${primaryColor};
      }
    `;
    document.head.appendChild(style);
    
    return () => {
      document.head.removeChild(style);
    };
  }, [radius, variant, density, primaryColor]);
  
  return null;
}
← 返回目录