Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/alex-grover/astro-themes
Easy dark mode for Astro websites
https://github.com/alex-grover/astro-themes
astro astro-component dark-mode
Last synced: 4 days ago
JSON representation
Easy dark mode for Astro websites
- Host: GitHub
- URL: https://github.com/alex-grover/astro-themes
- Owner: alex-grover
- License: mit
- Created: 2022-08-23T23:49:18.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2024-09-18T16:05:36.000Z (15 days ago)
- Last Synced: 2024-09-25T23:35:30.116Z (8 days ago)
- Topics: astro, astro-component, dark-mode
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/astro-themes
- Size: 2.17 MB
- Stars: 57
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: .github/contributing.md
- License: LICENSE
- Code of conduct: .github/code_of_conduct.md
Awesome Lists containing this project
README
# 🚀 astro-themes [](https://github.com/alex-grover/astro-themes/actions/workflows/ci.yml?query=branch%3Amain) [](https://www.npmjs.com/package/astro-themes)
Easy dark mode for Astro websites. Add themes in 2 lines of code! Zero dependencies, supports SSR, and works with any
framework or UI.
## Install
```sh
npm install --save-dev astro-themes
```
## Use
Add the `` component in your app. Works best in a centralized layout component, so it's shared everywhere.
### Usage
`astro-themes` gives you the ability to get and set the theme, with builtin browser standards. No polluting the global
scope or any other hacks! These methods will work without a framework, or from within your React/Svelte/Vue/etc
components.
Set the theme:
```ts
document.dispatchEvent(new CustomEvent('set-theme', { detail: 'dark' })) // or pass `null` to clear the saved setting
```
Get the current theme:
```ts
document.documentElement.attributes.getNamedItem('data-theme')?.value // 'light' | 'dark'
```
Set a default theme (only applied if the browser doesn't specify a preference for dark mode):
```astro
```
#### Compatibility with Tailwind
Tailwind expects `class="dark"` on the `html` element rather than `data-theme`. To ensure that `dark:` classes work correctly, you can configure your dark mode selector as described [here](https://tailwindcss.com/docs/dark-mode#customizing-the-class-name).
```js
/** @type {import('tailwindcss').Config} */
module.exports = {
darkMode: ['class', '[data-theme="dark"]'],
// ...
}
```
## What does it do?
- Provides ability to get and set the theme from any framework, or none at all
- Set theme by dispatching a custom browser event: `document.dispatchEvent(new CustomEvent('set-theme', { detail: 'dark' }))`
- Get current theme: `document.documentElement.attributes.getNamedItem('data-theme')?.value`
- Sets `data-theme` attribute on the `html` element, so you can implement dark mode in CSS
- Sets `color-scheme` CSS attribute on the `html` element, so the browser renders built in elements appropriately
- Reads user theme preference on page load
- From `localStorage`, if they've set it in the past
- From `prefers-color-scheme: dark`, if supported
- Falls back to the `defaultTheme` option, or `light` if not specified
- Synchronizes setting across tabs
- Responds to changes in OS preference (for example, the OS automatically switching to dark mode in the evening)
## Run example locally
```sh
gh repo clone alex-grover/astro-themes
cd astro-themes
npm install
npm link
npm link astro-themes
npm run example
```
## Feedback
Ideas, bug reports, or questions are welcomed! Please don't hesitate to [open an issue](https://github.com/alex-grover/astro-themes/issues/new).
This component was inspired by the excellent [`next-themes`](https://github.com/pacocoursey/next-themes).