added：昼夜模式，毛玻璃特效

content/about.md

@@ -12,6 +12,54 @@ draft: false  # 如果你准备好了，可以将其设置为 false
 
 目前居住在湖北武汉，未来计划定居江苏南京
 
+<section class="skills-section">
+  <div class="section-title">02 / 技能展示</div>
+  <div class="skills-container">
+    <div class="skills-row">
+      <div class="skills-track">
+        <span class="skill-tag">工程造价</span>
+        <span class="skill-tag">成本咨询</span>
+        <span class="skill-tag">项目管理</span>
+        <span class="skill-tag">预算编制</span>
+        <span class="skill-tag">结算编制</span>
+        <span class="skill-tag">工程造价</span>
+        <span class="skill-tag">成本咨询</span>
+        <span class="skill-tag">项目管理</span>
+        <span class="skill-tag">预算编制</span>
+        <span class="skill-tag">结算编制</span>
+      </div>
+    </div>
+    <div class="skills-row">
+      <div class="skills-track skills-track-reverse">
+        <span class="skill-tag">广联达计价</span>
+        <span class="skill-tag">福莱一点通</span>
+        <span class="skill-tag">新点计价</span>
+        <span class="skill-tag">AutoCAD</span>
+        <span class="skill-tag">BIM建模</span>
+        <span class="skill-tag">广联达计价</span>
+        <span class="skill-tag">福莱一点通</span>
+        <span class="skill-tag">新点计价</span>
+        <span class="skill-tag">AutoCAD</span>
+        <span class="skill-tag">BIM建模</span>
+      </div>
+    </div>
+    <div class="skills-row">
+      <div class="skills-track">
+        <span class="skill-tag">清单计价</span>
+        <span class="skill-tag">定额套用</span>
+        <span class="skill-tag">工程审计</span>
+        <span class="skill-tag">成本分析</span>
+        <span class="skill-tag">投标报价</span>
+        <span class="skill-tag">清单计价</span>
+        <span class="skill-tag">定额套用</span>
+        <span class="skill-tag">工程审计</span>
+        <span class="skill-tag">成本分析</span>
+        <span class="skill-tag">投标报价</span>
+      </div>
+    </div>
+  </div>
+</section>
+
 ## 博客简介：
 
 博客框架：Hugo（https://gohugo.io）

themes/Ying/layouts/_default/new-links-lite.html

@@ -7,7 +7,7 @@
         }
 
         .links a {
-            color: #000;
+            color: var(--link-color-light);
             font-weight: 500;
             text-decoration: none;
         }
@@ -54,6 +54,19 @@
             opacity: 0.5;
             /* 鼠标悬浮时可以改变不透明度 */
         }
+
+        [data-theme="dark"] .links a {
+            color: var(--link-color-dark);
+        }
+
+        [data-theme="dark"] .url-name::before {
+            background-color: #e5e7eb;
+            opacity: 0.18;
+        }
+
+        [data-theme="dark"] .url-name:hover::before {
+            opacity: 0.35;
+        }
     </style>
     <div class="post-content" itemprop="articleBody">
         <div class="links">
@@ -66,4 +79,4 @@
         </div>
     </div>
 </div>
-{{ end }}
+{{ end }}

themes/Ying/layouts/partials/artalk.html

@@ -11,6 +11,10 @@
             background: #ff6262 !important;
         }
     }
+    [data-theme="dark"] .atk-pinned-badge {
+        color: #ffffff !important;
+        background: #ff6262 !important;
+    }
 </style>
 <!-- Artalk -->
 <div id="Comments" uk-scrollspy="target: div,span,img> ; cls: uk-animation-slide-bottom-small;"></div>
@@ -18,11 +22,13 @@
 <script src="/js/Artalk.js"></script>
 <script>
   if (document.querySelector("#Comments")) {
+    var isDark = document.documentElement.getAttribute('data-theme') === 'dark';
     Artalk.init({
-      el: '#Comments',                // 绑定元素的 Selector
-      server: 'https://artalk.usj.cc',  // 后端地址
-      site: '优世界',             // 你的站点名
-      flatMode: true
-    })
+      el: '#Comments',
+      server: 'https://artalk.usj.cc',
+      site: '优世界',
+      flatMode: true,
+      darkMode: isDark
+    });
   }
-</script>
+</script>

themes/Ying/layouts/partials/head.html

@@ -6,6 +6,21 @@
   <link rel="alternate" type="application/rss+xml" title="{{ site.Title }}" href="/rss.xml">
   <!-- Favicon -->
   <link rel="icon" type="image/x-icon" href="/favicon.ico">
+  <script>
+    (function () {
+      try {
+        var theme = localStorage.getItem('theme');
+        if (!theme) {
+          if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+            theme = 'dark';
+          } else {
+            theme = 'light';
+          }
+        }
+        document.documentElement.setAttribute('data-theme', theme);
+      } catch (e) {}
+    })();
+  </script>
   <!-- Stylesheets -->
   <link rel='stylesheet' href='/css/main.css'>
   <link rel="stylesheet" href="/css/normalize.css">
@@ -127,4 +142,4 @@
   <script>console.log("\n %c Amigo Theme %c https://usj.cc \n", "color: #fadfa3; background: #030307; padding:3px; font-size:12px;", "color: #ffffff;background: #16171a; padding: 3px; font-size: 12px;");</script>
   <meta name="keywords" content="大学,教程,blog,优世界,优设计,博客,大学生博客,生活,文案," />
   <meta name="template" content="Amigo" />
-</head>
+</head>

themes/Ying/layouts/partials/header.html

@@ -1,21 +1,26 @@
 <div class="main">
     <div class="container">
         <div class="header">
-            <div class="head_author_img load-memos-editor">
-                <img src="{{ .Site.Params.authorImage }}" class="blog-img" width="80" height="80" alt="{{ .Site.Title }}" />
-            </div>
-            <div class="site-description">
-                <h2><span class="uk-invisible">{{ .Site.Params.description }}</span></h2>
-                <nav class="nav social uk-visible@m">
-                    <ul class="flat">
-                        {{ with .Site.Params.social }}
-                            {{ range . }}
-                                <a href="{{ .url }}" title="{{ .title }}" target="_blank"><i class="{{ .icon }}"></i></a>
+            <div class="header-top">
+                <div class="head_author_img load-memos-editor">
+                    <img src="{{ .Site.Params.authorImage }}" class="blog-img" width="80" height="80" alt="{{ .Site.Title }}" />
+                    <div class="avatar-theme-tip">
+                        点击头像切换昼夜
+                    </div>
+                </div>
+                <div class="site-description">
+                    <h2><span class="uk-invisible">{{ .Site.Params.description }}</span></h2>
+                    <nav class="nav social uk-visible@m">
+                        <ul class="flat">
+                            {{ with .Site.Params.social }}
+                                {{ range . }}
+                                    <a href="{{ .url }}" title="{{ .title }}" target="_blank"><i class="{{ .icon }}"></i></a>
+                                {{ end }}
                             {{ end }}
-                        {{ end }}
-                    </ul>
-                    <div class="yiyandes">{{ .Site.Params.description }}</div>
-                </nav>
+                        </ul>
+                        <div class="yiyandes">{{ .Site.Params.description }}</div>
+                    </nav>
+                </div>
             </div>
             <nav class="nav">
                 <ul class="flat">
@@ -27,4 +32,4 @@
                     <!--<li class="active"><a href="/circles/">友圈</a></li>-->
                 </ul>
             </nav>
-        </div>
+        </div>

themes/Ying/layouts/shortcodes/heatmap.html

@@ -1,13 +1,20 @@
 <div id="heatmap" class="uk-visible@m" style="max-width: 700px;height: 110px;margin-bottom: 40px;"></div>
 <script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/echarts/5.3.0-rc.1/echarts.min.js"></script>
 <script type="text/javascript">
-  var chartDom = document.getElementById('heatmap');
-  var myChart = echarts.init(chartDom);
-  window.onresize = function() {
+  function renderHeatmap() {
+    if (!window.echarts) return;
+    var chartDom = document.getElementById('heatmap');
+    if (!chartDom) return;
+    var existing = echarts.getInstanceByDom(chartDom);
+    if (existing) {
+      existing.dispose();
+    }
+    var myChart = echarts.init(chartDom);
+    window.addEventListener('resize', function() {
       myChart.resize();
-  };
-  var option;
-  var dataMap = new Map();
+    });
+    var option;
+    var dataMap = new Map();
   {{ range ((where .Site.RegularPages "Type" "post")) }}
     var key = {{ .Date.Format "2006-01-02" }};
     var value = dataMap.get(key);
@@ -22,121 +29,119 @@
     }
   {{- end -}}
 
-  var data = [];
-  for (const [key, value] of dataMap.entries()) {
-    data.push([key, value.length]);
+    var data = [];
+    for (const [key, value] of dataMap.entries()) {
+      data.push([key, value.length]);
+    }
+
+    var startDate = new Date()
+    var year_Mill = startDate.setFullYear((startDate.getFullYear() - 1));
+    var startDate = +new Date(year_Mill);
+    var endDate = +new Date()
+
+    startDate = echarts.format.formatTime('yyyy-MM-dd', startDate);
+    endDate = echarts.format.formatTime('yyyy-MM-dd', endDate);
+    
+    var prefersDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
+
+    var lightTheme = {
+        backgroundColor: '#FFFFFF',
+        fangkuaicolor:'#F4F4F4',
+        gaoliangcolor: ['#333'],
+        riqiColor: '#999',
+        textbrcolor: '#FFF',
+        xiankuangcolor:'rgba(0, 0, 0, 0.0)',
+    };
+
+    var darkTheme = {
+        backgroundColor: '#FFFFFF',
+        fangkuaicolor:'#F4F4F4',
+        gaoliangcolor: ['#333'],
+        riqiColor: '#999',
+        textbrcolor: '#FFF',
+        xiankuangcolor:'rgba(0, 0, 0, 0.0)',
+    };
+
+    var currentTheme = prefersDarkMode ? darkTheme : lightTheme;
+
+    option = {
+      tooltip: {
+      hideDelay: 1000,
+      enterable: true,
+      backgroundColor: currentTheme.textbrcolor,
+      borderWidth: 0,
+      formatter: function (p) {
+          const date = p.data[0];
+          const posts = dataMap.get(date);
+          var content = `<span style="font-size: 0.75rem;font-family: var(--font-family-code);">${date}</span>`;
+          for (const [i, post] of posts.entries()) {
+              content += "<br>";          
+              var link = post.link;
+              var title = post.title;
+              content += `<a href="${link}" target="_blank">${title}</a>` + '<br>';
+          }
+          return content;
+          }
+      },
+      visualMap: {
+          show: false,
+          inRange: {   
+            color: currentTheme.gaoliangcolor
+          },
+      },
+      calendar: {
+          left: 20,
+          top:20,
+          bottom:0,
+          right: 0,
+          cellSize: ['auto', 13],
+          range: [startDate, endDate],
+          itemStyle: {
+              color: currentTheme.fangkuaicolor,
+              borderWidth: 3.5,
+              borderColor: currentTheme.backgroundColor, 
+          },
+          yearLabel: { show: false },
+          monthLabel: { 
+          nameMap: ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12'],
+          textStyle: {
+              color: currentTheme.riqiColor,
+          }
+      },
+          dayLabel: {
+              firstDay: 1,
+              nameMap: ['日', '一', '', '三', '', '五', ''],
+              textStyle: {
+                  color: currentTheme.riqiColor
+              }
+          },
+          splitLine: {
+              lineStyle: {
+                  color: currentTheme.xiankuangcolor,
+              }
+          }
+      },
+      series: {
+          type: 'heatmap',
+          coordinateSystem: 'calendar',
+          data: data,
+      }
+    };
+    
+    myChart.setOption(option);
+    myChart.resize();
+    myChart.on('click', function(params) {
+      if (params.componentType === 'series') {
+        const post = dataMap.get(params.data[0])[0];
+        const link = window.location.origin + post.link;
+        window.open(link, '_blank').focus();
+      }
+    });
   }
 
-  var startDate = new Date()
-  var year_Mill = startDate.setFullYear((startDate.getFullYear() - 1));
-  var startDate = +new Date(year_Mill);
-  var endDate = +new Date()
-
-  startDate = echarts.format.formatTime('yyyy-MM-dd', startDate);
-  endDate = echarts.format.formatTime('yyyy-MM-dd', endDate);
-  
-  // 检测浏览器主题模式并选择颜色方案
-  var prefersDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
-
-  // 定义明亮模式下的颜色方案
-  var lightTheme = {
-      backgroundColor: '#FFFFFF',
-      fangkuaicolor:'#F4F4F4',
-      gaoliangcolor: ['#333'],
-      riqiColor: '#999',
-      textbrcolor: '#FFF',
-      xiankuangcolor:'rgba(0, 0, 0, 0.0)',
-  };
-
-  // 定义暗黑模式下的颜色方案
-  var darkTheme = {
-      // backgroundColor: '#1A1718',
-      // fangkuaicolor:'#282325',
-      // gaoliangcolor: ['#b25f2f'],
-      // riqiColor: '#666',
-      // textbrcolor: '#332D2F',
-      backgroundColor: '#FFFFFF',
-      fangkuaicolor:'#F4F4F4',
-      gaoliangcolor: ['#333'],
-      riqiColor: '#999',
-      textbrcolor: '#FFF',
-      xiankuangcolor:'rgba(0, 0, 0, 0.0)',
-  };
-
-  // 根据浏览器主题模式选择当前主题
-  var currentTheme = prefersDarkMode ? darkTheme : lightTheme;
-
-  option = {
-    tooltip: {
-    hideDelay: 1000,
-    enterable: true,
-    backgroundColor: currentTheme.textbrcolor,
-    borderWidth: 0, // 边框宽度为0
-    formatter: function (p) {
-        const date = p.data[0];
-        const posts = dataMap.get(date);
-        var content = `<span style="font-size: 0.75rem;font-family: var(--font-family-code);">${date}</span>`;
-        for (const [i, post] of posts.entries()) {
-            content += "<br>";          
-            var link = post.link;
-            var title = post.title;
-            content += `<a href="${link}" target="_blank">${title}</a>` + '<br>';
-        }
-        return content;
-        }
-    },
-    visualMap: {
-        show: false,
-        inRange: {   
-          color: currentTheme.gaoliangcolor
-        },
-    },
-    calendar: {
-        left: 20,
-        top:20,
-        bottom:0,
-        right: 0,
-        cellSize: ['auto', 13],
-        range: [startDate, endDate],
-        itemStyle: {
-            color: currentTheme.fangkuaicolor,
-            borderWidth: 3.5,
-            borderColor: currentTheme.backgroundColor, 
-        },
-        yearLabel: { show: false },
-        monthLabel: { 
-        nameMap: ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12'],
-        textStyle: {
-            color: currentTheme.riqiColor,
-        }
-    },
-        dayLabel: {
-            firstDay: 1,
-            nameMap: ['日', '一', '', '三', '', '五', ''],
-            textStyle: {
-                color: currentTheme.riqiColor
-            }
-        },
-        splitLine: {
-            lineStyle: {
-                color: currentTheme.xiankuangcolor,
-            }
-        }
-    },
-    series: {
-        type: 'heatmap',
-        coordinateSystem: 'calendar',
-        data: data,
-    }
-  };
-  
-  myChart.setOption(option);
-  myChart.on('click', function(params) {
-    if (params.componentType === 'series') {
-      // open the first post on the day
-      const post = dataMap.get(params.data[0])[0];
-      const link = window.location.origin + post.link;
-      window.open(link, '_blank').focus();
-    }
-});
-</script>
+  if (document.readyState === 'complete' || document.readyState === 'interactive') {
+    setTimeout(renderHeatmap, 0);
+  } else {
+    document.addEventListener('DOMContentLoaded', renderHeatmap);
+  }
+</script>

themes/Ying/static/css/main.css

@@ -13,18 +13,87 @@
 }
 
 @charset "UTF-8";:root {
-    --background-color: #fff;
-    --background-dark-color: #201d1e;
-    --text-content-color: #222;
-    --text-content-dark-color: #000000;
+    --background-color: #fafafa;
+    --background-dark-color: #020617;
+    --text-content-color: #24292e;
+    --text-content-dark-color: #d1d5db;
+    --text-title-color: #111827;
+    --text-title-dark-color: #e5e7eb;
     --text-highlight-color: #696565;
-    --frame-dark-color: #332D2F;
+    --frame-dark-color: #1f2933;
     --frame-color: #eee;
     --erji-color: #666;
-    --sanji-color: #999
-    /* artalk自定义颜色 */
+    --sanji-color: #999;
     --bankuai-color: #f6f6f6;
-    --text-highlight-color: #000;
+    --link-color-light: #374151;
+    --link-hover-color-light: #111827;
+    --link-color-dark: #e5e7eb;
+    --link-hover-color-dark: #d1d5db;
+    --card-shadow-light: 0 10px 20px 0 rgba(236, 236, 236, 0.86);
+    --card-shadow-dark: 0 18px 45px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(148, 163, 184, 0.45);
+}
+
+[data-theme="dark"] body {
+    color: var(--text-content-dark-color);
+    background-color: var(--background-dark-color);
+    background-image: none;
+}
+
+[data-theme="dark"] .main {
+    background: rgba(15, 23, 42, 0.94);
+    box-shadow: var(--card-shadow-dark);
+    backdrop-filter: blur(18px);
+    -webkit-backdrop-filter: blur(18px);
+}
+
+[data-theme="dark"] .header nav {
+    border-top-color: #1f2933;
+}
+
+[data-theme="dark"] .header nav ul.flat li a {
+    color: #9ca3af;
+}
+
+[data-theme="dark"] .header nav ul.flat li.active a {
+    color: #e5e7eb;
+}
+
+[data-theme="dark"] .meta {
+    color: #9ca3af;
+}
+
+[data-theme="dark"] .footer {
+    border-top-color: #1f2933;
+    color: #6b7280;
+}
+
+[data-theme="dark"] .post-content {
+    color: var(--text-content-dark-color);
+}
+
+.post-title {
+    color: var(--text-title-color);
+}
+
+[data-theme="dark"] .post-title {
+    color: var(--text-title-dark-color);
+}
+
+.theme-toggle-button {
+    border: none;
+    background: transparent;
+    cursor: pointer;
+    font-size: 14px;
+    padding: 4px 8px;
+    color: #586069;
+}
+
+.theme-toggle-button:focus {
+    outline: none;
+}
+
+[data-theme="dark"] .theme-toggle-button {
+    color: #e5e7eb;
 }
 
 ::-webkit-scrollbar {
@@ -50,10 +119,10 @@
 
 body {
     font-family: 'zql', serif;
-    color: #24292e;
+    color: var(--text-content-color);
     line-height: 1.6;
     font-size: 16px;
-    background: #fafafa;
+    background: var(--background-color);
     background-image: url('../image/bg.svg');
     background-image: url(https://usj.cc/usr/uploads/2023/06/3287615239.jpg);
     background-image:url(data:image/webp;base64,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 truncated
@@ -155,14 +224,23 @@ blockquote {
     word-break: break-all;
 }
 
-a,
-a:hover {
-    color: #24292e;
-    text-decoration: none
+a {
+    color: var(--link-color-light);
+    text-decoration: none;
+    transition: color 0.35s ease;
 }
 
 a:hover {
-    text-decoration: underline
+    color: var(--link-hover-color-light);
+    text-decoration: underline;
+}
+
+[data-theme="dark"] a {
+    color: var(--link-color-dark);
+}
+
+[data-theme="dark"] a:hover {
+    color: var(--link-hover-color-dark);
 }
 
 h1,
@@ -205,18 +283,84 @@ ul {
     overflow: hidden;
     margin: 60px auto;
     padding: 50px;
-    background: #ffffff;
-    box-shadow: 0 10px 20px 0 rgba(236, 236, 236, 0.86);
+    background: rgba(255, 255, 255, 0.82);
+    box-shadow: var(--card-shadow-light);
     border-radius: 8px;
     z-index: 10;
     position: relative;
     text-align: center;
-
+    backdrop-filter: blur(18px);
+    -webkit-backdrop-filter: blur(18px);
+    transition: background-color 0.35s ease, box-shadow 0.35s ease, color 0.35s ease, backdrop-filter 0.35s ease;
 }
 
 .header {
     margin-bottom: 10px;
     padding-bottom: 10px;
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    gap: 16px;
+}
+
+.header-top {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 16px;
+}
+
+.head_author_img {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-right: 16px;
+    padding: 0;
+    cursor: pointer;
+}
+
+.avatar-theme-tip {
+    margin-left: 10px;
+    padding: 4px 12px;
+    border-radius: 999px;
+    background: #111827;
+    color: #f9fafb;
+    font-size: 11px;
+    white-space: nowrap;
+    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.25);
+    opacity: 0;
+    transform: translateY(2px) scale(0.98);
+    transition: opacity 0.4s ease;
+}
+
+.avatar-theme-tip.is-visible {
+    opacity: 1;
+    animation: avatar-tip-float 2.2s ease-in-out infinite;
+}
+
+.avatar-theme-tip.is-hidden {
+    opacity: 0;
+    transform: translateY(-4px) scale(0.96);
+    animation: none;
+    pointer-events: none;
+}
+
+[data-theme="dark"] .avatar-theme-tip {
+    background: #f9fafb;
+    color: #111827;
+    box-shadow: 0 14px 36px rgba(0, 0, 0, 0.6);
+}
+
+@keyframes avatar-tip-float {
+    0% {
+        transform: translateY(2px) scale(0.98);
+    }
+    50% {
+        transform: translateY(-2px) scale(1);
+    }
+    100% {
+        transform: translateY(2px) scale(0.98);
+    }
 }
 
 .header h1,
@@ -230,10 +374,12 @@ ul {
 .header h2 {
     font-size: .9rem;
     line-height: 2rem;
+    margin-bottom: 0;
 }
 
 .header nav {
     border-top: 1px solid #f4f4f4;
+    transition: border-color 0.35s ease;
 }
 
 .header nav ul,
@@ -269,8 +415,10 @@ ul {
 
 .header .site-description {
     display: flex;
-    justify-content: space-between;
-    margin-top: -49px;
+    flex-direction: column;
+    justify-content: center;
+    align-items: flex-start;
+    margin-top: 0;
 }
 
 .header .site-description nav {
@@ -292,6 +440,39 @@ ul {
     color: #586069;
 }
 
+/* Pjax 页面切换过渡动画 */
+.js-Pjax-remove.pjax-leave.pjax-forward,
+.js-Pjax-remove.pjax-leave.pjax-backward {
+    animation: pjax-fade-out 0.22s ease-in forwards;
+}
+
+.js-Pjax-add.pjax-enter.pjax-forward,
+.js-Pjax-add.pjax-enter.pjax-backward {
+    animation: pjax-fade-in 0.22s ease-out forwards;
+}
+
+@keyframes pjax-fade-in {
+    from {
+        opacity: 0;
+        transform: translateY(10px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+@keyframes pjax-fade-out {
+    from {
+        opacity: 1;
+        transform: translateY(0);
+    }
+    to {
+        opacity: 0;
+        transform: translateY(-10px);
+    }
+}
+
 .section .section-header {
     font-size: 0.88rem;
     font-weight: 600;
@@ -349,6 +530,7 @@ ul {
     border-top: 1px solid #f4f4f4;
     padding-top: 10px;
     margin-top: 10px;
+    transition: color 0.35s ease, border-color 0.35s ease;
 }
 
 .highlight {
@@ -477,16 +659,28 @@ ul {
 
 #scrollUp {
     bottom: 50px;
-    right: 80px;
-    background: #f8f8f8;
+    right: 50px;
+    background: #ffffff;
     height: 40px;
     width: 40px;
     border-radius: 50%;
-    background-repeat: no-repeat;
-    background-image: url(../image/uptop.svg);
-    background-position: center center;
-    /* 将背景图像居中对齐 */
-    color: #fff;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 22px;
+    color: #111827;
+    text-decoration: none;
+    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.06);
+}
+
+#scrollUp::before {
+    content: "⇡";
+}
+
+[data-theme="dark"] #scrollUp {
+    background: rgba(15, 23, 42, 0.95);
+    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.55);
+    color: #e5e7eb;
 }
 
 /*美化框*/
@@ -533,7 +727,7 @@ ul {
     margin: 10px 0;
     padding: 15px 15px 15px 35px;
     /*border-radius: 5px;*/
-    box-shadow: 6px 0 12px -5px rgb(155, 170, 185), -6px 0 12px -5px rgba(177, 161, 207, 0);
+    box-shadow: 6px 0 14px -6px rgba(15, 23, 42, 0.85), -6px 0 14px -6px rgba(15, 23, 42, 0.55);
     background-image: radial-gradient(circle farthest-corner at 10% 20%, rgba(0, 0, 0, 1) 0%, rgba(64, 64, 64, 1) 90.2%);
 }
 
@@ -617,32 +811,58 @@ darkb-text:active {
 
 .link-title {
     text-align: center;
-    margin-top: 15px;
-    margin-bottom: 10px;
+    margin-top: 20px;
+    margin-bottom: 14px;
+}
+
+.link-title span {
+    display: inline-block;
+    margin-top: 6px;
+    margin-bottom: 6px;
+    font-size: 1.35rem;
+    font-weight: 650;
+    letter-spacing: 0.12em;
+    text-transform: none;
+    color: #4b5563;
+}
+
+[data-theme="dark"] .link-title span {
+    color: #e5e7eb;
 }
 
 h3.diy-h3 {
-    font-size: rem;
     cursor: pointer;
-    font-size: 1.2em;
+    font-size: 1.05rem;
     padding-left: 1px;
     margin-top: 0.5em;
     margin-bottom: 5px;
 }
 
 .a-archives {
-    margin-top: 10px;
+    margin-top: 6px;
     display: inline-block;
+    color: #374151;
+    font-size: 0.95rem;
 }
 
 .articles_date_time {
     padding: 3px 5px;
-    font-size: 12px;
+    font-size: 0.75rem;
     font-weight: 500;
     line-height: 1;
     background-color: rgba(52, 58, 64, .1);
     color: #324b64;
     margin-right: 5px;
+    border-radius: 999px;
+}
+
+[data-theme="dark"] .a-archives {
+    color: #e5e7eb;
+}
+
+[data-theme="dark"] .articles_date_time {
+    background-color: rgba(148, 163, 184, .25);
+    color: #e5e7eb;
 }
 
 /*友链*/
@@ -849,6 +1069,72 @@ label {
     color: #9e9e9e;
 }
 
+.skills-section {
+    margin-top: 2.5rem;
+}
+
+.section-title {
+    font-size: 0.9rem;
+    letter-spacing: 0.16em;
+    text-transform: uppercase;
+    color: #9ca3af;
+    margin-bottom: 1.25rem;
+}
+
+.skills-container {
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+    overflow: hidden;
+}
+
+.skills-row {
+    position: relative;
+    overflow: hidden;
+}
+
+.skills-track {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.75rem;
+    white-space: nowrap;
+    animation: skills-scroll 26s linear infinite;
+}
+
+.skills-track-reverse {
+    animation-direction: reverse;
+}
+
+.skill-tag {
+    display: inline-flex;
+    align-items: center;
+    padding: 0.35rem 0.9rem;
+    border-radius: 999px;
+    border: 1px solid rgba(148, 163, 184, 0.7);
+    background: rgba(255, 255, 255, 0.86);
+    font-size: 0.8rem;
+    color: #374151;
+}
+
+@keyframes skills-scroll {
+    0% {
+        transform: translateX(0);
+    }
+    100% {
+        transform: translateX(-50%);
+    }
+}
+
+[data-theme="dark"] .section-title {
+    color: #6b7280;
+}
+
+[data-theme="dark"] .skill-tag {
+    border-color: rgba(31, 41, 55, 0.85);
+    background: rgba(15, 23, 42, 0.96);
+    color: #e5e7eb;
+}
+
 textarea {
     width: 100%;
     overflow: auto;
@@ -1742,6 +2028,11 @@ input[type=submit] {
     fill: var(--gray-200);
 }
 
+[data-theme="dark"] canvas[data-zr-dom-id] {
+    filter: brightness(0.78) contrast(0.9) saturate(0.85);
+    transition: filter 0.35s ease;
+}
+
 /* 弹幕css */
 .barrage {
     display: -webkit-box;
@@ -1865,13 +2156,15 @@ input[type=submit] {
     bottom: auto!important
 }
 
+.artalk .atk-item.atk-nick,
 .atk-item.atk-nick {
     color: #000!important;
     font-weight: 700
 }
 
+.artalk .atk-item.atk-nick a,
 .atk-item.atk-nick a {
-    color: #999!important
+    color: #000!important
 }
 
 .atk-ua {
@@ -1907,6 +2200,12 @@ input[type=submit] {
     opacity: .7
 }
 
+[data-theme="dark"] .atk-send-btn {
+    background: rgba(15, 23, 42, 0.9) !important;
+    border-color: #4b5563 !important;
+    color: #e5e7eb !important;
+}
+
 .atk-list-header .atk-dropdown-wrap .atk-dropdown-item.active span,.atk-list-header .atk-dropdown-wrap .atk-dropdown-item span:hover {
     color: var(--text-highlight-color)!important
 }
@@ -1927,6 +2226,44 @@ input[type=submit] {
     margin-top: -4px!important
 }
 
+.artalk .atk-content p {
+    color: var(--text-content-color)!important;
+}
+
+[data-theme="dark"] .artalk .atk-content p {
+    color: var(--text-content-dark-color)!important;
+}
+
+.artalk .atk-main-editor input.atk-nick,
+.artalk .atk-main-editor input.atk-email,
+.artalk .atk-main-editor input.atk-link {
+    color: var(--text-content-color)!important;
+}
+
+[data-theme="dark"] .artalk .atk-main-editor input.atk-nick,
+[data-theme="dark"] .artalk .atk-main-editor input.atk-email,
+[data-theme="dark"] .artalk .atk-main-editor input.atk-link {
+    color: var(--text-content-dark-color)!important;
+}
+
+[data-theme="dark"] .atk-loading {
+    background-color: #111827!important;
+    border-radius: 8px;
+}
+
+[data-theme="dark"] .atk-loading-spinner svg circle {
+    stroke: #e5e7eb!important;
+}
+
+[data-theme="dark"] .uk-divider-icon {
+    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2020%2020%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Ccircle%20fill%3D%22none%22%20stroke%3D%22%236b7280%22%20stroke-width%3D%222%22%20cx%3D%2210%22%20cy%3D%2210%22%20r%3D%227%22%20%2F%3E%3C%2Fsvg%3E");
+}
+
+[data-theme="dark"] .uk-divider-icon::after,
+[data-theme="dark"] .uk-divider-icon::before {
+    border-bottom-color: #374151;
+}
+
 .atk-comment>.atk-main>.atk-body>.atk-content img {
     height: 2rem!important;
     box-shadow: 0 0 0 rgba(0, 0, 0, 0.2);
@@ -2017,8 +2354,7 @@ img[atk-emoticon] {
 
     .atk-main-editor {
         background: 0 0!important;
-        /*border: 1px solid var(--frame-dark-color)!important*/
-        border: 1px solid var(--frame-color)!important
+        border: 1px solid var(--frame-dark-color)!important
     }
 
     .atk-textarea {
@@ -2054,6 +2390,7 @@ img[atk-emoticon] {
         color: #666!important
     }
 
+    .artalk .atk-item.atk-nick,
     .atk-item.atk-nick {
         color: var(--text-content-dark-color)!important
     }
@@ -2071,6 +2408,7 @@ img[atk-emoticon] {
         color: #999!important
     }
 
+    .artalk .atk-item.atk-nick a,
     .atk-item.atk-nick a {
         color: #666!important
     }

themes/Ying/static/js/main.js

@@ -145,4 +145,72 @@ function flattenComments(comments) {
 // 调用异步的弹幕加载函数
 if (document.querySelector("#Comments") && !isMobile()) {
   loadBarrager()
-}
+}
+
+function getCurrentTheme() {
+  var theme = document.documentElement.getAttribute('data-theme');
+  if (!theme) {
+    theme = 'light';
+  }
+  return theme;
+}
+
+function applyTheme(theme) {
+  document.documentElement.setAttribute('data-theme', theme);
+  try {
+    localStorage.setItem('theme', theme);
+  } catch (e) {}
+}
+
+function updateThemeToggle(theme) {
+  var button = document.getElementById('theme-toggle');
+  if (theme === 'dark') {
+    if (button) {
+      button.textContent = '日间';
+    }
+  } else {
+    if (button) {
+      button.textContent = '夜间';
+    }
+  }
+}
+
+function toggleTheme() {
+  var current = getCurrentTheme();
+  var next = current === 'dark' ? 'light' : 'dark';
+  applyTheme(next);
+  updateThemeToggle(next);
+  if (window.Artalk && window.Artalk.get) {
+    try {
+      var ctx = Artalk.get('#Comments');
+      if (ctx && ctx.setDarkMode) {
+        ctx.setDarkMode(next === 'dark');
+      }
+    } catch (e) {}
+  }
+}
+
+document.addEventListener('DOMContentLoaded', function () {
+  var theme = getCurrentTheme();
+  updateThemeToggle(theme);
+  var button = document.getElementById('theme-toggle');
+  if (button) {
+    button.addEventListener('click', toggleTheme);
+  }
+  var avatarWrapper = document.querySelector('.head_author_img');
+  var avatarTip = document.querySelector('.avatar-theme-tip');
+  if (avatarWrapper) {
+    avatarWrapper.style.cursor = 'pointer';
+    avatarWrapper.addEventListener('click', toggleTheme);
+  }
+  if (avatarTip) {
+    avatarTip.classList.add('is-visible');
+    var hideOnce = function () {
+      avatarTip.classList.add('is-hidden');
+    };
+    setTimeout(hideOnce, 9000);
+    if (avatarWrapper) {
+      avatarWrapper.addEventListener('click', hideOnce);
+    }
+  }
+});

themes/Ying/static/js/mypjax.js

@@ -1,9 +1,22 @@
 // 定义pjax 预设pjax
 var pjax = new Pjax({
     // 这里填写页面中改变的部分（和 CSS 选择器用法一样）
-    selectors: ["#pjax-container","title"],
+    selectors: ["title", "#pjax-container"],
     cacheBust: false,
     elements: "a",
+    switches: {
+        "#pjax-container": Pjax.switches.sideBySide
+    },
+    switchesOptions: {
+        "#pjax-container": {
+            classNames: {
+                add: "pjax-enter",
+                remove: "pjax-leave",
+                backward: "pjax-backward",
+                forward: "pjax-forward"
+            }
+        }
+    }
 });
 // 设置图片灯箱回调函数
 function lazyimg_pjax() {