Github Stars:
Last Commit: 
Created: 
Overview:
Astro-themes is a dark mode theme component for Astro websites. It allows users to easily add themes to their websites in just two lines of code. The theme component has zero dependencies and supports server-side rendering (SSR). It can be used with any framework or UI.
Features:
- Easy dark mode implementation: Astro-themes makes it simple to implement dark mode on websites.
- Zero dependencies: This theme component has no external dependencies, ensuring lightweight and efficient performance.
- SSR support: Astro-themes supports server-side rendering, allowing the theme to be rendered on the server before being sent to the client.
- Framework compatibility: The theme component can be used with any framework or UI, making it highly flexible and adaptable.
Installation:
To install astro-themes, follow these steps:
Add the Themes component in your Astro app. It is recommended to add it in a centralized layout component, so it is shared across all pages.
// Example code adding Themes component in document head <astro-document> <head> <Themes /> </head> </astro-document>Use the Themes component to get and set the theme in your app. This can be done using the provided methods:
To set the theme:
document.dispatchEvent(new CustomEvent('set-theme', { detail: 'dark' }));To get the current theme:
document.documentElement.attributes.getNamedItem('data-theme')?.value;To set a default theme (applied if the browser doesn’t specify a preference for dark mode):
// Example: set default theme as 'light' Theme.defaultTheme = 'light';
If using Tailwind CSS, make sure to configure the dark mode selector as described in the documentation to ensure compatibility.
Summary:
Astro-themes is a lightweight and easy-to-use dark mode theme component for Astro websites. It offers simple implementation, zero dependencies, SSR support, and compatibility with any framework or UI. By adding just two lines of code, users can enable dark mode on their websites effortlessly. The component also synchronizes the theme setting across tabs and responds to changes in the OS preference.
