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

TODO

everything below here is out of date

Example

my-color-scheme.ts

import { createColorSchemes } from "@obringer/tw-color-schemes";
import { awesome } from "someones/awesome/color/scheme"

const { colors, colorSchemePlugin } = colorSchemePlugin({
  core: {
    background: {
      default: primitive["Flat Grays"]["00"].value,
      primary: primitive["Flat Grays"]["00"].value,
      secondary: primitive["Flat Grays"]["01"].value,
      tertiary: primitive["Flat Grays"]["02"].value,
    },
    text: {
      default: primitive["Flat Grays"]["00"].value,
      primary: primitive["Flat Grays"]["00"].value,
      secondary: primitive["Transparent Grays"]["08"].value,
      tertiary: primitive["Transparent Grays"]["06"].value,
    },
    border: {
      default: primitive["Transparent Grays"]["09"].value,
      primary: primitive["Transparent Grays"]["09"].value,
      secondary: primitive["Transparent Grays"]["05"].value,
      tertiary: primitive["Transparent Grays"]["04"].value,
    },
  },
});

tailwind.config.ts

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

const config: Config = {
  content: ["./src/**/*.{js,ts,jsx,tsx,mdx}"],
  theme: { colors },
  plugins: [colorSchemePlugin],
};

export default config;

Root.tsx

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

Installation

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

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

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

TODO

Allow rgba and hex with alpha

Keywords

tailwindcss

color-schemes

FAQs

What is @obringer/tw-color-schemes?

Is @obringer/tw-color-schemes well maintained?

Package last updated on 06 Mar 2024

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

@obringer/tw-color-schemes

Tailwind CSS Color Scheme Generator

Features

TODO

Example

Installation

TODO

Keywords

Related posts

Malicious fezbox npm Package Steals Browser Passwords from Cookies via Innovative QR Code Steganographic Technique

Identifying and Preventing Fraudulent Engineering Candidates: An Investigation into 80 Confirmed Cases