From 1644edbc6a22223949b4d90cabf6c6c34295563b Mon Sep 17 00:00:00 2001
From: Michaelyin <michaelyin@accordbox.com>
Date: Sun, 7 Jul 2024 22:01:15 +0800
Subject: [PATCH] add doc for dark mode

---
 docs/source/dark.md   | 17 +++++++++++++++++
 docs/source/index.rst |  1 +
 2 files changed, 18 insertions(+)
 create mode 100644 docs/source/dark.md

diff --git a/docs/source/dark.md b/docs/source/dark.md
new file mode 100644
index 0000000..51d1e94
--- /dev/null
+++ b/docs/source/dark.md
@@ -0,0 +1,17 @@
+# Dark Mode
+
+This package has theme switching functionality. You can switch between light and dark mode by clicking the button in the top right corner of the page.
+
+It will set something like `data-theme="dark"` to the root HTML element.
+
+## Tailwind CSS
+
+If your project use Tailwind CSS, please config `tailwind.config.js`
+
+```js
+module.exports = {
+    darkMode: ["selector", '[data-theme="dark"]'],
+}
+```
+
+If TailwindCSS detect `data-theme="dark"` in the root HTML element, it will apply dark mode styles.
diff --git a/docs/source/index.rst b/docs/source/index.rst
index 8ec722f..8734685 100644
--- a/docs/source/index.rst
+++ b/docs/source/index.rst
@@ -13,4 +13,5 @@ Topics
    install_with_viewcomponent.md
    write_preview.md
    params.md
+   dark.md
    contributing.md