mjasin/Nexus.Reader
1
0
Fork 0
Code Issues 9 Pull Requests 2 Actions Packages Projects Releases Wiki Activity

feat(mobile-ux): implement theme toggle, client-side persistence, and light mode style overrides

Browse Source
This commit is contained in:
Marek Jaisński
2026-06-05 19:48:02 +02:00
parent d2020ce694
commit d36948b853
10 changed files with 393 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/NexusReader.Maui/wwwroot/index.html
+13
View File
@@ -7,6 +7,18 @@
<base href="/" />
<link rel="stylesheet" href="_content/NexusReader.UI.Shared/app.css" />
<link rel="icon" type="image/png" href="favicon.png" />
<script>
(function () {
const savedTheme = localStorage.getItem('theme');
const systemPrefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
const isLight = savedTheme === 'light' || (!savedTheme && !systemPrefersDark);
if (isLight) {
document.documentElement.classList.add('theme-light');
} else {
document.documentElement.classList.remove('theme-light');
}
})();
</script>
</head>
<body>
@@ -73,6 +85,7 @@
}
};
</script>
<script src="_content/NexusReader.UI.Shared/js/theme.js"></script>
</body>
</html>
src/NexusReader.UI.Shared/Components/Organisms/GlobalIntelligence.razor.css
+205
View File
@@ -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);
}
src/NexusReader.UI.Shared/Components/Organisms/ReaderCanvas.razor
+23
View File
@@ -39,6 +39,29 @@
<NexusIcon Name="chevron-right" Size="14" />
</button>
</div>
<button class="nexus-theme-toggle-btn" @onclick="ThemeService.ToggleTheme" aria-label="Przełącz motyw" title="Przełącz motyw">
@if (ThemeService.IsLightMode)
{
<svg class="theme-toggle-icon sun" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<circle cx="12" cy="12" r="4"></circle>
<path d="M12 2v2"></path>
<path d="M12 20v2"></path>
<path d="M4.93 4.93l1.41 1.41"></path>
<path d="M17.66 17.66l1.41 1.41"></path>
<path d="M2 12h2"></path>
<path d="M20 12h2"></path>
<path d="M6.34 17.66l-1.41 1.41"></path>
<path d="M19.07 4.93l-1.41 1.41"></path>
</svg>
}
else
{
<svg class="theme-toggle-icon moon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z"></path>
</svg>
}
</button>
</header>
}
src/NexusReader.UI.Shared/Components/Organisms/ReaderCanvas.razor.css
+88
View File
@@ -416,6 +416,7 @@
gap: 0.25rem;
height: 100%;
min-width: 0;
margin-right: 40px; /* Space to prevent overlap with absolute theme toggle button */
}
.nexus-mobile-chapter-title {
@@ -480,3 +481,90 @@
.theme-light .nexus-chapter-nav-btn:hover:not(:disabled) {
background: rgba(0, 0, 0, 0.06);
}
/* Minimalist Theme Toggle Button with Glassmorphism */
.nexus-theme-toggle-btn {
position: absolute;
right: 1rem;
top: 50%;
transform: translateY(-50%);
width: 36px;
height: 36px;
border-radius: 50%;
border: 1px solid rgba(255, 255, 255, 0.08);
background: rgba(255, 255, 255, 0.03);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
z-index: 1001;
padding: 0;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.nexus-theme-toggle-btn:hover {
background: rgba(255, 255, 255, 0.08);
border-color: rgba(255, 255, 255, 0.15);
transform: translateY(-50%) scale(1.05);
}
.nexus-theme-toggle-btn:active {
transform: translateY(-50%) scale(0.95);
}
/* Theme specifics for Light Mode */
.theme-light .nexus-theme-toggle-btn {
border-color: rgba(0, 0, 0, 0.08);
background: rgba(0, 0, 0, 0.03);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}
.theme-light .nexus-theme-toggle-btn:hover {
background: rgba(0, 0, 0, 0.06);
border-color: rgba(0, 0, 0, 0.12);
}
/* Icon Styling and Transition */
.theme-toggle-icon {
width: 18px;
height: 18px;
stroke-width: 2px;
}
/* In Dark Mode, the icon should be brand green (#10b981) */
.theme-toggle-icon.moon {
color: #10b981;
filter: drop-shadow(0 0 4px rgba(16, 185, 129, 0.3));
animation: morphMoon 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
/* In Light Mode, the icon should be a dark earthy gray (#2d2a26) */
.theme-toggle-icon.sun {
color: #2d2a26;
animation: morphSun 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
@keyframes morphMoon {
0% {
transform: rotate(-45deg) scale(0.7);
opacity: 0;
}
100% {
transform: rotate(0deg) scale(1);
opacity: 1;
}
}
@keyframes morphSun {
0% {
transform: rotate(45deg) scale(0.7);
opacity: 0;
}
100% {
transform: rotate(0deg) scale(1);
opacity: 1;
}
}
src/NexusReader.UI.Shared/Layout/ReaderLayout.razor
+2
View File
@@ -458,6 +458,8 @@
{
if (firstRender)
{
await ThemeService.InitializeAsync();
try
{
var module = await JS.InvokeAsync<IJSObjectReference>("import", "./_content/NexusReader.UI.Shared/js/layoutResizer.js");
src/NexusReader.UI.Shared/Services/IThemeService.cs
+1
View File
@@ -4,5 +4,6 @@ public interface IThemeService
{
bool IsLightMode { get; }
event Func<Task>? OnThemeChanged;
Task InitializeAsync();
Task ToggleTheme();
}
src/NexusReader.UI.Shared/Services/ThemeService.cs
+29
View File
@@ -1,13 +1,42 @@
using Microsoft.JSInterop;
namespace NexusReader.UI.Shared.Services;
public sealed class ThemeService : IThemeService
{
private readonly IJSRuntime _jsRuntime;
public bool IsLightMode { get; private set; } = false;
public event Func<Task>? OnThemeChanged;
public ThemeService(IJSRuntime jsRuntime)
{
_jsRuntime = jsRuntime;
}
public async Task InitializeAsync()
{
try
{
IsLightMode = await _jsRuntime.InvokeAsync<bool>("themeInterop.isLightMode");
if (OnThemeChanged != null) await OnThemeChanged();
}
catch
{
// Fail silently during prerendering or if JS is not available yet
}
}
public async Task ToggleTheme()
{
IsLightMode = !IsLightMode;
try
{
await _jsRuntime.InvokeVoidAsync("themeInterop.setLightMode", IsLightMode);
}
catch
{
// Fail silently
}
if (OnThemeChanged != null) await OnThemeChanged();
}
}
src/NexusReader.UI.Shared/wwwroot/app.css
+4
View File
@@ -283,6 +283,10 @@ body {
overflow-x: hidden;
}
body, .reader-canvas, .reader-flow-container, .nexus-mobile-reader-header, .nexus-mobile-chapter-title, .nexus-mobile-escape-btn {
transition: background-color 0.4s ease, color 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
}
/* Modern Scrollbars */
::-webkit-scrollbar {
width: 6px;
src/NexusReader.UI.Shared/wwwroot/js/theme.js
+14
View File
@@ -0,0 +1,14 @@
window.themeInterop = {
isLightMode: function () {
return document.documentElement.classList.contains('theme-light');
},
setLightMode: function (isLight) {
if (isLight) {
document.documentElement.classList.add('theme-light');
localStorage.setItem('theme', 'light');
} else {
document.documentElement.classList.remove('theme-light');
localStorage.setItem('theme', 'dark');
}
}
};
src/NexusReader.Web/Components/App.razor
+14
View File
@@ -9,6 +9,19 @@
<link rel="stylesheet" href="NexusReader.Web.styles.css" />
<ImportMap />
<script>
(function () {
const savedTheme = localStorage.getItem('theme');
const systemPrefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
const isLight = savedTheme === 'light' || (!savedTheme && !systemPrefersDark);
if (isLight) {
document.documentElement.classList.add('theme-light');
} else {
document.documentElement.classList.remove('theme-light');
}
})();
</script>
<HeadOutlet @rendermode="InteractiveAuto" />
</head>
@@ -42,6 +55,7 @@
setTimeout(hidePreloader, 3000);
})();
</script>
<script src="_content/NexusReader.UI.Shared/js/theme.js"></script>
<script src="_content/NexusReader.UI.Shared/js/auth.js"></script>
</body>