@datarose/tailwindcss-theme-colors weekly downloads statistics

TailwindCSS Theme Colors

Easily manage multiple themes.

The package was inspired by the tw-colors package. Its purpose is to enable easy management of custom templates, allowing us to create unique colors using existing color scales. With light and dark themes, we can fully customize the appearance.

Installation

Supports

- Vite >=5 - Node >=21

Startup

tailwind.config.js

Set default themes

If no template is selected, or the selected template name does not exist, this template will be loaded instead.

Select theme

With class name (can select X theme with .theme-X class-name)

With data-theme attribute (can select X theme with data-theme="X" class-name)

Select nested theme

With data-theme attribute

With class name

For variants to work properly in nested themes, an empty data-theme attribute must be added alongside the nested theme class.

Use prefers-color-scheme: light/dark

By embedding theme objects within the light and dark functions, we can designate them as light or dark themes. If a theme object is embedded in the light function, it is classified as a light-mode theme. If a user who prefers dark mode opens the page, this theme will not work for them.

Set default themes to light and dark modes

This way, even without selecting a theme, we can assign our desired default theme to both light and dark modes.

Variants

Based on the current theme, specific styles can be applied using variants. Note: In the following example the variants would have no effect with data-theme='light'

Caveat: group-{modifier}

Always use the group variant before the theme variant.

Configurations

Early Access

The package is still very primitive, and we have many more plans for the future. We aim to boost our design with easily customizable and interchangeable templates.

Open Source Repository

While we haven't opened the plugin's repository to the public yet, we are actively working towards doing so and fostering an active community to improve the package's quality.

License

All rights reserved as specified in the LICENSE file! This project can be considered reusable, copyable, and/or distributable, provided that the original public repository link is included in the source code and made visible to those who use the product that incorporates this source code/package.

Description from the npm listing.