feat(mobile-ux): implement theme toggle, client-side persistence, and light mode style overrides #71
@@ -7,6 +7,18 @@
|
|||||||
<base href="/" />
|
<base href="/" />
|
||||||
<link rel="stylesheet" href="_content/NexusReader.UI.Shared/app.css" />
|
<link rel="stylesheet" href="_content/NexusReader.UI.Shared/app.css" />
|
||||||
<link rel="icon" type="image/png" href="favicon.png" />
|
<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>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
@@ -73,6 +85,7 @@
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
<script src="_content/NexusReader.UI.Shared/js/theme.js"></script>
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@@ -543,3 +543,208 @@
|
|||||||
from { transform: translateY(20px); opacity: 0; }
|
from { transform: translateY(20px); opacity: 0; }
|
||||||
to { transform: translateY(0); opacity: 1; }
|
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);
|
||||||
|
}
|
||||||
|
|||||||
@@ -39,6 +39,29 @@
|
|||||||
<NexusIcon Name="chevron-right" Size="14" />
|
<NexusIcon Name="chevron-right" Size="14" />
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</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>
|
</header>
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -416,6 +416,7 @@
|
|||||||
gap: 0.25rem;
|
gap: 0.25rem;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
min-width: 0;
|
min-width: 0;
|
||||||
|
margin-right: 40px; /* Space to prevent overlap with absolute theme toggle button */
|
||||||
}
|
}
|
||||||
|
|
||||||
.nexus-mobile-chapter-title {
|
.nexus-mobile-chapter-title {
|
||||||
@@ -479,4 +480,91 @@
|
|||||||
|
|
||||||
.theme-light .nexus-chapter-nav-btn:hover:not(:disabled) {
|
.theme-light .nexus-chapter-nav-btn:hover:not(:disabled) {
|
||||||
background: rgba(0, 0, 0, 0.06);
|
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;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
@@ -458,6 +458,8 @@
|
|||||||
{
|
{
|
||||||
if (firstRender)
|
if (firstRender)
|
||||||
{
|
{
|
||||||
|
await ThemeService.InitializeAsync();
|
||||||
|
|
||||||
try
|
try
|
||||||
{
|
{
|
||||||
var module = await JS.InvokeAsync<IJSObjectReference>("import", "./_content/NexusReader.UI.Shared/js/layoutResizer.js");
|
var module = await JS.InvokeAsync<IJSObjectReference>("import", "./_content/NexusReader.UI.Shared/js/layoutResizer.js");
|
||||||
|
|||||||
@@ -4,5 +4,6 @@ public interface IThemeService
|
|||||||
{
|
{
|
||||||
bool IsLightMode { get; }
|
bool IsLightMode { get; }
|
||||||
event Func<Task>? OnThemeChanged;
|
event Func<Task>? OnThemeChanged;
|
||||||
|
Task InitializeAsync();
|
||||||
Task ToggleTheme();
|
Task ToggleTheme();
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,13 +1,42 @@
|
|||||||
|
using Microsoft.JSInterop;
|
||||||
|
|
||||||
namespace NexusReader.UI.Shared.Services;
|
namespace NexusReader.UI.Shared.Services;
|
||||||
|
|
||||||
public sealed class ThemeService : IThemeService
|
public sealed class ThemeService : IThemeService
|
||||||
{
|
{
|
||||||
|
private readonly IJSRuntime _jsRuntime;
|
||||||
public bool IsLightMode { get; private set; } = false;
|
public bool IsLightMode { get; private set; } = false;
|
||||||
public event Func<Task>? OnThemeChanged;
|
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()
|
public async Task ToggleTheme()
|
||||||
{
|
{
|
||||||
IsLightMode = !IsLightMode;
|
IsLightMode = !IsLightMode;
|
||||||
|
try
|
||||||
|
{
|
||||||
|
await _jsRuntime.InvokeVoidAsync("themeInterop.setLightMode", IsLightMode);
|
||||||
|
}
|
||||||
|
catch
|
||||||
|
{
|
||||||
|
// Fail silently
|
||||||
|
}
|
||||||
if (OnThemeChanged != null) await OnThemeChanged();
|
if (OnThemeChanged != null) await OnThemeChanged();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -283,6 +283,10 @@ body {
|
|||||||
overflow-x: hidden;
|
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 */
|
/* Modern Scrollbars */
|
||||||
::-webkit-scrollbar {
|
::-webkit-scrollbar {
|
||||||
width: 6px;
|
width: 6px;
|
||||||
|
|||||||
@@ -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');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
@@ -9,6 +9,19 @@
|
|||||||
<link rel="stylesheet" href="NexusReader.Web.styles.css" />
|
<link rel="stylesheet" href="NexusReader.Web.styles.css" />
|
||||||
<ImportMap />
|
<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" />
|
<HeadOutlet @rendermode="InteractiveAuto" />
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
@@ -42,6 +55,7 @@
|
|||||||
setTimeout(hidePreloader, 3000);
|
setTimeout(hidePreloader, 3000);
|
||||||
})();
|
})();
|
||||||
</script>
|
</script>
|
||||||
|
<script src="_content/NexusReader.UI.Shared/js/theme.js"></script>
|
||||||
<script src="_content/NexusReader.UI.Shared/js/auth.js"></script>
|
<script src="_content/NexusReader.UI.Shared/js/auth.js"></script>
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user