/* * Dark theme — scoped to the main chat page only. * * Active only when is set, which happens * exclusively on the root chat page (see static/js/theme.js, injected * via chat_base.html). * * COLORS: brand/accent colors use the exact RWTH Aachen palette * (.impeccable.md). The dark *neutral surfaces* (slate backgrounds, * bubble tints, borders) have no equivalent in the RWTH palette — its * only dark neutrals are Black 100% (#000000) and Black 75% (#646567), * with nothing between — so they are kept as custom dark tones to * preserve the intended look. Primary text is white. */ /* Smooth cross-fade when toggling */ html[data-theme="dark"] body, html[data-theme="dark"] .messenger-area, html[data-theme="dark"] .header, html[data-theme="dark"] .msger-chat, html[data-theme="dark"] .msger-inputarea, html[data-theme="dark"] .msger-input, html[data-theme="dark"] .msg-bubble, html[data-theme="dark"] .disclaimer-container { transition: background-color var(--transition-base), color var(--transition-base), border-color var(--transition-base); } html[data-theme="dark"] { /* ── Accent tokens (exact RWTH palette) ── */ --color-primary: #8EBAE5; /* Blue 50% (was #6ba6dc) */ --color-primary-hover: #C7DDF2; /* Blue 25% (was #8ebae5) */ --color-primary-light: #00549F; /* Blue 100% (was #16273a) */ /* ── Text ── */ --color-text: #FFFFFF; /* white — primary text */ --color-text-muted: #9C9E9F; /* Black 50% (was #a4b0bd) */ --color-text-subtle: #9C9E9F; /* Black 50% (was #8b9aac) */ /* ── Dark neutral surfaces (no GDL equivalent — kept for the look) ── */ --color-surface: #1a2330; --color-surface-alt: #131a23; --color-border: #2c3947; --color-border-light: #283442; --chat-bg: var(--color-surface); --chat-msg-user-bg: #232f3d; --chat-msg-bot-bg: #1d3a52; --chat-header-bg: #16202c; --chat-input-bg: #1f2a37; /* ── Error / Status (accents → exact RWTH Red) ── */ --color-error: #E69679; /* Red 50% (was #ff6b6b) */ --color-error-bg: #3a1f23; /* dark neutral surface */ --color-error-border: #CC071E; /* Red 100% (was #5c2b30) */ --color-error-text: #F3CDBB; /* Red 25% (was #ffb4b4) */ --color-success-bg: #1f3320; /* dark neutral surface */ --color-banner-bg: #3a2622; /* dark neutral surface */ /* ── Shadows (deeper on dark) ── */ --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4); --shadow-md: 0 5px 15px rgba(0, 0, 0, 0.5); --shadow-lg: 0 10px 20px rgba(0, 0, 0, 0.5); --shadow-focus: 0 0 0 0.15rem rgba(142, 186, 229, 0.4); /* Blue 50% */ /* ── Light-tint scale tokens reused as backgrounds → dark neutrals ── */ --rwth-black-10: #232f3d; --rwth-black-25: #38475a; --rwth-blue-10: #1d3a52; --rwth-blue-25: #2c3947; /* ── Legacy aliases consumed by existing CSS/JS ── */ --rwth-blue: #16273a; --blue: #8EBAE5; /* Blue 50% */ --border: var(--color-border); --text-color: var(--color-text); --user-msg-bg: var(--chat-msg-user-bg); --assistant-msg-bg: var(--chat-msg-bot-bg); --input-bg: var(--chat-input-bg); --banner-bg: var(--color-banner-bg); color-scheme: dark; } /* ── Global text color: messages, modal & terms content inherit this ── */ html[data-theme="dark"] body { color: var(--color-text); } html[data-theme="dark"] body.bg-light { background-color: var(--color-surface-alt) !important; } html[data-theme="dark"] .msger-input { color: var(--color-text); } html[data-theme="dark"] .msger-input::placeholder { color: var(--color-text-muted); } /* Header logo sits on a tile slightly lighter than the dark header, so it reads as a subtle raised badge. */ html[data-theme="dark"] .header .icon img { background-color: #2c3947; /* lighter than the header slate (#16202c) */ box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4); } /* Secondary header buttons (reload, language, theme): outline at rest → fill solid blue on hover. */ html[data-theme="dark"] .header .header-btn-secondary { background-color: var(--chat-input-bg); border-color: var(--rwth-blue-50); /* Blue 50% */ color: var(--color-primary); /* Blue 50% */ } html[data-theme="dark"] .header .header-btn-secondary:hover, html[data-theme="dark"] .header .header-btn-secondary:focus-visible { background-color: #00549F; /* Blue 100% */ border-color: #00549F; color: #FFFFFF; transform: translateY(-1px); } /* IT-ServiceDesk (primary) — flipped from the others so it stands out: solid blue at rest → inverts to outline on hover. */ html[data-theme="dark"] .header .btn-primary { background-color: #00549F; /* Blue 100% */ border-color: #00549F; color: #FFFFFF; } html[data-theme="dark"] .header .btn-primary:hover, html[data-theme="dark"] .header .btn-primary:focus-visible { background-color: var(--chat-input-bg); border-color: var(--rwth-blue-50); /* Blue 50% */ color: var(--color-primary); /* Blue 50% */ transform: translateY(-1px); } /* Send button: blue icon on slate at rest → fill solid blue with a white icon on hover (same as the other buttons; keeps its lift/scale). */ html[data-theme="dark"] .msger-send-btn { color: var(--color-primary); } html[data-theme="dark"] .msger-send-btn:hover, html[data-theme="dark"] .msger-send-btn:focus { background-color: #00549F; /* Blue 100% */ color: #FFFFFF; } /* Attach-screenshot button: same hover as the secondary buttons (outline at rest → fill solid blue with a white icon on hover). */ html[data-theme="dark"] .msger-attach-btn { border-color: var(--rwth-blue-50); /* Blue 50% */ color: var(--color-primary); transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast); } html[data-theme="dark"] .msger-attach-btn:hover, html[data-theme="dark"] .msger-attach-btn:focus { background-color: #00549F; /* Blue 100% */ border-color: #00549F; color: #FFFFFF; transform: translateY(-1px); } /* Message feedback (like / dislike) thumb icons → white on dark. Opacity + scale from the base rules still signal hover/active state. */ html[data-theme="dark"] .message-feedback-button-positive img, html[data-theme="dark"] .message-feedback-button-negative img, html[data-theme="dark"] .message-feedback-button-positive:hover img, html[data-theme="dark"] .message-feedback-button-negative:hover img, html[data-theme="dark"] .message-feedback-button-positive.active img, html[data-theme="dark"] .message-feedback-button-negative.active img { filter: brightness(0) invert(1); } /* Inline + block code used hard-coded black-on-light washes */ html[data-theme="dark"] .msg-text pre { background: rgba(255, 255, 255, 0.04); } html[data-theme="dark"] .msg-text code { background: rgba(255, 255, 255, 0.08); color: var(--color-text); } /* Image preview remove button had a white wash */ html[data-theme="dark"] .image-preview-remove { background-color: rgba(0, 0, 0, 0.55); } html[data-theme="dark"] .image-preview-remove-icon { color: #ECEDED; /* Black 10% */ } /* Modal close button is a black SVG — invert for dark surfaces */ html[data-theme="dark"] .btn-close { filter: invert(1) grayscale(1) brightness(1.6); } /* Scrollbar tinting (WebKit) */ html[data-theme="dark"] .msger-chat::-webkit-scrollbar, html[data-theme="dark"] .modal-body::-webkit-scrollbar { width: 10px; } html[data-theme="dark"] .msger-chat::-webkit-scrollbar-thumb, html[data-theme="dark"] .modal-body::-webkit-scrollbar-thumb { background-color: #2c3947; border-radius: var(--radius-pill); } html[data-theme="dark"] .msger-chat::-webkit-scrollbar-track, html[data-theme="dark"] .modal-body::-webkit-scrollbar-track { background-color: transparent; } /* ── Theme toggle button: show the right icon per theme ── */ .theme-toggle .theme-icon-sun { display: none; } .theme-toggle .theme-icon-moon { display: inline-flex; } html[data-theme="dark"] .theme-toggle .theme-icon-sun { display: inline-flex; } html[data-theme="dark"] .theme-toggle .theme-icon-moon { display: none; }