Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/unjs/theme-colors
🎨 Easily generate color shades for themes
https://github.com/unjs/theme-colors
colors shades tailwind tailwindcss theme
Last synced: about 2 months ago
JSON representation
🎨 Easily generate color shades for themes
- Host: GitHub
- URL: https://github.com/unjs/theme-colors
- Owner: unjs
- License: mit
- Created: 2020-09-26T12:45:57.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2024-04-11T19:28:04.000Z (10 months ago)
- Last Synced: 2024-04-12T00:21:00.047Z (10 months ago)
- Topics: colors, shades, tailwind, tailwindcss, theme
- Language: TypeScript
- Homepage:
- Size: 250 KB
- Stars: 189
- Watchers: 4
- Forks: 6
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# theme-colors
[![npm version][npm-version-src]][npm-version-href]
[![npm downloads][npm-downloads-src]][npm-downloads-href]
[![bundle][bundle-src]][bundle-href]
[![Codecov][codecov-src]][codecov-href]
Easily generate color shades for themes
## Usage
Install package:
```sh
# npm
npm install theme-colors
# yarn
yarn add theme-colors
# pnpm
pnpm install theme-colors
# bun
bun install theme-colors
```
Import:
```js
// ESM
import { getColors } from "theme-colors";
// CommonJS
const { getColors } = require("theme-colors");
const theme = getColors("#ABABAB");
// Or using RGB
const theme = getColors("172,172,172");
```
This will generate the following shades:
```js
{
50: '#FBFBFB',
100: '#F7F7F7',
200: '#EAEAEA',
300: '#DDDDDD',
400: '#C4C4C4',
500: '#ABABAB',
600: '#9A9A9A',
700: '#676767',
800: '#4D4D4D',
900: '#333333',
950: '#222222',
}
```
## Development
- Clone this repository
- Install latest LTS version of [Node.js](https://nodejs.org/en/)
- Enable [Corepack](https://github.com/nodejs/corepack) using `corepack enable`
- Install dependencies using `pnpm install`
- Run interactive tests using `pnpm dev`
## License
Inspired by [javisperez/tailwindcolorshades](https://github.com/javisperez/tailwindcolorshades)
Made with 💛
Published under [MIT License](./LICENSE).
[npm-version-src]: https://img.shields.io/npm/v/theme-colors?style=flat&colorA=18181B&colorB=F0DB4F
[npm-version-href]: https://npmjs.com/package/theme-colors
[npm-downloads-src]: https://img.shields.io/npm/dm/theme-colors?style=flat&colorA=18181B&colorB=F0DB4F
[npm-downloads-href]: https://npmjs.com/package/theme-colors
[codecov-src]: https://img.shields.io/codecov/c/gh/unjs/theme-colors/main?style=flat&colorA=18181B&colorB=F0DB4F
[codecov-href]: https://codecov.io/gh/unjs/theme-colors
[bundle-src]: https://img.shields.io/bundlephobia/minzip/theme-colors?style=flat&colorA=18181B&colorB=F0DB4F
[bundle-href]: https://bundlephobia.com/result?p=theme-colors