dealjus/justin.deal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix light flash of unstyled content
All checks were successful
Build and Deploy / build (push) Successful in 29s
Details

Browse Source
This commit is contained in:
Justin Deal 2025-05-03 02:01:29 -07:00
parent 35fc2fd67b
commit 6e392cb8bf
3 changed files with 51 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
src/components/ThemeToggle.astro
View File

@ -23,33 +23,24 @@
</button> </button>
<script is:inline> <script is:inline>
const theme = (() => { // Theme toggle functionality - works with the flash prevention script in Layout
if (typeof localStorage !== "undefined" && localStorage.getItem("theme")) {
return localStorage.getItem("theme") ?? "light";
}
if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
return "dark";
}
return "light";
})();
if (theme === "light") {
document.documentElement.classList.remove("dark");
} else {
document.documentElement.classList.add("dark");
}
window.localStorage.setItem("theme", theme);
const handleToggleClick = () => { const handleToggleClick = () => {
const element = document.documentElement; const element = document.documentElement;
element.classList.toggle("dark"); element.classList.toggle("dark");
const isDark = element.classList.contains("dark"); const isDark = element.classList.contains("dark");
localStorage.setItem("theme", isDark ? "dark" : "light"); localStorage.setItem("theme", isDark ? "dark" : "light");
// Dispatch a custom event that other components can listen for
window.dispatchEvent(new CustomEvent('theme-changed', {
detail: { theme: isDark ? 'dark' : 'light' }
}));
}; };
document // Add event listener when the DOM is ready
.getElementById("themeToggle") document.addEventListener('DOMContentLoaded', () => {
?.addEventListener("click", handleToggleClick); document
.getElementById("themeToggle")
?.addEventListener("click", handleToggleClick);
});
</script> </script>

29
src/layouts/Layout.astro
View File

@ -8,6 +8,35 @@ import "../styles/global.css";
<!doctype html> <!doctype html>
<html lang="en"> <html lang="en">
<head> <head>
<!-- Theme flash prevention script - must be first in head -->
<script is:inline>
// Immediately apply the saved theme to prevent flash
(function() {
function getThemePreference() {
if (typeof localStorage !== 'undefined' && localStorage.getItem('theme')) {
return localStorage.getItem('theme');
}
return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
}
const theme = getThemePreference();
// Apply theme immediately to prevent flash
if (theme === 'dark') {
document.documentElement.classList.add('dark');
} else {
document.documentElement.classList.remove('dark');
}
// Store the theme in localStorage for future visits
if (typeof localStorage !== 'undefined') {
localStorage.setItem('theme', theme);
}
// Add a class to indicate JS is loaded and theme is applied
document.documentElement.classList.add('theme-loaded');
})();
</script>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" type="image/svg+xml" href="/pixel_avatar.png" /> <link rel="icon" type="image/svg+xml" href="/pixel_avatar.png" />

10
src/styles/global.css
View File

@ -3,6 +3,16 @@
@variant dark (&:where(.dark, .dark *)); @variant dark (&:where(.dark, .dark *));
/* Prevent theme flash by hiding content until theme is applied */
html:not(.theme-loaded) body {
display: none;
}
/* Ensure smooth transitions between themes */
html.theme-loaded body {
transition: background-color 0.3s ease, color 0.3s ease;
}
@font-face { @font-face {
font-family: "Literata Variable"; font-family: "Literata Variable";
font-style: normal; font-style: normal;