Prechádzať zdrojové kódy

Add dark mode config description and milestone document.

杜府 3 rokov pred
rodič
commit
8ac480f8a7

+ 11 - 0
doc/guide/milestone.md

@@ -0,0 +1,11 @@
+## 2023-04-27
+
+第一次 commit。
+
+组件库开发到我认为能用的程度,正式开源。期间工作量包括组件库 UI 设计(后续补充 Figma 源文件),组件库逻辑开发,源码中英双语注释,搭建中英文 Demo 工程,调试各种 API,撰写组件库中英文档,搭建文档站点,设计 LOGO,首页 3D 建模,部署文档站点,购买域名、CDN...
+
+## 2022-07-06
+
+新建文件夹。
+
+早在 2021 年开发 [simple-cloud-music](https://github.com/dufu1991/simple-cloud-music) 的时候就发现写 Svelte 的体验非常好,但是市面上好像没有一款针对移动端的 UI 组件库,就开始萌生开发一个移动端的 Svelte UI 组件库的想法。再后来遇到了 Tailwind CSS,体验过后被它优秀的开发体验深深吸引,于是决定使用 Svelte 结合 Tailwind 开发一个移动端的 UI 组件库。

+ 11 - 0
doc/guide/milestone_en.md

@@ -0,0 +1,11 @@
+## 2023-04-27
+
+First commit.
+
+The component library has been developed to a usable level and is now officially open source. During this period, the workload included UI design of the component library (Figma source files will be added later), logic development of the component library, bilingual comments in the source code, building demo projects in both Chinese and English, debugging various APIs, writing documentation for the component library in both Chinese and English, setting up a documentation website, designing a logo, creating a 3D model for the homepage, deploying the documentation website, purchasing domain names and CDN...
+
+## 2022-07-06
+
+New folder created.
+
+As early as 2021 when developing [simple-cloud-music](https://github.com/dufu1991/simple-cloud-music), I found that writing Svelte was very enjoyable but there seemed to be no mobile-oriented UI component libraries on the market. So I came up with an idea to develop a mobile-oriented Svelte UI component library. Later on I discovered Tailwind CSS which impressed me deeply with its excellent development experience. Therefore I decided to use Svelte combined with Tailwind to develop a mobile-oriented UI component library.

+ 20 - 0
doc/guide/theme.md

@@ -1,3 +1,23 @@
+## 亮暗模式
+
+### 配置
+
+使用 Tailwind CSS 的暗色模式配置,请在 `tailwind.config.js` 配置 `darkMode: 'class'`,参考 [Dark Mode](https://tailwindcss.com/docs/dark-mode)。
+
+### 切换
+
+直接给 `html` 标签添加或删除 `dark` 类名即可。
+
+```js
+// 切换为亮色模式
+document.documentElement.classList.remove('dark');
+
+// 切换为暗色模式
+document.documentElement.classList.add('dark');
+```
+
+## 颜色配置
+
 基于 Tailwind 的配置文件 `tailwind.config.js` 配置主题颜色系统,请确保配置以下几种基本颜色。可参考 [STDF 指南 - 色彩](/#/guide?nav=color)。
 
 | 颜色名称    | 说明              | 默认值      |

+ 20 - 0
doc/guide/theme_en.md

@@ -1,3 +1,23 @@
+## Light/Dark Mode
+
+### Configuration
+
+To use Tailwind CSS's dark mode configuration, please configure `darkMode: 'class'` in `tailwind.config.js`. Refer to [Dark Mode](https://tailwindcss.com/docs/dark-mode) for more information.
+
+### Switching Modes
+
+Simply add or remove the `dark` class name to the `html` tag.
+
+```js
+// Switch to light mode
+document.documentElement.classList.remove('dark');
+
+// Switch to dark mode
+document.documentElement.classList.add('dark');
+```
+
+## Color Configuration
+
 Based on the Tailwind configuration file `tailwind.config.js`, configure the theme color system. Please ensure that the following basic colors are configured. Reference [STDF Guide - Color](/#/Guide?nav=color).
 
 | Color Name  | Description                    | Default Value |