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:
@@ -4,38 +4,75 @@
|
||||
left: 16px;
|
||||
right: 16px;
|
||||
height: 64px;
|
||||
background: rgba(18, 18, 18, 0.75);
|
||||
backdrop-filter: blur(24px);
|
||||
-webkit-backdrop-filter: blur(24px);
|
||||
border: 1px solid rgba(0, 255, 153, 0.2);
|
||||
border-radius: 16px;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto 1fr;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0 1rem;
|
||||
padding: 0 0.5rem;
|
||||
z-index: 1000;
|
||||
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
|
||||
box-sizing: border-box;
|
||||
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
|
||||
overflow: visible; /* Critical to show elevated FAB */
|
||||
}
|
||||
|
||||
.toolbar-slot {
|
||||
/* Light Mode: Premium Paper Look */
|
||||
.nexus-unified-mobile-toolbar.theme-light {
|
||||
background: rgba(244, 241, 234, 0.9);
|
||||
backdrop-filter: blur(12px);
|
||||
-webkit-backdrop-filter: blur(12px);
|
||||
border: 1px solid rgba(139, 130, 115, 0.18);
|
||||
box-shadow: 0 8px 30px rgba(139, 130, 115, 0.15);
|
||||
}
|
||||
|
||||
/* Dark Mode: Translucent Slate */
|
||||
.nexus-unified-mobile-toolbar.theme-dark {
|
||||
background: rgba(18, 18, 18, 0.8);
|
||||
backdrop-filter: blur(12px);
|
||||
-webkit-backdrop-filter: blur(12px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.nav-toggle-btn {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: none;
|
||||
border: none;
|
||||
color: #8b8273; /* Inactive items earthy gray */
|
||||
padding: 6px 0;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
min-width: 0;
|
||||
position: relative;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/* LEFT SLOT: Progress circular ring */
|
||||
.left-slot {
|
||||
justify-content: flex-start;
|
||||
gap: 0.65rem;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
.nav-toggle-btn.active {
|
||||
color: #10b981; /* Active items vibrant green */
|
||||
}
|
||||
|
||||
.nav-toggle-btn ::deep .nexus-icon {
|
||||
transition: transform 0.2s ease;
|
||||
}
|
||||
|
||||
.nav-toggle-btn.active ::deep .nexus-icon {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
.tab-label {
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
margin-top: 4px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.progress-ring-wrapper {
|
||||
position: relative;
|
||||
width: 38px;
|
||||
height: 38px;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
@@ -45,65 +82,53 @@
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
|
||||
.progress-ring-indicator {
|
||||
transition: stroke-dashoffset 0.35s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.progress-text {
|
||||
position: absolute;
|
||||
font-size: 0.65rem;
|
||||
font-weight: 700;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.progress-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.slot-label {
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.slot-desc {
|
||||
font-size: 0.6rem;
|
||||
color: rgba(255,255,255,0.4);
|
||||
font-weight: 700;
|
||||
color: #8b8273;
|
||||
}
|
||||
|
||||
/* CENTER SLOT: Glowing AI Core Button */
|
||||
.center-slot {
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
.nav-toggle-btn.active .progress-text {
|
||||
color: #10b981;
|
||||
}
|
||||
|
||||
/* Center AI FAB container & button */
|
||||
.center-ai-container {
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.btn-nexus-ai-core {
|
||||
width: 52px;
|
||||
height: 52px;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(135deg, #00FF99 0%, #00F0FF 100%);
|
||||
background: linear-gradient(135deg, #10b981 0%, #059669 100%);
|
||||
border: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #0B0C10;
|
||||
color: #ffffff;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
position: absolute;
|
||||
top: -20px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
z-index: 5;
|
||||
box-shadow: 0 0 20px rgba(0, 255, 153, 0.4);
|
||||
transform: translateY(-8px);
|
||||
box-shadow: 0 4px 14px rgba(16, 185, 129, 0.4);
|
||||
transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
||||
}
|
||||
|
||||
.btn-nexus-ai-core:active {
|
||||
transform: translateY(-6px) scale(0.95);
|
||||
box-shadow: 0 0 10px rgba(0, 255, 153, 0.3);
|
||||
transform: translateX(-50%) translateY(-18px) scale(0.95);
|
||||
box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
|
||||
}
|
||||
|
||||
.ai-core-icon {
|
||||
color: #0b0c10;
|
||||
filter: drop-shadow(0 1px 2px rgba(0,0,0,0.2));
|
||||
color: #ffffff !important;
|
||||
}
|
||||
|
||||
.center-ai-container .tab-label {
|
||||
margin-top: 32px;
|
||||
}
|
||||
|
||||
/* Pulse effects */
|
||||
@@ -114,7 +139,7 @@
|
||||
right: -4px;
|
||||
bottom: -4px;
|
||||
border-radius: 50%;
|
||||
border: 2px solid rgba(0, 255, 153, 0.4);
|
||||
border: 2px solid rgba(16, 185, 129, 0.4);
|
||||
opacity: 0;
|
||||
animation: corePulse 2s cubic-bezier(0.24, 0, 0.38, 1) infinite;
|
||||
pointer-events: none;
|
||||
@@ -128,7 +153,7 @@
|
||||
right: -8px;
|
||||
bottom: -8px;
|
||||
border-radius: 50%;
|
||||
border: 1px solid rgba(0, 240, 255, 0.2);
|
||||
border: 1px solid rgba(16, 185, 129, 0.2);
|
||||
opacity: 0;
|
||||
animation: corePulseOuter 2.5s cubic-bezier(0.24, 0, 0.38, 1) infinite;
|
||||
pointer-events: none;
|
||||
@@ -147,43 +172,6 @@
|
||||
100% { transform: scale(1.25); opacity: 0; }
|
||||
}
|
||||
|
||||
/* RIGHT SLOT: Layout Switching */
|
||||
.right-slot {
|
||||
justify-content: flex-end;
|
||||
gap: 0.35rem;
|
||||
}
|
||||
|
||||
.nav-toggle-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 2px;
|
||||
padding: 6px 8px;
|
||||
border-radius: 8px;
|
||||
color: rgba(255, 255, 255, 0.45);
|
||||
cursor: pointer;
|
||||
transition: all 0.25s ease;
|
||||
}
|
||||
|
||||
.nav-toggle-btn.active {
|
||||
color: var(--nexus-neon, #00FF99);
|
||||
background-color: rgba(0, 255, 153, 0.06);
|
||||
}
|
||||
|
||||
.nav-toggle-btn ::deep .nexus-icon {
|
||||
transition: transform 0.2s ease;
|
||||
}
|
||||
|
||||
.nav-toggle-btn.active ::deep .nexus-icon {
|
||||
transform: scale(1.08);
|
||||
}
|
||||
|
||||
.nav-toggle-btn span {
|
||||
font-size: 0.6rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* SECTION CHECKPOINTS OVERLAY */
|
||||
.checkpoints-overlay {
|
||||
@@ -360,3 +348,54 @@
|
||||
.checkpoint-item:active .arrow-icon {
|
||||
transform: translateX(2px);
|
||||
}
|
||||
|
||||
/* Light Mode overrides for Checkpoints Overlay */
|
||||
.theme-light .checkpoints-sheet {
|
||||
background: rgba(244, 241, 234, 0.95);
|
||||
border-top: 1px solid rgba(139, 130, 115, 0.15);
|
||||
box-shadow: 0 -8px 30px rgba(139, 130, 115, 0.15);
|
||||
}
|
||||
|
||||
.theme-light .checkpoints-header {
|
||||
border-bottom: 1px solid rgba(139, 130, 115, 0.1);
|
||||
}
|
||||
|
||||
.theme-light .checkpoints-header h4 {
|
||||
color: #292524;
|
||||
}
|
||||
|
||||
.theme-light .close-checkpoints-btn {
|
||||
color: #8b8273;
|
||||
}
|
||||
|
||||
.theme-light .checkpoint-item {
|
||||
background-color: rgba(139, 130, 115, 0.03);
|
||||
border: 1px solid rgba(139, 130, 115, 0.06);
|
||||
}
|
||||
|
||||
.theme-light .checkpoint-item.active {
|
||||
background-color: rgba(16, 185, 129, 0.08);
|
||||
border-color: rgba(16, 185, 129, 0.25);
|
||||
}
|
||||
|
||||
.theme-light .checkpoint-item.active .checkpoint-id {
|
||||
color: #10b981;
|
||||
}
|
||||
|
||||
.theme-light .checkpoint-item.active .indicator-dot {
|
||||
background-color: #10b981;
|
||||
box-shadow: 0 0 8px rgba(16, 185, 129, 0.6);
|
||||
}
|
||||
|
||||
.theme-light .checkpoint-id {
|
||||
color: #292524;
|
||||
}
|
||||
|
||||
.theme-light .checkpoint-label {
|
||||
color: #8b8273;
|
||||
}
|
||||
|
||||
.theme-light .arrow-icon {
|
||||
color: #8b8273;
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user