InovinLabs
/
argobox
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: Improve theme toggler initialization to prevent FOUC

This commit is contained in:
Daniel LaForce 2025-04-27 18:23:12 -06:00
parent 5b0d8a9ffc
commit 8b66bdaab9
3 changed files with 46 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
src/components/ThemeToggler.astro
View File

@ -70,20 +70,10 @@
<script> <script>
// Theme toggling logic // Theme toggling logic
document.addEventListener('DOMContentLoaded', () => { // Theme toggling logic - only handles clicks now
const themeToggle = document.getElementById('theme-toggle'); const themeToggle = document.getElementById('theme-toggle');
// Check for saved theme preference or prefer-color-scheme // Function to set theme class and save preference
const getInitialTheme = () => {
const savedTheme = localStorage.getItem('theme');
if (savedTheme) {
return savedTheme === 'light';
}
// If no saved preference, check system preference
return window.matchMedia('(prefers-color-scheme: light)').matches;
};
// Function to set theme
const setTheme = (isLight) => { const setTheme = (isLight) => {
if (isLight) { if (isLight) {
document.documentElement.classList.add('light-mode'); document.documentElement.classList.add('light-mode');
@ -94,13 +84,13 @@
} }
}; };
// Apply initial theme
setTheme(getInitialTheme());
// Theme toggle click handler // Theme toggle click handler
themeToggle?.addEventListener('click', () => { themeToggle?.addEventListener('click', () => {
// Check the current state directly when clicked
const isCurrentlyLight = document.documentElement.classList.contains('light-mode'); const isCurrentlyLight = document.documentElement.classList.contains('light-mode');
// Toggle to the opposite theme
setTheme(!isCurrentlyLight); setTheme(!isCurrentlyLight);
}); });
});
// No initial theme setting here anymore - moved to BaseLayout <head>
</script> </script>

24
src/layouts/BaseLayout.astro
View File

@ -17,6 +17,30 @@ const {
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
{/* Inline script to set initial theme and prevent FOUC */}
<script is:inline>
const getInitialTheme = () => {
if (typeof localStorage !== 'undefined' && localStorage.getItem('theme')) {
return localStorage.getItem('theme');
}
if (typeof window !== 'undefined' && window.matchMedia('(prefers-color-scheme: light)').matches) {
return 'light';
}
return 'dark'; // Default to dark if no preference found
};
const theme = getInitialTheme();
if (theme === 'light') {
document.documentElement.classList.add('light-mode');
} else {
// No need to add 'dark-mode' class if dark is the default via CSS
// document.documentElement.classList.add('dark-mode');
}
// Optional: Set data attribute for easier CSS targeting if needed
// document.documentElement.setAttribute('data-theme', theme);
</script>
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />

1
src/pages/resources/docker-compose.astro
View File

@ -1,4 +1,3 @@
---
// src/pages/resources/docker-compose.astro // src/pages/resources/docker-compose.astro
import BaseLayout from '../../layouts/BaseLayout.astro'; import BaseLayout from '../../layouts/BaseLayout.astro';
import Header from '../../components/Header.astro'; import Header from '../../components/Header.astro';