This component should includes various utilities for helping handle theming with astro.
You can find a live usage at astros.warps.it.
Utilities included in the package
| Name | Description |
|---|---|
| ThemeSwitcher | Switch between choosen themes |
Note: Work in progress. for now specifiy only dark, light and dimmed theme names (check below).
In any of your Astro pages, import the utility you need:
---
...
/* Import the components you need */
import { ThemeSwitcher } from "astro-theme";
---
<html lang="en">
<head>
</head>
<head>
<body>
<header>
<ThemeSwitcher />
</header>
</body>
</head>
</html>Now in your global css/scss use css variables like so:
:root {
--color-bg: white;
--color-text-primary: black;
&[data-theme="dark"] {
--color-bg: black;
--color-text-primary: white;
}
&[data-theme="dimmed"] {
--color-bg: gray;
--color-text-primary: white;
}
&[data-theme="any-other-theme-you-want"] {
--color-bg: gray;
--color-text-primary: white;
}
}
| Propname | Type | Default | Required | Description |
|---|---|---|---|---|
| themes | theme[] | [{ name: "dark", icon: "ph:moon-thin" },{ name: "light", icon: "ph:sun-thin" }] |
Themes name and icons to use, objects with name and icon | |
| defaultDark | string | null | Name of the theme to use as default for dark (will check prefers-color-scheme) | |
| defaultLight | string | null | Name of the theme to use as default for light (will check prefers-color-scheme) | |
| type | string | rotate | Type of switcher, for now only rotate is supported |