diff --git a/_scripts/docsify-dark-mode.js b/_scripts/docsify-dark-mode.js new file mode 100644 index 0000000000000000000000000000000000000000..b467c10ac1c0222e61b3581ced485020b04b0aab --- /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=`
\n \n \n
${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 0000000000000000000000000000000000000000..6cb6daa78b87f5693c18e8c7db23a027003780ae --- /dev/null +++ b/_styles/dark-theme-override.css @@ -0,0 +1,267 @@ +/** + * 深色主题覆盖样式(仅在 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; +} + +/* 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; +} diff --git a/_styles/docsify-dark-mode.css b/_styles/docsify-dark-mode.css new file mode 100644 index 0000000000000000000000000000000000000000..69597b27f8dddc007fda4bd5f1c2ad84a02dd4ea --- /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 c2e4434f3eacaf665aa7149592c8d33053d7b901..94bb5c6b49439b0b28cf96c838ce3b0de98431fb 100644 --- a/index.html +++ b/index.html @@ -10,6 +10,9 @@ + + +