Style-Forge.Colors

Style-Forge.Colors package provides a comprehensive and customizable set of color palettes for your web applications. It includes predefined color schemes and the ability to create your own custom palettes, ensuring consistent and visually appealing designs across your projects.

Installation

npm i style-forge.colors

Usage

After installation, you can import the CSS file into your project or, if you are using Webpack or another module bundler:

Web (16 colors) - default

Web - default

• 16 - colors
• 10 lightness gradient

@import 'style-forge.colors';

All (148 colors) - custom

All - custom

• 16 - colors
• [10 or 20] lightness gradient

WARNING

It is recommended to use the package by default.
If you decide to use another option [10 or 20] lightness gradient, you should choose the color and upload it separately.
Example: Choose your color

Choose your color

You can select a single color with [10 or 20] lightness gradient

All 148 Web 16 colors

CSS classes 10 lightness

background

sf-c-aliceblue

sf-c-aliceblue:10

sf-c-aliceblue:20

sf-c-aliceblue:30

sf-c-aliceblue:40

sf-c-aliceblue:50

sf-c-aliceblue:60

sf-c-aliceblue:70

sf-c-aliceblue:80

sf-c-aliceblue:90

text

sf-c-txt-aliceblue

sf-c-txt-aliceblue:10

sf-c-txt-aliceblue:20

sf-c-txt-aliceblue:30

sf-c-txt-aliceblue:40

sf-c-txt-aliceblue:50

sf-c-txt-aliceblue:60

sf-c-txt-aliceblue:70

sf-c-txt-aliceblue:80

sf-c-txt-aliceblue:90

@import 'style-forge.colors/src/colors/10/aliceblue.css';

CSS classes 20 lightness

background

sf-c-aliceblue

sf-c-aliceblue:5

sf-c-aliceblue:10

sf-c-aliceblue:15

sf-c-aliceblue:20

sf-c-aliceblue:25

sf-c-aliceblue:30

sf-c-aliceblue:35

sf-c-aliceblue:40

sf-c-aliceblue:45

sf-c-aliceblue:50

sf-c-aliceblue:55

sf-c-aliceblue:60

sf-c-aliceblue:65

sf-c-aliceblue:70

sf-c-aliceblue:75

sf-c-aliceblue:80

sf-c-aliceblue:85

sf-c-aliceblue:90

sf-c-aliceblue:95

text

sf-c-txt-aliceblue

sf-c-txt-aliceblue:5

sf-c-txt-aliceblue:10

sf-c-txt-aliceblue:15

sf-c-txt-aliceblue:20

sf-c-txt-aliceblue:25

sf-c-txt-aliceblue:30

sf-c-txt-aliceblue:35

sf-c-txt-aliceblue:40

sf-c-txt-aliceblue:45

sf-c-txt-aliceblue:50

sf-c-txt-aliceblue:55

sf-c-txt-aliceblue:60

sf-c-txt-aliceblue:65

sf-c-txt-aliceblue:70

sf-c-txt-aliceblue:75

sf-c-txt-aliceblue:80

sf-c-txt-aliceblue:85

sf-c-txt-aliceblue:90

sf-c-txt-aliceblue:95

@import 'style-forge.colors/src/colors/20/aliceblue.css';

Change dark color

You can change the color in the dark theme to another color by using classes that are applied only in the dark theme. This allows you to set different colors for light and dark themes.

Theme: light

original

red:20:dark

<div class="sf-c-blue:90 sf-c-red:20:dark">example</div>

Example:

1	2	3	addon
sf-c-	COLOR_NAME	LIGHTNESS	dark

sf-c-COLOR_NAME:LIGHTNESS:dark

In this example:

• The first div with the class sf-c-blue:90 displays the original color used in both light and dark themes.
• The second div uses two classes: sf-c-red:20:dark and sf-c-blue:90. This means that in the light theme, the color from sf-c-blue:90 will be applied, and in the dark theme, the color will change to sf-c-red:20.

Description

• Class sf-c-blue:90 sets the color that will be applied to both light and dark themes.
• Class sf-c-red:20:dark overrides the sf-c-blue:90 color and sets a different color only in the dark theme.

This way, you can set different colors for light and dark themes, with the dark theme color overriding the default when necessary.

Tree

style-forge.colors/
├── src/
│   ├── colors
│   │   ├── 10
│   │   │   ├── aliceblue.css
│   │   │   ├── ...
│   │   │   └── yellowgreen.css
│   │   └── 20
│   │       ├── aliceblue.css
│   │       ├── ...
│   │       └── yellowgreen.css
│   └── web.css
└── colors.css - It is dafault (web.css)