添加深色模式；任务栏样式微调

src/assets/css/index.css

@@ -19,6 +19,50 @@ a:hover {
   place-items: center;
 }
 
+/* 深色模式 */
+:root {
+  --color-mode: "light";
+  --color-dark: #141414;
+  --color-dark-alpha: rgba(0, 0, 0, 0.1);
+
+  --color-light: #efefef;
+  --color-light-alpha: rgba(255, 255, 255, 0.9);
+
+  --background: #efefef;
+  --text-color: #141414;
+  --button-background: var(--color-dark);
+  --button-color: var(--color-light);
+  --border-color: var(--color-dark-alpha);
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --color-mode: "dark";
+  }
+
+  :root:not([data-user-color-scheme]) {
+    --background: var(--color-dark);
+    --text-color: var(--color-light);
+    --button-background: var(--color-light);
+    --button-color: var(--color-dark);
+    --border-color: var(--color-light-alpha);
+  }
+}
+
+[data-user-color-scheme="dark"] {
+  --background: var(--color-dark);
+  --text-color: var(--color-light);
+  --button-background: var(--color-light-alpha);
+  --button-color: var(--color-dark);
+  --border-color: var(--color-light-alpha);
+}
+
+body {
+  background: var(--background);
+  color: var(--text-color);
+  transition: background 500ms ease-in-out, color 200ms ease;
+}
+
 /* 导航栏 */
 #header {
   width: 100%;
@@ -26,15 +70,16 @@ a:hover {
   position: fixed;
   top: 0;
   left: 0;
-  /* background-color: blue; */
+  background-color: var(--background);
   box-shadow: 0 0 5px #888;
+  overflow-y: hidden;
+  user-select: none;
 }
 
 #header-wapper {
   display: grid;
   height: 100%;
   margin: 0 6vw;
-  /* background-color: red; */
   grid-template-columns: 300px 1fr 300px;
 }
 
@@ -43,6 +88,10 @@ a:hover {
   margin: auto 0;
 }
 
+.header-logo-links a {
+  margin-left: 12px;
+}
+
 /* 正文 */
 #container {
   border: 1px solid #999;

src/assets/js/darkmode.js

@@ -0,0 +1,85 @@
+// refer: https://codepen.io/xgqfrms/pen/qBbdbbJ?editors=1010
+
+const STORAGE_KEY = 'user-color-scheme';
+const COLOR_MODE_KEY = '--color-mode';
+
+const modeToggleButton = document.querySelector('.js-mode-toggle');
+const modeToggleText = document.querySelector('.js-mode-toggle-text');
+
+/**
+ * Pass in a custom prop key and this function will return its
+ * computed value.
+ * A reduced version of this: https://andy-bell.design/wrote/get-css-custom-property-value-with-javascript/
+ */
+const getCSSCustomProp = (propKey) => {
+  let response = getComputedStyle(document.documentElement).getPropertyValue(propKey);
+
+  // Tidy up the string if there’s something to work with
+  if (response.length) {
+    response = response.replace(/\'|"/g, '').trim();
+  }
+
+  // Return the string response by default
+  return response;
+};
+
+/**
+ * Takes either a passed settings ('light'|'dark') or grabs that from localStorage.
+ * If it can’t find the setting in either, it tries to load the CSS color mode,
+ * controlled by the media query
+ */
+const applySetting = passedSetting => {
+  let currentSetting = passedSetting || localStorage.getItem(STORAGE_KEY);
+
+  if(currentSetting) {
+    document.documentElement.setAttribute('data-user-color-scheme', currentSetting);
+    setButtonLabelAndStatus(currentSetting);
+  }
+  else {
+    setButtonLabelAndStatus(getCSSCustomProp(COLOR_MODE_KEY));
+  }
+}
+
+/**
+ * Get’s the current setting > reverses it > stores it
+ */
+const toggleSetting = () => {
+  let currentSetting = localStorage.getItem(STORAGE_KEY);
+
+  switch(currentSetting) {
+    case null:
+      currentSetting = getCSSCustomProp(COLOR_MODE_KEY) === 'dark' ? 'light' : 'dark';
+      break;
+    case 'light':
+      currentSetting = 'dark';
+      break;
+    case 'dark':
+      currentSetting = 'light';
+      break;
+  }
+
+
+  localStorage.setItem(STORAGE_KEY, currentSetting);
+
+  return currentSetting;
+}
+
+/**
+ * A shared method for setting the button text label and visually hidden status element
+ */
+const setButtonLabelAndStatus = currentSetting => {
+  modeToggleText.innerText = `${currentSetting === 'dark' ? 'Light' : 'Dark'}`;
+//   modeStatusElement.innerText = `Color mode is now "${currentSetting}"`;
+}
+
+/**
+ * Clicking the button runs the apply setting method which grabs its parameter
+ * from the toggle setting method.
+ */
+modeToggleButton.addEventListener('click', evt => {
+  evt.preventDefault();
+
+  applySetting(toggleSetting());
+});
+
+applySetting();

src/assets/js/header.js

@@ -2,7 +2,6 @@ function drawNavbar() {
     function createElement(json) {
         if (!json || json.length === 0)
             return null
-        console.log(1)
         var fr = document.createDocumentFragment()
         // var elList = []
         for (let i = 0; i < json.length; i++) {
@@ -70,6 +69,19 @@ function drawNavbar() {
                             },
                             "innerHTML": "B站"
                         },
+                        {
+                            "tagName": "a",
+                            "attr": {
+                                "class": "js-mode-toggle js-mode-toggle-text",
+                                "style": `line-height: 60px;
+                                            background: var(--button-icon);
+                                            background-size: contain;
+                                            background-repeat: no-repeat;
+                                            background-position: center;`,
+                                "href": "javascript:void(0)",
+                            },
+                            "innerHTML": "Dark"
+                        },
                     ]
                 },
             ]

src/index.html

@@ -165,6 +165,9 @@
     <!-- 主script -->
     <!-- <script src="./assets/js/index.js"></script> -->
 
+    <!-- 深色模式 -->
+    <script src="./assets/js/darkmode.js"></script>
+
     <!-- 算法测试 -->
     <!-- <script src="./assets/js/algorithm/test.js"></script> -->
 </body>