[update] color

AIboy996 · May 19, 2024 · 3f7dd9a · 3f7dd9a
1 parent d5ef32f
commit 3f7dd9a
Show file tree

Hide file tree

Showing 5 changed files with 27 additions and 15 deletions.
diff --git a/docs/About/index.en.md b/docs/About/index.en.md
@@ -51,7 +51,7 @@ Subscribe [RSS Link1](../feed_rss_updated.xml)(sorted in updated date) for lates
 
 Theme color changes:
 
-- Sun: <span style="background-color:#7e56c2;padding:5px;margin:3px;color:white;">deep purple</span>
+- Sun: <span style="background-color:#ab47bd;padding:5px;margin:3px;color:white;">purple</span>
 - Mon: <span style="background-color:#757575;padding:5px;margin:3px;color:white;">grey</span>
 - Tue: <span style="background-color:#546d78;padding:5px;margin:3px;color:white;">blue grey</span>
 - Sat: <span style="background-color:#009485;padding:5px;margin:3px;color:white;">teal</span>

diff --git a/docs/About/index.md b/docs/About/index.md
@@ -65,7 +65,7 @@ hide:
 ### 颜色彩蛋
 随着星期几的变化，本站的主题色会随之改变：
 
-- 周日：<span style="background-color:#7e56c2;padding:5px;margin:3px;color:white;">deep purple</span>
+- 周日：<span style="background-color:#ab47bd;padding:5px;margin:3px;color:white;">purple</span>
 - 周一：<span style="background-color:#757575;padding:5px;margin:3px;color:white;">grey</span>
 - 周二：<span style="background-color:#546d78;padding:5px;margin:3px;color:white;">blue grey</span>
 - 周三：<span style="background-color:#009485;padding:5px;margin:3px;color:white;">teal</span>

diff --git a/docs/assets/javascripts/color.js b/docs/assets/javascripts/color.js
@@ -1,23 +1,22 @@
-function changeColorByWeekday(){
-    var date=new Date();
+function changeColorByWeekday() {
+    var date = new Date();
     // 0-6代表周日到周六
-    var day=date.getDay();
-    var schemes=new Array("sun","mon","tues","wed","thur","fri","sat",);
-    var colors=new Array("deep purple","grey","blue grey","teal","indigo","pink","deep purple");
+    var day = date.getDay() + 1;
+    var schemes = new Array("placeholder", "sun", "mon", "tues", "wed", "thur", "fri", "sat");
+    var colors = new Array("white", "purple", "grey", "blue grey", "teal", "indigo", "pink", "deep-purple");
     if (document.body.getAttribute("data-md-color-scheme") != schemes[day]) {
         document.body.setAttribute("data-md-color-scheme", schemes[day]);
+        document.body.setAttribute("data-md-color-primary", colors[day]);
         var local_json = {
             'index': day,
             'color': {
-                "scheme":schemes[day],
-                "primary":colors[day],
-                "accent":"orange"
+                "scheme": schemes[day],
+                "primary": colors[day],
+                "accent": "orange"
             }
         };
         // 把更改存储到本地
         window.localStorage.setItem('/.__palette', JSON.stringify(local_json));
-        // 刷新页面
-        location.reload();
     }
 }
 

diff --git a/docs/assets/stylesheets/extra.css b/docs/assets/stylesheets/extra.css
@@ -1,3 +1,13 @@
+/* 添加颜色改变的过渡效果 */
+header.md-header {
+    transition: background-color 1s ease;
+}
+
+nav.md-tabs {
+    transition: background-color 1s ease;
+
+}
+
 /* termynal组件 */
 .termynal-comment {
     color: #4a968f;

diff --git a/mkdocs.yml b/mkdocs.yml
@@ -14,9 +14,12 @@ theme:
   name: material
   custom_dir: overrides
   logo: assets/images/summation.png
-  palette:  # 一周七天，六种颜色
+  palette:  # 一周七天不同颜色，白色占位
+    - scheme: placeholder
+      primary: white
+      accent: orange
     - scheme: sun
-      primary: deep purple
+      primary: purple
       accent: orange
     - scheme: mon
       primary: grey
@@ -34,7 +37,7 @@ theme:
       primary: pink
       accent: orange
     - scheme: sat
-      primary: deep purple
+      primary: deep-purple
       accent: orange
 
   features: