feat(theme): implement helper function to resolve auto theme settings

This commit is contained in:
alexsparkes
2026-01-24 15:53:38 +00:00
parent ae42aa1241
commit 8cbb5a5c92
2 changed files with 28 additions and 6 deletions

View File

@@ -9,12 +9,23 @@ const Changelog = () => {
const offlineMode = localStorage.getItem('offlineMode') === 'true';
const isOffline = navigator.onLine === false || offlineMode;
// Helper function to resolve auto theme
const getResolvedTheme = () => {
const theme = localStorage.getItem('theme') || 'auto';
if (theme === 'auto') {
return window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches
? 'dark'
: 'light';
}
return theme;
};
const handleLoad = () => {
setIsLoading(false);
// Send theme to iframe after it loads
if (iframeRef.current?.contentWindow) {
const theme = localStorage.getItem('theme') || 'auto';
const theme = getResolvedTheme();
const blogOrigin = new URL(variables.constants.CHANGELOG_URL).origin;
iframeRef.current.contentWindow.postMessage(
{
@@ -61,7 +72,7 @@ const Changelog = () => {
<iframe
ref={iframeRef}
src={(() => {
const theme = localStorage.getItem('theme') || 'auto';
const theme = getResolvedTheme();
return `${variables.constants.CHANGELOG_URL}?embed=true&theme=${theme}`;
})()}
onLoad={handleLoad}

View File

@@ -30,6 +30,17 @@ function DiscoverContent({ category, onBreadcrumbsChange }) {
};
}, [onBreadcrumbsChange]);
// Helper function to resolve auto theme
const getResolvedTheme = () => {
const theme = localStorage.getItem('theme') || 'auto';
if (theme === 'auto') {
return window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches
? 'dark'
: 'light';
}
return theme;
};
useEffect(() => {
// Show loader when category changes
setIsLoading(true);
@@ -39,7 +50,7 @@ function DiscoverContent({ category, onBreadcrumbsChange }) {
}
// Get current theme
const theme = localStorage.getItem('theme') || 'auto';
const theme = getResolvedTheme();
const themeParam = `&theme=${theme}`;
// Update iframe src with category
@@ -64,7 +75,7 @@ function DiscoverContent({ category, onBreadcrumbsChange }) {
setIsLoading(true);
// Get current theme
const theme = localStorage.getItem('theme') || 'auto';
const theme = getResolvedTheme();
const themeParam = `&theme=${theme}`;
// Get item from localStorage to determine type
@@ -197,7 +208,7 @@ function DiscoverContent({ category, onBreadcrumbsChange }) {
// Send theme to iframe after it loads
if (iframeRef.current?.contentWindow) {
const theme = localStorage.getItem('theme') || 'auto';
const theme = getResolvedTheme();
iframeRef.current.contentWindow.postMessage(
{
type: 'marketplace:theme',
@@ -253,7 +264,7 @@ function DiscoverContent({ category, onBreadcrumbsChange }) {
<iframe
ref={iframeRef}
src={(() => {
const theme = localStorage.getItem('theme') || 'auto';
const theme = getResolvedTheme();
const themeParam = `&theme=${theme}`;
return category === 'collections'
? `${MARKETPLACE_URL}/collections?embed=true${previewParam}${themeParam}`