@jeact/colors

A module that stores colors. Including Bootstrap and Material colors. (This module is inspired in jebbarbas's jebcolors module, but this module only stores colors).

@jeact/colors is a npm module that stores a lot of colors (see 'Color Groups') to use with React (uses esnext import /export), so it's required to have a Javascript compiler (if you are using react/react-native don't worry, this modules will do it for you).

@jeact/colors is inspired (and created by the same author) by jebcolors, but this module has more colors, and only colors (not any function nor classes). If you want to get the perfect color for a text (if its better white or black) try using @jeact/contrast-color's contrastColor(color) function.

Instalation

npm i @jeact/colors

Color Groups

@jeact/colors provide 6 color groups, each one with its own objects that store colors, you can see them all here:

Bootstrap

Get the Bootstrap colors using the Bootstrap object.

import { Bootstrap } from '@jeact/colors'

You can access to the default bootstrap theme colors (primary, secondary, warning, danger, etc...) using Bootstrap.themeColors.

const {primary, success, danger} = Bootstrap.themeColors

You can access to the unused bootstrap colors (like indigo, purple, teal, etc...) using Bootstrap.unusedColors.

const {indigo, purple, teal} = Bootstrap.unusedColors

You can use the bootstrap colors (the colors in the top of the tables here) (like blue, green, red, yellow, etc...) using Bootstrap.shade500.

const {blue, green, red, yellow} = Bootstrap.shade500

You can get the white and black color using Bootstrap.white and Bootstrap.black.

const {white, black} = Bootstrap

And finally, you can access to all the colors of bootstrap using Bootstrap.<color>[shade] (bigger the number returns a darker color).

const lightBlue = Bootstrap.blue[300]
const blue = Bootstrap.blue[500]
const darkBlue = Bootrstrap.blue[700]

Material

You can also get the Material colors, used in: MUI (Material UI), Flutter, etc. Using the Material object.

import { Material } from '@jeact/colors'

You can access to the default theme colors and the dark theme colors using Material.defaultThemeColors and Material.darkThemeColors

// TODO: prefersDark() will return true if the user prefers darkmode, else otherwise
const dark = prefersDark()
const {primary, secondary, success} = dark ? Material.darkThemeColors : Material.defaultThemeColors

You can also access to a colors of the shades '500' (for primary colors) and 'A400' (por accent colors) using Material.shade500 and Material.shadeA400 (You can see those colors here).

const primaryColor = Material.shade500.red
const accentColor = Material.shadeA400.purple

To access to the Material common colors, use Material.common

const {black, white} = Material.common

And finally, you can access the all the material colors using Material.<color>[shade] (bigger the number returns a darker color).

const lightRed = Material.red[300]
const red = Material.red[500]
const darkRed = Material.red[700]

const accentPurple = Material.purple['A400']

Tailwind

Tailwind colors are available in the Tailwind object.

import { Tailwind } from '@jeact/colors'

To access the Tailwind colors (enter the page and go all down, where are all the colors) you need to use Tailwind.<color>[shade] (bigger the number returns a darker color).

const rose = Tailwind.rose[500]
const red = Tailwind.red[500]
const blue = Tailwind.blue[500]

Web Colors

To access to the web colors you need to import the Web object.

import { Web } from '@jeact/colors'

Now you can access any web color using the color-like objects, or using the mega object predefinedColors that contains all the web colors.

const hotPink_1 = Web.pink.hotPink
const hotPink_2 = Web.predefinedColors.hotPink

const royalBlue_1 = Web.blue.royalBlue
const royalBlue_2 = Web.predefinedColors.royalBlue

Social Colors

To access to social colors (the colors of the social media), you need to import the Social object.

import { Social } from '@jeact/colors'

Now, any available social media color is in Social.misc.

const facebookColor = Social.misc.facebook
const githubColor = Social.misc.github
const googleColor = Social.misc.google

Jebcolors Colors

To access to jebcolors colors (this colors are some that I liked because they are pretty), you need to import the JebColors object.

import { JebColors } from '@jeact/colors'

Now, any available jebcolors color is in JebColors.themeColors.

const {magic, juice, blood} = JebColors.themeColors

How to know the contrast text?

Sometimes you want to get the best color for a text with some background color, an example is: if you want to create a Google Login button, and you use Social.misc.google color for the background of the button... what should be the color text to give good contrast?

To get the perfect color of the text you can use another @jeact package, @jeact/constrast-color.

import { Social } from '@jeact/colors'
import contrastColor from '@jeact/contrast-color'

const { google } = Social.misc

const buttonBackgroundColor = google
const buttonTextColor = contrastColor(google)

Now an example with react.

import { Social } from '@jeact/colors'
import contrastColor from '@jeact/contrast-color'

const GoogleButton = () => {
    const { google } = Social.misc

    // TODO: Function to login with Google
    const loginWithGoogle = () => {
        // ...
    }

    return (
        <button style={{backgroundColor: google, color: contrastColor(google)}} onClick={loginWithGoogle}>
            Login With Google
        </button>
    )
}