paul/picpeak
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

fix(theme): centralise force-mode enforcement inside ThemeContext so every gallery flips

Browse Source
This commit is contained in:
Luca
2026-05-06 02:27:05 +02:00
parent a76ecf8496
commit 21188f48d7
4 changed files with 40 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/GlobalThemeProvider.tsx
+2 -5
View File
@@ -1,7 +1,6 @@
import React, { useEffect, useRef } from 'react';
import { useTheme } from '../contexts/ThemeContext';
import { usePublicSettings } from '../hooks/usePublicSettings';
import { applyForceColorMode } from '../utils/themeMigration';
interface GlobalThemeProviderProps {
children: React.ReactNode;
@@ -19,10 +18,8 @@ export const GlobalThemeProvider: React.FC<GlobalThemeProviderProps> = ({ childr
if (!themeAppliedRef.current && settingsData?.theme_config && !isGalleryPage) {
themeAppliedRef.current = true;
// Honor instance-wide force color mode: when set, applyForceColorMode
// also swaps the surface/text tokens so the page actually flips
// visually (not just the colorMode flag — see #397 follow-up).
setTheme(applyForceColorMode(settingsData.theme_config, settingsData.branding_force_color_mode));
// Instance-wide force color mode is enforced inside ThemeContext.applyTheme.
setTheme(settingsData.theme_config);
}
}, [settingsData, setTheme]);
frontend/src/components/gallery/GalleryView.tsx
+3 -10
View File
@@ -28,7 +28,6 @@ import { useGalleryCustomCss } from '../../hooks/useGalleryCustomCss';
import { usePublicSettings } from '../../hooks/usePublicSettings';
import type { Photo } from '../../types';
import { GALLERY_THEME_PRESETS } from '../../types/theme.types';
import { applyForceColorMode } from '../../utils/themeMigration';
import { useQueryClient } from '@tanstack/react-query';
interface GalleryViewProps {
@@ -342,15 +341,9 @@ export const GalleryView: React.FC<GalleryViewProps> = ({ slug, event }) => {
themeToApply = settingsData.theme_config;
}
// Honor instance-wide force color mode (Branding > Force color mode).
// applyForceColorMode pins colorMode AND swaps surface/text tokens
// when the active theme doesn't natively support the locked mode,
// so the gallery actually flips visually (#397 follow-up).
if (themeToApply) {
themeToApply = applyForceColorMode(themeToApply, settingsData.branding_force_color_mode);
}
// Apply theme with a small delay to ensure it overrides any global theme
// Apply theme with a small delay to ensure it overrides any global theme.
// Instance-wide force color mode is enforced inside ThemeContext.applyTheme,
// so callers don't have to wrap the theme themselves.
if (themeToApply) {
// Use setTimeout to ensure this runs after any global theme application
const timer = setTimeout(() => {