https://github.com/grahf0085/astro-daisy-theme-toggle

AstroJS script to toggle light and dark mode with DaisyUI
https://github.com/grahf0085/astro-daisy-theme-toggle

astro-integration astrojs css daisyui dark-mode dark-theme

Last synced: 4 months ago
JSON representation

AstroJS script to toggle light and dark mode with DaisyUI

• Host: GitHub
• URL: https://github.com/grahf0085/astro-daisy-theme-toggle
• Owner: Grahf0085
• License: agpl-3.0
• Created: 2025-05-09T21:07:34.000Z (about 1 year ago)
• Default Branch: main
• Last Pushed: 2025-05-11T05:49:11.000Z (about 1 year ago)
• Last Synced: 2025-09-19T00:22:35.562Z (9 months ago)
• Topics: astro-integration, astrojs, css, daisyui, dark-mode, dark-theme
• Language: Astro
• Homepage: https://www.npmjs.com/package/astro-daisy-theme-toggle
• Size: 133 KB
• Stars: 3
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# Astro Daisy Theme Toggle

Component to add a dark and light theme to your AstroJS and DaisyUI project.

[![License: AGPL v3](https://img.shields.io/badge/License-AGPL_v3-blue.svg)](https://www.gnu.org/licenses/agpl-3.0)

[![Bundle size](https://img.shields.io/bundlejs/size/astro-daisy-theme-toggle?exports=default%20as%20AstroDaisyThemeToggle&label=size)](https://bundlejs.com/?q=astro-daisy-theme-toggle%400.0.4)

## Features

- Use any [DaisyUI theme](https://daisyui.com/docs/themes/#list-of-themes)

- If an invalid theme is used it will default to DaisyUIs dark and light theme

- Use with or without AstroJS View Transitions

- No Flash of Unstyled Content

- Use with any [DaisyUI theme controller](https://daisyui.com/components/theme-controller/)

## Installation

1. Install Tailwind CSS

2. Install DaisyUI

3. ```npm install astro-daisy-theme-toggle```

## Usage

1. Import the DaisyTheme component. It takes two props. darkTheme sets the dark theme and lightTheme sets the light theme. The component must wrap around any DaisyUI theme controller. Theme controllers have a value prop that can be removed or left in place. It will be ignored.

```astro

---

import { DaisyTheme } from 'astro-daisy-theme-toggle'

---

    

```

2. Add the same themes you used in the DaisyTheme component to your DaisyUI plugin.

```css

@plugin "daisyui" {

  themes:

    fantasy --default,

    forest --prefersdark;

}

```