311 lines
8.3 KiB
TypeScript
311 lines
8.3 KiB
TypeScript
|
import { CodeBlock } from '@/components/CodeBlock';
|
|||
|
|
|
|||
|
|
export default function ThemePage() {
|
|||
|
|
return (
|
|||
|
|
<div className="prose prose-lg max-w-none">
|
|||
|
|
<h1>主题系统</h1>
|
|||
|
|
<p className="text-xl text-gray-600">
|
|||
|
|
NewspaperUI 基于 CSS Variables 构建主题系统，支持主题切换和自定义。
|
|||
|
|
</p>
|
|||
|
|
|
|||
|
|
<h2>CSS Variables</h2>
|
|||
|
|
<p>
|
|||
|
|
主题系统使用 CSS 自定义属性（CSS Variables）定义颜色、字体、间距等设计令牌。
|
|||
|
|
这使得主题切换和自定义变得简单而灵活。
|
|||
|
|
</p>
|
|||
|
|
|
|||
|
|
<h3>核心变量</h3>
|
|||
|
|
<CodeBlock
|
|||
|
|
title="CSS Variables"
|
|||
|
|
language="css"
|
|||
|
|
code={`:root {
|
|||
|
|
/* 颜色系统 */
|
|||
|
|
--color-text-primary: #111;
|
|||
|
|
--color-text-secondary: #222;
|
|||
|
|
--color-text-tertiary: #333;
|
|||
|
|
--color-text-muted: #555;
|
|||
|
|
--color-background: #ffffff;
|
|||
|
|
--color-border: #e5e7eb;
|
|||
|
|
|
|||
|
|
/* 字体系统 */
|
|||
|
|
--font-family-serif: Georgia, 'Times New Roman', serif;
|
|||
|
|
--font-family-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
|||
|
|
--font-family-mono: 'Courier New', monospace;
|
|||
|
|
|
|||
|
|
/* 间距系统 */
|
|||
|
|
--spacing-gutter: 1rem;
|
|||
|
|
--spacing-section: 2rem;
|
|||
|
|
--spacing-article: 1.5rem;
|
|||
|
|
|
|||
|
|
/* 栅格系统 */
|
|||
|
|
--grid-columns: 24;
|
|||
|
|
--grid-max-width: 1280px;
|
|||
|
|
}`}
|
|||
|
|
/>
|
|||
|
|
|
|||
|
|
<h2>Tailwind 集成</h2>
|
|||
|
|
<p>
|
|||
|
|
NewspaperUI 的主题系统与 Tailwind CSS 深度集成，可以直接在 Tailwind 配置中使用主题变量。
|
|||
|
|
</p>
|
|||
|
|
|
|||
|
|
<CodeBlock
|
|||
|
|
title="tailwind.config.js"
|
|||
|
|
language="javascript"
|
|||
|
|
code={`import { newspaperTheme } from '@newspaperui/theme';
|
|||
|
|
|
|||
|
|
export default {
|
|||
|
|
content: ['./src/**/*.{js,ts,jsx,tsx}'],
|
|||
|
|
theme: {
|
|||
|
|
extend: {
|
|||
|
|
colors: {
|
|||
|
|
newspaper: {
|
|||
|
|
text: {
|
|||
|
|
primary: 'var(--color-text-primary)',
|
|||
|
|
secondary: 'var(--color-text-secondary)',
|
|||
|
|
tertiary: 'var(--color-text-tertiary)',
|
|||
|
|
muted: 'var(--color-text-muted)',
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
fontFamily: {
|
|||
|
|
serif: 'var(--font-family-serif)',
|
|||
|
|
sans: 'var(--font-family-sans)',
|
|||
|
|
mono: 'var(--font-family-mono)',
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
plugins: [newspaperTheme],
|
|||
|
|
};`}
|
|||
|
|
/>
|
|||
|
|
|
|||
|
|
<h2>使用主题变量</h2>
|
|||
|
|
<p>
|
|||
|
|
在组件中可以直接使用 CSS Variables 或 Tailwind 工具类。
|
|||
|
|
</p>
|
|||
|
|
|
|||
|
|
<CodeBlock
|
|||
|
|
title="使用示例"
|
|||
|
|
language="tsx"
|
|||
|
|
code={`// 使用 CSS Variables
|
|||
|
|
<div style={{ color: 'var(--color-text-primary)' }}>
|
|||
|
|
主要文本
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
// 使用 Tailwind 工具类
|
|||
|
|
<div className="text-newspaper-text-primary">
|
|||
|
|
主要文本
|
|||
|
|
</div>`}
|
|||
|
|
/>
|
|||
|
|
|
|||
|
|
<h2>自定义主题</h2>
|
|||
|
|
<p>
|
|||
|
|
你可以通过覆盖 CSS Variables 来自定义主题。
|
|||
|
|
</p>
|
|||
|
|
|
|||
|
|
<CodeBlock
|
|||
|
|
title="自定义主题"
|
|||
|
|
language="css"
|
|||
|
|
code={`:root {
|
|||
|
|
/* 覆盖默认颜色 */
|
|||
|
|
--color-text-primary: #000000;
|
|||
|
|
--color-text-secondary: #1a1a1a;
|
|||
|
|
--color-background: #f9f9f9;
|
|||
|
|
|
|||
|
|
/* 自定义字体 */
|
|||
|
|
--font-family-serif: 'Merriweather', Georgia, serif;
|
|||
|
|
|
|||
|
|
/* 调整间距 */
|
|||
|
|
--spacing-gutter: 1.5rem;
|
|||
|
|
--grid-max-width: 1440px;
|
|||
|
|
}`}
|
|||
|
|
/>
|
|||
|
|
|
|||
|
|
<h2>深色模式</h2>
|
|||
|
|
<p>
|
|||
|
|
通过定义深色模式的 CSS Variables，可以轻松实现主题切换。
|
|||
|
|
</p>
|
|||
|
|
|
|||
|
|
<CodeBlock
|
|||
|
|
title="深色模式"
|
|||
|
|
language="css"
|
|||
|
|
code={`@media (prefers-color-scheme: dark) {
|
|||
|
|
:root {
|
|||
|
|
--color-text-primary: #f5f5f5;
|
|||
|
|
--color-text-secondary: #e0e0e0;
|
|||
|
|
--color-text-tertiary: #cccccc;
|
|||
|
|
--color-text-muted: #999999;
|
|||
|
|
--color-background: #1a1a1a;
|
|||
|
|
--color-border: #333333;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 或使用类名切换 */
|
|||
|
|
.dark {
|
|||
|
|
--color-text-primary: #f5f5f5;
|
|||
|
|
--color-text-secondary: #e0e0e0;
|
|||
|
|
--color-background: #1a1a1a;
|
|||
|
|
}`}
|
|||
|
|
/>
|
|||
|
|
|
|||
|
|
<h2>视觉权重配置</h2>
|
|||
|
|
<p>
|
|||
|
|
视觉权重系统的配置也可以通过主题系统进行自定义。
|
|||
|
|
</p>
|
|||
|
|
|
|||
|
|
<CodeBlock
|
|||
|
|
title="自定义视觉权重"
|
|||
|
|
language="typescript"
|
|||
|
|
code={`import { visualWeights } from '@newspaperui/theme';
|
|||
|
|
|
|||
|
|
// 查看默认配置
|
|||
|
|
console.log(visualWeights.Headline.High);
|
|||
|
|
// {
|
|||
|
|
// fontSize: '36px',
|
|||
|
|
// fontWeight: 700,
|
|||
|
|
// lineHeight: 1.1,
|
|||
|
|
// color: '#111',
|
|||
|
|
// span: [6, 8],
|
|||
|
|
// margin: '0 0 1rem 0',
|
|||
|
|
// }
|
|||
|
|
|
|||
|
|
// 自定义权重配置
|
|||
|
|
const customWeights = {
|
|||
|
|
...visualWeights,
|
|||
|
|
Headline: {
|
|||
|
|
...visualWeights.Headline,
|
|||
|
|
High: {
|
|||
|
|
...visualWeights.Headline.High,
|
|||
|
|
fontSize: '48px', // 更大的标题
|
|||
|
|
fontWeight: 800,
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
};`}
|
|||
|
|
/>
|
|||
|
|
|
|||
|
|
<h2>响应式主题</h2>
|
|||
|
|
<p>
|
|||
|
|
可以根据屏幕尺寸调整主题变量，实现响应式设计。
|
|||
|
|
</p>
|
|||
|
|
|
|||
|
|
<CodeBlock
|
|||
|
|
title="响应式变量"
|
|||
|
|
language="css"
|
|||
|
|
code={`:root {
|
|||
|
|
--grid-columns: 24;
|
|||
|
|
--spacing-gutter: 1rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@media (max-width: 768px) {
|
|||
|
|
:root {
|
|||
|
|
--grid-columns: 12;
|
|||
|
|
--spacing-gutter: 0.75rem;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@media (max-width: 480px) {
|
|||
|
|
:root {
|
|||
|
|
--grid-columns: 6;
|
|||
|
|
--spacing-gutter: 0.5rem;
|
|||
|
|
}
|
|||
|
|
}`}
|
|||
|
|
/>
|
|||
|
|
|
|||
|
|
<h2>主题最佳实践</h2>
|
|||
|
|
<ul>
|
|||
|
|
<li>使用语义化的变量名，如 <code>--color-text-primary</code> 而不是 <code>--color-black</code></li>
|
|||
|
|
<li>保持颜色对比度符合 WCAG 无障碍标准</li>
|
|||
|
|
<li>使用相对单位（rem、em）而不是绝对单位（px）以支持用户字体大小偏好</li>
|
|||
|
|
<li>在深色模式下确保所有颜色都有对应的深色版本</li>
|
|||
|
|
<li>测试主题在不同设备和浏览器上的表现</li>
|
|||
|
|
<li>提供主题切换的用户界面</li>
|
|||
|
|
</ul>
|
|||
|
|
|
|||
|
|
<h2>导入主题</h2>
|
|||
|
|
<p>
|
|||
|
|
在你的应用中导入 NewspaperUI 主题：
|
|||
|
|
</p>
|
|||
|
|
|
|||
|
|
<CodeBlock
|
|||
|
|
title="导入主题"
|
|||
|
|
language="typescript"
|
|||
|
|
code={`// 在你的主 CSS 文件中
|
|||
|
|
import '@newspaperui/theme/variables.css';
|
|||
|
|
|
|||
|
|
// 或在 Next.js 的 _app.tsx 中
|
|||
|
|
import '@newspaperui/theme/variables.css';
|
|||
|
|
import '@newspaperui/theme/tailwind.css';`}
|
|||
|
|
/>
|
|||
|
|
|
|||
|
|
<h2>主题工具</h2>
|
|||
|
|
<p>
|
|||
|
|
NewspaperUI 提供了一些工具函数来帮助你使用主题系统：
|
|||
|
|
</p>
|
|||
|
|
|
|||
|
|
<CodeBlock
|
|||
|
|
title="主题工具"
|
|||
|
|
language="typescript"
|
|||
|
|
code={`import { getVisualWeight, applyTheme } from '@newspaperui/theme';
|
|||
|
|
|
|||
|
|
// 获取特定组件的视觉权重配置
|
|||
|
|
const headlineHighConfig = getVisualWeight('Headline', 'High');
|
|||
|
|
|
|||
|
|
// 应用主题到元素
|
|||
|
|
applyTheme(element, {
|
|||
|
|
'--color-text-primary': '#000',
|
|||
|
|
'--font-family-serif': 'Georgia',
|
|||
|
|
});`}
|
|||
|
|
/>
|
|||
|
|
|
|||
|
|
<h2>主题示例</h2>
|
|||
|
|
<p>
|
|||
|
|
以下是一些预设主题示例：
|
|||
|
|
</p>
|
|||
|
|
|
|||
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-6 my-8">
|
|||
|
|
<div className="border border-gray-200 rounded-lg p-6">
|
|||
|
|
<h3 className="text-lg font-semibold mb-3">经典报纸</h3>
|
|||
|
|
<div className="space-y-2 text-sm">
|
|||
|
|
<div className="flex justify-between">
|
|||
|
|
<span>主色调</span>
|
|||
|
|
<span className="font-mono">#111111</span>
|
|||
|
|
</div>
|
|||
|
|
<div className="flex justify-between">
|
|||
|
|
<span>背景色</span>
|
|||
|
|
<span className="font-mono">#ffffff</span>
|
|||
|
|
</div>
|
|||
|
|
<div className="flex justify-between">
|
|||
|
|
<span>字体</span>
|
|||
|
|
<span className="font-mono">Georgia</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div className="border border-gray-200 rounded-lg p-6 bg-gray-900 text-white">
|
|||
|
|
<h3 className="text-lg font-semibold mb-3">深色模式</h3>
|
|||
|
|
<div className="space-y-2 text-sm">
|
|||
|
|
<div className="flex justify-between">
|
|||
|
|
<span>主色调</span>
|
|||
|
|
<span className="font-mono">#f5f5f5</span>
|
|||
|
|
</div>
|
|||
|
|
<div className="flex justify-between">
|
|||
|
|
<span>背景色</span>
|
|||
|
|
<span className="font-mono">#1a1a1a</span>
|
|||
|
|
</div>
|
|||
|
|
<div className="flex justify-between">
|
|||
|
|
<span>字体</span>
|
|||
|
|
<span className="font-mono">Georgia</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<h2>更多资源</h2>
|
|||
|
|
<ul>
|
|||
|
|
<li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties">MDN: CSS Custom Properties</a></li>
|
|||
|
|
<li><a href="https://tailwindcss.com/docs/customizing-colors">Tailwind CSS: Customizing Colors</a></li>
|
|||
|
|
<li><a href="https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html">WCAG: Contrast Guidelines</a></li>
|
|||
|
|
</ul>
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
}
|