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

fix: remove CSS injection, rely on dark class and Tailwind

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

No files matched your search

src/app/layout.tsx
-27
View File
@@ -56,30 +56,6 @@ export default function RootLayout({
const theme = localStorage.getItem('theme-mode') || 'dark';
const html = document.documentElement;
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') {
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 {
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; }
\`;
}
}
if (theme === 'dark') {
html.classList.add('dark');
} else if (theme === 'light') {
@@ -87,10 +63,7 @@ export default function RootLayout({
} 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
-51
View File
@@ -24,53 +24,6 @@ export default function SettingsPage({ userEmail }: SettingsPageProps) {
}
}, []);
const injectThemeStyles = (theme: string) => {
let styleId = 'theme-override-styles';
let styleTag = document.getElementById(styleId) as HTMLStyleElement;
if (!styleTag) {
styleTag = document.createElement('style');
styleTag.id = styleId;
document.head.appendChild(styleTag);
}
if (theme === 'dark') {
styleTag.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 (theme === 'light') {
styleTag.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;
}
`;
}
};
const handleThemeChange = (newTheme: string) => {
setCurrentTheme(newTheme);
localStorage.setItem('theme-mode', newTheme);
@@ -79,20 +32,16 @@ export default function SettingsPage({ userEmail }: SettingsPageProps) {
if (newTheme === 'dark') {
html.classList.add('dark');
injectThemeStyles('dark');
toast.success('🌙 Dark theme');
} else if (newTheme === 'light') {
html.classList.remove('dark');
injectThemeStyles('light');
toast.success('☀️ Light theme');
} else if (newTheme === 'system') {
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
if (prefersDark) {
html.classList.add('dark');
injectThemeStyles('dark');
} else {
html.classList.remove('dark');
injectThemeStyles('light');
}
toast.success('🔄 System');
}