Theme script

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

1 fichier

Installation

pyblade-ui add theme-script

Copiez ce fichier dans votre projet

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>

Adaptez le chemin à votre projet
Le dossier components est celui déclaré dans pyblade.toml.

Utilisation

La balise <pb-ui.theme-script> est disponible dans tous vos templates.

<pb-ui.theme-script />

‹ Toaster Mode toggle ›