【随意换装】基于 Svelte 与 Tailwind 的组件库 STDF 支持多主题配置

一、简介

STDF 是一个基于 Svelte 与 Tailwind CSS 的移动 web 组件库。

官方地址：https://stdf.design 。

GitHub：https://github.com/dufu1991/stdf 。

不知不觉 STDF 开源半年有余，截止 2023-11-04，作为个人维护的开源项目，GitHub 上已有 460+ star，感谢大家的支持。在这半年的时间里，STDF 一直在不断地更新迭代，目前已经发布了 0.4.0 版本，本次更新支持了多主题配置，让开发者可以自由配置多套主题。详情请参考 主题配置、色彩、主题生成器。

虽然有一定的 star，说实话使用率和参与度并不高，希望大家能多多尝试使用，多多提 issue，多多提 PR，让 STDF 暴露更多问题，也能更多地满足大家的需求。

是否是重复造轮子？据我所知，目前基于 Svelte 的开源组件库并不多，尤其是移动 web 更是少之又少，所以 STDF 还是有一定的存在价值。而且即使对标大厂开源的移动 web 组件库，STDF 也有一定的优势。

二、主题配置

此次更新比较特别的是专门设计了一个主题生成器，可以通过配置各项颜色，并实时预览效果，最后生成主题配置文件，方便开发者使用。

作为一个现代化的组件库，我认为完美支持暗黑模式是一个基本的要求，所以 STDF 一开始的设计思路就支持亮暗模式，此次更新将切换方法放置于 NPM 包内，开发者将会更加方便。

三、文档站点

作为开发者，我认为一个易用、简洁、描述清晰的文档站点是一个组件库仅次于组件源码的重要部分，所以 STDF 非常重视文档站点的体验。

日常开发浏览一些组件库站点时，总是会有一些不爽的地方，有些文档一上来就体验价值观，为你赋能，给你加持......，作为单纯的程序员，我还是喜欢接地气的简单直接；有些文档虽然是中文文档，看着看着又掺杂着一些英文，或者 Demo 还是英文的；有些文档的结构层次不够清晰，查找起来不够方便；有些文档没有配置快捷搜索和纯键盘操作，也不方便追求效率的键盘党；有些文档写的内容太过深奥，并没有站在新手的角度去描述，难以理解；有些文档的 Demo 写得太省略，并没有很好地展示各项 API 的使用场景等等。

考虑到以上问题，我在写文档的时候就特别注意这些点，希望给大家一个良好的文档浏览体验。如果大家发现什么问题或者有什么建议，欢迎提意见。

四、配套工具

STDF 也提供了一些配套工具，方便开发者使用。

1. 快速创建 STDF 项目的脚手架 create-stdf。

2. 自动将 svg 图标合并为 SVG symbol 的 Vite/Rollup 插件 rollup-plugin-stdf-icon。

3. 不用离开编辑器，快速预览 STDF API 的 VS Code 插件 STDF for VS Code。

五、未来计划

继续丰富组件库的基础组件，并考虑增加一些常用的业务组件。

目前 STDF 源码并未使用 TypeScript，我原本计划在后续版本中逐渐将组件所有的 API 都按照 JSDoc 的规范修改注释，此方案是可以满足开发时优雅地代码提示的。前段时间社区有人提议使用 TypeScript，我也在考虑中，但是目前还没有最终决定，欢迎大家提提自己的想法供参考。

马上 Svelte5 大版本就要发布了，之后我也会尽快适配 Svelte5，让使用 STDF 的开发者能够尽快享受到 Svelte5 带来的新特性。

如果大家对 STDF 这套组件库的 UI/UE 感觉还行的话，后续我会基于此修改逻辑层同步开发 React/Vue3 的版本，希望更多开发者参与进来。

欢迎大家各抒己见。