Used to check for browser translation.
用于检测浏览器翻译。
ブラウザの翻訳を検出する
参考指南

Theming

Product / Blocklet Server

本综合指南涵盖了 Theming 功能的各个方面,从基本用法到高级功能和技术细节

image.png

头部区域#

主题管理#

image.png

  • 切换主题:在不同主题配置之间快速切换
  • 添加主题: 从一个全新的主题配置开始
  • 复制主题: 复制当前主题配置
  • 重新命名主题: 更改主题名称
  • 删除主题: 永久删除此主题
  • 保存主题: 一键保存当前主题设置

撤消/重做系统#

image.png

  • 撤销按钮: 还原对主题所做的最后一次更改Ctrl/Cmd + Z
  • 重做按钮: 恢复先前撤销的更改Ctrl/Cmd + Shift + Y
  • 历史跟踪: 保留最近 50次更改的完整历史记录

随机主题生成器#

image.png

  • 随机按钮: 使用随机颜色和字体生成全新主题
  • 智能随机化: 确保生成的主题保持良好的对比度和可读性

重置主题#

image.png

  • 重置按钮:返回默认主题设置
  • 确认对话框: 防止意外重置
  • 选择性重置: 仅重置当前选中的主题

颜色部分#

浅色/深色模式切换#

image.png

  • 模式切换:在明暗主题之间切换
  • 模式禁用: 根据偏好禁用特定模式
  • 视觉指示器: 清晰显示激活或禁用的模式

色板管理#

image.png

  • 主色调: 用于按钮、链接和突出显示的品牌主色调
  • 次要色: 用于表面、点缀和用户界面元素
  • 中性色: 灰色和白色:用于背景、边框和排版
  • 语义色: 用于信息和状态的成功、警告、错误和信息等状态色

随机颜色生成#

image.png

  • 智能洗牌: 生成和谐的颜色组合
  • 对比度保护: 确保生成的颜色符合可访问性标准
  • 品牌一致性: 支持在洗牌过程中锁定特定品牌颜色的选项

字体部分#

字体选择#

image.png

  • 标题字体: 所有标题元素(H1、H2、H3 等)的字体选择
  • 正文字体: 正文和段落的字体选择
  • Google 字体集成: 访问数以千计的 Google 字体
  • 字体预览: 实时预览字体显示效果
  • 字体类别: 按风格(衬线体、无衬线体、显示字体等)分类

字体大小控制#

image.png

  • 全局字体大小比例: 定义基本字体大小,控制整体排版比例
  • 自定义大小: 自定义主题中各个变体的字体大小

随机字体生成#

image.png

  • 字体搭配: 智能选择互补字体组合
  • 风格匹配:确保字体与整体设计美学相匹配

风格部分#

边框半径控制#

image.png

  • 全局边框半径: 设置组件的默认边角半径 (shape.borderRadius)

预览区域#

实时预览#

image.png

  • Blocklet 集成: 实时预览实际应用程序
  • 即时更新: 所有更改立即反映在预览中

响应式预览#

image.png

  • 屏幕尺寸模拟: 在不同设备尺寸上测试主题
    • 移动预览: 优化的移动布局测试
    • 平板电脑预览: 平板电脑特定布局验证
    • 桌面预览: 完整的桌面布局测试