From 4cf8887ff34f04739fb0ec2e13f50dc56bc9580e Mon Sep 17 00:00:00 2001
From: luhuadong <luhuadong@163.com>
Date: Thu, 29 Jan 2026 15:08:19 +0800
Subject: [PATCH 1/2] feat: support dark theme mode

---
 _scripts/docsify-dark-mode.js   |   1 +
 _styles/dark-theme-override.css | 220 ++++++++++++++++++++++++++++++++
 _styles/docsify-dark-mode.css   |  68 ++++++++++
 index.html                      |  29 +++++
 4 files changed, 318 insertions(+)
 create mode 100644 _scripts/docsify-dark-mode.js
 create mode 100644 _styles/dark-theme-override.css
 create mode 100644 _styles/docsify-dark-mode.css

diff --git a/_scripts/docsify-dark-mode.js b/_scripts/docsify-dark-mode.js
new file mode 100644
index 0000000..b467c10
--- /dev/null
+++ b/_scripts/docsify-dark-mode.js
@@ -0,0 +1 @@
+"use strict";window.$docsify.plugins=[].concat((t,e)=>{var o,n=()=>{document.documentElement.classList.add("transition"),window.setTimeout(()=>{document.documentElement.classList.remove("transition")},800)},c=({background:t,toggleBtnBg:e,textColor:o})=>{document.documentElement.style.setProperty("--docsify_dark_mode_bg",t),document.documentElement.style.setProperty("--docsify_dark_mode_btn",e),document.documentElement.style.setProperty("--text_color",o)};o={dark:{background:"#1c2022",toggleBtnBg:"#34495e",textColor:"#b4b4b4"},light:{background:"white",toggleBtnBg:"var(--theme-color)",textColor:"var(--theme-color)"},...e.config.darkMode},t.afterEach((function(t,e){e(t=` <div id="dark_mode">\n             <input class="container_toggle" type="checkbox" id="switch" name="mode" />\n             <label for="switch">Toggle</label>\n           </div>${t}`)})),t.doneEach((function(){var t;localStorage.getItem("DOCSIFY_DARK_MODE")?(t=localStorage.getItem("DOCSIFY_DARK_MODE"),c(o[`${t}`])):(t="light",c(o.light)),document.querySelector("input[name=mode]").addEventListener("change",(function(){"light"===t?(n(),c(o.dark),localStorage.setItem("DOCSIFY_DARK_MODE","dark"),t="dark"):(n(),c(o.light),localStorage.setItem("DOCSIFY_DARK_MODE","light"),t="light")}))}))},window.$docsify.plugins);
diff --git a/_styles/dark-theme-override.css b/_styles/dark-theme-override.css
new file mode 100644
index 0000000..b210502
--- /dev/null
+++ b/_styles/dark-theme-override.css
@@ -0,0 +1,220 @@
+/**
+ * 深色主题覆盖样式（仅在 html.docsify-dark 时生效）
+ * 与 docsify-dark-mode 配合：由脚本根据 localStorage 为 html 添加 .docsify-dark 类
+ */
+html.docsify-dark body,
+html.docsify-dark .sidebar,
+html.docsify-dark .sidebar-toggle,
+html.docsify-dark aside,
+html.docsify-dark main {
+  background: #1c2022 !important;
+}
+
+html.docsify-dark body {
+  color: #c8c8c8;
+}
+
+/* 导航栏 */
+html.docsify-dark .app-nav a {
+  color: #c8c8c8;
+}
+html.docsify-dark .app-nav a:hover,
+html.docsify-dark .app-nav a.active {
+  color: #7eb8da;
+  border-bottom-color: #7eb8da;
+}
+html.docsify-dark .app-nav li ul {
+  background: #25282c;
+  border-color: #444;
+}
+
+/* 侧边栏 */
+html.docsify-dark .sidebar {
+  color: #c8c8c8;
+  border-right-color: rgba(255, 255, 255, 0.06);
+}
+html.docsify-dark .sidebar ul li a {
+  color: #b4b4b4;
+}
+html.docsify-dark .sidebar ul li a:hover {
+  color: #e0e0e0;
+}
+html.docsify-dark .sidebar ul li.active > a {
+  color: #7eb8da;
+  font-weight: 600;
+}
+html.docsify-dark .sidebar > h1 a {
+  color: #e0e0e0;
+}
+
+/* 主内容区：标题 - 统一为浅灰白，不再用绿色 */
+html.docsify-dark .markdown-section h1,
+html.docsify-dark .markdown-section h2,
+html.docsify-dark .markdown-section h3,
+html.docsify-dark .markdown-section h4,
+html.docsify-dark .markdown-section h5,
+html.docsify-dark .markdown-section h6,
+html.docsify-dark .markdown-section strong {
+  color: #e0e0e0;
+  font-weight: 600;
+}
+html.docsify-dark .markdown-section h6 {
+  color: #9ca3a8;
+}
+
+/* 正文与列表 */
+html.docsify-dark .markdown-section p,
+html.docsify-dark .markdown-section li {
+  color: #c8c8c8;
+}
+html.docsify-dark .markdown-section blockquote {
+  color: #9ca3a8;
+  border-left-color: #5a6b7d;
+}
+html.docsify-dark .markdown-section blockquote p {
+  color: #9ca3a8;
+}
+
+/* flexible-alerts 插件：> [!NOTE] / [!TIP] 等渲染为 .alert，不是 blockquote
+ * 深色主题下按类型区分背景与左边框，保证可读且易区分 */
+html.docsify-dark .markdown-section .alert,
+html.docsify-dark .markdown-section .alert p,
+html.docsify-dark .markdown-section .alert .title {
+  color: #c4cad4;
+}
+html.docsify-dark .markdown-section .alert {
+  border: 1px solid transparent;
+  border-left-width: 4px;
+}
+/* NOTE：深蓝灰背景，信息感 */
+html.docsify-dark .markdown-section .alert.flat.note {
+  background-color: #1a2535;
+  border-left-color: #4a6b8a;
+  border-color: #2a3545;
+}
+/* TIP：深绿灰背景，提示/成功感 */
+html.docsify-dark .markdown-section .alert.flat.tip {
+  background-color: #1a2a1f;
+  border-left-color: #4a7a52;
+  border-color: #2a3528;
+}
+/* WARNING：深琥珀灰背景，注意感 */
+html.docsify-dark .markdown-section .alert.flat.warning {
+  background-color: #2a2518;
+  border-left-color: #8a7340;
+  border-color: #3d3528;
+}
+/* ATTENTION：深红灰背景，重要/警示感 */
+html.docsify-dark .markdown-section .alert.flat.attention {
+  background-color: #2a1818;
+  border-left-color: #8a4a4a;
+  border-color: #3d2828;
+}
+
+/* 链接 - 柔和蓝灰，符合暗黑风格 */
+html.docsify-dark .markdown-section a {
+  color: #7eb8da;
+  font-weight: 500;
+}
+html.docsify-dark .markdown-section a:hover {
+  color: #9bcef0;
+}
+
+/* 表格 */
+html.docsify-dark .markdown-section table {
+  border: 1px solid #444;
+}
+html.docsify-dark .markdown-section th,
+html.docsify-dark .markdown-section td {
+  border: 1px solid #444;
+  color: #c8c8c8;
+  padding: 8px 13px;
+}
+html.docsify-dark .markdown-section th {
+  background: #25282c;
+  color: #e0e0e0;
+  font-weight: 600;
+}
+html.docsify-dark .markdown-section tr {
+  border-top: 1px solid #444;
+}
+html.docsify-dark .markdown-section tr:nth-child(even) {
+  background: rgba(255, 255, 255, 0.03);
+}
+html.docsify-dark .markdown-section p.tip {
+  background: #25282c;
+  color: #b4b4b4;
+  border-left-color: #5a6b7d;
+}
+html.docsify-dark .markdown-section p.tip code {
+  background: #1c2022;
+  color: #c8c8c8;
+}
+
+/* 代码块与行内代码 */
+html.docsify-dark .markdown-section code {
+  background: #25282c;
+  color: #c8c8c8;
+  border: 1px solid #3a3a3a;
+}
+html.docsify-dark .markdown-section pre {
+  background: #25282c;
+  border: 1px solid #3a3a3a;
+}
+html.docsify-dark .markdown-section pre > code {
+  background: transparent;
+  border: none;
+  color: #c8c8c8;
+}
+html.docsify-dark .markdown-section pre::after {
+  color: #6a737a;
+}
+
+/* Prism 代码高亮（暗色配色） */
+html.docsify-dark .token.comment,
+html.docsify-dark .token.prolog,
+html.docsify-dark .token.doctype,
+html.docsify-dark .token.cdata {
+  color: #6a737a;
+}
+html.docsify-dark .token.punctuation {
+  color: #9ca3a8;
+}
+html.docsify-dark .token.property,
+html.docsify-dark .token.tag {
+  color: #7eb8da;
+}
+html.docsify-dark .token.boolean,
+html.docsify-dark .token.number {
+  color: #d7ba7d;
+}
+html.docsify-dark .token.string {
+  color: #9ccc7d;
+}
+html.docsify-dark .token.selector,
+html.docsify-dark .token.attr-name {
+  color: #d7ba7d;
+}
+html.docsify-dark .token.keyword {
+  color: #c586c0;
+}
+html.docsify-dark .token.function {
+  color: #7eb8da;
+}
+
+/* 搜索框 */
+html.docsify-dark input[type="search"] {
+  background: #25282c;
+  border-color: #444;
+  color: #c8c8c8;
+}
+
+/* 锚点 */
+html.docsify-dark .anchor span {
+  color: #9ca3a8;
+}
+
+/* 分割线 */
+html.docsify-dark .markdown-section hr {
+  border-bottom-color: #444;
+}
diff --git a/_styles/docsify-dark-mode.css b/_styles/docsify-dark-mode.css
new file mode 100644
index 0000000..69597b2
--- /dev/null
+++ b/_styles/docsify-dark-mode.css
@@ -0,0 +1,68 @@
+:root {
+  --text_color: var(--theme-color);
+  --docsify_dark_mode_bg: #fff;
+  --docsify_dark_mode_btn: var(--theme-color);
+}
+.sidebar,
+.sidebar-toggle,
+aside,
+body,
+html,
+main {
+  background: #fff;
+  background: var(--docsify_dark_mode_bg);
+}
+#dark_mode > input[type=checkbox] {
+  height: 0;
+  width: 0;
+  visibility: hidden;
+}
+#dark_mode > label {
+  cursor: pointer;
+  text-indent: -9999px;
+  width: 55px;
+  height: 30px;
+  background: var(--theme-color);
+  background: var(--docsify_dark_mode_btn);
+  margin: 0 auto;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 100px;
+  position: relative;
+}
+#dark_mode > label:after {
+  content: "";
+  background: #fff;
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  position: absolute;
+  top: 5px;
+  left: 4px;
+  transition: 0.32s cubic-bezier(0.68, -0.55, 0.27, 1.55);
+}
+#dark_mode > input:checked + label {
+  background: var(--theme-color);
+  background: var(--docsify_dark_mode_btn);
+}
+#dark_mode > input:checked + label:after {
+  left: calc(100% - 5px);
+  transform: translateX(-100%);
+}
+html.transition,
+html.transition *,
+html.transition :after,
+html.transition :before {
+  transition: 0.42s cubic-bezier(0.68, -0.55, 0.27, 1.55) !important;
+  transition-delay: 0 !important;
+}
+#dark_mode {
+  position: absolute;
+  right: 0;
+  top: 0;
+}
+p {
+  color: var(--theme-color);
+  color: var(--text_color);
+}
diff --git a/index.html b/index.html
index c2e4434..94bb5c6 100644
--- a/index.html
+++ b/index.html
@@ -10,6 +10,9 @@
   <!-- Theme -->
   <link rel="stylesheet" href="_styles/vue.css">
   <link rel="stylesheet" href="_styles/sidebar.min.css">
+  <!-- Dark mode (docsify-dark-mode，本地) -->
+  <link rel="stylesheet" href="_styles/docsify-dark-mode.css">
+  <link rel="stylesheet" href="_styles/dark-theme-override.css">
   <!-- <link rel="stylesheet" href="_styles/sweetalert.min.css" type='text/css' media='all' /> -->
 </head>
 <style>
@@ -47,6 +50,7 @@
       subMaxLevel: 2,
       repo: 'https://github.com/RT-Thread/rt-thread',
       name: '<span>RT-Thread 文档中心</span>',
+      themeColor: '#42b983',  // 与 vue 主题一致，保证深色模式切换按钮可见
       logo: '_media/logo.png height = "30px"',
       coverpage: ['/'],
       requestHeaders: {
@@ -126,6 +130,30 @@
               },2000)
             }
           }),
+          hook.ready(function () {
+            // 深色主题：根据 localStorage 为 html 添加 .docsify-dark，供 dark-theme-override.css 使用
+            function syncDarkClass() {
+              var isDark = localStorage.getItem('DOCSIFY_DARK_MODE') === 'dark';
+              document.documentElement.classList.toggle('docsify-dark', isDark);
+            }
+            syncDarkClass();
+            window.__docsify_sync_dark_class = syncDarkClass;
+          });
+        },
+        function (hook) {
+            hook.doneEach(function () {
+              var sync = window.__docsify_sync_dark_class;
+              if (sync) sync();
+              var cb = document.querySelector('input[name=mode]');
+              if (cb && !cb.dataset.darkSync) {
+                cb.dataset.darkSync = '1';
+                cb.addEventListener('change', function () {
+                  setTimeout(function () { if (window.__docsify_sync_dark_class) window.__docsify_sync_dark_class(); }, 0);
+                });
+              }
+            });
+          },
+        function (hook, vm) {
           hook.beforeEach(function (html) {
             //获取浏览器基本属性
             var brower = navigator.userAgent;
@@ -150,6 +178,7 @@
     }
   </script>
   <script src="_scripts/docsify.min.js"></script>
+  <script src="_scripts/docsify-dark-mode.js"></script>
   <script src="_scripts/search.min.js"></script>
   <script src="_scripts/emoji.min.js"></script>
   <script src="_scripts/prism-c.min.js"></script>
-- 
Gitee


From 062e1a938ea2c5dd3977fdb9e9ebca55ec39062b Mon Sep 17 00:00:00 2001
From: luhuadong <luhuadong@163.com>
Date: Thu, 29 Jan 2026 15:16:07 +0800
Subject: [PATCH 2/2] fix: docsify-tabs dark theme style

---
 _styles/dark-theme-override.css | 47 +++++++++++++++++++++++++++++++++
 1 file changed, 47 insertions(+)

diff --git a/_styles/dark-theme-override.css b/_styles/dark-theme-override.css
index b210502..6cb6daa 100644
--- a/_styles/dark-theme-override.css
+++ b/_styles/dark-theme-override.css
@@ -218,3 +218,50 @@ html.docsify-dark .anchor span {
 html.docsify-dark .markdown-section hr {
   border-bottom-color: #444;
 }
+
+/* docsify-tabs：深色主题下标签栏与内容区统一为暗色，切换任意 Tab 均一致 */
+html.docsify-dark .markdown-section [class*="docsify-tabs--"],
+html.docsify-dark .markdown-section .docsify-tabs {
+  --docsifytabs-border-color: #444;
+  --docsifytabs-tab-background: #25282c;
+  --docsifytabs-tab-background--active: #1c2022;
+  --docsifytabs-tab-color: #9ca3a8;
+  --docsifytabs-tab-color--active: #e0e0e0;
+  --docsifytabs-content-background: #1c2022;
+  --docsifytabs-tab-highlight-color: #7eb8da;
+}
+html.docsify-dark .markdown-section .docsify-tabs__tab {
+  background: #25282c !important;
+  color: #9ca3a8 !important;
+  border-color: #444 !important;
+}
+html.docsify-dark .markdown-section .docsify-tabs__tab--active {
+  background: #1c2022 !important;
+  color: #e0e0e0 !important;
+  border-bottom-color: #1c2022 !important;
+}
+html.docsify-dark .markdown-section .docsify-tabs__content {
+  background: #1c2022 !important;
+  color: #c8c8c8;
+  border-color: #444 !important;
+}
+/* Tab 内容区内的标题、段落、列表等与主内容区一致 */
+html.docsify-dark .markdown-section .docsify-tabs__content h1,
+html.docsify-dark .markdown-section .docsify-tabs__content h2,
+html.docsify-dark .markdown-section .docsify-tabs__content h3,
+html.docsify-dark .markdown-section .docsify-tabs__content h4,
+html.docsify-dark .markdown-section .docsify-tabs__content h5,
+html.docsify-dark .markdown-section .docsify-tabs__content h6,
+html.docsify-dark .markdown-section .docsify-tabs__content strong {
+  color: #e0e0e0;
+}
+html.docsify-dark .markdown-section .docsify-tabs__content p,
+html.docsify-dark .markdown-section .docsify-tabs__content li {
+  color: #c8c8c8;
+}
+html.docsify-dark .markdown-section .docsify-tabs__content a {
+  color: #7eb8da;
+}
+html.docsify-dark .markdown-section .docsify-tabs__content img {
+  filter: none;
+}
-- 
Gitee