Modify [data-theme="dark"] attribute in <html> tag to change color palettes (light/dark mode) by using:
// Use this on the top of scripts
// to apply 'system' or 'dark' (if saved previously) theme.
initTheme();// Use this in any place
// to toggle light/dark theme.
toggleTheme();// Use this in any place
// to set light or dark theme manually.
setThemeLight();
setThemeDark();Install the Enapter Design Theme Astro Integration:
npm i @enapter/design-theme
astro.config.mjs
import { defineConfig } from "astro/config";
import tailwind from "@astrojs/tailwind";
import enapterTheme from "@enapter/design-theme/astro";
export default defineConfig({
// ...
integrations: [tailwind(), enapterTheme()],
})AnyComponent.astro
<script is:inline>
document
.querySelectorAll("[data-id=toggle-dark-mode-button]")
.forEach((btn) => {
btn.addEventListener("click", toggleTheme);
});
</script>