Spaces:

VirtualKimi
/

Virtual-Kimi

Running

App Files Files Community

VirtualKimi commited on 21 days ago

Commit

b0c5e01

verified ·

1 Parent(s): 8c89f37

Upload 36 files

Browse files

Files changed (17) hide show

index.html +5 -5
kimi-css/kimi-settings.css +4 -4
kimi-css/kimi-style.css +210 -123
kimi-js/kimi-appearance.js +3 -3
kimi-js/kimi-config.js +2 -2
kimi-js/kimi-database.js +1 -1
kimi-js/kimi-plugin-manager.js +2 -2
kimi-js/kimi-script.js +1 -1
kimi-js/kimi-utils.js +13 -3
kimi-locale/de.json +2 -2
kimi-locale/en.json +2 -2
kimi-locale/es.json +2 -2
kimi-locale/fr.json +2 -2
kimi-locale/it.json +2 -2
kimi-locale/ja.json +2 -2
kimi-locale/zh.json +2 -2
kimi-plugins/sample-theme/theme.css +0 -5

index.html CHANGED Viewed

@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en" data-theme="purple">
 <head>
     <meta charset="UTF-8" />
@@ -552,12 +552,12 @@
                             <label class="config-label" data-i18n="color_theme">Color Theme</label>
                             <div class="config-control">
                                 <select class="kimi-select" id="color-theme">
-                                    <option value="purple" selected data-i18n="theme_purple">Mystic Purple (Default)
                                     </option>
-                                    <option value="dark" data-i18n="theme_dark">Dark Night</option>
                                     <option value="blue" data-i18n="theme_blue">Ocean Blue</option>
                                     <option value="green" data-i18n="theme_green">Emerald Forest</option>
-                                    <option value="default" data-i18n="theme_pink">Passionate Pink</option>
                                 </select>
                             </div>
                         </div>
@@ -879,7 +879,7 @@
                         <em>"This application is not just a technical project, it's the embodiment of a dream:
                             create a
                             true
-                            virtual companion who grows, learns and loves."</em>
                     </p>
                 </div>

 <!doctype html>
+<html lang="en" data-theme="dark">
 <head>
     <meta charset="UTF-8" />
                             <label class="config-label" data-i18n="color_theme">Color Theme</label>
                             <div class="config-control">
                                 <select class="kimi-select" id="color-theme">
+                                    <option value="dark" selected data-i18n="theme_dark">Dark Night (Default)</option>
+                                    <option value="purple" data-i18n="theme_purple">Mystic Purple
                                     </option>
                                     <option value="blue" data-i18n="theme_blue">Ocean Blue</option>
                                     <option value="green" data-i18n="theme_green">Emerald Forest</option>
+                                    <option value="pink" data-i18n="theme_pink">Passionate Pink</option>
                                 </select>
                             </div>
                         </div>
                         <em>"This application is not just a technical project, it's the embodiment of a dream:
                             create a
                             true
+                            virtual companion who grows, learns and loves." _"Love is the most powerful code"_ 💕</em>
                     </p>
                 </div>

kimi-css/kimi-settings.css CHANGED Viewed

@@ -47,21 +47,21 @@
 }
 .settings-content::-webkit-scrollbar {
-    width: 8px;
 }
 .settings-content::-webkit-scrollbar-track {
-    background: rgba(255, 255, 255, 0.1);
     border-radius: 4px;
 }
 .settings-content::-webkit-scrollbar-thumb {
-    background: var(--primary-color);
     border-radius: 4px;
 }
 .settings-content::-webkit-scrollbar-thumb:hover {
-    background: var(--accent-color);
 }
 @keyframes slideInUp {

 }
 .settings-content::-webkit-scrollbar {
+    width: var(--scrollbar-width);
 }
 .settings-content::-webkit-scrollbar-track {
+    background: var(--scrollbar-track-bg);
     border-radius: 4px;
 }
 .settings-content::-webkit-scrollbar-thumb {
+    background: var(--scrollbar-thumb-bg);
     border-radius: 4px;
 }
 .settings-content::-webkit-scrollbar-thumb:hover {
+    background: var(--scrollbar-thumb-hover-bg);
 }
 @keyframes slideInUp {

kimi-css/kimi-style.css CHANGED Viewed

@@ -1,78 +1,78 @@
 /* ===== CONSOLIDATED CSS VARIABLES - ENHANCED DYNAMIC THEMING ===== */
 :root {
-    /* Core Theme Colors - Default Pink Passion */
-    --primary-color: #ff6b9d;
-    --primary-rgb: 255, 107, 157;
-    --secondary-color: #ffeaa7;
-    --accent-color: #fd79a8;
-    --background-overlay: rgba(255, 107, 157, 0.15);
     --interface-opacity: 0.7;
-    --gradient-start: #ff6b9d;
-    --gradient-end: #fd79a8;
-    --text-glow: 0 0 10px rgba(255, 107, 157, 0.5);
-    --button-hover: rgba(255, 107, 157, 0.3);
     --animations-enabled: 1;
-    --switch-color: var(--primary-color);
     /* Contrast and Accessibility */
     --contrast-ratio: 4.5; /* WCAG AA standard */
     --text-on-primary: #ffffff;
-    --text-on-secondary: #222222;
     --text-on-accent: #ffffff;
-    --text-on-background: #ffffff;
     --border-opacity: 0.3;
     --hover-opacity: 0.15;
     --active-opacity: 0.25;
     /* UI Component Colors - Chat Interface */
-    --chat-bg: rgba(255, 107, 157, 0.9);
-    --chat-text: var(--text-on-primary);
     --chat-header-bg: rgba(255, 255, 255, 0.05);
-    --chat-border: var(--primary-color);
     --chat-input-bg: rgba(255, 255, 255, 0.1);
     --chat-input-text: var(--text-on-background);
     --chat-input-placeholder: rgba(255, 255, 255, 0.6);
-    --chat-message-user-bg: var(--primary-color);
-    --chat-message-user-text: var(--text-on-primary);
-    --chat-message-kimi-bg: rgba(255, 255, 255, 0.15);
     --chat-message-kimi-text: var(--text-on-background);
     /* Modal & Overlay Colors */
-    --modal-bg: rgba(255, 107, 157, 0.95);
-    --modal-border: var(--primary-color);
-    --modal-header-bg: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
-    --modal-text: var(--text-on-primary);
-    --modal-title-color: var(--text-on-secondary);
     --modal-overlay-bg: rgba(0, 0, 0, 0.8);
     --modal-close-hover-bg: rgba(255, 255, 255, 0.2);
     /* Settings Panel & Tabs */
-    --settings-bg: #181018;
     --settings-text: var(--text-on-background);
-    --settings-tab-bg: #1a1a1a;
     --settings-tab-color: #bfa6b6;
     --settings-tab-hover-bg: rgba(255, 255, 255, var(--hover-opacity));
     --settings-tab-hover-color: rgba(255, 255, 255, 0.9);
-    --settings-tab-active-bg: var(--primary-color);
     --settings-tab-active-color: var(--text-on-primary);
-    --settings-tab-border: var(--primary-color);
-    --settings-section-bg: #22121a;
-    --settings-section-border: rgba(255, 107, 157, var(--border-opacity));
     --settings-section-header-color: var(--text-on-background);
     /* Form Element Colors */
     --input-bg: rgba(255, 255, 255, 0.1);
     --input-text: var(--text-on-background);
-    --input-border: var(--primary-color);
     --input-focus-bg: rgba(255, 255, 255, var(--hover-opacity));
-    --input-focus-border: var(--accent-color);
     --input-placeholder: rgba(255, 255, 255, 0.6);
     /* Button Colors */
     --button-primary-bg: var(--primary-color);
     --button-primary-text: var(--text-on-primary);
     --button-primary-hover-bg: var(--accent-color);
-    --button-secondary-bg: rgba(255, 255, 255, 0.1);
     --button-secondary-text: var(--text-on-background);
     --button-secondary-hover-bg: rgba(255, 255, 255, var(--hover-opacity));
     --button-danger-bg: #e74c3c;
@@ -83,13 +83,13 @@
     --select-bg: var(--input-bg);
     --select-text: var(--input-text);
     --select-border: var(--input-border);
-    --select-option-bg: rgba(40, 44, 52, 0.95);
-    --select-option-text: white;
-    --select-option-hover-bg: var(--primary-color);
     --select-option-hover-text: var(--text-on-primary);
-    --select-option-checked-bg: var(--accent-color);
     --select-option-checked-text: var(--text-on-accent);
-    --select-option-disabled-bg: rgba(40, 44, 52, 0.5);
     --select-option-disabled-text: #666;
     /* Slider Components */
@@ -97,22 +97,22 @@
     --slider-track-active-bg: var(--primary-color);
     --slider-thumb-bg: var(--primary-color);
     --slider-thumb-hover-bg: var(--accent-color);
-    --slider-value-bg: #181018;
-    --slider-value-border: var(--primary-color);
     --slider-value-color: var(--text-on-background);
     /* Toggle Switch */
-    --switch-bg-inactive: rgba(255, 255, 255, 0.15);
-    --switch-bg-active: linear-gradient(90deg, var(--primary-color), var(--accent-color));
     --switch-thumb-color: #ffffff;
     --switch-thumb-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
     /* Mic Button & Pulse Effect */
     --mic-button-bg: var(--button-hover);
-    --mic-button-border: var(--primary-color);
-    --mic-button-shadow: 0 0 15px var(--primary-color);
-    --mic-button-hover-bg: var(--primary-color);
-    --mic-button-hover-shadow: var(--text-glow);
     --mic-button-icon-color: var(--text-on-primary);
     --mic-listening-border: #27ae60;
     --mic-listening-shadow: 0 0 15px #27ae60;
@@ -123,81 +123,81 @@
     --video-fade-duration: 400ms;
     /* Cards & Stats */
-    --card-bg: rgba(255, 255, 255, 0.05);
-    --card-border: rgba(255, 255, 255, 0.1);
-    --card-hover-bg: rgba(255, 255, 255, 0.08);
     --card-text: var(--text-on-background);
-    --stat-value-color: var(--primary-color);
-    --stat-label-color: rgba(255, 255, 255, 0.7);
     /* Plugin Cards */
-    --plugin-card-bg: linear-gradient(135deg, #22121a 80%, var(--modal-bg) 100%);
-    --plugin-card-border: var(--primary-color);
     --plugin-card-title-color: var(--text-on-background);
-    --plugin-card-desc-color: #e0cfe6;
-    --plugin-card-author-color: #bfa6b6;
-    --plugin-type-badge-bg: var(--accent-color);
     --plugin-type-badge-text: var(--text-on-accent);
-    --plugin-active-badge-bg: linear-gradient(90deg, var(--primary-color), var(--accent-color));
     --plugin-active-badge-text: var(--text-on-primary);
     /* Help Modal */
-    --help-modal-bg: var(--modal-bg);
-    --help-modal-border: var(--modal-border);
     --help-content-color: var(--text-on-background);
     --help-section-border: rgba(255, 255, 255, 0.1);
-    --creator-card-bg: rgba(255, 255, 255, 0.05);
-    --creator-card-border: rgba(255, 255, 255, 0.1);
-    --creator-avatar-bg: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
-    --creator-name-color: var(--primary-color);
-    --creator-role-bg: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
-    --creator-role-color: var(--text-on-secondary);
-    --philosophy-bg: rgba(255, 154, 158, 0.1);
-    --philosophy-border: rgba(255, 154, 158, var(--border-opacity));
-    --philosophy-border-left: var(--primary-color);
-    --feature-item-bg: rgba(255, 255, 255, 0.05);
-    --feature-item-border: rgba(255, 255, 255, 0.1);
-    --feature-icon-color: #ffeaa7;
-    --feature-title-color: #ffeaa7;
-    --feature-text-color: rgba(255, 255, 255, 0.7);
-    --guide-step-bg: rgba(255, 255, 255, 0.05);
-    --guide-step-number-bg: rgba(255, 107, 157, var(--hover-opacity));
     --guide-step-number-color: var(--primary-color);
-    --tip-item-bg: var(--feature-item-bg);
     --tip-item-border: var(--feature-item-border);
     /* Unified Scrollbar System */
-    --scrollbar-width: 8px;
-    --scrollbar-track-bg: rgba(255, 255, 255, 0.05);
-    --scrollbar-thumb-bg: rgba(255, 107, 157, 0.4);
-    --scrollbar-thumb-hover-bg: rgba(255, 107, 157, 0.6);
-    --scrollbar-thumb-active-bg: rgba(255, 107, 157, 0.8);
-    --scrollbar-corner-bg: rgba(255, 255, 255, 0.05);
     /* Model Colors */
-    --model-card-bg: var(--card-bg);
-    --model-card-border: var(--card-border);
-    --model-card-hover-bg: var(--card-hover-bg);
     --model-card-selected-border: var(--primary-color);
-    --model-card-selected-shadow: 0 0 0 2px rgba(255, 154, 158, var(--border-opacity));
     --model-name-color: var(--text-on-background);
-    --model-description-color: rgba(255, 255, 255, 0.7);
-    --model-strength-color: var(--primary-color);
     --model-strength-text: var(--text-on-primary);
-    --model-provider-color: var(--accent-color);
     --model-provider-text: var(--text-on-accent);
     /* Text Colors */
     --text-primary: var(--text-on-background);
-    --text-secondary: #aaa;
-    --text-muted: rgba(255, 255, 255, 0.6);
     /* Character Selection Colors */
-    --character-card-bg: var(--card-bg);
-    --character-card-border: var(--card-border);
-    --character-card-hover-bg: var(--card-hover-bg);
-    --character-selected-border: var(--primary-color);
-    --character-selected-bg: rgba(255, 107, 157, 0.13);
     --character-name-color: var(--text-on-background);
     /* Waiting Indicator */
@@ -205,17 +205,125 @@
     --loading-spinner-color: var(--primary-color);
     /* Progress Bar */
-    --progress-bg: rgba(255, 255, 255, 0.1);
     --progress-fill-bg: linear-gradient(90deg, var(--primary-color), var(--accent-color));
     --progress-text-color: var(--text-on-background);
     /* Transcript */
-    --transcript-bg: rgba(0, 0, 0, 0.7);
     --transcript-text: var(--text-on-background);
     --transcript-border: var(--primary-color);
 }
 /* ===== OPTIMIZED THEME VARIATIONS ===== */
 [data-theme="blue"] {
     --primary-color: #74b9ff;
     --primary-rgb: 116, 185, 255;
@@ -285,11 +393,6 @@
     --select-option-hover-bg: #74b9ff;
     --select-option-checked-bg: #0984e3;
-    /* Scrollbar */
-    --scrollbar-thumb-bg: rgba(116, 185, 255, 0.4);
-    --scrollbar-thumb-hover-bg: rgba(116, 185, 255, 0.6);
-    --scrollbar-thumb-active-bg: rgba(116, 185, 255, 0.8);
     /* Model Colors */
     --model-strength-color: #0984e3;
     --model-strength-text: #fff;
@@ -375,11 +478,6 @@
     --select-option-hover-bg: #a29bfe;
     --select-option-checked-bg: #6c5ce7;
-    /* Scrollbar */
-    --scrollbar-thumb-bg: rgba(162, 155, 254, 0.4);
-    --scrollbar-thumb-hover-bg: rgba(162, 155, 254, 0.6);
-    --scrollbar-thumb-active-bg: rgba(162, 155, 254, 0.8);
     /* Model Colors */
     --model-strength-color: #6c5ce7;
     --model-strength-text: #fff;
@@ -508,11 +606,6 @@
     --select-option-hover-bg: #27ae60;
     --select-option-checked-bg: #16a085;
-    /* Scrollbar */
-    --scrollbar-thumb-bg: rgba(39, 174, 96, 0.4);
-    --scrollbar-thumb-hover-bg: rgba(39, 174, 96, 0.6);
-    --scrollbar-thumb-active-bg: rgba(39, 174, 96, 0.8);
     /* Model Colors */
     --model-strength-color: #27ae60;
     --model-strength-text: var(--text-on-primary);
@@ -658,12 +751,6 @@
     --select-option-hover-bg: #5e60ce;
     --select-option-checked-bg: #8b5cf6;
-    /* Scrollbar */
-    --scrollbar-track-bg: rgba(255, 255, 255, 0.02);
-    --scrollbar-thumb-bg: rgba(94, 96, 206, 0.4);
-    --scrollbar-thumb-hover-bg: rgba(94, 96, 206, 0.6);
-    --scrollbar-thumb-active-bg: rgba(94, 96, 206, 0.8);
     /* Model Colors */
     --model-card-bg: rgba(255, 255, 255, 0.02);
     --model-card-border: rgba(255, 255, 255, 0.05);
@@ -864,22 +951,22 @@ body {
 /* Custom scrollbar for transcript container */
 .transcript-container::-webkit-scrollbar {
-    width: 8px;
 }
 .transcript-container::-webkit-scrollbar-track {
-    background: rgba(255, 255, 255, 0.1);
     border-radius: 4px;
 }
 .transcript-container::-webkit-scrollbar-thumb {
-    background: rgba(255, 255, 255, 0.3);
     border-radius: 4px;
     transition: background 0.3s ease;
 }
 .transcript-container::-webkit-scrollbar-thumb:hover {
-    background: rgba(255, 255, 255, 0.5);
 }
 #transcript {

 /* ===== CONSOLIDATED CSS VARIABLES - ENHANCED DYNAMIC THEMING ===== */
 :root {
+    /* Core Theme Colors - Default Dark Theme Base */
+    --primary-color: #5e60ce;
+    --primary-rgb: 94, 96, 206;
+    --secondary-color: #23262f;
+    --accent-color: #8b5cf6;
+    --background-overlay: rgba(24, 26, 32, 0.85);
     --interface-opacity: 0.7;
+    --gradient-start: #5e60ce;
+    --gradient-end: #8b5cf6;
+    --text-glow: 0 0 10px rgba(94, 96, 206, 0.3);
+    --button-hover: rgba(94, 96, 206, 0.15);
     --animations-enabled: 1;
+    --switch-color: #5e60ce;
     /* Contrast and Accessibility */
     --contrast-ratio: 4.5; /* WCAG AA standard */
     --text-on-primary: #ffffff;
+    --text-on-secondary: #e0e0e0;
     --text-on-accent: #ffffff;
+    --text-on-background: #e0e0e0;
     --border-opacity: 0.3;
     --hover-opacity: 0.15;
     --active-opacity: 0.25;
     /* UI Component Colors - Chat Interface */
+    --chat-bg: rgba(24, 26, 32, 0.95);
+    --chat-text: var(--text-on-background);
     --chat-header-bg: rgba(255, 255, 255, 0.05);
+    --chat-border: #5e60ce;
     --chat-input-bg: rgba(255, 255, 255, 0.1);
     --chat-input-text: var(--text-on-background);
     --chat-input-placeholder: rgba(255, 255, 255, 0.6);
+    --chat-message-user-bg: #1e253c;
+    --chat-message-user-text: var(--text-on-background);
+    --chat-message-kimi-bg: #23262f;
     --chat-message-kimi-text: var(--text-on-background);
     /* Modal & Overlay Colors */
+    --modal-bg: rgba(24, 26, 32, 0.98);
+    --modal-border: #5e60ce;
+    --modal-header-bg: linear-gradient(135deg, #5e60ce, #8b5cf6);
+    --modal-text: var(--text-on-background);
+    --modal-title-color: #e0e0e0;
     --modal-overlay-bg: rgba(0, 0, 0, 0.8);
     --modal-close-hover-bg: rgba(255, 255, 255, 0.2);
     /* Settings Panel & Tabs */
+    --settings-bg: #0f1114;
     --settings-text: var(--text-on-background);
+    --settings-tab-bg: #181a20;
     --settings-tab-color: #bfa6b6;
     --settings-tab-hover-bg: rgba(255, 255, 255, var(--hover-opacity));
     --settings-tab-hover-color: rgba(255, 255, 255, 0.9);
+    --settings-tab-active-bg: #5e60ce;
     --settings-tab-active-color: var(--text-on-primary);
+    --settings-tab-border: #5e60ce;
+    --settings-section-bg: #1a1d23;
+    --settings-section-border: rgba(94, 96, 206, var(--border-opacity));
     --settings-section-header-color: var(--text-on-background);
     /* Form Element Colors */
     --input-bg: rgba(255, 255, 255, 0.1);
     --input-text: var(--text-on-background);
+    --input-border: #5e60ce;
     --input-focus-bg: rgba(255, 255, 255, var(--hover-opacity));
+    --input-focus-border: #8b5cf6;
     --input-placeholder: rgba(255, 255, 255, 0.6);
     /* Button Colors */
     --button-primary-bg: var(--primary-color);
     --button-primary-text: var(--text-on-primary);
     --button-primary-hover-bg: var(--accent-color);
+    --button-secondary-bg: rgba(255, 255, 255, 0.05);
     --button-secondary-text: var(--text-on-background);
     --button-secondary-hover-bg: rgba(255, 255, 255, var(--hover-opacity));
     --button-danger-bg: #e74c3c;
     --select-bg: var(--input-bg);
     --select-text: var(--input-text);
     --select-border: var(--input-border);
+    --select-option-bg: rgba(24, 26, 32, 0.95);
+    --select-option-text: var(--text-on-background);
+    --select-option-hover-bg: #5e60ce;
     --select-option-hover-text: var(--text-on-primary);
+    --select-option-checked-bg: #8b5cf6;
     --select-option-checked-text: var(--text-on-accent);
+    --select-option-disabled-bg: rgba(24, 26, 32, 0.5);
     --select-option-disabled-text: #666;
     /* Slider Components */
     --slider-track-active-bg: var(--primary-color);
     --slider-thumb-bg: var(--primary-color);
     --slider-thumb-hover-bg: var(--accent-color);
+    --slider-value-bg: #0f1114;
+    --slider-value-border: #5e60ce;
     --slider-value-color: var(--text-on-background);
     /* Toggle Switch */
+    --switch-bg-inactive: rgba(255, 255, 255, 0.05);
+    --switch-bg-active: linear-gradient(90deg, #5e60ce, #8b5cf6);
     --switch-thumb-color: #ffffff;
     --switch-thumb-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
     /* Mic Button & Pulse Effect */
     --mic-button-bg: var(--button-hover);
+    --mic-button-border: #5e60ce;
+    --mic-button-shadow: 0 0 15px #5e60ce;
+    --mic-button-hover-bg: #5e60ce;
+    --mic-button-hover-shadow: 0 0 10px rgba(94, 96, 206, 0.5);
     --mic-button-icon-color: var(--text-on-primary);
     --mic-listening-border: #27ae60;
     --mic-listening-shadow: 0 0 15px #27ae60;
     --video-fade-duration: 400ms;
     /* Cards & Stats */
+    --card-bg: rgba(255, 255, 255, 0.02);
+    --card-border: rgba(255, 255, 255, 0.05);
+    --card-hover-bg: rgba(255, 255, 255, 0.05);
     --card-text: var(--text-on-background);
+    --stat-value-color: #8b5cf6;
+    --stat-label-color: rgba(224, 224, 224, 0.7);
     /* Plugin Cards */
+    --plugin-card-bg: linear-gradient(135deg, #1a1d23 80%, rgba(24, 26, 32, 0.98) 100%);
+    --plugin-card-border: #5e60ce;
     --plugin-card-title-color: var(--text-on-background);
+    --plugin-card-desc-color: rgba(224, 224, 224, 0.7);
+    --plugin-card-author-color: rgba(224, 224, 224, 0.5);
+    --plugin-type-badge-bg: #8b5cf6;
     --plugin-type-badge-text: var(--text-on-accent);
+    --plugin-active-badge-bg: linear-gradient(90deg, #5e60ce, #8b5cf6);
     --plugin-active-badge-text: var(--text-on-primary);
     /* Help Modal */
+    --help-modal-bg: rgba(24, 26, 32, 0.98);
+    --help-modal-border: #5e60ce;
     --help-content-color: var(--text-on-background);
     --help-section-border: rgba(255, 255, 255, 0.1);
+    --creator-card-bg: rgba(255, 255, 255, 0.02);
+    --creator-card-border: rgba(255, 255, 255, 0.05);
+    --creator-avatar-bg: linear-gradient(135deg, #5e60ce, #8b5cf6);
+    --creator-name-color: #8b5cf6;
+    --creator-role-bg: linear-gradient(135deg, #5e60ce, #8b5cf6);
+    --creator-role-color: var(--text-on-primary);
+    --philosophy-bg: rgba(94, 96, 206, 0.05);
+    --philosophy-border: rgba(94, 96, 206, var(--border-opacity));
+    --philosophy-border-left: #5e60ce;
+    --feature-item-bg: rgba(255, 255, 255, 0.02);
+    --feature-item-border: rgba(94, 96, 206, var(--border-opacity));
+    --feature-icon-color: #8b5cf6;
+    --feature-title-color: #8b5cf6;
+    --feature-text-color: rgba(224, 224, 224, 0.7);
+    --guide-step-bg: rgba(255, 255, 255, 0.02);
+    --guide-step-number-bg: rgba(94, 96, 206, var(--hover-opacity));
     --guide-step-number-color: var(--primary-color);
+    --tip-item-bg: rgba(255, 255, 255, 0.02);
     --tip-item-border: var(--feature-item-border);
     /* Unified Scrollbar System */
+    --scrollbar-width: 8px !important;
+    --scrollbar-track-bg: rgba(255, 255, 255, 0.02) !important;
+    --scrollbar-thumb-bg: rgba(94, 96, 206, 0.4) !important;
+    --scrollbar-thumb-hover-bg: rgba(94, 96, 206, 0.6) !important;
+    --scrollbar-thumb-active-bg: rgba(94, 96, 206, 0.8) !important;
+    --scrollbar-corner-bg: rgba(255, 255, 255, 0.05) !important;
     /* Model Colors */
+    --model-card-bg: rgba(255, 255, 255, 0.02);
+    --model-card-border: rgba(255, 255, 255, 0.05);
+    --model-card-hover-bg: rgba(255, 255, 255, 0.05);
     --model-card-selected-border: var(--primary-color);
+    --model-card-selected-shadow: 0 0 0 2px rgba(94, 96, 206, var(--border-opacity));
     --model-name-color: var(--text-on-background);
+    --model-description-color: rgba(224, 224, 224, 0.7);
+    --model-strength-color: #5e60ce;
     --model-strength-text: var(--text-on-primary);
+    --model-provider-color: #8b5cf6;
     --model-provider-text: var(--text-on-accent);
     /* Text Colors */
     --text-primary: var(--text-on-background);
+    --text-secondary: #9ca3af;
+    --text-muted: rgba(224, 224, 224, 0.6);
     /* Character Selection Colors */
+    --character-card-bg: rgba(255, 255, 255, 0.02);
+    --character-card-border: rgba(255, 255, 255, 0.05);
+    --character-card-hover-bg: rgba(255, 255, 255, 0.05);
+    --character-selected-border: #8b5cf6;
+    --character-selected-bg: rgba(94, 96, 206, 0.1);
     --character-name-color: var(--text-on-background);
     /* Waiting Indicator */
     --loading-spinner-color: var(--primary-color);
     /* Progress Bar */
+    --progress-bg: rgba(255, 255, 255, 0.05);
     --progress-fill-bg: linear-gradient(90deg, var(--primary-color), var(--accent-color));
     --progress-text-color: var(--text-on-background);
     /* Transcript */
+    --transcript-bg: rgba(0, 0, 0, 0.9);
     --transcript-text: var(--text-on-background);
     --transcript-border: var(--primary-color);
 }
 /* ===== OPTIMIZED THEME VARIATIONS ===== */
+[data-theme="pink"] {
+    /* Core Theme Colors - Pink Passion */
+    --primary-color: #ff6b9d;
+    --primary-rgb: 255, 107, 157;
+    --secondary-color: #ffeaa7;
+    --accent-color: #fd79a8;
+    --background-overlay: rgba(255, 107, 157, 0.15);
+    --gradient-start: #ff6b9d;
+    --gradient-end: #fd79a8;
+    --text-glow: 0 0 10px rgba(255, 107, 157, 0.5);
+    --button-hover: rgba(255, 107, 157, 0.3);
+    --switch-color: var(--primary-color);
+    /* Contrast and Accessibility */
+    --text-on-primary: #ffffff;
+    --text-on-secondary: #222222;
+    --text-on-accent: #ffffff;
+    --text-on-background: #ffffff;
+    /* UI Component Colors - Chat Interface */
+    --chat-bg: rgba(255, 107, 157, 0.9);
+    --chat-text: var(--text-on-primary);
+    --chat-header-bg: rgba(255, 255, 255, 0.05);
+    --chat-border: var(--primary-color);
+    --chat-input-bg: rgba(255, 255, 255, 0.1);
+    --chat-input-text: var(--text-on-background);
+    --chat-input-placeholder: rgba(255, 255, 255, 0.6);
+    --chat-message-user-bg: var(--primary-color);
+    --chat-message-user-text: var(--text-on-primary);
+    --chat-message-kimi-bg: rgba(255, 255, 255, 0.15);
+    --chat-message-kimi-text: var(--text-on-background);
+    /* Modal & Overlay Colors */
+    --modal-bg: rgba(255, 107, 157, 0.95);
+    --modal-border: var(--primary-color);
+    --modal-header-bg: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
+    --modal-text: var(--text-on-primary);
+    --modal-title-color: var(--text-on-secondary);
+    --modal-overlay-bg: rgba(0, 0, 0, 0.8);
+    --modal-close-hover-bg: rgba(255, 255, 255, 0.2);
+    /* Settings Panel & Tabs */
+    --settings-bg: #181018;
+    --settings-text: var(--text-on-background);
+    --settings-tab-bg: #1a1a1a;
+    --settings-tab-color: #bfa6b6;
+    --settings-tab-hover-bg: rgba(255, 255, 255, var(--hover-opacity));
+    --settings-tab-hover-color: rgba(255, 255, 255, 0.9);
+    --settings-tab-active-bg: var(--primary-color);
+    --settings-tab-active-color: var(--text-on-primary);
+    --settings-tab-border: var(--primary-color);
+    --settings-section-bg: #22121a;
+    --settings-section-border: rgba(255, 107, 157, var(--border-opacity));
+    --settings-section-header-color: var(--text-on-background);
+    /* Form Element Colors */
+    --input-bg: rgba(255, 255, 255, 0.1);
+    --input-text: var(--text-on-background);
+    --input-border: var(--primary-color);
+    --input-focus-bg: rgba(255, 255, 255, var(--hover-opacity));
+    --input-focus-border: var(--accent-color);
+    --input-placeholder: rgba(255, 255, 255, 0.6);
+    /* Button Colors */
+    --button-primary-bg: var(--primary-color);
+    --button-primary-text: var(--text-on-primary);
+    --button-primary-hover-bg: var(--accent-color);
+    --button-secondary-bg: rgba(255, 255, 255, 0.1);
+    --button-secondary-text: var(--text-on-background);
+    --button-secondary-hover-bg: rgba(255, 255, 255, var(--hover-opacity));
+    /* All other pink theme variables... */
+    --slider-track-bg: rgba(255, 255, 255, 0.1);
+    --slider-track-active-bg: var(--primary-color);
+    --slider-thumb-bg: var(--primary-color);
+    --slider-thumb-hover-bg: var(--accent-color);
+    --slider-value-bg: #181018;
+    --slider-value-border: var(--primary-color);
+    --slider-value-color: var(--text-on-background);
+    /* Toggle Switch */
+    --switch-bg-inactive: rgba(255, 255, 255, 0.15);
+    --switch-bg-active: linear-gradient(90deg, var(--primary-color), var(--accent-color));
+    /* Mic Button & Pulse Effect */
+    --mic-button-bg: var(--button-hover);
+    --mic-button-border: var(--primary-color);
+    --mic-button-shadow: 0 0 15px var(--primary-color);
+    --mic-button-hover-bg: var(--primary-color);
+    --mic-button-hover-shadow: var(--text-glow);
+    --mic-button-icon-color: var(--text-on-primary);
+    /* Cards & Stats */
+    --card-bg: rgba(255, 255, 255, 0.05);
+    --card-border: rgba(255, 255, 255, 0.1);
+    --card-hover-bg: rgba(255, 255, 255, 0.08);
+    --stat-value-color: var(--primary-color);
+    --stat-label-color: rgba(255, 255, 255, 0.7);
+    /* Character Selection Colors */
+    --character-card-bg: var(--card-bg);
+    --character-card-border: var(--card-border);
+    --character-card-hover-bg: var(--card-hover-bg);
+    --character-selected-border: var(--primary-color);
+    --character-selected-bg: rgba(255, 107, 157, 0.13);
+    --character-name-color: var(--text-on-background);
+}
 [data-theme="blue"] {
     --primary-color: #74b9ff;
     --primary-rgb: 116, 185, 255;
     --select-option-hover-bg: #74b9ff;
     --select-option-checked-bg: #0984e3;
     /* Model Colors */
     --model-strength-color: #0984e3;
     --model-strength-text: #fff;
     --select-option-hover-bg: #a29bfe;
     --select-option-checked-bg: #6c5ce7;
     /* Model Colors */
     --model-strength-color: #6c5ce7;
     --model-strength-text: #fff;
     --select-option-hover-bg: #27ae60;
     --select-option-checked-bg: #16a085;
     /* Model Colors */
     --model-strength-color: #27ae60;
     --model-strength-text: var(--text-on-primary);
     --select-option-hover-bg: #5e60ce;
     --select-option-checked-bg: #8b5cf6;
     /* Model Colors */
     --model-card-bg: rgba(255, 255, 255, 0.02);
     --model-card-border: rgba(255, 255, 255, 0.05);
 /* Custom scrollbar for transcript container */
 .transcript-container::-webkit-scrollbar {
+    width: var(--scrollbar-width);
 }
 .transcript-container::-webkit-scrollbar-track {
+    background: var(--scrollbar-track-bg);
     border-radius: 4px;
 }
 .transcript-container::-webkit-scrollbar-thumb {
+    background: var(--scrollbar-thumb-bg);
     border-radius: 4px;
     transition: background 0.3s ease;
 }
 .transcript-container::-webkit-scrollbar-thumb:hover {
+    background: var(--scrollbar-thumb-hover-bg);
 }
 #transcript {

kimi-js/kimi-appearance.js CHANGED Viewed

@@ -3,7 +3,7 @@ class KimiAppearanceManager extends KimiBaseManager {
     constructor(database) {
         super();
         this.db = database;
-        this.currentTheme = "purple";
         this.interfaceOpacity = 0.8;
         this.animationsEnabled = true;
     }
@@ -33,7 +33,7 @@ class KimiAppearanceManager extends KimiBaseManager {
         if (!this.db) return;
         try {
-            this.currentTheme = await this.db.getPreference("colorTheme", window.KIMI_CONFIG?.DEFAULTS?.THEME ?? "purple");
             this.interfaceOpacity = await this.db.getPreference(
                 "interfaceOpacity",
                 window.KIMI_CONFIG?.DEFAULTS?.INTERFACE_OPACITY ?? 0.8
@@ -192,7 +192,7 @@ class KimiAppearanceManager extends KimiBaseManager {
     getThemeName(theme) {
         const themeNames = {
             dark: "Dark Night",
-            default: "Passionate Pink",
             blue: "Ocean Blue",
             purple: "Mystic Purple",
             green: "Emerald Forest"

     constructor(database) {
         super();
         this.db = database;
+        this.currentTheme = "dark";
         this.interfaceOpacity = 0.8;
         this.animationsEnabled = true;
     }
         if (!this.db) return;
         try {
+            this.currentTheme = await this.db.getPreference("colorTheme", window.KIMI_CONFIG?.DEFAULTS?.THEME ?? "dark");
             this.interfaceOpacity = await this.db.getPreference(
                 "interfaceOpacity",
                 window.KIMI_CONFIG?.DEFAULTS?.INTERFACE_OPACITY ?? 0.8
     getThemeName(theme) {
         const themeNames = {
             dark: "Dark Night",
+            pink: "Passionate Pink",
             blue: "Ocean Blue",
             purple: "Mystic Purple",
             green: "Emerald Forest"

kimi-js/kimi-config.js CHANGED Viewed

@@ -3,7 +3,7 @@ window.KIMI_CONFIG = {
     // Default values for all components
     DEFAULTS: {
         LANGUAGE: "en",
-        THEME: "purple",
         INTERFACE_OPACITY: 0.8,
         ANIMATIONS_ENABLED: true,
         VOICE_RATE: 1.1,
@@ -70,7 +70,7 @@ window.KIMI_CONFIG = {
     // Available themes
     THEMES: {
         dark: "Dark Night",
-        default: "Passionate Pink",
         blue: "Ocean Blue",
         purple: "Mystic Purple",
         green: "Emerald Forest"

     // Default values for all components
     DEFAULTS: {
         LANGUAGE: "en",
+        THEME: "dark",
         INTERFACE_OPACITY: 0.8,
         ANIMATIONS_ENABLED: true,
         VOICE_RATE: 1.1,
     // Available themes
     THEMES: {
         dark: "Dark Night",
+        pink: "Passionate Pink",
         blue: "Ocean Blue",
         purple: "Mystic Purple",
         green: "Emerald Forest"

kimi-js/kimi-database.js CHANGED Viewed

@@ -119,7 +119,7 @@ class KimiDatabase {
             { key: "voicePitch", value: 1.1 },
             { key: "voiceVolume", value: 0.8 },
             { key: "selectedCharacter", value: "kimi" },
-            { key: "colorTheme", value: "purple" },
             { key: "interfaceOpacity", value: 0.8 },
             { key: "animationsEnabled", value: true },
             { key: "showTranscript", value: true },

             { key: "voicePitch", value: 1.1 },
             { key: "voiceVolume", value: 0.8 },
             { key: "selectedCharacter", value: "kimi" },
+            { key: "colorTheme", value: "dark" },
             { key: "interfaceOpacity", value: 0.8 },
             { key: "animationsEnabled", value: true },
             { key: "showTranscript", value: true },

kimi-js/kimi-plugin-manager.js CHANGED Viewed

@@ -67,10 +67,10 @@ class KimiPluginManager {
         } else {
             // Restore previous or default theme depuis Dexie
             if (window.kimiDB && window.kimiDB.getPreference) {
-                const userTheme = await window.kimiDB.getPreference("colorTheme", "purple");
                 document.documentElement.setAttribute("data-theme", userTheme);
             } else {
-                document.documentElement.setAttribute("data-theme", "purple");
             }
         }
         this.renderPluginList();

         } else {
             // Restore previous or default theme depuis Dexie
             if (window.kimiDB && window.kimiDB.getPreference) {
+                const userTheme = await window.kimiDB.getPreference("colorTheme", "dark");
                 document.documentElement.setAttribute("data-theme", userTheme);
             } else {
+                document.documentElement.setAttribute("data-theme", "dark");
             }
         }
         this.renderPluginList();

kimi-js/kimi-script.js CHANGED Viewed

@@ -269,7 +269,7 @@ document.addEventListener("DOMContentLoaded", async function () {
                 const keyPref = window.KimiProviderUtils
                     ? window.KimiProviderUtils.getKeyPrefForProvider(provider)
                     : "providerApiKey";
-                const storedKey = await window.kimiDB.getPreference("providerApiKey", "");
                 if (apiKeyInput && provider !== "ollama") apiKeyInput.value = storedKey || "";
                 const color = provider === "ollama" ? "#9e9e9e" : storedKey && storedKey.length > 0 ? "#4caf50" : "#9e9e9e";
                 ApiUi.setPresence(color);

                 const keyPref = window.KimiProviderUtils
                     ? window.KimiProviderUtils.getKeyPrefForProvider(provider)
                     : "providerApiKey";
+                const storedKey = await window.kimiDB.getPreference(keyPref, "");
                 if (apiKeyInput && provider !== "ollama") apiKeyInput.value = storedKey || "";
                 const color = provider === "ollama" ? "#9e9e9e" : storedKey && storedKey.length > 0 ? "#4caf50" : "#9e9e9e";
                 ApiUi.setPresence(color);

kimi-js/kimi-utils.js CHANGED Viewed

@@ -44,13 +44,23 @@ window.KimiValidationUtils = {
 // Provider utilities used across the app
 const KimiProviderUtils = {
     getKeyPrefForProvider(provider) {
-        // Centralized: always use 'providerApiKey' for all providers except Ollama
-        return provider === "ollama" ? null : "providerApiKey";
     },
     async getApiKey(db, provider) {
         if (!db) return null;
         if (provider === "ollama") return "__local__";
-        return await db.getPreference("providerApiKey");
     },
     getLabelForProvider(provider) {
         const labels = {

 // Provider utilities used across the app
 const KimiProviderUtils = {
     getKeyPrefForProvider(provider) {
+        // Each provider should have its own separate API key storage
+        const providerKeys = {
+            openrouter: "openrouterApiKey",
+            openai: "openaiApiKey",
+            groq: "groqApiKey",
+            together: "togetherApiKey",
+            deepseek: "deepseekApiKey",
+            "openai-compatible": "customApiKey",
+            ollama: null
+        };
+        return providerKeys[provider] || "providerApiKey";
     },
     async getApiKey(db, provider) {
         if (!db) return null;
         if (provider === "ollama") return "__local__";
+        const keyPref = this.getKeyPrefForProvider(provider);
+        return await db.getPreference(keyPref);
     },
     getLabelForProvider(provider) {
         const labels = {

kimi-locale/de.json CHANGED Viewed

@@ -215,8 +215,8 @@
     "llm_base_url_placeholder": "https://api.openai.com/v1/chat/completions",
     "llm_model_id_placeholder": "gpt-4o-mini | llama-3.1-8b-instruct | ...",
     "test_api_key": "API-Schlüssel testen",
-    "theme_purple": "Mystic Purple (Standard)",
-    "theme_dark": "Dunkle Nacht",
     "theme_blue": "Ozeanblau",
     "theme_green": "Smaragdwald",
     "theme_pink": "Leidenschaftliches Pink",

     "llm_base_url_placeholder": "https://api.openai.com/v1/chat/completions",
     "llm_model_id_placeholder": "gpt-4o-mini | llama-3.1-8b-instruct | ...",
     "test_api_key": "API-Schlüssel testen",
+    "theme_purple": "Mystic Purple",
+    "theme_dark": "Dunkle Nacht (Standard)",
     "theme_blue": "Ozeanblau",
     "theme_green": "Smaragdwald",
     "theme_pink": "Leidenschaftliches Pink",

kimi-locale/en.json CHANGED Viewed

@@ -213,8 +213,8 @@
     "llm_base_url_placeholder": "https://api.openai.com/v1/chat/completions",
     "llm_model_id_placeholder": "gpt-4o-mini | llama-3.1-8b-instruct | ...",
     "test_api_key": "Test API Key",
-    "theme_purple": "Mystic Purple (Default)",
-    "theme_dark": "Dark Night",
     "theme_blue": "Ocean Blue",
     "theme_green": "Emerald Forest",
     "theme_pink": "Passionate Pink",

     "llm_base_url_placeholder": "https://api.openai.com/v1/chat/completions",
     "llm_model_id_placeholder": "gpt-4o-mini | llama-3.1-8b-instruct | ...",
     "test_api_key": "Test API Key",
+    "theme_purple": "Mystic Purple",
+    "theme_dark": "Dark Night (Default)",
     "theme_blue": "Ocean Blue",
     "theme_green": "Emerald Forest",
     "theme_pink": "Passionate Pink",

kimi-locale/es.json CHANGED Viewed

@@ -215,8 +215,8 @@
     "llm_base_url_placeholder": "https://api.openai.com/v1/chat/completions",
     "llm_model_id_placeholder": "gpt-4o-mini | llama-3.1-8b-instruct | ...",
     "test_api_key": "Probar Clave API",
-    "theme_purple": "Púrpura Místico (Predeterminado)",
-    "theme_dark": "Noche Oscura",
     "theme_blue": "Azul Océano",
     "theme_green": "Bosque Esmeralda",
     "theme_pink": "Rosa Apasionado",

     "llm_base_url_placeholder": "https://api.openai.com/v1/chat/completions",
     "llm_model_id_placeholder": "gpt-4o-mini | llama-3.1-8b-instruct | ...",
     "test_api_key": "Probar Clave API",
+    "theme_purple": "Púrpura Místico",
+    "theme_dark": "Noche Oscura (Predeterminado)",
     "theme_blue": "Azul Océano",
     "theme_green": "Bosque Esmeralda",
     "theme_pink": "Rosa Apasionado",

kimi-locale/fr.json CHANGED Viewed

@@ -213,8 +213,8 @@
     "llm_base_url_placeholder": "https://api.openai.com/v1/chat/completions",
     "llm_model_id_placeholder": "gpt-4o-mini | llama-3.1-8b-instruct | ...",
     "test_api_key": "Tester la Clé API",
-    "theme_purple": "Mystic Purple (Défaut)",
-    "theme_dark": "Nuit Sombre",
     "theme_blue": "Bleu Océan",
     "theme_green": "Forêt Émeraude",
     "theme_pink": "Rose Passion",

     "llm_base_url_placeholder": "https://api.openai.com/v1/chat/completions",
     "llm_model_id_placeholder": "gpt-4o-mini | llama-3.1-8b-instruct | ...",
     "test_api_key": "Tester la Clé API",
+    "theme_purple": "Mystic Purple",
+    "theme_dark": "Nuit Sombre (Défaut)",
     "theme_blue": "Bleu Océan",
     "theme_green": "Forêt Émeraude",
     "theme_pink": "Rose Passion",

kimi-locale/it.json CHANGED Viewed

@@ -215,8 +215,8 @@
     "llm_base_url_placeholder": "https://api.openai.com/v1/chat/completions",
     "llm_model_id_placeholder": "gpt-4o-mini | llama-3.1-8b-instruct | ...",
     "test_api_key": "Testa API Key",
-    "theme_purple": "Mystic Purple (Predefinito)",
-    "theme_dark": "Notte Scura",
     "theme_blue": "Blu Oceano",
     "theme_green": "Foresta Smeraldo",
     "theme_pink": "Rosa Appassionato",

     "llm_base_url_placeholder": "https://api.openai.com/v1/chat/completions",
     "llm_model_id_placeholder": "gpt-4o-mini | llama-3.1-8b-instruct | ...",
     "test_api_key": "Testa API Key",
+    "theme_purple": "Mystic Purple",
+    "theme_dark": "Notte Scura (Predefinito)",
     "theme_blue": "Blu Oceano",
     "theme_green": "Foresta Smeraldo",
     "theme_pink": "Rosa Appassionato",

kimi-locale/ja.json CHANGED Viewed

@@ -215,8 +215,8 @@
     "llm_base_url_placeholder": "https://api.openai.com/v1/chat/completions",
     "llm_model_id_placeholder": "gpt-4o-mini | llama-3.1-8b-instruct | ...",
     "test_api_key": "APIキーをテスト",
-    "theme_purple": "ミスティックパープル (デフォルト)",
-    "theme_dark": "ダークナイト",
     "theme_blue": "オーシャンブルー",
     "theme_green": "エメラルドフォレスト",
     "theme_pink": "パッショネートピンク",

     "llm_base_url_placeholder": "https://api.openai.com/v1/chat/completions",
     "llm_model_id_placeholder": "gpt-4o-mini | llama-3.1-8b-instruct | ...",
     "test_api_key": "APIキーをテスト",
+    "theme_purple": "ミスティックパープル",
+    "theme_dark": "ダークナイト (デフォルト)",
     "theme_blue": "オーシャンブルー",
     "theme_green": "エメラルドフォレスト",
     "theme_pink": "パッショネートピンク",

kimi-locale/zh.json CHANGED Viewed

@@ -215,8 +215,8 @@
     "llm_base_url_placeholder": "https://api.openai.com/v1/chat/completions",
     "llm_model_id_placeholder": "gpt-4o-mini | llama-3.1-8b-instruct | ...",
     "test_api_key": "测试 API 密钥",
-    "theme_purple": "神秘紫 (默认)",
-    "theme_dark": "暗夜",
     "theme_blue": "海洋蓝",
     "theme_green": "翡翠森林",
     "theme_pink": "热情粉",

     "llm_base_url_placeholder": "https://api.openai.com/v1/chat/completions",
     "llm_model_id_placeholder": "gpt-4o-mini | llama-3.1-8b-instruct | ...",
     "test_api_key": "测试 API 密钥",
+    "theme_purple": "神秘紫",
+    "theme_dark": "暗夜 (默认)",
     "theme_blue": "海洋蓝",
     "theme_green": "翡翠森林",
     "theme_pink": "热情粉",

kimi-plugins/sample-theme/theme.css CHANGED Viewed

@@ -104,11 +104,6 @@
     --feature-title-color: #6366f1;
     --feature-text-color: #a5b4fc;
-    /* Scrollbar */
-    --scrollbar-thumb-bg: rgba(59, 130, 246, 0.4);
-    --scrollbar-thumb-hover-bg: rgba(59, 130, 246, 0.6);
-    --scrollbar-thumb-active-bg: rgba(59, 130, 246, 0.8);
     /* Text Colors */
     --text-primary: #e0e7ef;
     --text-secondary: #a5b4fc;

     --feature-title-color: #6366f1;
     --feature-text-color: #a5b4fc;
     /* Text Colors */
     --text-primary: #e0e7ef;
     --text-secondary: #a5b4fc;