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 html = document.documentElement;
function injectThemeStyles(t) {
let styleTag = document.getElementById('theme-override-styles');
if (!styleTag) {
styleTag = document.createElement('style');
styleTag.id = 'theme-override-styles';
document.head.appendChild(styleTag);
function injectStyles(t) {
let style = document.getElementById('theme-override-styles');
if (!style) {
style = document.createElement('style');
style.id = 'theme-override-styles';
document.head.appendChild(style);
}
if (t === 'dark') {
styleTag.textContent = \`
* { color-scheme: dark !important; }
html, body { background-color: #0f172a !important; color: #f1f5f9 !important; }
.bg-gradient-to-b { background: linear-gradient(to bottom, #0f172a, #1e293b) !important; }
div, section, main { background-color: inherit !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; }
style.textContent = \`
html.dark .min-h-screen, html.dark .bg-gradient-to-b { background: linear-gradient(to bottom, #0f172a, #1e293b) !important; color: #f1f5f9 !important; }
html.dark * { color: #f1f5f9 !important; }
html.dark input, html.dark textarea { background-color: #1e293b !important; color: #f1f5f9 !important; border-color: #334155 !important; }
html.dark button { background-color: #334155 !important; color: #f1f5f9 !important; }
\`;
} else if (t === 'light') {
styleTag.textContent = \`
* { color-scheme: light !important; }
html, body { background-color: #f8fafc !important; color: #1e293b !important; }
.bg-gradient-to-b { background: linear-gradient(to bottom, #f8fafc, #f1f5f9) !important; }
div, section, main { background-color: inherit !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; }
} else {
style.textContent = \`
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:not(.dark) * { color: #1e293b !important; }
html:not(.dark) input, html:not(.dark) textarea { background-color: #e2e8f0 !important; color: #1e293b !important; border-color: #cbd5e1 !important; }
html:not(.dark) button { background-color: #cbd5e1 !important; color: #1e293b !important; }
\`;
}
}
html.classList.add(theme);
html.setAttribute('data-theme', theme);
injectThemeStyles(theme);
if (theme === 'dark') {
html.classList.add('dark');
} 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) {
styleTag = document.createElement('style');
styleTag.id = styleId;
styleTag.setAttribute('data-theme-injected', 'true');
document.head.appendChild(styleTag);
}
if (theme === 'dark') {
styleTag.textContent = `
* { color-scheme: dark !important; }
html, body { background-color: #0f172a !important; color: #f1f5f9 !important; }
.dark\\:from-slate-900, .from-slate-50, .from-slate-100 { background-color: #0f172a !important; }
.dark\\:to-slate-800, .to-slate-100 { background-color: #1e293b !important; }
div, section, main { background-color: inherit !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; }
button { background-color: #334155 !important; color: #f1f5f9 !important; }
button:hover { background-color: #475569 !important; }
html.dark .min-h-screen, html.dark .bg-gradient-to-b {
background: linear-gradient(to bottom, #0f172a, #1e293b) !important;
color: #f1f5f9 !important;
}
html.dark * { color: #f1f5f9 !important; }
html.dark input, html.dark textarea {
background-color: #1e293b !important;
color: #f1f5f9 !important;
border-color: #334155 !important;
}
html.dark button {
background-color: #334155 !important;
color: #f1f5f9 !important;
}
`;
} else if (theme === 'light') {
styleTag.textContent = `
* { color-scheme: light !important; }
html, body { background-color: #f8fafc !important; color: #1e293b !important; }
.from-slate-50, .from-slate-100, .dark\\:from-slate-900 { background-color: #f8fafc !important; }
.to-slate-100, .dark\\:to-slate-800 { background-color: #f1f5f9 !important; }
div, section, main { background-color: inherit !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; }
button { background-color: #cbd5e1 !important; color: #1e293b !important; }
button:hover { background-color: #bfdbfe !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:not(.dark) * { color: #1e293b !important; }
html:not(.dark) input, html:not(.dark) textarea {
background-color: #e2e8f0 !important;
color: #1e293b !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') {
html.classList.add('dark');
html.setAttribute('data-theme', 'dark');
injectThemeStyles('dark');
toast.success('🌙 Switched to dark theme');
toast.success('🌙 Dark theme');
} else if (newTheme === 'light') {
html.classList.remove('dark');
html.setAttribute('data-theme', 'light');
injectThemeStyles('light');
toast.success('☀️ Switched to light theme');
toast.success('☀️ Light theme');
} else if (newTheme === 'system') {
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
if (prefersDark) {
html.classList.add('dark');
html.setAttribute('data-theme', 'dark');
injectThemeStyles('dark');
} else {
html.classList.remove('dark');
html.setAttribute('data-theme', 'light');
injectThemeStyles('light');
}
toast.success('🔄 Using system preference');
toast.success('🔄 System');
}
};