mirror of
https://github.com/mue/mue.git
synced 2026-07-14 20:43:54 +02:00
feat(theme): implement helper function to resolve auto theme settings
This commit is contained in:
@@ -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}
|
||||
|
||||
@@ -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}`
|
||||
|
||||
Reference in New Issue
Block a user