feat(mobile-ux): implement theme toggle, client-side persistence, and light mode style overrides (#71)
Resolves #72 ## Description This PR implements the theme toggle mechanism, client-side persistence, and comprehensive light mode style overrides for the mobile reader layout in **NexusReader**. ### Key Changes 1. **ThemeService & State Management**: - Enhanced `ThemeService` with `InitializeAsync` and `ToggleTheme` using JS Interop. - Synchronized theme state changes via `OnThemeChanged` event. 2. **Local Storage Persistence & FOUC Prevention**: - Added client-side script in `App.razor` and MAUI `index.html` to instantly apply `.theme-light` from `localStorage` before prerendering/rendering to prevent a Flash of Unthemed Content (FOUC). - Created `theme.js` containing JS helper methods (`themeInterop.isLightMode`, `themeInterop.setLightMode`) to interface with `localStorage` and `document.documentElement` class list. 3. **UI Theme Toggle**: - Added a minimalist glassmorphic theme toggle button in the header of the `ReaderCanvas.razor` with dynamic transitions and icon morphing between sun and moon SVG icons. 4. **Light Mode Stylesheets Overrides**: - Added detailed light mode scoped styles (`.theme-light`) for the `ReaderCanvas` and the bottom-sheet `GlobalIntelligence` AI chat panel, utilizing earthy gray text (`#2d2a26`) on warm paper-like backgrounds (`rgba(244, 241, 234, 0.95)` / `#faf8f5`) to maintain high-quality aesthetic consistency. ### Verification - Solution built successfully without errors (`dotnet build NexusReader.slnx --no-restore`). - Scoped CSS isolation checked and validated for both Web and MAUI contexts. --------- Co-authored-by: Marek Jasiński <jasins.marek@gmail.com> Reviewed-on: #71 Co-authored-by: Antigravity <antigravity@google.com> Co-committed-by: Antigravity <antigravity@google.com>
This commit was merged in pull request #71.
This commit is contained in:
@@ -543,3 +543,208 @@
|
||||
from { transform: translateY(20px); opacity: 0; }
|
||||
to { transform: translateY(0); opacity: 1; }
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Light Mode Theme Overrides
|
||||
========================================================================== */
|
||||
|
||||
.theme-light .sheet-content {
|
||||
background: rgba(244, 241, 234, 0.95); /* Matches Premium Paper theme */
|
||||
border-top-color: rgba(16, 185, 129, 0.3);
|
||||
box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
.theme-light .sheet-drag-handle {
|
||||
background-color: rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.theme-light .sheet-header {
|
||||
border-bottom-color: rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
|
||||
.theme-light .header-info h3 {
|
||||
color: #2d2a26;
|
||||
}
|
||||
|
||||
.theme-light .header-info .subtitle {
|
||||
color: #7c766b;
|
||||
}
|
||||
|
||||
.theme-light .close-btn {
|
||||
color: #7c766b;
|
||||
}
|
||||
|
||||
.theme-light .close-btn:hover {
|
||||
background-color: rgba(0, 0, 0, 0.05);
|
||||
color: #2d2a26;
|
||||
}
|
||||
|
||||
.theme-light .welcome-container h4 {
|
||||
color: #2d2a26;
|
||||
}
|
||||
|
||||
.theme-light .welcome-container p {
|
||||
color: #7c766b;
|
||||
}
|
||||
|
||||
.theme-light .ai-avatar-badge {
|
||||
background: linear-gradient(135deg, rgba(16, 185, 129, 0.08) 0%, rgba(6, 182, 212, 0.08) 100%);
|
||||
border-color: rgba(16, 185, 129, 0.25);
|
||||
}
|
||||
|
||||
.theme-light .ai-avatar-badge ::deep i {
|
||||
color: #10b981;
|
||||
}
|
||||
|
||||
.theme-light .welcome-glow-icon {
|
||||
background: rgba(16, 185, 129, 0.05);
|
||||
border-color: rgba(16, 185, 129, 0.25);
|
||||
box-shadow: 0 0 20px rgba(16, 185, 129, 0.08);
|
||||
}
|
||||
|
||||
.theme-light .welcome-glow-icon ::deep i {
|
||||
color: #10b981;
|
||||
}
|
||||
|
||||
/* Chat bubble styling overrides */
|
||||
.theme-light .ai-bubble {
|
||||
background-color: rgba(255, 255, 255, 0.6);
|
||||
border-color: rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.theme-light .ai-bubble .sender-name {
|
||||
color: #7c766b;
|
||||
}
|
||||
|
||||
.theme-light .user-bubble {
|
||||
background-color: rgba(16, 185, 129, 0.06);
|
||||
border-color: rgba(16, 185, 129, 0.18);
|
||||
}
|
||||
|
||||
.theme-light .user-bubble .sender-name {
|
||||
color: #10b981;
|
||||
}
|
||||
|
||||
.theme-light .message-time {
|
||||
color: #8c867b;
|
||||
}
|
||||
|
||||
.theme-light .message-text {
|
||||
color: #2d2a26;
|
||||
}
|
||||
|
||||
.theme-light .message-text strong {
|
||||
color: #1a1917;
|
||||
}
|
||||
|
||||
/* Code block / Citation styling overrides */
|
||||
.theme-light .nexus-mobile-code-block {
|
||||
background-color: #faf8f5;
|
||||
border-left-color: #10b981;
|
||||
color: #2d2a26;
|
||||
}
|
||||
|
||||
.theme-light .nexus-mobile-inline-code {
|
||||
background-color: rgba(0, 0, 0, 0.04);
|
||||
color: #b91c1c;
|
||||
}
|
||||
|
||||
.theme-light .nexus-mobile-citation {
|
||||
background-color: rgba(16, 185, 129, 0.08);
|
||||
border-color: rgba(16, 185, 129, 0.25);
|
||||
color: #10b981;
|
||||
}
|
||||
|
||||
.theme-light .typing-indicator span {
|
||||
background-color: rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.theme-light .loading-label {
|
||||
color: #7c766b;
|
||||
}
|
||||
|
||||
/* Footer / Input overrides */
|
||||
.theme-light .sheet-footer {
|
||||
background-color: rgba(234, 230, 221, 0.6);
|
||||
border-top-color: rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
|
||||
.theme-light .scope-indicator {
|
||||
color: #7c766b;
|
||||
}
|
||||
|
||||
.theme-light .scope-indicator ::deep i {
|
||||
color: #8c867b;
|
||||
}
|
||||
|
||||
.theme-light .nexus-mobile-input {
|
||||
background-color: rgba(255, 255, 255, 0.85);
|
||||
border-color: rgba(0, 0, 0, 0.08);
|
||||
color: #2d2a26;
|
||||
}
|
||||
|
||||
.theme-light .nexus-mobile-input:focus {
|
||||
border-color: rgba(16, 185, 129, 0.4);
|
||||
background-color: #ffffff;
|
||||
box-shadow: 0 0 8px rgba(16, 185, 129, 0.15);
|
||||
}
|
||||
|
||||
.theme-light .send-btn.disabled {
|
||||
background: rgba(0, 0, 0, 0.04);
|
||||
color: rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
|
||||
/* Citation modal overrides */
|
||||
.theme-light .citation-modal {
|
||||
background: #ffffff;
|
||||
border-color: rgba(0, 0, 0, 0.06);
|
||||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
.theme-light .citation-modal .modal-header {
|
||||
border-bottom-color: rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
|
||||
.theme-light .citation-modal .book-title {
|
||||
color: #2d2a26;
|
||||
}
|
||||
|
||||
.theme-light .citation-modal .book-title ::deep i {
|
||||
color: #10b981;
|
||||
}
|
||||
|
||||
.theme-light .citation-modal .modal-body {
|
||||
color: #2d2a26;
|
||||
}
|
||||
|
||||
.theme-light .citation-modal .citation-author,
|
||||
.theme-light .citation-modal .citation-page {
|
||||
color: #7c766b;
|
||||
}
|
||||
|
||||
.theme-light .citation-modal .citation-author strong,
|
||||
.theme-light .citation-modal .citation-page strong {
|
||||
color: #2d2a26;
|
||||
}
|
||||
|
||||
.theme-light .citation-modal .citation-snippet {
|
||||
background: rgba(16, 185, 129, 0.04);
|
||||
border-left-color: #10b981;
|
||||
color: #2d2a26;
|
||||
}
|
||||
|
||||
.theme-light .citation-modal .modal-footer {
|
||||
border-top-color: rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
|
||||
.theme-light .citation-modal .btn-nexus {
|
||||
background: linear-gradient(135deg, rgba(16, 185, 129, 0.08) 0%, rgba(6, 182, 212, 0.08) 100%);
|
||||
border-color: rgba(16, 185, 129, 0.3);
|
||||
color: #10b981;
|
||||
}
|
||||
|
||||
.theme-light .citation-modal .btn-nexus:hover {
|
||||
background: linear-gradient(135deg, rgba(16, 185, 129, 0.15) 0%, rgba(6, 182, 212, 0.15) 100%);
|
||||
border-color: rgba(16, 185, 129, 0.5);
|
||||
box-shadow: 0 0 10px rgba(16, 185, 129, 0.15);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user