# @bob-obringer/tw-color-schemes

> Helps manage tailwind color schemes

Latest version **0.3.1** (published 2024-06-26) · MIT license · 0 weekly downloads

## Install

```sh
npm install @bob-obringer/tw-color-schemes
pnpm add @bob-obringer/tw-color-schemes
yarn add @bob-obringer/tw-color-schemes
bun add @bob-obringer/tw-color-schemes
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.3.1 |
| Published | 2024-06-26 |
| First published | 2024-04-01 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 66.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Bob Obringer |
| Keywords | tailwind, tailwindcss, color, color-schemes, theming, bob-obringer |

## Links

- npm: https://www.npmjs.com/package/@bob-obringer/tw-color-schemes
- Repository: https://github.com/bob-obringer/monorepo
- Homepage: https://github.com/bob-obringer/monorepo/tree/develop/public-packages/tw-color-schemes
- Issues: https://github.com/bob-obringer/monorepo/issues
- npm.io page: https://npm.io/package/@bob-obringer/tw-color-schemes

## Alternatives

- [postcss-color-hex-alpha](https://npm.io/package/postcss-color-hex-alpha.md) — 6.4M weekly downloads
- [randomcolor](https://npm.io/package/randomcolor.md) — 348.0K weekly downloads
- [bows](https://npm.io/package/bows.md) — 1.3K weekly downloads
- [ep_prefer_color_scheme](https://npm.io/package/ep_prefer_color_scheme.md) — 260 weekly downloads
- [coc-yank](https://npm.io/package/coc-yank.md) — 61 weekly downloads

## Recent versions

- 0.3.1 (latest) — 2024-06-26
- 0.3.0 — 2024-06-26
- 0.2.0 — 2024-06-23
- 0.1.5 — 2024-06-18
- 0.1.4 — 2024-06-18
- 0.1.3 — 2024-06-17
- 0.1.2 — 2024-06-17
- 0.1.1 — 2024-05-26
- 0.1.0 — 2024-05-18
- 0.0.35 — 2024-05-02
- 0.0.34 — 2024-05-01
- 0.0.33 — 2024-04-07
- 0.0.32 — 2024-04-04
- 0.0.31 — 2024-04-04
- 0.0.30 — 2024-04-04
- … 15 more at https://npm.io/package/@bob-obringer/tw-color-schemes/versions

## README

# Tailwind CSS Color Schemes

This package helps manage multiple color schemes for tailwind.

Pass it a color scheme definition, and it gives you a `colorSchemePlugin`
to include in your tailwind configuration.

## Installation

```
pnpm add -D @bob-obringer/tw-color-schemes
```

```
npm install --save-dev @bob-obringer/tw-color-schemes
```

```
yarn add --dev @bob-obringer/tw-color-schemes
```

## Features

- Create as many color schemes as you want
- Allows components to reference a single semantic color name instead of managing all modes
- Removes the need for additional `dark:` or `light:` class names on each of your components
- Allows nesting color schemes within a single page using a class name to switch schemes
- Supports multiple color formats (hex, rgb, tailwind rgb tokens)
- Typesafe, ensuring all color schemes include all required color entries

## Usage

**my-color-scheme.ts**

```typescript
import { createColorSchemePlugin } from "@bob-obringer/tw-color-schemes";
import { primitive, awesome } from "someones/awesome/colors";

const colorSchemePlugin = createColorSchemePlugin(
  {
    background: {
      default: primitive["Flat Grays"]["00"].value,
      primary: primitive["Flat Grays"]["00"].value,
      secondary: primitive["Flat Grays"]["01"].value,
    },
    text: {
      default: primitive["Flat Grays"]["00"].value,
      primary: primitive["Flat Grays"]["00"].value,
      secondary: primitive["Transparent Grays"]["08"].value,
    },
    border: {
      default: primitive["Transparent Grays"]["09"].value,
      primary: primitive["Transparent Grays"]["09"].value,
      secondary: primitive["Transparent Grays"]["05"].value,
    },
  },
  {
    awesome: {
      background: {
        default: awesome["Flat Grays"]["00"].value,
        primary: awesome["Flat Grays"]["00"].value,
        secondary: awesome["Flat Grays"]["01"].value,
      },
      text: {
        default: awesome["Flat Grays"]["00"].value,
        primary: awesome["Flat Grays"]["00"].value,
        secondary: awesome["Transparent Grays"]["08"].value,
      },
      border: {
        default: awesome["Transparent Grays"]["09"].value,
        primary: awesome["Transparent Grays"]["09"].value,
        secondary: awesome["Transparent Grays"]["05"].value,
      },
    },
  },
);
```

**tailwind.config.ts**

```typescript
import type { Config } from "tailwindcss";
import { colors, colorSchemePlugin } from "./my-color-scheme.ts";

export const config: Config = {
  ...
  plugins: [colorSchemePlugin]
};

export default config;
```

**Root.tsx**

```tsx
export default function Root() {
  return (
    <body className="awesome-color-scheme">
      ...
      <div className="text-color-primary">I'm awesome text 😀🔥</div>
      <div className="light-color-scheme">
        <div className="text-color-primary">I'm less awesome text 😔</div>
      </div>
      ...
    </body>
  );
}
```

## Status

Tailwind 4 is going to change both the need and approach to this. I don't plan on making any significant changes to this package until Tailwind 4 is further along.

---
_Source: https://npm.io/package/@bob-obringer/tw-color-schemes · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._