Skip to main content
服务页面使用 Tailwind CSS 和 DaisyUI 作为通用的样式词汇。Tailwind CSS 提供工具类,DaisyUI 提供组件样式和语义化的组件变体。 Tailwind CSS 是服务页面推荐使用的样式层。当服务需要用到其组件类时,也可以使用 DaisyUI。对于拥有自己前端构建流程的服务而言,这两个库都不是必需的,唯一的要求是该页面遵循下文描述的共享主题方案。

共享样式资源

应用目前发布了以下前端资源: Tailwind 和 DaisyUI 资源提供了一种快速启动服务前端的方式。服务也可以选择自行编译 CSS 和 JavaScript,这样的前端只需要与 /assets/css/scheme.css 及其定义的主题状态保持兼容即可。

主题方案

共享的主题方案可以在 /assets/css/scheme.css 中获取,它为 body.lightbody.dark 定义了变量。这些变量是应用和服务页面之间的视觉契约。
服务应当使用这些语义化变量,而不是固定的颜色值。

主题切换

所选的主题通过浏览器存储中的 arupa.theme 键共享。其值为 lightdark,生效的默认值是 light。存储中保存的是应用范围内的统一选择,而每个服务页面则通过自身的 body.lightbody.dark 状态来体现这一选择。 更改该存储值就是应用范围内的主题切换。服务页面必须响应该变化,以便所有可见页面使用相同的主题。web-sdk 服务提供了一套便捷的 API 用于读取、写入和监听该存储值,但该存储惯例本身并不依赖于这个 SDK。