Theme script

Applies the saved light or dark mode before the page paints. Goes in <head>.

1 file

Installation

pyblade-ui add theme-script

Copy this file into your project

components/ui/theme_script.html

<script data-slot="theme-script">
  (function () {
    var stored = null;
    try { stored = localStorage.getItem("theme"); } catch (e) {}
    var dark = stored === "dark" || ((stored === null || stored === "system") && window.matchMedia("(prefers-color-scheme: dark)").matches);
    document.documentElement.classList.toggle("dark", dark);
  })();
</script>

Update the path to fit your project
The components folder is the one set in pyblade.toml.

Usage

The tag <pb-ui.theme-script> is available in all your templates.

<pb-ui.theme-script />

‹ Toaster Mode toggle ›