Bricks Theme Style 主题样式：一套预设统管全站视觉

Theme Style 在哪设置

进入 Bricks → Settings → Theme style（主题样式），或在编辑器左侧「样式」面板顶部选择当前主题样式。在这里定义好一套，全站新建元素都能默认继承。

Theme Style 能管什么

Theme Style 是一套“视觉默认值”集合，常见可配置项：

• 颜色：文本色、背景色、主色/强调色
• 字体：标题字体、正文字体、字号阶梯
• 按钮：默认圆角、内边距、悬停态
• 表单：输入框/标签的默认样式
• 链接：颜色与下划线规则

定义完成后，你在页面里拖一个按钮，它自动用 Theme Style 里的“按钮默认样式”——不用每个按钮单独设。

和全局 CSS 变量的配合

Theme Style 管“默认值”，全局 CSS 变量（:root）管“令牌”，两者互补：

• 在「Custom code → 全局 CSS」里定义 --primary: #xxx、--radius: 12px
• 在 Theme Style 里把“主色”字段填 var(--primary)、“按钮圆角”填 var(--radius)

这样改品牌色时，变量和 Theme Style 同步生效，既能在 UI 里选，又能代码级复用。

去掉链接点击虚线

Bricks 里点击链接时偶尔出现虚线轮廓（focus 样式），有些场景想去掉或改掉。在 Theme Style 或全局 CSS 里覆盖即可：

a:focus,
a:focus-visible {
  outline: none; /* 或改成 outline: 2px solid var(--primary); */
}

注意：完全去掉 outline 会影响键盘无障碍访问。如果是可访问性要求高的站点，建议改成自定义可见的 focus 样式，而不是 none。

小结

Theme Style 是 Bricks 里“一处定义、全站继承”的核心机制。配合上一篇的全局 CSS 变量，你的站点既能保持视觉统一，又能在 UI 里快速切换风格——客户说“换个调性”，你切一套 Theme Style 就交差。

选题参考自 JonnyWP 的《主题风格设置》教程思路，代码与结构为本站重写整理。

站长

Ray Chan

WordPress Developer & Bricks Specialist

WordPress developer with 10+ years of client builds. Switched to Bricks in 2023 — now builds fast WordPress sites and migrates legacy Elementor/Divi projects.

获取报价 →浏览全部教程