update

Author: MaxLHy0424

static/web/lightbox.js

@@ -1,4 +1,23 @@
 (function () {
+    // ===== 1. 新增：主题判断与初始化核心函数 =====
+    function getCurrentTheme() {
+        const savedTheme = localStorage.getItem("meek_theme");
+        // 手动设置为 light/dark 直接返回，auto/无设置则跟随系统
+        if (savedTheme === 'light' || savedTheme === 'dark') {
+            return savedTheme;
+        }
+        // 检测系统深色模式
+        return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+    }
+
+    function initTheme() {
+        const currentTheme = getCurrentTheme();
+        document.documentElement.setAttribute('data-theme', currentTheme);
+    }
+
+    // ===== 2. 初始化主题（先于样式创建）=====
+    initTheme();
+
     class Lightbox {
         constructor(options = {}) {
             this.options = Object.assign({
@@ -18,21 +37,41 @@
             this.preloadedImages = {};
             this.init();
         }
+
         init() {
             this.createStyles();
             this.createLightbox();
             this.bindEvents();
         }
+
         createStyles() {
             const style = document.createElement('style');
+            // ===== 关键修改：CSS 变量化 + 深浅色主题适配 =====
             style.textContent = `
+        /* 基础变量（浅色默认） */
+        :root {
+          --lb-overlay-bg: transparent;
+          --lb-button-bg: rgba(255, 255, 255, 0.8);
+          --lb-button-color: #333;
+          --lb-button-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+          --lb-image-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
+        }
+
+        /* 深色主题变量（覆盖默认值） */
+        :root[data-theme="dark"] {
+          --lb-button-bg: rgba(45, 51, 59, 0.8);
+          --lb-button-color: #adbac7;
+          --lb-button-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
+          --lb-image-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
+        }
+
         .lb-lightbox-overlay {
           position: fixed;
           top: 0;
           left: 0;
           width: 100%;
           height: 100%;
-          background-color: transparent;
+          background-color: var(--lb-overlay-bg);
           backdrop-filter: blur(5px);
           display: flex;
           justify-content: center;
@@ -42,10 +81,12 @@
           pointer-events: none;
           z-index: 10000;
         }
+
         .lb-lightbox-overlay.active {
           pointer-events: auto;
           opacity: 1;
         }
+
         .lb-lightbox-content-wrapper {
           position: relative;
           display: flex;
@@ -54,13 +95,15 @@
           width: 100%;
           height: 100%;
         }
+
         .lb-lightbox-container {
           width: 100%;
           height: 100%;
           position: relative;
           transition: transform ${this.options.animationDuration}ms cubic-bezier(0.25, 0.1, 0.25, 1);
           overflow: hidden;
         }
+
         .lb-lightbox-image-wrapper {
           display: flex;
           justify-content: center;
@@ -74,45 +117,52 @@
           bottom: 0;
           z-index: 1;
         }
+
         .lb-lightbox-image {
           max-width: 100%;
           max-height: 100%;
           height: auto;
           object-fit: contain;
           border-radius: 16px;
-          box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
+          box-shadow: var(--lb-image-shadow);
           transition: transform ${this.options.animationDuration}ms cubic-bezier(0.25, 0.1, 0.25, 1), opacity ${this.options.animationDuration}ms ease;
           opacity: 0;
         }
+
         .lb-lightbox-nav, .lb-lightbox-close {
           position: absolute;
-          background-color: rgba(255, 255, 255, 0.8);
-          color: #333;
+          background-color: var(--lb-button-bg);
+          color: var(--lb-button-color);
           border: none;
           border-radius: 50%;
           cursor: pointer;
-          box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+          box-shadow: var(--lb-button-shadow);
           width: 50px;
           height: 50px;
           font-size: 30px;
           z-index: 2;
           transition: transform 0.2s ease;
         }
+
         .lb-lightbox-nav:hover {
           transform: scale(1.1);
         }
+
         .lb-lightbox-prev {
           left: 20px;
           top: calc(50% - 25px);
         }
+
         .lb-lightbox-next {
           right: 20px;
           top: calc(50% - 25px);
         }
+
         .lb-lightbox-close {
           top: 20px;
           right: 20px;
         }
+
         @media (max-width: 768px) {
           .lb-lightbox-nav, .lb-lightbox-close {
             width: 40px;
@@ -123,6 +173,7 @@
       `;
             document.head.appendChild(style);
         }
+
         createLightbox() {
             this.overlay = document.createElement('div');
             this.overlay.className = 'lb-lightbox-overlay';
@@ -153,6 +204,7 @@
             document.body.appendChild(this.overlay);
             this.closeButton.addEventListener('click', this.close.bind(this));
         }
+
         bindEvents() {
             document.addEventListener('click', this.handleImageClick.bind(this), true);
             this.overlay.addEventListener('click', this.handleOverlayClick.bind(this));
@@ -165,6 +217,7 @@
             this.overlay.addEventListener('touchmove', this.handleTouchMove.bind(this));
             this.overlay.addEventListener('touchend', this.handleTouchEnd.bind(this));
         }
+
         handleImageClick(event) {
             const clickedImage = event.target.closest('img');
             if (clickedImage && !this.isOpen) {
@@ -175,11 +228,13 @@
                 this.open();
             }
         }
+
         handleOverlayClick(event) {
             if (event.target === this.overlay && this.options.closeOnOverlayClick) {
                 this.close();
             }
         }
+
         handleKeyDown(event) {
             if (!this.isOpen) return;
             switch (event.key) {
@@ -194,6 +249,7 @@
                     break;
             }
         }
+
         handleWheel(event) {
             event.preventDefault();
 
@@ -213,18 +269,22 @@
                 }, 50);
             }
         }
+
         handleTouchStart(event) {
             this.touchStartX = event.touches[0].clientX;
         }
+
         handleTouchMove(event) {
             this.touchEndX = event.touches[0].clientX;
         }
+
         handleTouchEnd() {
             const difference = this.touchStartX - this.touchEndX;
             if (Math.abs(difference) > 50) {
                 difference > 0 ? this.showNextImage() : this.showPreviousImage();
             }
         }
+
         open() {
             this.isOpen = true;
             this.overlay.classList.add('active');
@@ -234,6 +294,7 @@
                 this.options.onOpen();
             }
         }
+
         close() {
             document.body.style.overflow = '';
             this.overlay.classList.remove('active');
@@ -244,26 +305,30 @@
             }
             this.unbindEvents();
         }
+
         showPreviousImage() {
             if (this.currentIndex > 0) {
                 this.currentIndex--;
                 this.showImage(this.images[this.currentIndex].src);
                 this.resetButtonScale(this.prevButton);
             }
         }
+
         showNextImage() {
             if (this.currentIndex < this.images.length - 1) {
                 this.currentIndex++;
                 this.showImage(this.images[this.currentIndex].src);
                 this.resetButtonScale(this.nextButton);
             }
         }
+
         resetButtonScale(button) {
             button.style.transform = 'scale(1.1)';
             setTimeout(() => {
                 button.style.transform = 'scale(1)';
             }, 200);
         }
+
         showImage(imgSrc) {
             const newImage = new Image();
             newImage.src = imgSrc;
@@ -280,6 +345,7 @@
                 console.error('Failed to load image:', imgSrc);
             };
         }
+
         preloadImages() {
             const preloadNext = this.currentIndex + 1;
             const preloadPrev = this.currentIndex - 1;
@@ -292,12 +358,14 @@
                 this.preloadedImages[preloadPrev].src = this.images[preloadPrev].src;
             }
         }
+
         clearPreloadedImages() {
             Object.keys(this.preloadedImages).forEach(key => {
                 this.preloadedImages[key].src = '';
             });
             this.preloadedImages = {};
         }
+
         unbindEvents() {
             document.removeEventListener('click', this.handleImageClick.bind(this), true);
             this.overlay.removeEventListener('click', this.handleOverlayClick.bind(this));
@@ -311,10 +379,16 @@
             this.overlay.removeEventListener('touchend', this.handleTouchEnd.bind(this));
         }
     }
+
+    // ===== 3. 新增：监听系统主题变化（仅auto模式生效）=====
+    window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
+        if (localStorage.getItem("meek_theme") === 'auto') {
+            initTheme();
+        }
+    });
+
     window.Lightbox = Lightbox;
     document.addEventListener('DOMContentLoaded', () => {
         new Lightbox();
     });
-})();
-
-
+})();