# astro-theme

> Theme utils for astro

Latest version **0.0.7** (published 2022-08-28) · MIT license · 0 weekly downloads

## Install

```sh
npm install astro-theme
pnpm add astro-theme
yarn add astro-theme
bun add astro-theme
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.7 |
| Published | 2022-08-28 |
| First published | 2021-11-28 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM |
| Dependencies | 1 |
| Unpacked size | 7.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 6 |
| Author | Giulio Zanchetta |
| Maintainers | zank |
| Keywords | astro-component, astro, astro theme, astro-theme |

## Links

- npm: https://www.npmjs.com/package/astro-theme
- Repository: https://github.com/warpsio/astro-theme
- Issues: https://github.com/warpsio/astro-theme/issues
- npm.io page: https://npm.io/package/astro-theme

## Dependencies (1)

- [astro-icon](https://npm.io/package/astro-icon.md) ^0.7.3

## Recent versions

- 0.0.7 (latest) — 2022-08-28
- 0.0.6 — 2022-08-06
- 0.0.5 — 2022-04-04
- 0.0.4 — 2022-02-22
- 0.0.3 — 2022-02-22
- 0.0.2 — 2022-02-18
- 0.0.1 — 2021-11-28

## README

# 🚀 Astro theme utilities

### [📘 Documentation →](https://astros.warps.it/documentation)

### [🧑‍🚀 Astro website →](https://astro.build/)

This component should includes various utilities for helping handle theming with astro.

You can find a live usage at [astros.warps.it](https://astros.warps.it/).

Utilities included in the package

| Name          | Description                   |
| ------------- | ----------------------------- |
| ThemeSwitcher | Switch between choosen themes |

## ThemeSwitcher

Note: Work in progress. for now specifiy only dark, light and dimmed theme names (check below).
### How To Use

In any of your Astro pages, import the utility you need:

```astro
---
...
/* 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:

```scss
: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;
	}
}

```

### Supported Props

| 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](https://icon-sets.iconify.design/) |
| 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                                            |

---
_Source: https://npm.io/package/astro-theme · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._