Style-Forge

Appearance

Style-Forge.Colors ​

npm license npm Codacy Badge build

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 ​

shell
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
css
@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

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
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';
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.

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

Example: ​

123addon
sf-c-COLOR_NAMELIGHTNESSdark

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 ​

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