@datarose/tailwindcss-theme-colors weekly downloads statistics

<div align="center"> <img width="200" height="200" hspace="10" src="https://datarose.net/packages/@datarose/tailwindcss-theme-colors/logo.svg" alt="@datarose / tailwindcss plugin theme colors logo" /> <h1>TailwindCSS Theme Colors</h1> <p> Easily manage multiple themes. </p> </div> <p>&nbsp;</p>

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

npm install @datarose/tailwindcss-theme-colors --save-dev

Startup

tailwind.config.js

import { createThemes } from '@datarose/tailwindcss-theme-colors'

/** @type {import('tailwindcss').Config} */
export default {
  plugins: [
    createThemes({
      light: {
        primary: '#fff',
        secondary: '#555',
        red: {
          50: '...',
          100: '...',
        },
        green: {
          lighter: '...',
          light: '...',
          dark: '...',
          darker: '...',
          nested: {
            50: '...',
            100: '...',
          },
        },
      },
      dark: {
        primary: '#000',
        secondary: '#ccc',
        red: {
          50: '...',
          100: '...',
        },
        green: {
          lighter: '...',
          light: '...',
          dark: '...',
          darker: '...',
          nested: {
            50: '...',
            100: '...',
          },
        },
      },
      'custom-theme-name': {
        'custom-color-name': 'custom-color-code',
      },
    })
  ],
}

Set default themes

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

createThemes({
  light: {
    primary: '#fff',
    secondary: '#555',
  },
  dark: {
    primary: '#000',
    secondary: '#ccc',
  },
}, {
  defaultTheme: 'dark',
})

Select theme

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

<html class='theme-light'>
  <div>
      <h1 class='text-primary'>...</h1>
      <p class='text-secondary'>...</p>
  </div>
</html>

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

<html data-theme='light'>
  <div>
    <h1 class='text-primary'>...</h1>
    <p class='text-secondary'>...</p>
  </div>
</html>

Select nested theme

With data-theme attribute

<html data-theme='dark'>
  ...
  <div data-theme='coffee'>...</div>
  <div data-theme='sky'>...</div>
</html>

With class name

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

<html class='dark'>
  ...
  <div data-theme class='coffee'>...</div>
  <div data-theme class='sky'>...</div>
</html>

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.

createThemes(({ light, dark }) => {
  light: light({
    primary: '#fff',
    secondary: '#555',
  }),
  dark: dark({
    primary: '#000',
    secondary: '#ccc',
  }),
})

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.

createThemes(({ light, dark }) => {
  light: light({
    primary: '#fff',
    secondary: '#555',
  }),
  coffee: light({
    primary: '#123456',
    secondary: '#654321',
  }),
  dark: dark({
    primary: '#000',
    secondary: '#ccc',
  }),
  sky: dark({
    primary: '#111',
    secondary: '#333',
  }),
}, {
  defaultTheme: {
    light: coffee, // when `@media (prefers-color-scheme: light)` is matched
    dark: space, // when `@media (prefers-color-scheme: dark)` is matched
  },
})

Variants

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

<!-- Use "serif" font for the dark theme only -->
<div data-theme='dark' class='font-sans theme-dark:font-serif'>
  ...
  <div>Serif font here</div>

  <!-- this button is rounded when the theme is `dark` -->
  <button class='theme-dark:rounded'>Click Me</button>
</div>

Caveat: group-{modifier}

Always use the group variant before the theme variant.

<html class='theme-dark'>
  ...
  <div class='group'>
    <div class='theme-dark:group-hover:bg-red-500'>
      ❌ the group variant does not work
    </div>
    <div class='group-hover:theme-dark:bg-red-500'>
      ✅ the group variant works properly
    </div>
  </div>    
</html>

Configurations

createThemes(({ light, dark }) => {
  // theme list...
}, {
  produceCssVariable: (colorName) => `--custom-color-css-variable-name-${colorName}`, // default: --twtc-${colorName}
  produceThemeClass: (themeName) => `custom-theme-class-name-${themeName}`, // default: theme-${themeName}
  produceThemeVariant: (themeName) => `custom-theme-variant-name-${themeName}`, // default: theme-${themeName}
  defaultTheme: {
    light: coffee, // set default theme to light mode
    dark: space, // set default theme to dark mode
  },
  strict: false, // an error will be thrown when a theme doesn't exist // default: false
})

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…