💄 feat(theme): 页面主题切换完成

src/assets/css/post-parser.css

@@ -1,12 +1,13 @@
 /*
  * @description 米游社解析 css
- * @since Alpha v0.1.1
+ * @since Alpha v0.1.3
  */
-/* todo scoped 不生效 */
+
 .mys-post-body {
   margin: 20px auto;
   width: 800px;
   font-family: "Genshin-Light", serif;
+  color: var(--post-default-text);
 }
 
 :deep(.mys-post-div) {
@@ -69,7 +70,7 @@
   padding: 10px;
   border-radius: 10px;
   display: flex;
-  background: #faf7e8;
+  background: var(--content-bg-2);
 }
 
 :deep(.mys-post-unknown) {

src/assets/index.css

@@ -26,16 +26,6 @@
   background: #555;
 }
 
-/*
- * @description 米游社解析 json
- * @since Alpha v0.1.1
- */
-.dev-json {
-  padding: 20px;
-  border-radius: 20px;
-  font-family: Consolas, serif;
-}
-
 /* card action 内的按钮 */
 .card-btn {
   background: #4a5366;

src/assets/themes/dark.css

@@ -0,0 +1,30 @@
+/**
+ * @file assets themes light.css
+ * @description 主题样式文件
+ * @author BTMuli<bt-muli@outlook.com>
+ * @since Alpha v0.1.3
+ */
+
+/* 主题色 */
+html.dark {
+  --sidebar-bg: #1e1e1e;
+  --sidebar-icon: #e1e1e1;
+  --page-bg:#2a2a2a;
+  --back-top-shadow: #000000;
+  --theme-switch-icon: #e1e1e1;
+  --post-default-text: #faf7e8;
+
+  --content-bg-1: #1e1e1e;
+  --content-bg-2: #393b40;
+  --content-bg-3: #2a2a2a;
+  --content-text-1: #1e1e1e;
+  --content-text-2: #faf7e8;
+  --content-text-3: #e1e1e1;
+  
+  --btn-bg-1: #3b3d3b;
+  --btn-bg-2: #000000;
+  --btn-bg-3: #1e1e1e;
+  --btn-text-1: #393b40;
+
+  --card-text-1: #393b40;
+}

src/assets/themes/default.css

@@ -0,0 +1,30 @@
+/**
+ * @file assets themes dark.css
+ * @description 主题样式文件
+ * @author BTMuli<bt-muli@outlook.com>
+ * @since Alpha v0.1.3
+ */
+
+/* 主题色 */
+html.default {
+  --sidebar-bg: #485466;
+  --sidebar-icon: #ece5d8;
+  --page-bg:#ece5d8;
+  --back-top-shadow: #546d8b;
+  --theme-switch-icon: #393b40;
+  --post-default-text: #1e1e1e;
+
+  --content-bg-1: #546d8b;
+  --content-bg-2: #faf7e8;
+  --content-bg-3: #5b738f;
+  --content-text-1: #fec90b;
+  --content-text-2: #393b40;
+  --content-text-3: #546d8b;
+
+  --btn-bg-1: #fec90b;
+  --btn-bg-2: #4a5366;
+  --btn-bg-3: #546d8b;
+  --btn-text-1: #faf7e8;
+
+  --card-text-1: #485466;
+}