feat: 适配深色模式（svg还未适配）

ZiqiangStudio · Apr 16, 2023 · 21506a0 · 21506a0
1 parent 67f4aab
commit 21506a0
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 0 deletions.
diff --git a/app.vue b/app.vue
@@ -16,5 +16,10 @@ import './assets/default.less';
   display: flex;
   justify-content: center;
   align-items: center;
+  background-color: var(--color-bg);
+}
+
+:deep(*) {
+  color: var(--color-text);
 }
 </style>
diff --git a/assets/default.less b/assets/default.less
@@ -3,3 +3,7 @@
   padding: 0;
   font-family: -apple-system, 'PingFang SC', 'Microsoft Yahei', Arial, Helvetica, sans-serif, system-ui;
 }
+
+:root {
+  color-scheme: light dark;
+}
diff --git a/assets/var.less b/assets/var.less
@@ -1,5 +1,7 @@
 :root {
   --color-primary: #01579B;
+  --color-bg: #FFFFFF;
+  --color-text: #000000;
   --color-input-bg: rgba(0, 123, 221, 0.05);
   --border-radius-m: 10px;
   --border-radius-l: 20px;
@@ -9,3 +11,16 @@
   --color-disabled: rgba(0, 0, 0, 0.25);
   --color-disabled-bg: rgba(0, 0, 0, 0.04);
 }
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --color-bg: #0D0D0D;
+    --color-text: #FFFFFF;
+    --color-primary: #0167B4;
+    --color-input-bg: #222222;
+    --color-secondary: #888888;
+    --color-button-secondary-bg: #262626;
+    --color-disabled: rgba(255, 255, 255, 0.82);
+    --color-disabled-bg: #000000;
+  }
+}
diff --git a/layouts/default.vue b/layouts/default.vue
@@ -16,6 +16,12 @@
   border-radius: var(--border-radius-m);
   font-size: 15px;
   background-color: var(--color-input-bg);
+
+  &::placeholder,
+  &::-webkit-input-placeholder,
+  &:-moz-placeholder {
+    color: var(--color-secondary);
+  }
 }
 
 :deep(label) {