🌛添加亮暗切换按钮，添加暗色背景

2024-09-28 23:42:29 +08:00
parent 93cbe5af74
commit df1d4a6e70
3 changed files with 57 additions and 1 deletions
--- a/.github/workflows/friend_circle_lite.yml
+++ b/.github/workflows/friend_circle_lite.yml
@@ -64,7 +64,7 @@ jobs:
    - name: Commit changes
      run: |
        mkdir pages
-        cp -r main ./static/index.html ./static/readme.md ./static/favicon.ico ./static/bg-light.webp all.json errors.json pages/
+        cp -r main ./static/index.html ./static/readme.md ./static/favicon.ico ./static/bg-light.webp ./static/bg-dark.webp all.json errors.json pages/
        cd pages
        git init
        git add .
--- a/static/bg-dark.webp
+++ b/static/bg-dark.webp
--- a/static/index.html
+++ b/static/index.html
@@ -27,6 +27,24 @@
        overflow-x: hidden;
        height: fit-content;
    }
+    #theme-toggle {
+        z-index: 1000;
+        position: fixed;
+        bottom: 20px;
+        right: 20px;
+        width: 90px;
+        height: 30px;
+        background-color: #007BFF;
+        color: white;
+        border: none;
+        border-radius: 20px;
+        font-size: 16px;
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+    }
    .container {
        background: rgba(255, 255, 255, 0.8);
        display: flex;
@@ -122,6 +140,35 @@
            opacity: 1;
        }
    }
+
+    /* 暗色模式样式 */
+[data-theme="dark"] body {
+    background-image: url('./bg-dark.webp');
+    color: #ffffff;
+}
+
+[data-theme="dark"] .container {
+    background: rgba(30, 30, 30, 0.8);
+}
+
+[data-theme="dark"] p {
+    color: #cccccc;
+}
+
+[data-theme="dark"] .button {
+    background-color: #333333;
+    border: 2px solid #007BFF;
+    color: #007BFF;
+}
+
+[data-theme="dark"] .button:hover {
+    background-color: #007BFF;
+    color: white;
+}
+
+[data-theme="dark"] .scroll-down-icon {
+    color: #007BFF;
+}
 </style>

 <body>
@@ -137,6 +184,7 @@
    <div class="root-container">
        <div id="friend-circle-lite-root"></div>
    </div>
+    <button id="theme-toggle">暗色模式</button>
 <script>
    if (typeof UserConfig === 'undefined') {
        var UserConfig = {
@@ -156,6 +204,14 @@
        event.preventDefault();
        targetElement.scrollIntoView({ behavior: 'smooth' });
    });
+
+    const button = document.getElementById('theme-toggle');
+    button.addEventListener('click', () => {
+        const currentTheme = document.documentElement.getAttribute('data-theme');
+        const newTheme = currentTheme === 'light' ? 'dark' : 'light';
+        document.documentElement.setAttribute('data-theme', newTheme);
+        button.textContent = newTheme === 'light' ? '暗色模式' : '亮色模式';
+    });
 </script>
 <link rel="stylesheet" href="./main/fclite.css">
 <script src="./main/fclite.js"></script>