InovinLabs
/
argobox-portfolio
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

54
src/components/ThemeToggler.astro
View File

@ -70,37 +70,27 @@
<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 setTheme = (isLight) => {
const savedTheme = localStorage.getItem('theme'); if (isLight) {
if (savedTheme) { document.documentElement.classList.add('light-mode');
return savedTheme === 'light'; localStorage.setItem('theme', 'light');
} } else {
// If no saved preference, check system preference document.documentElement.classList.remove('light-mode');
return window.matchMedia('(prefers-color-scheme: light)').matches; localStorage.setItem('theme', 'dark');
}; }
};
// Function to set theme
const setTheme = (isLight) => { // Theme toggle click handler
if (isLight) { themeToggle?.addEventListener('click', () => {
document.documentElement.classList.add('light-mode'); // Check the current state directly when clicked
localStorage.setItem('theme', 'light'); const isCurrentlyLight = document.documentElement.classList.contains('light-mode');
} else { // Toggle to the opposite theme
document.documentElement.classList.remove('light-mode'); setTheme(!isCurrentlyLight);
localStorage.setItem('theme', 'dark');
}
};
// Apply initial theme
setTheme(getInitialTheme());
// Theme toggle click handler
themeToggle?.addEventListener('click', () => {
const isCurrentlyLight = document.documentElement.classList.contains('light-mode');
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';