From 49a2f514becd7677288b8dc711297ef56340b0e9 Mon Sep 17 00:00:00 2001 From: 魏曹先生 <1992414357@qq.com> Date: Mon, 4 May 2026 17:57:18 +0800 Subject: Add day/night theme switching and GitHub corner to docs --- docs/css/dark.css | 118 +++++++++++++++++++++++++++++++++++++++++++----------- 1 file changed, 95 insertions(+), 23 deletions(-) (limited to 'docs/css/dark.css') diff --git a/docs/css/dark.css b/docs/css/dark.css index 12535bc..e7f7ac0 100644 --- a/docs/css/dark.css +++ b/docs/css/dark.css @@ -74,7 +74,8 @@ html { body { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; - color: #34495e; + background-color: #121212 !important; + color: #f4fefe; font-family: Source Sans Pro, Helvetica Neue, @@ -220,7 +221,7 @@ main.hidden { transition: all 0.3s; } .anchor span { - color: #34495e; + color: #f4fefe; } .anchor:hover { text-decoration: underline; @@ -292,7 +293,7 @@ main.hidden { } .sidebar-toggle { background-color: transparent; - background-color: hsla(0, 0%, 100%, 0.8); + background-color: transparent; border: 0; outline: none; padding: 10px; @@ -328,12 +329,15 @@ body.sticky .sidebar-toggle { bottom: 0; left: 300px; transition: left 0.25s ease; + background-color: #121212; } .markdown-section { margin: 0 auto; - max-width: 80%; - padding: 30px 15px 40px; + max-width: 100%; + padding: 30px 45px 40px; position: relative; + background-color: #121212; + color: #fefefe; } .markdown-section > * { box-sizing: border-box; @@ -344,7 +348,7 @@ body.sticky .sidebar-toggle { } .markdown-section hr { border: none; - border-bottom: 1px solid #eee; + border-bottom: 1px solid #323232; margin: 2em 0; } .markdown-section iframe { @@ -365,15 +369,15 @@ body.sticky .sidebar-toggle { } .markdown-section td, .markdown-section th { - border: 1px solid #ddd; + border: 1px solid #333; padding: 6px 13px; } .markdown-section tr { - border-top: 1px solid #ccc; + border-top: 1px solid #222; } .markdown-section p.tip, .markdown-section tr:nth-child(2n) { - background-color: #f8f8f8; + background-color: #252525; } .markdown-section p.tip { border-bottom-right-radius: 2px; @@ -408,7 +412,7 @@ body.sticky .sidebar-toggle { background-color: #efefef; } .markdown-section p.tip em { - color: #34495e; + color: #f4fefe; } .markdown-section p.warn { background: rgba(66, 185, 131, 0.1); @@ -476,7 +480,6 @@ body.close .content { transform: translateX(300px); } body.close .sidebar-toggle { - background-color: hsla(0, 0%, 100%, 0.8); transition: background-color 1s; width: 284px; padding: 10px; @@ -615,13 +618,14 @@ body { background-color: #fefefe; } .sidebar { - color: #364149; + background-color: #080808; + color: #fefefe; } .sidebar li { margin: 6px 0; } .sidebar ul li a { - color: #505d6b; + color: #fefefe; font-size: 14px; font-weight: 400; overflow: hidden; @@ -660,7 +664,7 @@ body { .markdown-section h3, .markdown-section h4, .markdown-section strong { - color: #2c3e50; + color: #f2fefe; font-weight: 600; } .markdown-section a { @@ -732,7 +736,7 @@ body { } .markdown-section code, .markdown-section pre { - background-color: #f2f2f2; + background-color: #212121; } .markdown-section output, .markdown-section pre { @@ -753,7 +757,7 @@ body { } .markdown-section code { border-radius: 2px; - color: #f44336; + color: #f64739; margin: 0 2px; padding: 3px 5px; white-space: pre-wrap; @@ -777,6 +781,62 @@ body { overflow: inherit; white-space: inherit; } +.markdown-section pre code { + color: #eee; +} +.markdown-section pre code .token.punctuation { + color: #eee; +} +.alert.callout.note { + border: 1px solid #00bcd4; + box-shadow: 0 2px 8px rgba(0, 188, 212, 0.2); +} +.alert.callout.tip { + border: 1px solid #4caf50; + box-shadow: 0 2px 8px rgba(76, 175, 80, 0.2); +} +.alert.callout.important { + border: 1px solid #7c4dff; + box-shadow: 0 2px 8px rgba(124, 77, 255, 0.2); +} +.alert.callout.warning { + border: 1px solid #ffc107; + box-shadow: 0 2px 8px rgba(255, 193, 7, 0.2); +} +.alert.callout.attention { + border: 1px solid #f44336; + box-shadow: 0 2px 8px rgba(244, 67, 54, 0.2); +} +.alert.callout.note code { + color: #00c1d9; +} +.alert.callout.tip code { + color: #51af55; +} +.alert.callout.important code { + color: #8152ff; +} +.alert.callout.warning code { + color: #ffc60c; +} +.alert.callout.attention code { + color: #f9483b; +} +.alert.callout.note a { + color: #00c1d9; +} +.alert.callout.tip a { + color: #51af55; +} +.alert.callout.important a { + color: #8152ff; +} +.alert.callout.warning a { + color: #ffc60c; +} +.alert.callout.attention a { + color: #f9483b; +} .markdown-section output { padding: 1.7rem 1.4rem; border: 1px dotted #ccc; @@ -896,7 +956,7 @@ code .token { /* App name link styles */ .app-name-link { display: inline-block; - color: #34495e; + color: #f4fefe; font-size: 1.5rem; font-weight: 700; text-decoration: none; @@ -905,6 +965,11 @@ code .token { } /* Search styles */ +.search { + background-color: #101010; + border-bottom-width: 0px !important; +} + .search .input-wrap { position: relative; display: flex; @@ -913,12 +978,17 @@ code .token { .search .input-wrap input[type="search"] { width: 100%; padding: 8px 40px 8px 12px; - border: 1px solid #ccc; + border: 1px solid #444; border-radius: 4px; font-size: 14px; outline: none; transition: border-color 0.3s; box-sizing: border-box; + background-color: #1f1f1f; + color: #f4fefe; +} +.search .input-wrap input[type="search"]::placeholder { + color: #888; } .search .input-wrap input[type="search"]:focus { border-color: #ff5722; @@ -934,18 +1004,20 @@ code .token { display: flex; align-items: center; justify-content: center; - opacity: 0.6; + opacity: 0.4; transition: opacity 0.3s; + color: #666; } .search .input-wrap .clear-button:hover { - opacity: 1; + opacity: 0.7; } .search .results-panel { margin-top: 8px; - border: 1px solid #e0e0e0; + border: 1px solid #444; border-radius: 4px; - background: #fff; + background: #2a2a2a; max-height: 300px; overflow-y: auto; - box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); + color: #f4fefe; } -- cgit