跳转到主要内容
插件页面使用 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 无关。