@zhengjiajun/z-themes

v0.1.1

Published

2 months ago

ZBlog 主题系统 - 提供多种主题配置

Downloads

0High
0Medium
0Low

zhengjiajun

css scss theme design-system zblog

ZBlog Themes

一个模块化的主题系统，支持颜色、字体大小和字体家族的独立控制。

重新发包

当修改主题文件后，需要重新构建和发布包：

# 1. 构建新的 CSS 文件
npm run build

# 2. 更新版本号（可选）
npm version patch  # 或 minor, major

# 3. 发布到 npm
npm publish

发布前检查清单：

✅ 所有主题文件已正确更新
✅ dist/index.css 包含最新的样式
✅ 版本号已适当更新
✅ 测试过新版本的功能
✅ README.md 文档已更新（如有必要）

快速发包示例：

# 修改了主题文件后
git add .
git commit -m "feat: 添加新的渐变色主题"

# 构建并发布
npm run build
npm version patch
npm publish

# 推送到 git
git push origin main
git push --tags

特性

🎨 模块化设计 - 三个维度（颜色、字体大小、字体家族）独立控制
🎯 纯 CSS 主题 - 无 JavaScript 依赖，只提供样式文件
📦 组件库集成 - 专为组件库和应用项目设计
🚀 轻量级 - 只包含必要的样式文件，体积小
🔧 易于使用 - 通过 data-* 属性即可控制主题
💾 持久化支持 - 提供 localStorage 键名规范，便于实现主题持久化

目录结构

src/
├── colors/                  # 颜色主题
│   ├── default.scss        # 默认颜色
│   ├── dark.scss           # 暗色主题
│   ├── gradient.scss       # 渐变色主题
│   └── neon.scss           # 霓虹色主题
├── font-sizes/             # 字体大小主题
│   ├── small.scss          # 小字体
│   ├── normal.scss         # 标准字体
│   └── large.scss          # 大字体
├── font-families/          # 字体家族主题
│   ├── system.scss         # 系统字体
│   ├── inter.scss          # Inter 字体
│   ├── roboto.scss         # Roboto 字体
│   ├── georgia.scss        # Georgia 字体
│   └── monaco.scss         # Monaco 字体
└── index.scss              # SCSS 入口文件

使用方法

1. 安装和导入

/* 导入样式 */
@import '@zblog/z-themes/dist/index.css';

<!-- 或者在 HTML 中引入 -->
<link rel="stylesheet" href="node_modules/@zblog/z-themes/dist/index.css">

2. CSS 属性方式

<!-- 设置颜色主题 -->
<div data-color="gradient">渐变色内容</div>

<!-- 设置字体大小主题 -->
<div data-font-size="large">大字体内容</div>

<!-- 设置字体家族主题 -->
<div data-font-family="inter">Inter 字体内容</div>

<!-- 组合使用 -->
<body data-color="dark" data-font-size="normal" data-font-family="roboto">
  <!-- 整个页面应用暗色、标准字体和 Roboto 字体主题 -->
</body>

3. JavaScript 控制主题

// 设置颜色主题
document.documentElement.setAttribute('data-color', 'gradient');

// 设置字体大小主题
document.documentElement.setAttribute('data-font-size', 'large');

// 设置字体家族主题
document.documentElement.setAttribute('data-font-family', 'inter');

// 组合使用
document.documentElement.setAttribute('data-color', 'dark');
document.documentElement.setAttribute('data-font-size', 'normal');
document.documentElement.setAttribute('data-font-family', 'roboto');

可用主题

颜色主题 (`data-color`)

default - 默认蓝色主题
dark - 暗色主题
gradient - 渐变色主题
neon - 霓虹色主题

字体大小主题 (`data-font-size`)

small - 小字体 (10px-48px)
normal - 标准字体 (12px-60px)
large - 大字体 (14px-64px)

字体家族主题 (`data-font-family`)

system - 系统默认字体
inter - Inter 字体
roboto - Roboto 字体
georgia - Georgia 衬线字体
monaco - Monaco 等宽字体

完整示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ZBlog Themes 示例</title>
    <link rel="stylesheet" href="node_modules/@zblog/z-themes/dist/index.css">
</head>
<body data-color="default" data-font-size="normal" data-font-family="system">
    <h1>欢迎使用 ZBlog Themes</h1>
    <p>这是一个主题示例页面</p>
    
    <div class="theme-controls">
        <h2>主题控制</h2>
        
        <div>
            <label>颜色主题：</label>
            <select onchange="document.documentElement.setAttribute('data-color', this.value)">
                <option value="default">默认</option>
                <option value="dark">暗色</option>
                <option value="gradient">渐变</option>
                <option value="neon">霓虹</option>
            </select>
        </div>
        
        <div>
            <label>字体大小：</label>
            <select onchange="document.documentElement.setAttribute('data-font-size', this.value)">
                <option value="small">小</option>
                <option value="normal" selected>标准</option>
                <option value="large">大</option>
            </select>
        </div>
        
        <div>
            <label>字体家族：</label>
            <select onchange="document.documentElement.setAttribute('data-font-family', this.value)">
                <option value="system" selected>系统</option>
                <option value="inter">Inter</option>
                <option value="roboto">Roboto</option>
                <option value="georgia">Georgia</option>
                <option value="monaco">Monaco</option>
            </select>
        </div>
    </div>
</body>
</html>

Vue.js 使用示例

<template>
  <div class="theme-demo">
    <h1>ZBlog Themes Vue 示例</h1>
    
    <div class="theme-controls">
      <div>
        <label>颜色主题：</label>
        <select v-model="currentColor" @change="setColorTheme">
          <option value="default">默认</option>
          <option value="dark">暗色</option>
          <option value="gradient">渐变</option>
          <option value="neon">霓虹</option>
        </select>
      </div>
      
      <div>
        <label>字体大小：</label>
        <select v-model="currentFontSize" @change="setFontSizeTheme">
          <option value="small">小</option>
          <option value="normal">标准</option>
          <option value="large">大</option>
        </select>
      </div>
      
      <div>
        <label>字体家族：</label>
        <select v-model="currentFontFamily" @change="setFontFamilyTheme">
          <option value="system">系统</option>
          <option value="inter">Inter</option>
          <option value="roboto">Roboto</option>
          <option value="georgia">Georgia</option>
          <option value="monaco">Monaco</option>
        </select>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentColor: 'default',
      currentFontSize: 'normal',
      currentFontFamily: 'system'
    }
  },
  methods: {
    setColorTheme() {
      document.documentElement.setAttribute('data-color', this.currentColor)
      localStorage.setItem('theme-color', this.currentColor)
    },
    setFontSizeTheme() {
      document.documentElement.setAttribute('data-font-size', this.currentFontSize)
      localStorage.setItem('theme-font-size', this.currentFontSize)
    },
    setFontFamilyTheme() {
      document.documentElement.setAttribute('data-font-family', this.currentFontFamily)
      localStorage.setItem('theme-font-family', this.currentFontFamily)
    }
  },
  mounted() {
    // 从本地存储恢复主题
    const savedColor = localStorage.getItem('theme-color') || 'default'
    const savedFontSize = localStorage.getItem('theme-font-size') || 'normal'
    const savedFontFamily = localStorage.getItem('theme-font-family') || 'system'
    
    this.currentColor = savedColor
    this.currentFontSize = savedFontSize
    this.currentFontFamily = savedFontFamily
    
    // 应用主题
    document.documentElement.setAttribute('data-color', savedColor)
    document.documentElement.setAttribute('data-font-size', savedFontSize)
    document.documentElement.setAttribute('data-font-family', savedFontFamily)
  }
}
</script>

安装

npm install @zblog/z-themes

构建和发布

# 构建
npm run build

# 发布
npm publish

自定义主题

1. 创建自定义颜色主题

// 创建 colors/custom.scss
[data-color="custom"] {
  --z-primary: #ff6b6b;
  --z-secondary: #4ecdc4;
  --z-success: #45b7d1;
  --z-warning: #f9ca24;
  --z-error: #f0932b;
  --z-info: #6c5ce7;
  --z-text: #2d3436;
  --z-background: #ffffff;
  --z-border: #ddd;
}

2. 创建自定义字体大小主题

// 创建 font-sizes/custom.scss
[data-font-size="custom"] {
  --z-font-size-xs: 8px;
  --z-font-size-sm: 10px;
  --z-font-size-base: 14px;
  --z-font-size-lg: 18px;
  --z-font-size-xl: 24px;
  --z-font-size-2xl: 32px;
  --z-font-size-3xl: 48px;
  --z-font-size-4xl: 64px;
  --z-font-size-5xl: 80px;
}

3. 创建自定义字体家族主题

// 创建 font-families/custom.scss
[data-font-family="custom"] {
  --z-font-family-base: 'Custom Font', 'Helvetica Neue', Arial, sans-serif;
  --z-font-family-mono: 'Custom Mono', 'Courier New', monospace;
}

4. 导入自定义主题

// 在你的主样式文件中导入
@import '@zblog/z-themes/dist/index.css';

// 导入自定义主题
@import './colors/custom.scss';
@import './font-sizes/custom.scss';
@import './font-families/custom.scss';

5. 使用自定义主题

<!-- 使用自定义主题 -->
<div data-color="custom" data-font-size="custom" data-font-family="custom">
  自定义主题内容
</div>

// JavaScript 中使用
document.documentElement.setAttribute('data-color', 'custom');
document.documentElement.setAttribute('data-font-size', 'custom');
document.documentElement.setAttribute('data-font-family', 'custom');

6. 自定义主题变量规范

颜色主题变量

[data-color="your-theme"] {
  --z-primary: #颜色值;
  --z-secondary: #颜色值;
  --z-success: #颜色值;
  --z-warning: #颜色值;
  --z-error: #颜色值;
  --z-info: #颜色值;
  --z-text: #颜色值;
  --z-background: #颜色值;
  --z-border: #颜色值;
}

字体大小主题变量

[data-font-size="your-theme"] {
  --z-font-size-xs: 8px;
  --z-font-size-sm: 10px;
  --z-font-size-base: 12px;
  --z-font-size-lg: 16px;
  --z-font-size-xl: 20px;
  --z-font-size-2xl: 24px;
  --z-font-size-3xl: 32px;
  --z-font-size-4xl: 48px;
  --z-font-size-5xl: 64px;
}

字体家族主题变量

[data-font-family="your-theme"] {
  --z-font-family-base: '字体名称', fallback, sans-serif;
  --z-font-family-mono: '等宽字体名称', 'Courier New', monospace;
}

7. 完整自定义主题示例

// 项目结构
// src/
//   styles/
//     colors/
//       brand.scss
//     font-sizes/
//       compact.scss
//     font-families/
//       elegant.scss
//     main.scss

// src/styles/colors/brand.scss
[data-color="brand"] {
  --z-primary: #e74c3c;
  --z-secondary: #3498db;
  --z-success: #27ae60;
  --z-warning: #f39c12;
  --z-error: #e74c3c;
  --z-info: #9b59b6;
  --z-text: #2c3e50;
  --z-background: #ecf0f1;
  --z-border: #bdc3c7;
}

// src/styles/font-sizes/compact.scss
[data-font-size="compact"] {
  --z-font-size-xs: 6px;
  --z-font-size-sm: 8px;
  --z-font-size-base: 10px;
  --z-font-size-lg: 12px;
  --z-font-size-xl: 14px;
  --z-font-size-2xl: 16px;
  --z-font-size-3xl: 20px;
  --z-font-size-4xl: 24px;
  --z-font-size-5xl: 32px;
}

// src/styles/font-families/elegant.scss
[data-font-family="elegant"] {
  --z-font-family-base: 'Playfair Display', 'Times New Roman', serif;
  --z-font-family-mono: 'Source Code Pro', 'Courier New', monospace;
}

// src/styles/main.scss
@import '@zblog/z-themes/dist/index.css';

// 导入自定义主题
@import './colors/brand.scss';
@import './font-sizes/compact.scss';
@import './font-families/elegant.scss';

<!-- 使用自定义主题 -->
<body data-color="brand" data-font-size="compact" data-font-family="elegant">
  <h1>品牌主题页面</h1>
  <p>使用自定义的品牌色彩、紧凑字体和优雅字体家族</p>
</body>

// 动态切换自定义主题
function applyBrandTheme() {
  document.documentElement.setAttribute('data-color', 'brand');
  document.documentElement.setAttribute('data-font-size', 'compact');
  document.documentElement.setAttribute('data-font-family', 'elegant');
  
  // 保存到本地存储
  localStorage.setItem('theme-color', 'brand');
  localStorage.setItem('theme-font-size', 'compact');
  localStorage.setItem('theme-font-family', 'elegant');
}

localStorage 键名规范

为了保持一致性，建议使用以下键名存储主题状态：

// 推荐的 localStorage 键名
const THEME_KEYS = {
  color: 'theme-color',
  fontSize: 'theme-font-size', 
  fontFamily: 'theme-font-family'
}

// 使用示例
localStorage.setItem(THEME_KEYS.color, 'dark')
localStorage.setItem(THEME_KEYS.fontSize, 'large')
localStorage.setItem(THEME_KEYS.fontFamily, 'inter')

注意事项

纯 CSS 主题包 - 不包含任何 JavaScript 代码，所有工具函数需要在应用项目中实现
确保导入样式 - 在使用主题前必须导入 CSS 文件
属性控制 - 通过 data-* 属性控制主题切换
即时生效 - 主题切换会立即生效，无需刷新页面
持久化存储 - 需要在应用项目中实现主题状态的保存和恢复
SSR 支持 - 支持服务端渲染，但主题切换需要在客户端进行
字体依赖 - 某些字体主题（如 Inter、Roboto）需要额外引入字体文件
自定义主题 - 可以轻松创建自定义主题，只需定义对应的 CSS 变量
变量命名 - 自定义主题时请遵循 --z-* 的命名规范
导入顺序 - 自定义主题文件需要在基础主题之后导入

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

ZBlog Themes

重新发包

特性

目录结构

使用方法

1. 安装和导入

2. CSS 属性方式

3. JavaScript 控制主题

可用主题

颜色主题 (data-color)

字体大小主题 (data-font-size)

字体家族主题 (data-font-family)

完整示例

Vue.js 使用示例

安装

构建和发布

自定义主题

1. 创建自定义颜色主题

2. 创建自定义字体大小主题

3. 创建自定义字体家族主题

4. 导入自定义主题

5. 使用自定义主题

6. 自定义主题变量规范

颜色主题变量

字体大小主题变量

字体家族主题变量

7. 完整自定义主题示例

localStorage 键名规范

注意事项

颜色主题 (`data-color`)

字体大小主题 (`data-font-size`)

字体家族主题 (`data-font-family`)