| 1 | # theme-colors
|
| 2 |
|
| 3 | [![npm version][npm-version-src]][npm-version-href]
|
| 4 | [![npm downloads][npm-downloads-src]][npm-downloads-href]
|
| 5 | [![bundle][bundle-src]][bundle-href]
|
| 6 | [![Codecov][codecov-src]][codecov-href]
|
| 7 |
|
| 8 | Easily generate color shades for themes
|
| 9 |
|
| 10 | ## Usage
|
| 11 |
|
| 12 | Install package:
|
| 13 |
|
| 14 | ```sh
|
| 15 | # npm
|
| 16 | npm install theme-colors
|
| 17 |
|
| 18 | # yarn
|
| 19 | yarn add theme-colors
|
| 20 |
|
| 21 | # pnpm
|
| 22 | pnpm install theme-colors
|
| 23 |
|
| 24 | # bun
|
| 25 | bun install theme-colors
|
| 26 | ```
|
| 27 |
|
| 28 | Import:
|
| 29 |
|
| 30 | ```js
|
| 31 | // ESM
|
| 32 | import { getColors } from "theme-colors";
|
| 33 |
|
| 34 | // CommonJS
|
| 35 | const { getColors } = require("theme-colors");
|
| 36 |
|
| 37 | const theme = getColors("#ABABAB");
|
| 38 | // Or using RGB
|
| 39 | const theme = getColors("172,172,172");
|
| 40 | ```
|
| 41 |
|
| 42 | This will generate the following shades:
|
| 43 |
|
| 44 | ```js
|
| 45 | {
|
| 46 | 50: '#FBFBFB',
|
| 47 | 100: '#F7F7F7',
|
| 48 | 200: '#EAEAEA',
|
| 49 | 300: '#DDDDDD',
|
| 50 | 400: '#C4C4C4',
|
| 51 | 500: '#ABABAB',
|
| 52 | 600: '#9A9A9A',
|
| 53 | 700: '#676767',
|
| 54 | 800: '#4D4D4D',
|
| 55 | 900: '#333333',
|
| 56 | 950: '#222222',
|
| 57 | }
|
| 58 | ```
|
| 59 |
|
| 60 | ## Development
|
| 61 |
|
| 62 | - Clone this repository
|
| 63 | - Install latest LTS version of [Node.js](https://nodejs.org/en/)
|
| 64 | - Enable [Corepack](https://github.com/nodejs/corepack) using `corepack enable`
|
| 65 | - Install dependencies using `pnpm install`
|
| 66 | - Run interactive tests using `pnpm dev`
|
| 67 |
|
| 68 | ## License
|
| 69 |
|
| 70 | Inspired by [javisperez/tailwindcolorshades](https://github.com/javisperez/tailwindcolorshades)
|
| 71 |
|
| 72 | Made with 💛
|
| 73 |
|
| 74 | Published under [MIT License](./LICENSE).
|
| 75 |
|
| 76 |
|
| 77 |
|
| 78 | [npm-version-src]: https://img.shields.io/npm/v/theme-colors?style=flat&colorA=18181B&colorB=F0DB4F
|
| 79 | [npm-version-href]: https://npmjs.com/package/theme-colors
|
| 80 | [npm-downloads-src]: https://img.shields.io/npm/dm/theme-colors?style=flat&colorA=18181B&colorB=F0DB4F
|
| 81 | [npm-downloads-href]: https://npmjs.com/package/theme-colors
|
| 82 | [codecov-src]: https://img.shields.io/codecov/c/gh/unjs/theme-colors/main?style=flat&colorA=18181B&colorB=F0DB4F
|
| 83 | [codecov-href]: https://codecov.io/gh/unjs/theme-colors
|
| 84 | [bundle-src]: https://img.shields.io/bundlephobia/minzip/theme-colors?style=flat&colorA=18181B&colorB=F0DB4F
|
| 85 | [bundle-href]: https://bundlephobia.com/result?p=theme-colors
|