feat: 新增标准切换样式逻辑

- 切换按钮更新为 input:checkbox
- 切换事件变更为 click -> checked
- 新增深色模式所需class
- 新增运行提示信息

jjsm.js

@@ -1,4 +1,12 @@
 #!/usr/bin/env node
 
+const {version, description, author, bugs} = require('./package.json')
+
+console.log(`\x1b[1;32m${description} v${version}\x1b[0m`);
+console.log('作者', `林小帅（${author}）\n`);
+console.log('如有使用问题 Issues ->', `\x1b[34m${bugs.url}\x1b[0m`);
+console.log('深色模式为 juejin-theme-devtool 作者私有实现，非官方支持！');
+console.log('深色模式切换的 chrome 插件目前正在开发中……\n');
+
 const viewServer = require('./tools/server.js');
 viewServer.run(process.argv.slice(2));

package.json

@@ -1,6 +1,6 @@
 {
   "name": "juejin-theme-devtool",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "author": "Lin.xs",
   "license": "ISC",
   "description": "掘金 markdown 主题开发工具",

static/index.css

@@ -40,14 +40,40 @@ html {
   overflow: hidden;
 }
 
-.change-style {
+/* 模式按钮切换样式 */
+.switch-mode {
   position: fixed;
   top: 10px;
   right: 10px;
+  z-index: 9999;
+}
+
+.switch-mode .toggle-mode-btn {
+  display: block;
   padding: 4px 6px;
-  background: #fff;
-  border: 1px solid;
+  background-color: #fff;
+  border: 1px solid #000;
   border-radius: 6px;
   cursor: pointer;
-  z-index: 9999;
+}
+
+.switch-mode .toggle-mode-btn::before {
+  content: '深色模式';
+}
+
+.switch-mode .toggle-mode:checked + .toggle-mode-btn::before {
+  content: '光亮模式';
+}
+
+/* 深色模式 */
+html.__dark {
+  color-scheme: dark;
+}
+
+.__dark {
+  background-color: #111;
+}
+
+.__dark .main-area > * {
+  background-color: #2f2f2f;
 }

views/index.html

@@ -22,25 +22,38 @@
       </div>
     </article>
   </div>
-  <div class="change-style">
-    光亮模式
+  <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 elRoot = document.querySelector('html');
-  const csel = document.querySelector('.change-style');
+  const htmlEL = document.querySelector('html');
+  const mdBody = document.querySelector('.markdown-body');
+  const toggleMode = document.querySelector('.toggle-mode');
 
-  let isDark = false;
-  const chageElClass = () => {
-    isDark = !isDark;
-    elRoot.classList.toggle('__dark', isDark);
-    csel.innerText = isDark ? "深色模式" : "光亮模式";
-  };
-  csel.addEventListener('click', chageElClass);
+  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);
+  }
+
+  toggleMode.addEventListener('change', () => {
+    htmlEL.classList.toggle('__dark', toggleMode.checked);
+    mdBody.classList.toggle('__dark', toggleMode.checked);
+    window.sessionStorage.setItem('switch-mode', toggleMode.checked);
+  });
 </script>
 
 </html>