fix: 登录UI

docs/浅色深色.md

@@ -0,0 +1,80 @@
+声明 color-scheme
+有两种方式：
+
+meta: 在head中声明<meta name="color-scheme" content="light dark">，声明当前页面支持 light 和 dark 两种模式，系统切换到深色模式时，浏览器默认样式也会切换到深色；
+css：下面的 css 同样可以实现上面 meta 声明的效果
+:root {
+    color-scheme: light dark;
+}
+注意：此声明并非为页面做自动适配，只影响浏览器默认样式
+
+更多信息可查阅 W3C 文档 《CSS Color Adjustment Module Level 1》
+
+通过 CSS 媒体查询
+:root {
+    color-scheme: light dark;
+    background: white;
+    color: black;
+}
+
+@media (prefers-color-scheme: dark) {
+    :root {
+        background: black;
+        color: white;
+    }
+}
+颜色较多的情况，建议使用CSS变量对颜色值进行管理
+
+:root {
+    color-scheme: light dark;
+    --nav-bg-color: #F7F7F7;
+    --content-bg-color: #FFFFFF;
+    --font-color: rgba(0,0,0,.9);
+}
+
+@media (prefers-color-scheme: dark) {
+    :root {
+        --nav-bg-color: #2F2F2F;
+        --content-bg-color: #2C2C2C;
+        --font-color: rgba(255, 255, 255, .8);
+    }
+}
+
+:root {
+    color: var(--font-color)
+}
+
+.header {
+    background-color: var(--nav-bg-color);
+}
+
+.content {
+    background-color: var(--content-bg-color);
+}
+图片适配
+利用picture+source标签，设置不同模式下的图片 url。
+
+<picture>
+    <!-- 深色模式下的图片 -->
+    <source srcset="dark.jpg" media="(prefers-color-scheme: dark)" />
+    <!-- 默认模式下的图片 -->
+    <img src="light.jpg"/>
+</picture>
+JavaScript中判断当前模式&监听模式变化
+利用的是matchMedia方法，具体用法参考以下例子：
+
+
+const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)')
+
+function darkModeHandler() {
+    if (mediaQuery.matches) {
+        console.log('现在是深色模式')
+    } else {
+        console.log('现在是浅色模式')
+    }
+}
+
+// 判断当前模式
+darkModeHandler()
+// 监听模式变化
+mediaQuery.addListener(darkModeHandler)