From 6e392cb8bf1081d5c28bca42ea3a5d4d320e6f84 Mon Sep 17 00:00:00 2001 From: Justin Deal Date: Sat, 3 May 2025 02:01:29 -0700 Subject: [PATCH] fix light flash of unstyled content --- src/components/ThemeToggle.astro | 33 ++++++++++++-------------------- src/layouts/Layout.astro | 29 ++++++++++++++++++++++++++++ src/styles/global.css | 10 ++++++++++ 3 files changed, 51 insertions(+), 21 deletions(-) diff --git a/src/components/ThemeToggle.astro b/src/components/ThemeToggle.astro index 85a98a5..f252431 100644 --- a/src/components/ThemeToggle.astro +++ b/src/components/ThemeToggle.astro @@ -23,33 +23,24 @@ diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro index e026ec7..f0a20d7 100644 --- a/src/layouts/Layout.astro +++ b/src/layouts/Layout.astro @@ -8,6 +8,35 @@ import "../styles/global.css"; + + diff --git a/src/styles/global.css b/src/styles/global.css index e820d92..e73557b 100644 --- a/src/styles/global.css +++ b/src/styles/global.css @@ -3,6 +3,16 @@ @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-family: "Literata Variable"; font-style: normal;