文章目录Theme UI约束即美学主题系统计算你的设计系统为什么需要 Theme UI给数据加上约束让响应式设计变成数组操作和现有技术栈和平共处开始使用 Theme UI主题调试技巧谁在用 Theme UI总结设计系统的新可能性Theme UI约束即美学主题系统计算你的设计系统Theme UI 提供了一种基于约束条件设计原则的组件库构建方式。它把设计系统的搭建变成了一种计算问题颜色、字体、排版、间距这些原本需要手动对齐的视觉元素在这里都可以通过可组合的主题规则来高效管理。无论是要构建自定义组件库、设计系统、网页应用、Gatsby 主题还是简单的网站Theme UI 都能用统一的 API 帮你把重复劳动最小化。系统 UI 家族基于 System UI Theme 规范让 Theme UI 在不同应用场景间具备互操作性。它分享了一套标准主题结构颜色colors定义调色板支持深浅主题自动切换字体fonts设置 body、heading、monospace 三档字体保证在系统间一致间距space基于间距刻度表制定布局尺寸断点breakpoints响应式设计的断点值数组这种标准化的主题描述方式让不同技术栈的应用都能快速接入 Theme UI 的能力。为什么需要 Theme UI设计师和前端工程师都有过这种体验一份设计稿好不容易敲定了结果开发阶段发现像素级还原根本停不下来。颜色要反复确认 HEX 值、字体大小要在 Sketch 和 VSCode 间切换对比、组件的 margin/padding 需要手动计算……每一次微小的调整都像是在做无用功。Theme UI 要解决的就是让设计系统从尽力对齐变成确定性计算。它最早起源于 Styled System 的下一代演进做到了以下几点约束即代码基于 Theme Specification 构建主题对象一切样式都从主题对象派生sx prop 的革命在 JSX 中直接写样式对象同时支持主题变量引用和响应式数组语法暗色模式开箱即用只需一行代码就能接入深浅主题自动切换互操作性兼容任何主流 UI 组件库工作原理对上层透明可组合性核心渲染引擎和预设主题都是插件化设计简单来说Theme UI 是在用计算机科学的方式重新定义 UI 开发用数据结构描述设计用函数式的方式应用这些设计约束。给数据加上约束以颜色系统为例。首先定义主题对象// theme.jsexportdefault{fonts:{body:system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, sans-serif,heading:Avenir Next, sans-serif,monospace:Menlo, monospace,},colors:{text:#000,background:#fff,primary:#33e,},}然后在组件里通过 sx prop 就能直接引用这些值/** jsxImportSource theme-ui */ export default (props) ( div sx{{ color: text, backgroundColor: background, fontWeight: bold, }} Hello Theme UI /div )text、background、primary这些键名会自动映射到对应主题对象里的值。颜色变体、主题切换所有状态管理都交给 Theme UI 自己处理。表格也同样能用主题约束来描述。你可以这样定义高度尺度space:[0,4,8,16,32,64,128,256,512]然后在 sx prop 里用对应的刻度索引Box sx{{ mt: 4 /* main theme等于 marginTop: 16 */ }} /这种数组化索引的方式说白了就是用计算机的数组下标取代了 CSS 的具体像素值。同样像素值这次用索引 3 代表 16px下次还是索引 3再也不用担心到底是 15px 还是 16px这种无谓争论。让响应式设计变成数组操作Theme UI 的 sx prop 支持用数组语法定义响应式样式。这是 Styled System 发明的模式// 375px 屏幕下宽度 100%600px 屏幕下 50%900px 屏幕下 25% Box sx{{ width: [100%, 50%, 25%] }} /这个看起来像 CSS-in-JS 的小技巧实际上是把响应式设计从媒体查询集合变成了简单的数组切片。Theme UI 默认带着移动优先的断点breakpoints:[40em,52em,64em]// 640px, 832px, 1024px结果就是你再也不用背媒体查询的具体断点数值直接写数组索引就能完成大部分页面布局了。和现有技术栈和平共处Theme UI 的核心原则之一就是不强迫你抛弃现有工作成果。你当前用什么 UI 组件库Material UI、Chakra、Ant Design、Headless UI 等等都能用 Theme UI 的 sx prop 给这些组件加上主题约束。拿 Material-UI 举例只需要在主题对象外面包一层 ThemeProviderimport { ThemeUIProvider } from theme-ui import { theme } as MuiTheme from mui/material import { ThemeProvider as MuiThemeProvider } from mui/material/styles const combinedTheme { ...MuiTheme, useCustomProperties: true, } function App() { return ( MuiThemeProvider theme{combinedTheme} ThemeUIProvider theme{theme} {/* 你的应用 */} /ThemeUIProvider /MuiThemeProvider ) }Theme UI 在底层用 Emotion 做 scoped styles所以它能和平台无关地工作。这让 Theme UI 在现代前端生态中像万能插头一样灵活。开始使用 Theme UI首先安装核心包和 React 运行时npminstalltheme-ui emotion/react如果你不需要暗色模式组件可以进一步精简安装体积npminstalltheme-ui/core最小化使用示例import { ThemeUIProvider } from theme-ui import theme from ./theme export default (props) ( ThemeUIProvider theme{theme} h1 sx{{ fontSize: 5, color: primary }} Hello World /h1 /ThemeUIProvider )只需要 7 行代码一个完整的 Theme UI 主题系统就启动了。系统会自动为你的应用提供:像素级精确的颜色系统响应式字体、间距和布局从浅色到暗色的自动切换任何 UI 组件库的兼容性Theme UI 还集成了 Gatsby 生态有现成的 Gatsby Theme 和插件能把整个 Markdown 博客或者文档库的样式主题统一管理。同时它对 MDX 也有很好的支持让你能用简单的表达式在 Markdown 里写样式/** jsxImportSource theme-ui */ # 标题 {sx{{ color: primary }}} 这是一段普通文本。主题调试技巧Theme UI 带着一个可视化主题编辑器在浏览器里实时预览主题变化npminstall-gtheme-ui-devtools运行theme-ui-devtools会在 localhost:3000 启动一个主题编辑器。你可以一边编辑主题 JSON一边实时看到整个应用外观的变化非常适合主题系统的迭代开发。谁在用 Theme UITheme UI 的贡献者名单里有很多重量级选手Brent JacksonSystem UI 的最初创作者同时也是 Styled System 和 xstyled 的核心维护者。John OtanderTheme UI 的核心作者之一Gatsby 的早期推动者。Max Stoiberstyled-components 的共同创作者在主题化和组件设计方面有深厚经验。还有来自 Gatsby、MDX、Emotion 等生态各个角落的贡献者。这种开源社区的凝聚力也是 Theme UI 能快速成长的重要原因。Theme UI 的 MIT 许可证意味着它可以被任何人用于任何目的。2024 年开始 Theme UI v6 进入稳定版至今已经稳定运行超过 2 年。总结设计系统的新可能性Theme UI 不是什么万能组件库它是给设计系统加上一层抽象用数据结构重新定义样式规则让之前的尽力对齐变成精确计算。它让一次定义的主题规则可以在组件、页面、应用各个层级自动复用让设计师和工程师之间对齐不再需要无穷无尽的像素战争让响应式设计从媒体查询 nightmare 变成简单的数组操作。这种范式转变让 Theme UI 成为了现代前端设计系统的一种标准选择。对于追求系统性、可维护性和开发效率的团队它提供了一种前所未有的开发体验。如果你还在为文档不统一、主题难以维护、响应式地狱发愁可以试试 Theme UI——这 5KB 的小库可能会彻底改变你对 CSS 的理解。组件、页面、应用各个层级自动复用让设计师和工程师之间对齐不再需要无穷无尽的像素战争让响应式设计从媒体查询 nightmare 变成简单的数组操作。这种范式转变让 Theme UI 成为了现代前端设计系统的一种标准选择。对于追求系统性、可维护性和开发效率的团队它提供了一种前所未有的开发体验。如果你还在为文档不统一、主题难以维护、响应式地狱发愁可以试试 Theme UI——这 5KB 的小库可能会彻底改变你对 CSS 的理解。