/* public/css/themes.css - V3 - Theme-Adaptive Pulse Color */ /* Each theme class, when applied to the , will: 1. Set a --body-bg for the entire page. 2. Override other relevant CSS variables for UI elements to harmonize with the new body background. 3. Include .dark-mode variations for each theme. 4. Define --theme-accent-color-rgb for the theme-adaptive pulse glow. */ /* --- 1. Theme: Ocean Blue (Re-imagined) --- */ body.theme-ocean-blue { --body-bg: #E0F7FA; --body-text: #004D40; --container-bg: rgba(255, 255, 255, 1); --theme-accent-color: #0077cc; --theme-accent-color-rgb: 0, 119, 204; /* ADDED */ --h1-color: #005A9E; --label-color: #0060A9; --input-border-color: #B3E5FC; --input-bg-color: #FFFFFF; --input-text-color: #004D40; --input-focus-border-color: #0077cc; --input-focus-shadow-color: rgba(0, 119, 204, 0.25); --submit-button-bg: #0077cc; --submit-button-text: #ffffff; --submit-button-hover-bg: #005fa3; --ai-message-strong-text: #0077cc; --system-message-link-color: #0060A9; --utility-button-bg: #B3E5FC; --utility-button-text: #005A9E; --utility-button-border: #81D4FA; --utility-button-hover-bg: #9EDEFB; --send-followup-bg: var(--submit-button-bg); --send-followup-text: var(--submit-button-text); --send-followup-hover-bg: var(--submit-button-hover-bg); } body.theme-ocean-blue.dark-mode { --body-bg: #003C4D; --body-text: #E0F7FA; --container-bg: rgba(0, 29, 37, 1); --theme-accent-color: #4FC3F7; --theme-accent-color-rgb: 79, 195, 247; /* ADDED */ --h1-color: #80D8FF; --label-color: #B3E5FC; --input-border-color: #005266; --input-bg-color: #002A33; --input-text-color: #E0F7FA; --input-focus-border-color: #4FC3F7; --input-focus-shadow-color: rgba(79, 195, 247, 0.3); --submit-button-bg: #4FC3F7; --submit-button-text: #002A33; --submit-button-hover-bg: #81D4FA; --ai-message-strong-text: #4FC3F7; --system-message-link-color: #80D8FF; --utility-button-bg: #005266; --utility-button-text: #B3E5FC; --utility-button-border: #006080; --utility-button-hover-bg: #007999; --send-followup-bg: var(--submit-button-bg); --send-followup-text: var(--submit-button-text); --send-followup-hover-bg: var(--submit-button-hover-bg); } /* --- 2. Theme: Midnight Onyx (Black) --- */ body.theme-midnight-onyx { --body-bg: #121212; --body-text: #EAEAEA; --container-bg: rgba(28, 28, 28, 15); --theme-accent-color: #00AFFF; --theme-accent-color-rgb: 0, 175, 255; /* ADDED */ --h1-color: #00AFFF; --label-color: #BBBBBB; --input-border-color: #333333; --input-bg-color: #1C1C1C; --input-text-color: #a5a5a5; --input-focus-border-color: #00AFFF; --input-focus-shadow-color: rgba(0, 175, 255, 0.3); --submit-button-bg: #00AFFF; --submit-button-text: #121212; --submit-button-hover-bg: #007FBF; --ai-message-strong-text: #00AFFF; --system-message-link-color: #58CFFF; --send-followup-bg: var(--submit-button-bg); --send-followup-text: var(--submit-button-text); --send-followup-hover-bg: var(--submit-button-hover-bg); } body.theme-midnight-onyx.dark-mode { --body-bg: #0A0A0A; --body-text: #F0F0F0; --container-bg: rgba(20, 20, 20, 15); --theme-accent-color: #40CFFF; --theme-accent-color-rgb: 64, 207, 255; /* ADDED */ --h1-color: #40CFFF; --label-color: #CCCCCC; --input-border-color: #2A2A2A; --input-bg-color: #151515; --input-text-color: #F0F0F0; --input-focus-border-color: #40CFFF; --submit-button-bg: #40CFFF; --submit-button-text: #0A0A0A; --submit-button-hover-bg: #00AFFF; --ai-message-strong-text: #40CFFF; --system-message-link-color: #70DFFF; --send-followup-bg: var(--submit-button-bg); --send-followup-text: var(--submit-button-text); --send-followup-hover-bg: var(--submit-button-hover-bg); } /* --- 3. Theme: Cotton Cloud (White) --- */ body.theme-cotton-cloud { --body-bg: #F8F9FA; --body-text: #212529; --container-bg: rgba(255, 255, 255, 15); --theme-accent-color: #6C757D; --theme-accent-color-rgb: 108, 117, 125; /* ADDED */ --h1-color: #343A40; --label-color: #495057; --input-border-color: #DEE2E6; --input-bg-color: #FFFFFF; --input-text-color: #212529; --input-focus-border-color: #6C757D; --input-focus-shadow-color: rgba(108, 117, 125, 0.25); --submit-button-bg: #6C757D; --submit-button-text: #FFFFFF; --submit-button-hover-bg: #5A6268; --ai-message-strong-text: #6C757D; --system-message-link-color: #5A6268; --send-followup-bg: var(--submit-button-bg); --send-followup-text: var(--submit-button-text); --send-followup-hover-bg: var(--submit-button-hover-bg); } body.theme-cotton-cloud.dark-mode { --body-bg: #2A2E33; --body-text: #F8F9FA; --container-bg: rgba(33, 37, 41, 15); --theme-accent-color: #ADB5BD; --theme-accent-color-rgb: 173, 181, 189; /* ADDED */ --h1-color: #E9ECEF; --label-color: #CED4DA; --input-border-color: #495057; --input-bg-color: #343A40; --input-text-color: #F8F9FA; --input-focus-border-color: #ADB5BD; --submit-button-bg: #ADB5BD; --submit-button-text: #212529; --submit-button-hover-bg: #9FA6AE; --ai-message-strong-text: #ADB5BD; --system-message-link-color: #CED4DA; --send-followup-bg: var(--submit-button-bg); --send-followup-text: var(--submit-button-text); --send-followup-hover-bg: var(--submit-button-hover-bg); } /* --- 4. Theme: Emerald Grove (Green) --- */ body.theme-emerald-grove { --body-bg: #E8F5E9; --body-text: #1B5E20; --container-bg: rgba(255, 255, 255, 1); --theme-accent-color: #2E7D32; --theme-accent-color-rgb: 46, 125, 50; /* ADDED */ --h1-color: #1B5E20; --label-color: #2E7D32; --input-border-color: #A5D6A7; --input-bg-color: #FFFFFF; --input-text-color: #1B5E20; --input-focus-border-color: #2E7D32; --input-focus-shadow-color: rgba(46, 125, 50, 0.25); --submit-button-bg: #2E7D32; --submit-button-text: #FFFFFF; --submit-button-hover-bg: #1B5E20; --ai-message-strong-text: #2E7D32; --system-message-link-color: #388E3C; --send-followup-bg: var(--submit-button-bg); --send-followup-text: var(--submit-button-text); --send-followup-hover-bg: var(--submit-button-hover-bg); } body.theme-emerald-grove.dark-mode { --body-bg: #1B3E1F; --body-text: #E8F5E9; --container-bg: rgba(12, 38, 14, 1); --theme-accent-color: #66BB6A; --theme-accent-color-rgb: 102, 187, 106; /* ADDED */ --h1-color: #81C784; --label-color: #A5D6A7; --input-border-color: #2E7D32; --input-bg-color: #163017; --input-text-color: #E8F5E9; --input-focus-border-color: #66BB6A; --submit-button-bg: #66BB6A; --submit-button-text: #1B3E1F; --submit-button-hover-bg: #81C784; --ai-message-strong-text: #66BB6A; --system-message-link-color: #81C784; --send-followup-bg: var(--submit-button-bg); --send-followup-text: var(--submit-button-text); --send-followup-hover-bg: var(--submit-button-hover-bg); } /* --- 5. Theme: Azure Blue --- */ body.theme-azure-blue { --body-bg: #E9ECEF; --body-text: #343A40; --container-bg: rgba(248, 249, 250, 1); --theme-accent-color: #007BFF; --theme-accent-color-rgb: 0, 123, 255; /* ADDED */ --h1-color: #0056b3; --label-color: #495057; --input-border-color: #CED4DA; --input-bg-color: #FFFFFF; --input-text-color: #343A40; --input-focus-border-color: #007BFF; --input-focus-shadow-color: rgba(0, 123, 255, 0.25); --submit-button-bg: #007BFF; --submit-button-text: #FFFFFF; --submit-button-hover-bg: #0056b3; --ai-message-strong-text: #007BFF; --system-message-link-color: #0069D9; --send-followup-bg: var(--submit-button-bg); --send-followup-text: var(--submit-button-text); --send-followup-hover-bg: var(--submit-button-hover-bg); } body.theme-azure-blue.dark-mode { --body-bg: #343A40; --body-text: #F8F9FA; --container-bg: rgba(42, 47, 52, 1); --theme-accent-color: #5CACFF; --theme-accent-color-rgb: 92, 172, 255; /* ADDED */ --h1-color: #87CEFA; --label-color: #ADB5BD; --input-border-color: #495057; --input-bg-color: #2C3136; --input-text-color: #F8F9FA; --input-focus-border-color: #5CACFF; --submit-button-bg: #5CACFF; --submit-button-text: #212529; --submit-button-hover-bg: #87CEEB; --ai-message-strong-text: #5CACFF; --system-message-link-color: #87CEFA; --send-followup-bg: var(--submit-button-bg); --send-followup-text: var(--submit-button-text); --send-followup-hover-bg: var(--submit-button-hover-bg); } /* --- 6. Theme: Sakura Pink --- */ body.theme-sakura-pink { --body-bg: #FFF0F5; --body-text: #5C3C48; --container-bg: rgba(255, 255, 255, 1); --theme-accent-color: #FF69B4; --theme-accent-color-rgb: 255, 105, 180; /* ADDED */ --h1-color: #C71585; --label-color: #DB7093; --input-border-color: #FFC0CB; --input-bg-color: #FFFFFF; --input-text-color: #5C3C48; --input-focus-border-color: #FF69B4; --input-focus-shadow-color: rgba(255, 105, 180, 0.25); --submit-button-bg: #FF69B4; --submit-button-text: #FFFFFF; --submit-button-hover-bg: #FF1493; --ai-message-strong-text: #FF69B4; --system-message-link-color: #C71585; --send-followup-bg: var(--submit-button-bg); --send-followup-text: var(--submit-button-text); --send-followup-hover-bg: var(--submit-button-hover-bg); } body.theme-sakura-pink.dark-mode { --body-bg: #5C1F3C; --body-text: #FFF0F5; --container-bg: rgba(48, 25, 37, 1); --theme-accent-color: #FF85C1; --theme-accent-color-rgb: 255, 133, 193; /* ADDED */ --h1-color: #F0A6CA; --label-color: #FFC0CB; --input-border-color: #8B008B; --input-bg-color: #4A003A; --input-text-color: #FFF0F5; --input-focus-border-color: #FF85C1; --submit-button-bg: #FF85C1; --submit-button-text: #4A003A; --submit-button-hover-bg: #FFA9D1; --ai-message-strong-text: #FF85C1; --system-message-link-color: #F0A6CA; --send-followup-bg: var(--submit-button-bg); --send-followup-text: var(--submit-button-text); --send-followup-hover-bg: var(--submit-button-hover-bg); } /* --- 7. Theme: Cherry Red (Re-imagined) --- */ body.theme-cherry-red { --body-bg: #FFF5F5; --body-text: #7A0000; --container-bg: rgba(255, 255, 255, 1); --theme-accent-color: #D32F2F; --theme-accent-color-rgb: 211, 47, 47; /* ADDED */ --h1-color: #B71C1C; --label-color: #C62828; --input-border-color: #FFCDD2; --input-bg-color: #FFFFFF; --input-text-color: #7A0000; --input-focus-border-color: #D32F2F; --input-focus-shadow-color: rgba(211, 47, 47, 0.25); --submit-button-bg: #D32F2F; --submit-button-text: #FFFFFF; --submit-button-hover-bg: #B71C1C; --ai-message-strong-text: #D32F2F; --system-message-link-color: #C62828; --send-followup-bg: var(--submit-button-bg); --send-followup-text: var(--submit-button-text); --send-followup-hover-bg: var(--submit-button-hover-bg); } body.theme-cherry-red.dark-mode { --body-bg: #4B0000; --body-text: #FFEBEE; --container-bg: rgba(38, 0, 0, 1); --theme-accent-color: #EF5350; --theme-accent-color-rgb: 239, 83, 80; /* ADDED */ --h1-color: #E57373; --label-color: #FFCDD2; --input-border-color: #B71C1C; --input-bg-color: #310000; --input-text-color: #FFEBEE; --input-focus-border-color: #EF5350; --submit-button-bg: #EF5350; --submit-button-text: #310000; --submit-button-hover-bg: #E57373; --ai-message-strong-text: #EF5350; --system-message-link-color: #E57373; --send-followup-bg: var(--submit-button-bg); --send-followup-text: var(--submit-button-text); --send-followup-hover-bg: var(--submit-button-hover-bg); } /* --- 8. Theme: Royal Purple (Re-imagined) --- */ body.theme-royal-purple { --body-bg: #F3E5F5; --body-text: #311B92; --container-bg: rgba(255, 255, 255, 1); --theme-accent-color: #5E35B1; --theme-accent-color-rgb: 94, 53, 177; /* ADDED */ --h1-color: #4527A0; --label-color: #512DA8; --input-border-color: #D1C4E9; --input-bg-color: #FFFFFF; --input-text-color: #311B92; --input-focus-border-color: #5E35B1; --input-focus-shadow-color: rgba(94, 53, 177, 0.25); --submit-button-bg: #5E35B1; --submit-button-text: #FFFFFF; --submit-button-hover-bg: #4527A0; --ai-message-strong-text: #5E35B1; --system-message-link-color: #512DA8; --send-followup-bg: var(--submit-button-bg); --send-followup-text: var(--submit-button-text); --send-followup-hover-bg: var(--submit-button-hover-bg); } body.theme-royal-purple.dark-mode { --body-bg: #2C155E; --body-text: #F3E5F5; --container-bg: rgba(26, 11, 53, 1); --theme-accent-color: #9575CD; --theme-accent-color-rgb: 149, 117, 205; /* ADDED */ --h1-color: #B39DDB; --label-color: #D1C4E9; --input-border-color: #512DA8; --input-bg-color: #21104A; --input-text-color: #F3E5F5; --input-focus-border-color: #9575CD; --submit-button-bg: #9575CD; --submit-button-text: #21104A; --submit-button-hover-bg: #B39DDB; --ai-message-strong-text: #9575CD; --system-message-link-color: #B39DDB; --send-followup-bg: var(--submit-button-bg); --send-followup-text: var(--submit-button-text); --send-followup-hover-bg: var(--submit-button-hover-bg); } /* --- 9. Theme: Goldenrod Glow (Yellow) --- */ body.theme-goldenrod-glow { --body-bg: #FFFDE7; --body-text: #5D4037; --container-bg: rgba(255, 255, 255, 1); --theme-accent-color: #FFC107; --theme-accent-color-rgb: 255, 193, 7; /* ADDED */ --h1-color: #FFA000; --label-color: #FFB300; --input-border-color: #FFF59D; --input-bg-color: #FFFFFF; --input-text-color: #5D4037; --input-focus-border-color: #FFC107; --input-focus-shadow-color: rgba(255, 193, 7, 0.25); --submit-button-bg: #FFC107; --submit-button-text: #3E2723; --submit-button-hover-bg: #FFA000; --ai-message-strong-text: #FFC107; --system-message-link-color: #FFA000; --send-followup-bg: var(--submit-button-bg); --send-followup-text: var(--submit-button-text); --send-followup-hover-bg: var(--submit-button-hover-bg); } body.theme-goldenrod-glow.dark-mode { --body-bg: #3E2E00; --body-text: #FFFDE7; --container-bg: rgba(30, 22, 0, 1); --theme-accent-color: #FFD54F; --theme-accent-color-rgb: 255, 213, 79; /* ADDED */ --h1-color: #FFECB3; --label-color: #FFE082; --input-border-color: #FFA000; --input-bg-color: #2D2000; --input-text-color: #FFFDE7; --input-focus-border-color: #FFD54F; --submit-button-bg: #FFD54F; --submit-button-text: #2D2000; --submit-button-hover-bg: #FFECB3; --ai-message-strong-text: #FFD54F; --system-message-link-color: #FFECB3; --send-followup-bg: var(--submit-button-bg); --send-followup-text: var(--submit-button-text); --send-followup-hover-bg: var(--submit-button-hover-bg); } /* --- 10. Theme: Vanilla Cream (Beige/Cream) --- */ body.theme-vanilla-cream { --body-bg: #FAF0E6; --body-text: #5D4037; --container-bg: rgba(255, 250, 240, 1); --theme-accent-color: #A0522D; --theme-accent-color-rgb: 160, 82, 45; /* ADDED */ --h1-color: #8B4513; --label-color: #85623A; --input-border-color: #F5DEB3; --input-bg-color: #FFFBF5; --input-text-color: #5D4037; --input-focus-border-color: #A0522D; --input-focus-shadow-color: rgba(160, 82, 45, 0.25); --submit-button-bg: #A0522D; --submit-button-text: #FFFFFF; --submit-button-hover-bg: #8B4513; --ai-message-strong-text: #A0522D; --system-message-link-color: #8B4513; --send-followup-bg: var(--submit-button-bg); --send-followup-text: var(--submit-button-text); --send-followup-hover-bg: var(--submit-button-hover-bg); } body.theme-vanilla-cream.dark-mode { --body-bg: #4A3B31; --body-text: #FAF0E6; --container-bg: rgba(40, 30, 25, 1); --theme-accent-color: #D2B48C; --theme-accent-color-rgb: 210, 180, 140; /* ADDED */ --h1-color: #E0C29B; --label-color: #F5DEB3; --input-border-color: #8B4513; --input-bg-color: #3A2D25; --input-text-color: #FAF0E6; --input-focus-border-color: #D2B48C; --submit-button-bg: #D2B48C; --submit-button-text: #3A2D25; --submit-button-hover-bg: #E0C29B; --ai-message-strong-text: #D2B48C; --system-message-link-color: #E0C29B; --send-followup-bg: var(--submit-button-bg); --send-followup-text: var(--submit-button-text); --send-followup-hover-bg: var(--submit-button-hover-bg); } /* --- 11. Theme: Sunset Orange (Re-imagined) --- */ body.theme-sunset-orange { --body-bg: #FFF3E0; --body-text: #793000; --container-bg: rgba(255, 255, 255, 1); --theme-accent-color: #FF6F00; --theme-accent-color-rgb: 255, 111, 0; /* ADDED */ --h1-color: #E65100; --label-color: #F57C00; --input-border-color: #FFE0B2; --input-bg-color: #FFFFFF; --input-text-color: #793000; --input-focus-border-color: #FF6F00; --input-focus-shadow-color: rgba(255, 111, 0, 0.25); --submit-button-bg: #FF6F00; --submit-button-text: #FFFFFF; --submit-button-hover-bg: #E65100; --ai-message-strong-text: #FF6F00; --system-message-link-color: #F57C00; --send-followup-bg: var(--submit-button-bg); --send-followup-text: var(--submit-button-text); --send-followup-hover-bg: var(--submit-button-hover-bg); } body.theme-sunset-orange.dark-mode { --body-bg: #4D2900; --body-text: #FFF3E0; --container-bg: rgba(38, 20, 0, 1); --theme-accent-color: #FFA000; --theme-accent-color-rgb: 255, 160, 0; /* ADDED */ --h1-color: #FFB300; --label-color: #FFCA28; --input-border-color: #E65100; --input-bg-color: #3E2000; --input-text-color: #FFF3E0; --input-focus-border-color: #FFA000; --submit-button-bg: #FFA000; --submit-button-text: #3E2000; --submit-button-hover-bg: #FFB300; --ai-message-strong-text: #FFA000; --system-message-link-color: #FFB300; --send-followup-bg: var(--submit-button-bg); --send-followup-text: var(--submit-button-text); --send-followup-hover-bg: var(--submit-button-hover-bg); } /* public/css/style.css - Ensure these styles for the Theme Selector are present */ .color-scheme-settings { /* Similar to other settings sections */ margin-bottom: 25px; padding-bottom: 15px; border-bottom: 1px solid var(--input-border-color); } .settings-modal-content .color-scheme-settings:last-child { border-bottom: none; margin-bottom: 10px; } .settings-modal-content .color-scheme-settings h3 { color: var(--label-color); margin-top: 0; margin-bottom: 15px; font-size: 1.3rem; } .color-scheme-selector { display: flex; flex-wrap: wrap; /* Allow squares to wrap to the next line */ gap: 10px; /* Space between squares */ justify-content: flex-start; /* Align squares to the start */ padding: 5px 0; } .color-scheme-square { width: 40px; /* Size of the square */ height: 40px; /* Size of the square */ border: 2px solid var(--input-border-color); /* Default border */ border-radius: 6px; /* Rounded corners for the square */ cursor: pointer; transition: border-color 0.2s ease, transform 0.1s ease; box-sizing: border-box; display: flex; /* For centering checkmark if you add one */ align-items: center; justify-content: center; } .color-scheme-square:hover { transform: scale(1.1); border-color: var(--input-focus-border-color); /* Highlight on hover */ } .color-scheme-square.active-scheme { border-color: var(--h1-color); /* Prominent border for active theme - uses theme variable */ box-shadow: 0 0 0 2px var(--h1-color); /* Optional: outer glow for active - uses theme variable */ transform: scale(1.05); } /* Optional: If you want to add a checkmark to the active square */ .color-scheme-square.active-scheme::before { content: '✔'; font-size: 20px; color: var(--submit-button-text); /* Make checkmark color contrast with square bg - uses theme variable */ /* Ensure this color is dynamic if square bg is dynamic */ filter: invert(1) grayscale(1) contrast(100) brightness(2); /* Attempt to make it visible on various backgrounds */ } body.dark-mode .color-scheme-square.active-scheme::before { /* Adjust checkmark for dark backgrounds if needed */ filter: grayscale(1) contrast(100) brightness(2); /* This might need tweaking based on specific theme square colors */ } #colorSchemeFeedback { font-size: 0.89em; color: var(--label-color); /* Use the theme-aware label color */ } /* ===================================================== --- 12 NEW PRESET THEMES --- ===================================================== */ /* --- 12. Theme: Matrix Terminal --- */ body.theme-matrix-terminal { --body-bg: #0D0208; --body-text: #00FF41; --container-bg: rgba(0, 20, 0, 1); --theme-accent-color: #00FF41; --theme-accent-color-rgb: 0, 255, 65; --h1-color: #00FF41; --label-color: #00FF41; --input-border-color: #008F11; --input-bg-color: #000000; --input-text-color: #00FF41; --input-focus-border-color: #00FF41; --input-focus-shadow-color: rgba(0, 255, 65, 0.3); --submit-button-bg: #00FF41; --submit-button-text: #000000; --submit-button-hover-bg: #FFFFFF; --ai-message-strong-text: #00FF41; --ai-message-text: #e0e0e0; --ai-message-bg: #002D0C; --user-message-bg: #004D1A; --user-message-text: #e0e0e0; --system-message-link-color: #50FF50; --send-followup-bg: var(--submit-button-bg); --send-followup-text: var(--submit-button-text); --send-followup-hover-bg: var(--submit-button-hover-bg); } body.theme-matrix-terminal.dark-mode { /* Dark mode is the primary mode for this theme */ --container-bg: rgba(0, 10, 0, 15); } /* --- 13. Theme: Cyberpunk Night --- */ body.theme-cyberpunk-night { --body-bg: #0C0032; --body-text: #686868; --container-bg: rgba(25, 3, 63, 15); --theme-accent-color: #FF00FF; /* Magenta */ --theme-accent-color-rgb: 255, 0, 255; --h1-color: #00E5FF; /* Cyan */ --label-color: #FF00FF; --input-border-color: #3500D3; --input-bg-color: #19033F; --input-text-color: #919191; --input-focus-border-color: #00E5FF; --input-focus-shadow-color: rgba(0, 229, 255, 0.4); --submit-button-bg: #FF00FF; --submit-button-text: #FFFFFF; --submit-button-hover-bg: #00E5FF; --submit-button-hover-text: #000000; --ai-message-strong-text: #00E5FF; --user-message-bg: #2828A8; --user-message-text: #e0e0e0; --system-message-link-color: #00E5FF; --send-followup-bg: var(--submit-button-bg); --send-followup-text: var(--submit-button-text); --send-followup-hover-bg: var(--submit-button-hover-bg); } body.theme-cyberpunk-night.dark-mode { --body-bg: #000000; --container-bg: rgba(15, 0, 30, 15); --input-bg-color: #100020; --body-text: #ffffff; } /* --- 14. Theme: Autumn Radiance --- */ body.theme-autumn-radiance { --body-bg: #FEF5E7; --body-text: #6E2C00; --container-bg: rgba(253, 242, 233, 1); --theme-accent-color: #E67E22; /* Carrot Orange */ --theme-accent-color-rgb: 230, 126, 34; --h1-color: #D35400; /* Pumpkin Orange */ --label-color: #BA4A00; --input-border-color: #FAD7A0; --input-bg-color: #FFFFFF; --input-text-color: #6E2C00; --input-focus-border-color: #E67E22; --submit-button-bg: #D35400; --submit-button-text: #FFFFFF; --submit-button-hover-bg: #A04000; --ai-message-strong-text: #D35400; --system-message-link-color: #E67E22; --send-followup-bg: var(--submit-button-bg); --send-followup-text: var(--submit-button-text); --send-followup-hover-bg: var(--submit-button-hover-bg); } body.theme-autumn-radiance.dark-mode { --body-bg: #49260C; --body-text: #FDEDD8; --container-bg: rgba(44, 28, 12, 1); --theme-accent-color: #F39C12; /* Orange */ --theme-accent-color-rgb: 243, 156, 18; --h1-color: #DC7633; --label-color: #F5B041; --input-border-color: #935116; --input-bg-color: #381D09; --input-text-color: #FDEDD8; --submit-button-bg: #F39C12; --submit-button-text: #49260C; --submit-button-hover-bg: #DC7633; --ai-message-strong-text: #F39C12; --send-followup-bg: var(--submit-button-bg); --send-followup-text: var(--submit-button-text); --send-followup-hover-bg: var(--submit-button-hover-bg); } /* --- 15. Theme: Winter Frost --- */ body.theme-winter-frost { --body-bg: #F4F6F6; --body-text: #283747; --container-bg: rgba(255, 255, 255, 1); --theme-accent-color: #5DADE2; /* Light Blue */ --theme-accent-color-rgb: 93, 173, 226; --h1-color: #3498DB; /* Blue */ --label-color: #5499C7; --input-border-color: #AED6F1; --input-bg-color: #FFFFFF; --input-text-color: #283747; --input-focus-border-color: #3498DB; --submit-button-bg: #3498DB; --submit-button-text: #FFFFFF; --submit-button-hover-bg: #21618C; --ai-message-strong-text: #3498DB; --system-message-link-color: #5DADE2; --send-followup-bg: var(--submit-button-bg); --send-followup-text: var(--submit-button-text); --send-followup-hover-bg: var(--submit-button-hover-bg); } body.theme-winter-frost.dark-mode { --body-bg: #1B2631; --body-text: #EAF2F8; --container-bg: rgba(13, 24, 37, 1); --theme-accent-color: #A9CCE3; --theme-accent-color-rgb: 169, 204, 227; --h1-color: #85C1E9; --label-color: #A9CCE3; --input-border-color: #566573; --input-bg-color: #212F3D; --input-text-color: #EAF2F8; --submit-button-bg: #85C1E9; --submit-button-text: #1B2631; --submit-button-hover-bg: #5DADE2; --ai-message-strong-text: #85C1E9; --send-followup-bg: var(--submit-button-bg); --send-followup-text: var(--submit-button-text); --send-followup-hover-bg: var(--submit-button-hover-bg); } /* --- 16. Theme: Rose Gold --- */ body.theme-rose-gold { --body-bg: #FADBD8; --body-text: #641E16; --container-bg: rgba(252, 243, 242, 1); --theme-accent-color: #B76E79; --theme-accent-color-rgb: 183, 110, 121; --h1-color: #C0392B; --label-color: #A93226; --input-border-color: #F5B7B1; --input-bg-color: #FFFFFF; --input-text-color: #641E16; --input-focus-border-color: #B76E79; --submit-button-bg: #C0392B; --submit-button-text: #FFFFFF; --submit-button-hover-bg: #922B21; --ai-message-strong-text: #C0392B; --send-followup-bg: var(--submit-button-bg); --send-followup-text: var(--submit-button-text); --send-followup-hover-bg: var(--submit-button-hover-bg); } body.theme-rose-gold.dark-mode { --body-bg: #4A2321; --body-text: #FADBD8; --container-bg: rgba(40, 19, 18, 1); --theme-accent-color: #E6B0AA; --theme-accent-color-rgb: 230, 176, 170; --h1-color: #D98880; --label-color: #E6B0AA; --input-border-color: #943126; --input-bg-color: #5D2D2A; --input-text-color: #FADBD8; --submit-button-bg: #D98880; --submit-button-text: #4A2321; --submit-button-hover-bg: #C0392B; --ai-message-strong-text: #D98880; --send-followup-bg: var(--submit-button-bg); --send-followup-text: var(--submit-button-text); --send-followup-hover-bg: var(--submit-button-hover-bg); } /* --- 17. Theme: Cafe Creme --- */ body.theme-cafe-creme { --body-bg: #EFEBE9; --body-text: #3E2723; --container-bg: rgba(255, 255, 255, 1); --theme-accent-color: #8D6E63; /* Brown-grey */ --theme-accent-color-rgb: 141, 110, 99; --h1-color: #5D4037; /* Dark brown */ --label-color: #6D4C41; --input-border-color: #D7CCC8; --input-bg-color: #FFFFFF; --input-text-color: #3E2723; --input-focus-border-color: #8D6E63; --submit-button-bg: #5D4037; --submit-button-text: #FFFFFF; --submit-button-hover-bg: #3E2723; --ai-message-strong-text: #5D4037; --send-followup-bg: var(--submit-button-bg); --send-followup-text: var(--submit-button-text); --send-followup-hover-bg: var(--submit-button-hover-bg); } body.theme-cafe-creme.dark-mode { --body-bg: #2c201d; --body-text: #EFEBE9; --container-bg: rgba(30, 20, 17, 1); --theme-accent-color: #BCAAA4; --theme-accent-color-rgb: 188, 170, 164; --h1-color: #A1887F; --label-color: #BCAAA4; --input-border-color: #5D4037; --input-bg-color: #4E342E; --input-text-color: #EFEBE9; --submit-button-bg: #A1887F; --submit-button-text: #2c201d; --submit-button-hover-bg: #8D6E63; --ai-message-strong-text: #A1887F; --send-followup-bg: var(--submit-button-bg); --send-followup-text: var(--submit-button-text); --send-followup-hover-bg: var(--submit-button-hover-bg); } /* --- 18. Theme: Spearmint --- */ body.theme-spearmint { --body-bg: #E0F2F1; --body-text: #004D40; --container-bg: rgba(240, 248, 248, 1); --theme-accent-color: #26A69A; /* Teal */ --theme-accent-color-rgb: 38, 166, 154; --h1-color: #00796B; /* Darker Teal */ --label-color: #00897B; --input-border-color: #B2DFDB; --input-bg-color: #FFFFFF; --input-text-color: #004D40; --input-focus-border-color: #26A69A; --submit-button-bg: #00796B; --submit-button-text: #FFFFFF; --submit-button-hover-bg: #004D40; --ai-message-strong-text: #00796B; --send-followup-bg: var(--submit-button-bg); --send-followup-text: var(--submit-button-text); --send-followup-hover-bg: var(--submit-button-hover-bg); } body.theme-spearmint.dark-mode { --body-bg: #00382e; --body-text: #E0F2F1; --container-bg: rgba(0, 30, 25, 1); --theme-accent-color: #80CBC4; --theme-accent-color-rgb: 128, 203, 196; --h1-color: #4DB6AC; --label-color: #80CBC4; --input-border-color: #00695C; --input-bg-color: #004D40; --input-text-color: #E0F2F1; --submit-button-bg: #4DB6AC; --submit-button-text: #00382e; --submit-button-hover-bg: #26A69A; --ai-message-strong-text: #4DB6AC; --send-followup-bg: var(--submit-button-bg); --send-followup-text: var(--submit-button-text); --send-followup-hover-bg: var(--submit-button-hover-bg); } /* --- 19. Theme: Lavender Dusk --- */ body.theme-lavender-dusk { --body-bg: #EDE7F6; --body-text: #311B92; --container-bg: rgba(245, 242, 250, 1); --theme-accent-color: #7E57C2; /* Deep Lavender */ --theme-accent-color-rgb: 126, 87, 194; --h1-color: #5E35B1; /* Purple */ --label-color: #673AB7; --input-border-color: #D1C4E9; --input-bg-color: #FFFFFF; --input-text-color: #311B92; --input-focus-border-color: #7E57C2; --submit-button-bg: #5E35B1; --submit-button-text: #FFFFFF; --submit-button-hover-bg: #4527A0; --ai-message-strong-text: #5E35B1; --send-followup-bg: var(--submit-button-bg); --send-followup-text: var(--submit-button-text); --send-followup-hover-bg: var(--submit-button-hover-bg); } body.theme-lavender-dusk.dark-mode { --body-bg: #2c1a4e; --body-text: #EDE7F6; --container-bg: rgba(26, 15, 45, 1); --theme-accent-color: #B39DDB; --theme-accent-color-rgb: 179, 157, 219; --h1-color: #9575CD; --label-color: #B39DDB; --input-border-color: #512DA8; --input-bg-color: #4527A0; --input-text-color: #EDE7F6; --submit-button-bg: #9575CD; --submit-button-text: #2c1a4e; --submit-button-hover-bg: #7E57C2; --ai-message-strong-text: #9575CD; --send-followup-bg: var(--submit-button-bg); --send-followup-text: var(--submit-button-text); --send-followup-hover-bg: var(--submit-button-hover-bg); } /* --- 20. Theme: Slate & Stone --- */ body.theme-slate-and-stone { --body-bg: #ECEFF1; --body-text: #263238; --container-bg: rgba(248, 249, 250, 1); --theme-accent-color: #607D8B; /* Blue Grey */ --theme-accent-color-rgb: 96, 125, 139; --h1-color: #455A64; --label-color: #546E7A; --input-border-color: #CFD8DC; --input-bg-color: #FFFFFF; --input-text-color: #263238; --input-focus-border-color: #607D8B; --submit-button-bg: #455A64; --submit-button-text: #FFFFFF; --submit-button-hover-bg: #263238; --ai-message-strong-text: #455A64; --send-followup-bg: var(--submit-button-bg); --send-followup-text: var(--submit-button-text); --send-followup-hover-bg: var(--submit-button-hover-bg); } body.theme-slate-and-stone.dark-mode { --body-bg: #1f292e; --body-text: #ECEFF1; --container-bg: rgba(16, 21, 23, 1); --theme-accent-color: #90A4AE; --theme-accent-color-rgb: 144, 164, 174; --h1-color: #78909C; --label-color: #90A4AE; --input-border-color: #455A64; --input-bg-color: #37474F; --input-text-color: #ECEFF1; --submit-button-bg: #78909C; --submit-button-text: #1f292e; --submit-button-hover-bg: #607D8B; --ai-message-strong-text: #78909C; --send-followup-bg: var(--submit-button-bg); --send-followup-text: var(--submit-button-text); --send-followup-hover-bg: var(--submit-button-hover-bg); } /* --- 21. Theme: Desert Sunset --- */ body.theme-desert-sunset { --body-bg: #FDF4E3; --body-text: #783303; --container-bg: rgba(254, 250, 242, 1); --theme-accent-color: #F57F17; /* Bright Orange */ --theme-accent-color-rgb: 245, 127, 23; --h1-color: #D55100; /* Burnt Orange */ --label-color: #E46300; --input-border-color: #FFDDAA; --input-bg-color: #FFFFFF; --input-text-color: #783303; --input-focus-border-color: #F57F17; --submit-button-bg: #D55100; --submit-button-text: #FFFFFF; --submit-button-hover-bg: #A84000; --ai-message-strong-text: #D55100; --send-followup-bg: var(--submit-button-bg); --send-followup-text: var(--submit-button-text); --send-followup-hover-bg: var(--submit-button-hover-bg); } body.theme-desert-sunset.dark-mode { --body-bg: #421C00; --body-text: #FFECB3; --container-bg: rgba(35, 15, 0, 1); --theme-accent-color: #FFB74D; --theme-accent-color-rgb: 255, 183, 77; --h1-color: #FFA726; --label-color: #FFB74D; --input-border-color: #BF360C; --input-bg-color: #6A2F00; --input-text-color: #FFECB3; --submit-button-bg: #FFA726; --submit-button-text: #421C00; --submit-button-hover-bg: #F57F17; --ai-message-strong-text: #FFA726; --send-followup-bg: var(--submit-button-bg); --send-followup-text: var(--submit-button-text); --send-followup-hover-bg: var(--submit-button-hover-bg); } /* --- 22. Theme: Vintage Library --- */ body.theme-vintage-library { --body-bg: #F5F5DC; /* Beige */ --body-text: #5C4033; /* Dark Brown */ --container-bg: rgba(245, 245, 220, 1); /* Lighter Beige */ --theme-accent-color: #8B4513; /* Saddle Brown */ --theme-accent-color-rgb: 139, 69, 19; --h1-color: #800000; /* Maroon */ --label-color: #A0522D; /* Sienna */ --input-border-color: #D2B48C; /* Tan */ --input-bg-color: #FFF8DC; /* Cornsilk */ --input-text-color: #5C4033; --input-focus-border-color: #8B4513; --submit-button-bg: #800000; --submit-button-text: #F5F5DC; --submit-button-hover-bg: #5C4033; --ai-message-strong-text: #800000; --send-followup-bg: var(--submit-button-bg); --send-followup-text: var(--submit-button-text); --send-followup-hover-bg: var(--submit-button-hover-bg); } body.theme-vintage-library.dark-mode { --body-bg: #3c2f2f; --body-text: #F5F5DC; --container-bg: rgba(30, 22, 22, 1); --theme-accent-color: #CD853F; /* Peru */ --theme-accent-color-rgb: 205, 133, 63; --h1-color: #E9967A; /* Dark Salmon */ --label-color: #F4A460; /* Sandy Brown */ --input-border-color: #8B4513; --input-bg-color: #5C4033; --input-text-color: #F5F5DC; --submit-button-bg: #CD853F; --submit-button-text: #3c2f2f; --submit-button-hover-bg: #A0522D; --ai-message-strong-text: #CD853F; --send-followup-bg: var(--submit-button-bg); --send-followup-text: var(--submit-button-text); --send-followup-hover-bg: var(--submit-button-hover-bg); } /* --- 23. Theme: Tropicana --- */ body.theme-tropicana { --body-bg: #E0F7FA; --body-text: #004D40; --container-bg: rgba(255, 255, 255, 1); --theme-accent-color: #FF7043; /* Coral */ --theme-accent-color-rgb: 255, 112, 67; --h1-color: #00796B; /* Teal */ --label-color: #26A69A; --input-border-color: #B2DFDB; --input-bg-color: #FFFFFF; --input-text-color: #004D40; --input-focus-border-color: #FF7043; --submit-button-bg: #FF7043; --submit-button-text: #FFFFFF; --submit-button-hover-bg: #F4511E; --ai-message-strong-text: #00796B; --send-followup-bg: var(--submit-button-bg); --send-followup-text: var(--submit-button-text); --send-followup-hover-bg: var(--submit-button-hover-bg); } body.theme-tropicana.dark-mode { --body-bg: #003a32; --body-text: #E0F7FA; --container-bg: rgba(0, 32, 27, 1); --theme-accent-color: #FFAB91; /* Light Coral */ --theme-accent-color-rgb: 255, 171, 145; --h1-color: #4DB6AC; /* Light Teal */ --label-color: #80CBC4; --input-border-color: #00796B; --input-bg-color: #004D40; --input-text-color: #E0F7FA; --submit-button-bg: #FFAB91; --submit-button-text: #003a32; --submit-button-hover-bg: #FF8A65; --ai-message-strong-text: #4DB6AC; --send-followup-bg: var(--submit-button-bg); --send-followup-text: var(--submit-button-text); --send-followup-hover-bg: var(--submit-button-hover-bg); }