Skip to content

Commit b51abaf

Browse files
OsaronOsaron
committed
feat: Light mode overhaul with Zters CUBE palette, system theme detection, and updated user message bubbles
- Redesign light mode with Zters CUBE color palette (light grey bg, white cards, purple accents) - Add scoped body.light-theme overrides for all components (chat area, bubbles, popovers, code blocks, scrollbars) - Override hardcoded dark gradient on .chat-main with !important in light mode - Theme now auto-detects OS/browser prefers-color-scheme on first load and listens for live changes - Manual dark/light toggle in Settings still works and overrides for the session - Restyle user message bubbles as clean cards with left orange accent border (adapts to both modes) - Update predefined suggestion questions to: Getting Started with Cube, Explain the Zters Hub, How to find documentation within BookStack? - Fix Explain the Zters Hub data-query to match button label for accurate BookStack search results
1 parent 9f60139 commit b51abaf

3 files changed

Lines changed: 199 additions & 15 deletions

File tree

‎chatbot/public/app.js‎

Lines changed: 20 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -42,13 +42,28 @@ async function loadConfig() {
4242
}
4343
loadConfig();
4444

45-
// Settings Actions
46-
themeCheckbox.addEventListener('change', (e) => {
47-
if (!e.target.checked) {
48-
document.body.classList.add('light-theme');
49-
} else {
45+
// ── Theme: respect OS/browser preference on first load ──────────────────
46+
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)');
47+
48+
function applyTheme(dark) {
49+
if (dark) {
5050
document.body.classList.remove('light-theme');
51+
themeCheckbox.checked = true;
52+
} else {
53+
document.body.classList.add('light-theme');
54+
themeCheckbox.checked = false;
5155
}
56+
}
57+
58+
// Apply immediately on load
59+
applyTheme(prefersDark.matches);
60+
61+
// Follow live system changes (e.g. macOS auto switch)
62+
prefersDark.addEventListener('change', (e) => applyTheme(e.matches));
63+
64+
// Manual toggle still works and overrides for the session
65+
themeCheckbox.addEventListener('change', (e) => {
66+
applyTheme(e.target.checked);
5267
});
5368

5469
langCheckbox.addEventListener('change', (e) => {

‎chatbot/public/index.html‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -105,9 +105,9 @@ <h1>Welcome to Zters Assistant</h1>
105105
<p>Ask a question or tell me about your use case. I'll point you to the right documentation.</p>
106106

107107
<div class="prompt-suggestions">
108-
<button class="suggestion-btn" data-query="Can you summarize the purpose of the Cube platform?">Highlight Zters features for my use case</button>
109-
<button class="suggestion-btn" data-query="How does the Portal integrate with typical customer workflows?">How does Portal integrate with my product?</button>
110-
<button class="suggestion-btn" data-query="What role does the Zters Hub play in daily operations?">Explain the role of Zters Hub</button>
108+
<button class="suggestion-btn" data-query="How do I get started with Cube?">Getting Started with Cube</button>
109+
<button class="suggestion-btn" data-query="Explain the Zters Hub">Explain the Zters Hub</button>
110+
<button class="suggestion-btn" data-query="How do I find documentation within BookStack?">How to find documentation within BookStack?</button>
111111
</div>
112112
</div>
113113
</div>

‎chatbot/public/styles.css‎

Lines changed: 176 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -19,13 +19,177 @@
1919
}
2020

2121
body.light-theme {
22+
/* Surface layers */
2223
--bg-dark: #f0f2f5;
2324
--bg-darker: #ffffff;
2425
--bg-panel: #ffffff;
25-
--text-primary: #1e1e1e;
26-
--text-secondary: #555555;
27-
--border-color: #dddddd;
28-
--bubble-user: #e2e8f0;
26+
27+
/* Typography */
28+
--text-primary: #1a1a2e;
29+
--text-secondary: #64748b;
30+
31+
/* Borders & dividers */
32+
--border-color: #e2e8f0;
33+
34+
/* Message bubbles */
35+
--bubble-user: #ede9fe;
36+
37+
/* Zters CUBE accent — violet/purple used for labels, dashed borders, section headers */
38+
--zters-purple: #7c3aed;
39+
--zters-purple-dim: rgba(124, 58, 237, 0.1);
40+
--zters-purple-border: rgba(124, 58, 237, 0.35);
41+
42+
/* Keep orange brand colour (already in :root) */
43+
--zters-orange-dim: rgba(244, 118, 33, 0.12);
44+
}
45+
46+
/* ── Chat main area: replace dark gradient with clean light grey ── */
47+
body.light-theme .chat-main {
48+
background: #f0f2f5 !important;
49+
}
50+
51+
/* ── Welcome screen icon circle ── */
52+
body.light-theme .huge-icon {
53+
background-color: #ffffff;
54+
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
55+
}
56+
57+
/* ── Welcome text ── */
58+
body.light-theme .welcome-screen h1 {
59+
color: #1a1a2e;
60+
}
61+
body.light-theme .welcome-screen p {
62+
color: #64748b;
63+
}
64+
65+
/* ── Suggestion / prompt buttons: white cards with visible border ── */
66+
body.light-theme .suggestion-btn {
67+
background: #ffffff;
68+
border: 1px solid #e2e8f0;
69+
color: #334155;
70+
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
71+
}
72+
body.light-theme .suggestion-btn:hover {
73+
background: #f8f5ff;
74+
border-color: var(--zters-purple-border);
75+
color: var(--zters-purple);
76+
box-shadow: 0 2px 8px rgba(124, 58, 237, 0.12);
77+
}
78+
79+
/* ── User message bubble ── */
80+
body.light-theme .message.user {
81+
background-color: #ffffff;
82+
color: #1a1a2e;
83+
border-left-color: var(--zters-orange);
84+
box-shadow: 0 1px 6px rgba(0, 0, 0, 0.07);
85+
}
86+
87+
/* ── Bot message text ── */
88+
body.light-theme .message.bot {
89+
color: #1a1a2e;
90+
}
91+
92+
/* ── Code blocks ── */
93+
body.light-theme pre {
94+
background: #f8f8fb;
95+
border-color: #e2e8f0;
96+
}
97+
body.light-theme code {
98+
background: rgba(124, 58, 237, 0.07);
99+
color: #7c3aed;
100+
}
101+
102+
/* ── Links ── */
103+
body.light-theme a {
104+
color: var(--zters-orange);
105+
}
106+
107+
/* ── Input area wrapper ── */
108+
body.light-theme .input-area {
109+
background: transparent;
110+
}
111+
112+
/* ── Input container pill ── */
113+
body.light-theme .input-container {
114+
background-color: #ffffff;
115+
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
116+
border: 1px solid #e2e8f0;
117+
}
118+
119+
/* ── Sources panel / cards ── */
120+
body.light-theme .sources-panel {
121+
background-color: #ffffff;
122+
border-left-color: #e2e8f0;
123+
box-shadow: -4px 0 16px rgba(0, 0, 0, 0.06);
124+
}
125+
body.light-theme .source-card {
126+
background: #f8f9fc;
127+
border-color: #e2e8f0;
128+
}
129+
body.light-theme .source-card p {
130+
color: #64748b;
131+
}
132+
133+
/* ── Popover panels ── */
134+
body.light-theme .popover-panel {
135+
background: #ffffff;
136+
border-color: #e2e8f0;
137+
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
138+
}
139+
140+
/* ── Tooltip ── */
141+
body.light-theme .tooltip {
142+
background: #ffffff;
143+
border-color: #e2e8f0;
144+
color: #1a1a2e;
145+
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
146+
}
147+
148+
/* ── Shelf / Cube items in popover ── */
149+
body.light-theme .shelf-item,
150+
body.light-theme .cube-item {
151+
background: #f8f9fc;
152+
color: #334155;
153+
}
154+
body.light-theme .shelf-item:hover,
155+
body.light-theme .cube-item:hover {
156+
background: var(--zters-purple-dim);
157+
border-color: var(--zters-purple-border);
158+
color: var(--zters-purple);
159+
}
160+
161+
/* ── View-sources inline button ── */
162+
body.light-theme .view-sources-btn {
163+
border-color: #e2e8f0;
164+
color: #64748b;
165+
}
166+
body.light-theme .view-sources-btn:hover {
167+
background: #f8f5ff;
168+
border-color: var(--zters-purple-border);
169+
color: var(--zters-purple);
170+
}
171+
172+
/* ── Setting rows (hover) in light mode ── */
173+
body.light-theme .setting-row:hover {
174+
background: rgba(0, 0, 0, 0.03);
175+
}
176+
177+
/* ── Status/spinner text ── */
178+
body.light-theme .status-indicator {
179+
color: #64748b;
180+
}
181+
182+
/* ── Brand footer ── */
183+
body.light-theme .brand-footer {
184+
color: #94a3b8;
185+
}
186+
187+
/* ── Scrollbar ── */
188+
body.light-theme .list-container::-webkit-scrollbar-thumb {
189+
background: #cbd5e1;
190+
}
191+
body.light-theme .messages-wrapper::-webkit-scrollbar-thumb {
192+
background: #cbd5e1;
29193
}
30194

31195
* {
@@ -528,9 +692,14 @@ input:checked + .slider:before {
528692

529693
.message.user {
530694
align-self: flex-end;
531-
background-color: var(--bubble-user);
532-
padding: 12px 20px;
533-
border-radius: 20px 20px 4px 20px;
695+
background-color: var(--bg-panel);
696+
color: var(--text-primary);
697+
padding: 12px 18px;
698+
border-radius: 10px;
699+
border-left: 3px solid var(--zters-orange);
700+
box-shadow: 0 1px 6px rgba(0, 0, 0, 0.18);
701+
max-width: 72%;
702+
text-align: left;
534703
}
535704

536705
.message.bot {

0 commit comments

Comments
 (0)