Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/siguici/colorwind
🎨 TailwindCSS plugin simplifying light/dark color scheme management with intuitive class names.
https://github.com/siguici/colorwind
color-scheme colorwind dark-mode light-mode plugin tailwind-plugin tailwindcss
Last synced: 19 days ago
JSON representation
🎨 TailwindCSS plugin simplifying light/dark color scheme management with intuitive class names.
- Host: GitHub
- URL: https://github.com/siguici/colorwind
- Owner: siguici
- License: mit
- Created: 2024-04-24T12:58:08.000Z (9 months ago)
- Default Branch: main
- Last Pushed: 2024-04-25T14:09:01.000Z (9 months ago)
- Last Synced: 2024-04-26T14:10:18.522Z (9 months ago)
- Topics: color-scheme, colorwind, dark-mode, light-mode, plugin, tailwind-plugin, tailwindcss
- Language: TypeScript
- Homepage: https://npmjs.com/package/colorwind
- Size: 42 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# [ColorWind 🎨](https://colorwind.js.org)
[ColorWind](https://colorwind.js.org) is a [TailwindCSS](https://tailwindcss.com) plugin simplifying light/dark color scheme management with intuitive class names.
## 🚀 Installation
You can install [`ColorWind`](https://colorwind.js.org) from [`NPM`](https://npmjs.com/package/colorwind) or [`JSR`](https://jsr.io/@siguici/colorwind):
- Using `npm`:
From [`NPM`](https://npmjs.com/package/colorwind):
```bash
npm install colorwind
```
From [`JSR`](https://jsr.io/@siguici/colorwind):
```bash
npx jsr add @siguici/colorwind
```
- Using `Yarn`:
From [`NPM`](https://npmjs.com/package/colorwind):
```bash
yarn add colorwind
```
From [`JSR`](https://jsr.io/@siguici/colorwind):
```bash
yarn dlx jsr add @siguici/colorwind
```
- Using `PNPM`:
From [`NPM`](https://npmjs.com/package/colorwind):
```bash
pnpm add colorwind
```
From [`JSR`](https://jsr.io/@siguici/colorwind):
```bash
pnpm dlx jsr add @siguici/colorwind
```
- Using `Bun`:
From [`NPM`](https://npmjs.com/package/colorwind):
```bash
bun install colorwind
```
From [`JSR`](https://jsr.io/@siguici/colorwind):
```bash
bunx jsr add @siguici/colorwind
```
- Using `Deno`:
From [`NPM`](https://npmjs.com/package/colorwind):
```bash
deno install npm:colorwind
```
From [`JSR`](https://jsr.io/@siguici/colorwind):
```bash
deno add @siguici/colorwind
```
Without install:
```typescript
import colorwind from 'jsr:@siguici/colorwind';
```
## 🔧 Configuration
Add [`ColorWind`](https://colorwind.js.org) to your [TailwindCSS configuration](https://tailwindcss.com/docs/configuration):
- With `NPM` (from `node_modules`):
```javascript ins={1,5}
import colorwind from 'colorwind';
/** @type {import('tailwindcss').Config} */
export default {
plugins: [colorwind],
};
```
- With `JSR` (using `Deno`):
```javascript ins={1,5}
import colorwind from 'jsr:@siguici/colorwind';
/** @type {import('tailwindcss').Config} */
export default {
plugins: [colorwind],
};
```
## 💡 Usage
Simply use the provided class names in your `HTML` or `JSX` to apply color styles that adapt to the light or dark mode.
### Using Color Classes
Use the following class convention to apply color styles that adapt to light/dark themes:
- `variant-color-[light|dark]-X` where variant is a `TailwindCSS` variant (`text`, `bg`, `border`, etc.), color is the color name (e.g., `blue`, `red`, `green`, etc.), and X corresponds to:
- 0: color-50 in light mode or color-950 in dark mode
- 1: color-100 in light mode or color-900 in dark mode
- 2: color-200 in light mode or color-800 in dark mode
- 3: color-300 in light mode or color-700 in dark mode
- 4: color-400 in light mode or color-600 in dark mode
- You can also use variant-color for variant-color-500 (adapts to theme)
### Example in HTML
```html
This is text in a light blue shade.
This is text in a dark blue shade.
This is text in the default blue shade.
```
## 📄 License
This project is licensed under the MIT License - see the [LICENSE.md file](./LICENSE.md) for details.