From 7c7d798865566822b56d669778ab13abcb52b2f5 Mon Sep 17 00:00:00 2001
From: hwk1223 <1294736009@qq.com>
Date: Tue, 1 Nov 2022 15:38:55 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=96=87=E7=AB=A0=E7=BC=96=E8=BE=91?=
 =?UTF-8?q?=E6=B7=B1=E8=89=B2=E6=A8=A1=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 dark.scss        | 32 ++++++++++++++++
 default.scss     | 31 +++++++++++++++
 juejin.scss      | 75 ++++++++++++++++++++++++------------
 mixin.scss       | 11 ++++++
 views/index.html | 99 +++++++++++++++++++++++-------------------------
 5 files changed, 173 insertions(+), 75 deletions(-)
 create mode 100644 dark.scss
 create mode 100644 default.scss
 create mode 100644 mixin.scss

diff --git a/dark.scss b/dark.scss
new file mode 100644
index 0000000..fad6d92
--- /dev/null
+++ b/dark.scss
@@ -0,0 +1,32 @@
+@include theme("dark") {
+  // 内容层_文字
+  --juejin-font-1: rgba(255, 255, 255, 0.9);
+  --juejin-font-2: rgba(255, 255, 255, 0.7);
+  --juejin-font-3: rgba(255, 255, 255, 0.55);
+  --juejin-font-4: rgba(255, 255, 255, 0.45);
+  --juejin-font-brand1-normal: #4495ff;
+  --juejin-font-brand2-hover: #2b88ff;
+  --juejin-font-brand3-click: #1371ec;
+  --juejin-font-brand4-disable: rgba(19, 113, 236, 0.4);
+  --juejin-font-success: #40c17b;
+  --juejin-font-warning: #ff8541;
+  --juejin-font-danger: #c62633;
+  --juejin-font-white-disable: rgba(255, 255, 255, 0.6);
+  --juejin-font-white: #fff;
+  // 内容层_图层
+  --juejin-background: #000;
+  --juejin-gray-1-1: rgba(255, 255, 255, 0.2);
+  --juejin-gray-1-2: rgba(255, 255, 255, 0.1);
+  --juejin-layer-1: #181818;
+  --juejin-layer-2-1: rgba(255, 255, 255, 0.08);
+  --juejin-layer-2-2: rgba(255, 255, 255, 0.08);
+  --juejin-layer-2-plugin: rgba(255, 255, 255, 0.04);
+  --juejin-layer-3-fill: rgba(255, 255, 255, 0.08);
+  --juejin-layer-3-border: rgba(255, 255, 255, 0.2);
+  --juejin-brand-1-normal: #2986ff;
+  --juejin-brand-2-hover: #1473ed;
+  --juejin-brand-3-click: #0563dd;
+  --juejin-brand-4-disable: rgba(41, 134, 255, 0.4);
+  --juejin-brand-5-light: rgba(30, 128, 255, 0.2);
+  --juejin-danger-3-light: rgba(248, 89, 89, 0.2);
+}
diff --git a/default.scss b/default.scss
new file mode 100644
index 0000000..d6fd143
--- /dev/null
+++ b/default.scss
@@ -0,0 +1,31 @@
+@include theme {
+  // 内容层_文字
+  --juejin-font-1: #252933;
+  --juejin-font-2: #515767;
+  --juejin-font-3: #8a919f;
+  --juejin-font-4: #c2c8d1;
+  --juejin-font-brand1-normal: #1e80ff;
+  --juejin-font-brand2-hover: #1171ee;
+  --juejin-font-brand3-click: #0060dd;
+  --juejin-font-brand4-disable: #abcdff;
+  --juejin-font-success: #2bb91b;
+  --juejin-font-warning: #ff8412;
+  --juejin-font-danger: #ff5132;
+  --juejin-font-white-disable: #fff;
+  --juejin-font-white: #fff;
+  // 内容层_图层
+  --juejin-background: #f2f3f5;
+  --juejin-gray-1-1: #e4e6eb;
+  --juejin-gray-1-2: rgba(228, 230, 235, 0.5);
+  --juejin-layer-1: #fff;
+  --juejin-layer-2-1: #f7f8fa;
+  --juejin-layer-2-2: rgba(247, 248, 250, 0.7);
+  --juejin-layer-2-plugin: rgba(247, 248, 250, 0.5);
+  --juejin-layer-3-fill: #f2f3f5;
+  --juejin-brand-1-normal: #1e80ff;
+  --juejin-brand-2-hover: #1171ee;
+  --juejin-brand-3-click: #0060dd;
+  --juejin-brand-4-disable: #abcdff;
+  --juejin-brand-5-light: #eaf2ff;
+  --juejin-danger-3-light: #fff2ff;
+}
diff --git a/juejin.scss b/juejin.scss
index c04ee96..2838f96 100644
--- a/juejin.scss
+++ b/juejin.scss
@@ -1,11 +1,24 @@
-$monospace-font: Menlo,
-Monaco,
-Consolas,
-'Courier New',
-monospace;
-$line-space: 22px;
+@import "./mixin.scss";
+@import "./default.scss";
+@import "./dark.scss";
 
+$monospace-font: Menlo, Monaco, Consolas, "Courier New", monospace;
+$line-space: 22px;
+body {
+  background: var(--juejin-background);
+  color: var(--juejin-font-1);
+}
+.switch-mode .toggle-mode-btn {
+  background-color: var(--juejin-layer-1);
+  border: 1px solid var(--juejin-gray-1-1);
+  color: var(--juejin-font-1);
+}
+.main-area > * {
+  background-color: var(--juejin-layer-1);
+  border-radius: 2px;
+}
 .markdown-body {
+  background: var(--juejin-layer-1);
   word-break: break-word;
   line-height: 1.75;
   font-weight: 400;
@@ -32,7 +45,8 @@ $line-space: 22px;
   h2 {
     padding-bottom: 12px;
     font-size: 24px;
-    border-bottom: 1px solid #ececec;
+    // border-bottom: 1px solid #ececec;
+    border-bottom: 1px solid var(--juejin-gray-1-1);
   }
 
   h3 {
@@ -76,7 +90,8 @@ $line-space: 22px;
     word-break: break-word;
     border-radius: 2px;
     overflow-x: auto;
-    background-color: #fff5f5;
+    // background-color: #fff5f5;
+    background-color: var(--juejin-danger-3-light);
     color: #ff502c;
     font-size: 0.87em;
     padding: 0.065em 0.4em;
@@ -88,26 +103,31 @@ $line-space: 22px;
     position: relative;
     line-height: 1.75;
 
-    >code {
+    > code {
       font-size: 12px;
       padding: 15px 12px;
       margin: 0;
       word-break: normal;
       display: block;
       overflow-x: auto;
-      color: #333;
-      background: #f8f8f8;
+      // color: #333;
+      color: var(--juejin-font-1);
+      // background: #f8f8f8;
+      background: var(--juejin-layer-2-1);
     }
   }
 
   a {
     text-decoration: none;
-    color: #0269c8;
-    border-bottom: 1px solid #d1e9ff;
+    // color: #0269c8;
+    color: var(--juejin-font-brand1-normal);
+    // border-bottom: 1px solid #d1e9ff;
+    border-bottom: 1px solid var(--juejin-gray-1-1);
 
     &:hover,
     &:active {
-      color: #275b8c;
+      // color: #275b8c;
+      color: var(--juejin-font-brand2-hover);
     }
   }
 
@@ -117,17 +137,21 @@ $line-space: 22px;
     width: auto;
     max-width: 100%;
     overflow: auto;
-    border: solid 1px #f6f6f6;
+    // border: solid 1px #f6f6f6;
+    border: solid 1px var(--juejin-gray-1-2);
   }
 
   thead {
-    background: #f6f6f6;
-    color: #000;
+    // background: #f6f6f6;
+    background: var(--juejin-layer-2-1);
+    // color: #000;
+    color: var(--juejin-font-1);
     text-align: left;
   }
 
   tr:nth-child(2n) {
-    background-color: #fcfcfc;
+    // background-color: #fcfcfc;
+    background-color: var(--juejin-layer-2-plugin);
   }
 
   th,
@@ -141,18 +165,21 @@ $line-space: 22px;
   }
 
   blockquote {
-    color: #666;
+    // color: #666;
+    color: var(--juejin-font-2);
     padding: 1px 23px;
     margin: 22px 0;
-    border-left: 4px solid #cbcbcb;
-    background-color: #f8f8f8;
+    // border-left: 4px solid #cbcbcb;
+    border-left: 4px solid var(--juejin-gray-1-2);
+    // background-color: #f8f8f8;
+    background-color: var(--juejin-layer-2-1);
 
     &::after {
       display: block;
-      content: '';
+      content: "";
     }
 
-    &>p {
+    & > p {
       margin: 10px 0;
     }
   }
@@ -198,4 +225,4 @@ $line-space: 22px;
       font-size: 18px;
     }
   }
-}
\ No newline at end of file
+}
diff --git a/mixin.scss b/mixin.scss
new file mode 100644
index 0000000..c9bd9dc
--- /dev/null
+++ b/mixin.scss
@@ -0,0 +1,11 @@
+@mixin theme($name: "") {
+  @if $name == "" {
+    body {
+      @content;
+    }
+  } @else {
+    body[data-theme="#{$name}"] {
+      @content;
+    }
+  }
+}
diff --git a/views/index.html b/views/index.html
index 2463351..57d7f4b 100644
--- a/views/index.html
+++ b/views/index.html
@@ -1,59 +1,56 @@
 <!DOCTYPE html>
 <html lang="zh">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="./index.css" />
+    <link rel="stylesheet" href="./juejin.css" />
+    <title>预览 掘金 markdown 主题</title>
+    <script src="/socket.io/socket.io.js"></script>
+  </head>
 
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <link rel="stylesheet" href="./index.css">
-  <link rel="stylesheet" href="./juejin.css">
-  <title>预览 掘金 markdown 主题</title>
-  <script src="/socket.io/socket.io.js"></script>
-</head>
-
-<body>
-  <div class="main-area article-area">
-    <article class="article">
-      <div class="article-content">
-        <div class="main-area">
-          <article class="markdown-body">
-            <%-data%>
-          </article>
+  <body>
+    <div class="main-area article-area">
+      <article class="article">
+        <div class="article-content">
+          <div class="main-area">
+            <article class="markdown-body"><%-data%></article>
+          </div>
         </div>
-      </div>
-    </article>
-  </div>
-  <div class="switch-mode">
-    <input type="checkbox" id="toggle-mode" class="toggle-mode" hidden />
-    <label class="toggle-mode-btn" for="toggle-mode"></label>
-  </div>
-</body>
-<script defer>
-  io('ws://localhost:3000').on('reload', () => {
-    window.location.reload();
-  });
+      </article>
+    </div>
+    <div class="switch-mode">
+      <input type="checkbox" id="toggle-mode" class="toggle-mode" hidden />
+      <label class="toggle-mode-btn" for="toggle-mode"></label>
+    </div>
+  </body>
+  <script defer>
+    io("ws://localhost:3000").on("reload", () => {
+      window.location.reload();
+    });
 
-  const htmlEL = document.querySelector('html');
-  const mdBody = document.querySelector('.markdown-body');
-  const toggleMode = document.querySelector('.toggle-mode');
+    const htmlEL = document.querySelector("html");
+    const mdBody = document.querySelector(".markdown-body");
+    const toggleMode = document.querySelector(".toggle-mode");
 
-  const isDark = window.sessionStorage.getItem('switch-mode');
-  
-  if (!isDark) {
-    window.sessionStorage.setItem('switch-mode', toggleMode.checked);
-    console.log('深色模式为 juejin-theme-devtool 作者私有实现，非官方支持！');
-    console.log('深色模式切换的 chrome 插件目前正在开发中……');
-  } else {
-    const status = isDark === 'true' ? true : false;
-    htmlEL.classList.toggle('__dark', status);
-    mdBody.classList.toggle('__dark', status);
-    window.sessionStorage.setItem('switch-mode', status);
-  }
+    const isDark = window.sessionStorage.getItem("switch-mode");
 
-  toggleMode.addEventListener('change', () => {
-    htmlEL.classList.toggle('__dark', toggleMode.checked);
-    mdBody.classList.toggle('__dark', toggleMode.checked);
-    window.sessionStorage.setItem('switch-mode', toggleMode.checked);
-  });
-</script>
+    if (!isDark) {
+      window.sessionStorage.setItem("switch-mode", toggleMode.checked);
+      console.log("深色模式为 juejin-theme-devtool 作者私有实现，非官方支持！");
+      console.log("深色模式切换的 chrome 插件目前正在开发中……");
+    } else {
+      const status = isDark === "true" ? true : false;
+      // htmlEL.classList.toggle('__dark', status);
+      // mdBody.classList.toggle('__dark', status);
+      window.sessionStorage.setItem("switch-mode", status);
+    }
 
-</html>
\ No newline at end of file
+    toggleMode.addEventListener("change", () => {
+      document.body.setAttribute("data-theme", toggleMode.checked ? 'dark' : 'light');
+      // htmlEL.classList.toggle('__dark', toggleMode.checked);
+      // mdBody.classList.toggle('__dark', toggleMode.checked);
+      window.sessionStorage.setItem("switch-mode", toggleMode.checked);
+    });
+  </script>
+</html>