Skip to content

Instantly share code, notes, and snippets.

@ddjerqq

ddjerqq/ThemeToggle.razor

Created May 7, 2025 18:54
Show Gist options
  • Save ddjerqq/5159fb9bb96370fa1af9acd0fdddf477 to your computer and use it in GitHub Desktop.
Save ddjerqq/5159fb9bb96370fa1af9acd0fdddf477 to your computer and use it in GitHub Desktop.
Download ZIP
TailwindCSSThemeToggle.razor
Raw
index.html
<head>
<script src="util.js"></script>
</head>
Raw
ThemeToggle.razor
<Button Size="icon" Variant="outline" onclick="window.toggleTheme()" class="relative transform-gpu transition-all duration-300 ease-in-out">
<Blazicon Svg="@Icons.Sun" class="absolute rotate-0 dark:rotate-90 opacity-100 dark:opacity-0"/>
<Blazicon Svg="@Icons.Moon" class="absolute dark:rotate-0 rotate-90 dark:opacity-100 opacity-0"/>
</Button>
Raw
util.js
// toggle from dark to light
window.toggleTheme = () => {
const theme = localStorage.theme || "light";
localStorage.theme = theme === "light" ? "dark" : "light";
document.documentElement.classList.toggle("dark", localStorage.theme === "dark");
document.documentElement.classList.toggle("light", localStorage.theme === "light");
}
// on load, set theme to whatever the user set before, or what the browser prefers.
window.addEventListener("load", () => {
document.documentElement.classList.toggle(
"dark",
localStorage.theme === "dark" ||
(!("theme" in localStorage) && window.matchMedia("(prefers-color-scheme: dark)").matches),
);
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment