添加暗黑主题支持，抽离 CSS 变量以简化主题样式管理，优化加载动画逻辑，完善主题切换功能。

Author: ForteScarlet

composeApp/build.gradle.kts

@@ -16,12 +16,12 @@ repositories {
     }
     google()
     mavenCentral()
-    maven {
-        url = rootDir.resolve("libs").toURI()
-        mavenContent {
-            includeGroup("com.squareup")
-        }
-    }
+//    maven {
+//        url = rootDir.resolve("libs").toURI()
+//        mavenContent {
+//            includeGroup("com.squareup")
+//        }
+//    }
 }
 
 // 刷新snapshot

composeApp/src/wasmJsMain/resources/loading.css

@@ -8,6 +8,26 @@
     --background-color: #fafafa;
     --text-color: #333;
     --shadow-color: rgba(0, 0, 0, 0.05);
+    --progress-bg-color: rgba(0, 0, 0, 0.05);
+    --info-text-color: rgba(0, 0, 0, 0.5);
+    --code-text-color: rgba(0, 0, 0, 0.4);
+    --tag-bg-color: rgba(74, 134, 232, 0.1);
+    --shine-gradient: rgba(255, 255, 255, 0.5);
+}
+
+/* Dark Theme Variables */
+:root.dark-theme {
+    --primary-color: #6ba3f5;
+    --secondary-color: #8bb5f0;
+    --accent-color: #a5c7f2;
+    --background-color: #1a1a1a;
+    --text-color: #e0e0e0;
+    --shadow-color: rgba(255, 255, 255, 0.05);
+    --progress-bg-color: rgba(255, 255, 255, 0.1);
+    --info-text-color: rgba(255, 255, 255, 0.7);
+    --code-text-color: rgba(255, 255, 255, 0.6);
+    --tag-bg-color: rgba(107, 163, 245, 0.2);
+    --shine-gradient: rgba(255, 255, 255, 0.3);
 }
 
 /* Loading Container */
@@ -194,7 +214,7 @@
 .progress-container {
     width: 320px;
     height: 4px;
-    background-color: rgba(0, 0, 0, 0.05);
+    background-color: var(--progress-bg-color);
     border-radius: 2px;
     margin: 40px auto 15px;
     overflow: hidden;
@@ -219,9 +239,9 @@
     width: 100%;
     height: 100%;
     background: linear-gradient(90deg,
-        rgba(255, 255, 255, 0) 0%,
-        rgba(255, 255, 255, 0.5) 50%,
-        rgba(255, 255, 255, 0) 100%);
+        transparent 0%,
+        var(--shine-gradient) 50%,
+        transparent 100%);
     transform: translateX(-100%);
     animation: shine 1.5s infinite;
 }
@@ -244,7 +264,7 @@
 /* Info Text */
 .info-text {
     font-size: 12px;
-    color: rgba(0, 0, 0, 0.5);
+    color: var(--info-text-color);
     text-align: center;
     max-width: 320px;
     line-height: 1.6;
@@ -254,7 +274,7 @@
 .code-animation {
     font-family: 'Courier New', monospace;
     font-size: 12px;
-    color: rgba(0, 0, 0, 0.4);
+    color: var(--code-text-color);
     text-align: center;
     margin-top: 20px;
     height: 16px;
@@ -296,7 +316,7 @@
 
 .tag {
     padding: 4px 10px;
-    background-color: rgba(74, 134, 232, 0.1);
+    background-color: var(--tag-bg-color);
     border-radius: 12px;
     font-size: 10px;
     color: var(--primary-color);
@@ -347,4 +367,4 @@
     top: 0;
     left: 0;
     overflow: hidden;
-}
+}

composeApp/src/wasmJsMain/resources/loading.js

@@ -93,6 +93,26 @@ function loadComposeScript() {
     });
 }
 
+// Theme detection and application
+function applyTheme() {
+    try {
+        const savedTheme = localStorage.getItem('simbot_codegen_theme_preference');
+        const isDarkTheme = savedTheme === 'DARK';
+        
+        if (isDarkTheme) {
+            document.documentElement.classList.add('dark-theme');
+        } else {
+            document.documentElement.classList.remove('dark-theme');
+        }
+        
+        console.log(`Applied theme: ${isDarkTheme ? 'DARK' : 'LIGHT'}`);
+    } catch (e) {
+        // Fallback to light theme on error
+        document.documentElement.classList.remove('dark-theme');
+        console.warn('Failed to load theme preference, using light theme as fallback');
+    }
+}
+
 // Main initialization function
 function initializeLoadingScreen() {
     const loadingContainer = document.getElementById('loading-container');
@@ -104,6 +124,9 @@ function initializeLoadingScreen() {
         return;
     }
 
+    // Apply theme before showing animations
+    applyTheme();
+    
     // Create optimized animations
     createFloatingParticles();
     const codeLineInterval = animateCodeLines();
@@ -182,4 +205,4 @@ if (document.readyState === 'loading') {
 } else {
     // DOM already loaded
     initializeLoadingScreen();
-}
+}