Color
Component
Bissetii provides a single config method called Color
component to switch from
its main bambooish green color scheme to other color available color scheme.
This allows users to quickly change the theme color without needing to break any
of the existing features.
This component is available starting from v1.11.0
.
Javascript Parts
This component does not depend on any Javascript.
HTML Parts
This component does not depend on any HTML.
Sass Styling Parts
The Sass script responsible to facilitate color set are located in:
assets/css/bissetii/modules/core/color/*
These color schemes are mainly to facilitate usable color codes through defined variable sets. To change color theme, simply set the following config:
$config-color: <codename>
Bamboo Green
Bamboo green is themed against the bamboo’s green and yellow color pairs. It is the default and fallback color scheme in Bissetii Sass rendering. The config codename is:
$config-color: bamboo-green
The styling color is as follows:
Role | Lightest | Light | Normal | Heavy | Heaviest |
---|---|---|---|---|---|
Primary | N/A | #ccff90 | #1ea82b | #012104 | N/A |
Scondary, Tertiary, Quarternary, Quinary | #606c76 | #f4f5f6 | #d1d1d1 | #e1e1e1 | N/A |
Contrast | N/A | #fff59d | #ffeb3b | #f9c22d | N/A |
Typography (Themed BG) | #fcfcfc | #d1d1d1 | #606c76 | #3e454c | #272c30 |
Typography (White BG) | #fcfcfc | #d1d1d1 | #606c76 | #3e454c | #272c30 |
Green Indicator | #e6fae6 | #6ce569 | #76ff03 | #079404 | #022a01 |
Yellow Indicator | #ffffe5 | #ffff66 | #ffff00 | #ffea00 | #ffcc00 |
Red Indicator | #ffe5e5 | #ff6666 | #ff0000 | #b20000 | #330000 |
Blue Indicator | #e5e5ff | #6666ff | #0000ff | #0000b2 | #000033 |
Deep Blue Sky
Deep blue sky is themed against the seriousness of air force and enforcer’s integrity. It brings the chilling and noble blue out of Bissetii. The config codename is:
$config-color: deep-blue-sky
The styling color is as follows:
Role | Lightest | Light | Normal | Heavy | Heaviest |
---|---|---|---|---|---|
Primary | N/A | #24daf2 | #1565c0 | #000030 | N/A |
Scondary, Tertiary, Quarternary, Quinary | #606c76 | #f4f5f6 | #d1d1d1 | #e1e1e1 | N/A |
Contrast | N/A | #fff59d | #ffeb3b | #f9c22d | N/A |
Typography (Themed BG) | #fcfcfc | #d1d1d1 | #606c76 | #3e454c | #272c30 |
Typography (White BG) | #fcfcfc | #d1d1d1 | #606c76 | #3e454c | #272c30 |
Green Indicator | #e6fae6 | #6ce569 | #76ff03 | #079404 | #022a01 |
Yellow Indicator | #ffffe5 | #ffff66 | #ffff00 | #ffea00 | #ffcc00 |
Red Indicator | #ffe5e5 | #ff6666 | #ff0000 | #b20000 | #330000 |
Blue Indicator | #e5e5ff | #6666ff | #0000ff | #0000b2 | #000033 |
Purple Might
Purple Might is themed against the original color scheme adopted from Milligram Project for nostalgia memory. The config codename is:
$config-color: purple-might
The styling color is as follows:
Role | Lightest | Light | Normal | Heavy | Heaviest |
---|---|---|---|---|---|
Primary | N/A | #e1bee7 | #ab47bc | #38006b | N/A |
Scondary, Tertiary, Quarternary, Quinary | #606c76 | #f4f5f6 | #d1d1d1 | #e1e1e1 | N/A |
Contrast | N/A | #fff59d | #ffeb3b | #f9c22d | N/A |
Typography (Themed BG) | #fcfcfc | #d1d1d1 | #606c76 | #3e454c | #272c30 |
Typography (White BG) | #fcfcfc | #d1d1d1 | #606c76 | #3e454c | #272c30 |
Green Indicator | #e6fae6 | #6ce569 | #76ff03 | #079404 | #022a01 |
Yellow Indicator | #ffffe5 | #ffff66 | #ffff00 | #ffea00 | #ffcc00 |
Red Indicator | #ffe5e5 | #ff6666 | #ff0000 | #b20000 | #330000 |
Blue Indicator | #e5e5ff | #6666ff | #0000ff | #0000b2 | #000033 |