nate/prayer-app
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: simplify CSS injection to be less destructive

Browse Source
This commit is contained in:
nmemmert committed 2026-01-16 07:57:47 -05:00
1 parent af03bf4dc8
commit 521bb593a9
2 files changed
+59 -51
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/app/layout.tsx
+28 -25
View File
@@ -56,38 +56,41 @@ export default function RootLayout({
const theme = localStorage.getItem('theme-mode') || 'dark'; const theme = localStorage.getItem('theme-mode') || 'dark';
const html = document.documentElement; const html = document.documentElement;
function injectThemeStyles(t) { function injectStyles(t) {
let styleTag = document.getElementById('theme-override-styles'); let style = document.getElementById('theme-override-styles');
if (!styleTag) { if (!style) {
styleTag = document.createElement('style'); style = document.createElement('style');
styleTag.id = 'theme-override-styles'; style.id = 'theme-override-styles';
document.head.appendChild(styleTag); document.head.appendChild(style);
} }
if (t === 'dark') { if (t === 'dark') {
styleTag.textContent = \` style.textContent = \`
* { color-scheme: dark !important; } html.dark .min-h-screen, html.dark .bg-gradient-to-b { background: linear-gradient(to bottom, #0f172a, #1e293b) !important; color: #f1f5f9 !important; }
html, body { background-color: #0f172a !important; color: #f1f5f9 !important; } html.dark * { color: #f1f5f9 !important; }
.bg-gradient-to-b { background: linear-gradient(to bottom, #0f172a, #1e293b) !important; } html.dark input, html.dark textarea { background-color: #1e293b !important; color: #f1f5f9 !important; border-color: #334155 !important; }
div, section, main { background-color: inherit !important; } html.dark button { background-color: #334155 !important; color: #f1f5f9 !important; }
p, span, h1, h2, h3, h4, h5, h6 { color: #f1f5f9 !important; }
input, textarea, button { background-color: #1e293b !important; color: #f1f5f9 !important; border-color: #334155 !important; }
\`; \`;
} else if (t === 'light') { } else {
styleTag.textContent = \` style.textContent = \`
* { color-scheme: light !important; } html:not(.dark) .min-h-screen, html:not(.dark) .bg-gradient-to-b { background: linear-gradient(to bottom, #f8fafc, #f1f5f9) !important; color: #1e293b !important; }
html, body { background-color: #f8fafc !important; color: #1e293b !important; } html:not(.dark) * { color: #1e293b !important; }
.bg-gradient-to-b { background: linear-gradient(to bottom, #f8fafc, #f1f5f9) !important; } html:not(.dark) input, html:not(.dark) textarea { background-color: #e2e8f0 !important; color: #1e293b !important; border-color: #cbd5e1 !important; }
div, section, main { background-color: inherit !important; } html:not(.dark) button { background-color: #cbd5e1 !important; color: #1e293b !important; }
p, span, h1, h2, h3, h4, h5, h6 { color: #1e293b !important; }
input, textarea, button { background-color: #e2e8f0 !important; color: #1e293b !important; border-color: #cbd5e1 !important; }
\`; \`;
} }
} }
html.classList.add(theme); if (theme === 'dark') {
html.setAttribute('data-theme', theme); html.classList.add('dark');
injectThemeStyles(theme); } else if (theme === 'light') {
html.classList.remove('dark');
} else if (theme === 'system') {
const isDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
if (isDark) html.classList.add('dark');
else html.classList.remove('dark');
}
injectStyles(html.classList.contains('dark') ? 'dark' : 'light');
})(); })();
` `
}} /> }} />
src/components/SettingsPage.tsx
+31 -26
View File
@@ -31,33 +31,42 @@ export default function SettingsPage({ userEmail }: SettingsPageProps) {
if (!styleTag) { if (!styleTag) {
styleTag = document.createElement('style'); styleTag = document.createElement('style');
styleTag.id = styleId; styleTag.id = styleId;
styleTag.setAttribute('data-theme-injected', 'true');
document.head.appendChild(styleTag); document.head.appendChild(styleTag);
} }
if (theme === 'dark') { if (theme === 'dark') {
styleTag.textContent = ` styleTag.textContent = `
* { color-scheme: dark !important; } html.dark .min-h-screen, html.dark .bg-gradient-to-b {
html, body { background-color: #0f172a !important; color: #f1f5f9 !important; } background: linear-gradient(to bottom, #0f172a, #1e293b) !important;
.dark\\:from-slate-900, .from-slate-50, .from-slate-100 { background-color: #0f172a !important; } color: #f1f5f9 !important;
.dark\\:to-slate-800, .to-slate-100 { background-color: #1e293b !important; } }
div, section, main { background-color: inherit !important; } html.dark * { color: #f1f5f9 !important; }
p, span, h1, h2, h3, h4, h5, h6 { color: #f1f5f9 !important; } html.dark input, html.dark textarea {
input, textarea, button { background-color: #1e293b !important; color: #f1f5f9 !important; border-color: #334155 !important; } background-color: #1e293b !important;
button { background-color: #334155 !important; color: #f1f5f9 !important; } color: #f1f5f9 !important;
button:hover { background-color: #475569 !important; } border-color: #334155 !important;
}
html.dark button {
background-color: #334155 !important;
color: #f1f5f9 !important;
}
`; `;
} else if (theme === 'light') { } else if (theme === 'light') {
styleTag.textContent = ` styleTag.textContent = `
* { color-scheme: light !important; } html:not(.dark) .min-h-screen, html:not(.dark) .bg-gradient-to-b {
html, body { background-color: #f8fafc !important; color: #1e293b !important; } background: linear-gradient(to bottom, #f8fafc, #f1f5f9) !important;
.from-slate-50, .from-slate-100, .dark\\:from-slate-900 { background-color: #f8fafc !important; } color: #1e293b !important;
.to-slate-100, .dark\\:to-slate-800 { background-color: #f1f5f9 !important; } }
div, section, main { background-color: inherit !important; } html:not(.dark) * { color: #1e293b !important; }
p, span, h1, h2, h3, h4, h5, h6 { color: #1e293b !important; } html:not(.dark) input, html:not(.dark) textarea {
input, textarea, button { background-color: #e2e8f0 !important; color: #1e293b !important; border-color: #cbd5e1 !important; } background-color: #e2e8f0 !important;
button { background-color: #cbd5e1 !important; color: #1e293b !important; } color: #1e293b !important;
button:hover { background-color: #bfdbfe !important; } border-color: #cbd5e1 !important;
}
html:not(.dark) button {
background-color: #cbd5e1 !important;
color: #1e293b !important;
}
`; `;
} }
}; };
@@ -70,26 +79,22 @@ export default function SettingsPage({ userEmail }: SettingsPageProps) {
if (newTheme === 'dark') { if (newTheme === 'dark') {
html.classList.add('dark'); html.classList.add('dark');
html.setAttribute('data-theme', 'dark');
injectThemeStyles('dark'); injectThemeStyles('dark');
toast.success('🌙 Switched to dark theme'); toast.success('🌙 Dark theme');
} else if (newTheme === 'light') { } else if (newTheme === 'light') {
html.classList.remove('dark'); html.classList.remove('dark');
html.setAttribute('data-theme', 'light');
injectThemeStyles('light'); injectThemeStyles('light');
toast.success('☀️ Switched to light theme'); toast.success('☀️ Light theme');
} else if (newTheme === 'system') { } else if (newTheme === 'system') {
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches; const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
if (prefersDark) { if (prefersDark) {
html.classList.add('dark'); html.classList.add('dark');
html.setAttribute('data-theme', 'dark');
injectThemeStyles('dark'); injectThemeStyles('dark');
} else { } else {
html.classList.remove('dark'); html.classList.remove('dark');
html.setAttribute('data-theme', 'light');
injectThemeStyles('light'); injectThemeStyles('light');
} }
toast.success('🔄 Using system preference'); toast.success('🔄 System');
} }
}; };