Test for therme-switcher

_includes/head.html

@@ -5,7 +5,7 @@
     <meta name="description" content="{{ site.description }}" />
     <meta name="keywords"  content="{{ site.keyword }}" />
     <meta name="theme-color" content="{{ site.chrome-tab-theme-color }}" />
-    
+
     <title>{% if page.title %}{{ page.title }} - {{ site.SEOTitle }}{% else %}{{ site.SEOTitle }}{% endif %}</title>
 
     <!-- Web App Manifest -->
@@ -16,7 +16,7 @@
 
     <!-- Safari Webpage Icon    by-BY -->
     <link rel="apple-touch-icon" href="{{ site.baseurl }}/img/favicon.ico">
-    
+
     <!-- Canonical URL -->
     <link rel="canonical" href="{{ page.url | replace:'index.html','' | prepend: site.baseurl | prepend: site.url }}">
 
@@ -25,7 +25,7 @@
 
     <!-- Custom CSS -->
     <link rel="stylesheet" href="{{ "/css/hux-blog.min.css" | prepend: site.baseurl }}">
-    
+
 
     <!-- Pygments Github CSS -->
     <link rel="stylesheet" href="{{ "/css/syntax.css" | prepend: site.baseurl }}">
@@ -36,7 +36,13 @@
     <link href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" type="text/css">
     <!-- 黑暗标记 -->
     <!-- Dark mode css -->
-    <link rel="stylesheet" href="{{ '/css/hux-blog.dark.css' | prepend: site.baseurl }}">
+    <!-- <link rel="stylesheet" href="{{ '/css/hux-blog.dark.css' | prepend: site.baseurl }}"> -->
+
+    <link rel="stylesheet" href="{{ '/css/hux-blog.css' | prepend: site.baseurl }}" id="light-theme">
+    <link rel="stylesheet" href="{{ '/css/hux-blog.dark.css' | prepend: site.baseurl }}" id="dark-theme">
+
+    <!-- CSS for therme-switch -->
+    <link rel="stylesheet" href="{{ '/css/switch.css' | prepend: site.baseurl }}">
 
     <!-- Hux Delete, sad but pending in China
     <link href='http://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
@@ -58,7 +64,7 @@
     <!-- No baidu -->
     <!-- https://github.com/lurongkai/anti-baidu -->
     <script type="text/javascript" src="https://cdn.jsdelivr.net/gh/lurongkai/anti-baidu/js/anti-baidu-latest.min.js" charset="UTF-8"></script>
-    
+
     <!-- Google AdSense -->
     <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-4199873870871130" crossorigin="anonymous"></script>
 

_layouts/page.html

@@ -19,6 +19,10 @@ <h1>{% if page.title %}{{ page.title }}{% else %}{{ site.title }}{% endif %}</h1
 
 <!-- Main Content -->
 <div class="container">
+
+  {% include therme-switch.html %}
+
+
 	<div class="row">
         {% if site.sidebar == false %}
 <!-- NO SIDEBAR -->
@@ -183,7 +187,7 @@ <h5><a href="{{'/tags/' | prepend: site.baseurl }}">FEATURED TAGS</a></h5>
                                 </a>
                             </li>
                             {% endif %}
-                            
+
                         </ul>
                         {% if site.email %}
                             <p>✉️ {{site.email}}</p>

_layouts/post.html

@@ -50,6 +50,10 @@ <h2 class="subheading">{{ page.subtitle }}</h2>
 <!-- Post Content -->
 <article>
     <div class="container">
+
+      {% include therme-switch.html %}
+
+
         <div class="row">
 
     <!-- Post Container -->
@@ -114,7 +118,7 @@ <h2 class="subheading">{{ page.subtitle }}</h2>
                 <!-- disqus 评论框 end -->
                 {% endif %}
 
-            </div>  
+            </div>
 
     <!-- Side Catalog Container -->
         {% if page.catalog %}
@@ -225,4 +229,4 @@ <h5>FRIENDS</h5>
         }
     }
 </style>
-{% endif %}
+{% endif %}

_layouts/therme-switch.html

@@ -0,0 +1,8 @@
+<!-- Checkbox for changing light/dark mode -->
+<div class="toggle-container">
+    <label class="switch">
+        <input type="checkbox" id="theme-toggle">
+        <span class="slider"></span>
+    </label>
+    <span class="toggle-label"> Dark Mode </span>
+</div>

_posts/2000-01-01-Modifications-of-This-Blog.md

@@ -27,3 +27,7 @@ This blog is developed based on [Qiubaiying](https://github.com/qiubaiying/qiuba
 ## Dark theme
 
 To make my blog more eye-friendly, I decided to change the theme to a dark theme. Introducing [css](https://github.com/upojzsb/upojzsb.github.io/commit/794f389fdc859d4674b4a58103c81971189f97ca) in [head.html](https://github.com/upojzsb/upojzsb.github.io/commit/a5b1edbace7fba25dcddc0a12e12ff9c4c035ddd) to achieve this effect.
+
+## Therme Change
+
+Support therme changing betweeen light mode and dark mode. Add a checkbox [therme-switch.html](.) with [switch.css](.), and include therme-switch.html in both [page.html](.) and [post.html](.), include switch.css in [head.html](.) and include both light-mode CSS and dark-mode CSS in [head.html](.)

css/switch.css

@@ -0,0 +1,68 @@
+/* switch.css */
+.toggle-container {
+    position: fixed;
+    top: 10px; /* Adjust the top spacing if needed */
+    left: 50%;
+    transform: translateX(-50%);
+    display: flex;
+    align-items: center;
+}
+
+.switch {
+    position: relative;
+    display: inline-block;
+    width: 50px;
+    height: 25px;
+    margin-right: 10px; /* Space between switch and label */
+}
+
+.switch input {
+    opacity: 0;
+    width: 0;
+    height: 0;
+}
+
+.slider {
+    position: absolute;
+    cursor: pointer;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: #ccc;
+    transition: .4s;
+    border-radius: 25px;
+}
+
+.slider:before {
+    position: absolute;
+    content: "";
+    height: 15px;
+    width: 15px;
+    border-radius: 50%;
+    left: 5px;
+    bottom: 5px;
+    background-color: white;
+    transition: .4s;
+}
+
+input:checked + .slider {
+    background-color: #2196F3;
+}
+
+input:checked + .slider:before {
+    transform: translateX(25px);
+}
+
+body.dark-mode .switch input:checked + .slider {
+    background-color: #2196F3;
+}
+
+body.dark-mode .switch input:checked + .slider:before {
+    transform: translateX(25px);
+}
+
+.toggle-label {
+    font-size: 16px;
+    color: #333;
+}