[!WARNING] This package is a work in progress. Fully functional but not fully tested, please report any bugs you find, and feel free to contribute.
This is an Astro integration that eliminates FOUC (Flash Of Unstyled Content) by injecting an inline script that sets the 'dark' class on the document element before the page is rendered. The script gets the local storage value or, if one isn't provided, uses system preference to determine the theme.
This integration has two parts, the FOUC (Flash Of Unstyled Content) killer script and a local storage listener:
-
The FOUC killer script is injected inline into the
<head>of every page and ensures that the correct dark/light mode CSS is applied before the page is rendered. This eliminates the FOUC that occurs when the page first loads. -
The second part is the local storage listener, this script listens for changes to the local storage value and updates the class on the root element of the page accordingly. This is optional, but can serve as a part of your dark mode implementation. See configuration options below.
[!IMPORTANT] Only works with class based dark mode.
Install the integration automatically using the Astro CLI:
pnpm astro add astro-fouc-killernpx astro add astro-fouc-killeryarn astro add astro-fouc-killerbun astro add astro-fouc-killerOr install it manually:
- Install the required dependencies
pnpm add astro-fouc-killernpm install astro-fouc-killeryarn add astro-fouc-killerbun add astro-fouc-killer- Add the integration to your astro config
import { defineConfig } from 'astro/config';
+import astroFoucKiller from "astro-fouc-killer";
export default defineConfig({
integrations: [
+ astroFoucKiller(),
],
});The default value for the local storage key is themeToggle, pass a different key to the integration options to change this.
integrations: [
astroFoucKiller({
+ localStorageKey: 'dark-mode',
}),
],By default, the storage listener is not included. If you want to include it, set the includeStorageListener option to true.
integrations: [
astroFoucKiller({
+ includeStorageListener: true,
}),
],This package is structured as a monorepo:
-
playgroundcontains code for testing the package -
packagecontains the actual package
[!TIP] The following commands are run from the root of the repository. You can also
cdto each directory to runpnpm devdirectly, if you want.
Install dependencies using pnpm:
pnpm i --frozen-lockfileStart the package watcher:
pnpm package:devStart the playground:
pnpm playground:devYou can now edit files in package. Please note that making changes to those files may require restarting the playground dev server.
AGPL-3.0 Licensed. Made with ❤️ by Bassim [AVGVSTVS96].