Hybrid Astro UI

Theme Toggle

Open in ChatGPT

A flexible wrapper component for toggling between light and dark themes, fully customizable and designed to work seamlessly with the ThemeProvider.

pnpm dlx hybrid-astro-ui@latest add theme-toggle
npx hybrid-astro-ui@latest add theme-toggle
yarn dlx hybrid-astro-ui@latest add theme-toggle
bunx hybrid-astro-ui@latest add theme-toggle

Before enabling light/dark mode, you need to import the ThemeProvider inside the <head> section of your layout. Keep in mind that this component must be included on every page. The recommended approach is to place it inside a layout or wrapper component that is shared across all pages.

---
import { ThemeProvider } from '@/src/components/hybrid-astro-ui/theme-toggle';
---

<!doctype html>
<html lang="en">
	<head>
		<ThemeProvider />
	</head>
	<body>
		<slot />
	</body>
</html>

The ThemeToggle component functions purely as a wrapper. It doesn’t apply styling by default nor enforce any internal structure, allowing you to place any content inside it—icons, text, custom buttons, and more. Additionally, you can now pass a custom class to the component to style it however you prefer.

---
import Sun from '@lucide/astro/icons/sun'
import Moon  from '@lucide/astro/icons/moon';
import { ThemeToggle } from '@/src/components/hybrid-astro-ui/theme-toggle';
---
<ThemeToggle class="custom-class-here-optional">
    <Moon class="dark:hidden block" />
    <Sun class="dark:block hidden" />
</ThemeToggle>

The example above demonstrates the simplest way to use it, but you’re free to design your own layout inside the component.

hybrid-astro-ui uses the Lucide icon library for all built-in components. To ensure the best performance, we strongly recommend importing icons directly from the @lucide/astro/icons directory. This approach results in smaller bundles, faster build times, and overall better UX.

✅ Recommended

---
import CircleAlert from '@lucide/astro/icons/circle-alert';
---

<CircleAlert color="#ff3e98" />

⚠️ Not recommended

---
import { Camera } from '@lucide/astro';
---

<Camera color="#ff3e98" />