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:

RoleLightestLightNormalHeavyHeaviest
PrimaryN/A#ccff90#1ea82b#012104N/A
Scondary, Tertiary, Quarternary, Quinary#606c76#f4f5f6#d1d1d1#e1e1e1N/A
ContrastN/A#fff59d#ffeb3b#f9c22dN/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:

RoleLightestLightNormalHeavyHeaviest
PrimaryN/A#24daf2#1565c0#000030N/A
Scondary, Tertiary, Quarternary, Quinary#606c76#f4f5f6#d1d1d1#e1e1e1N/A
ContrastN/A#fff59d#ffeb3b#f9c22dN/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:

RoleLightestLightNormalHeavyHeaviest
PrimaryN/A#e1bee7#ab47bc#38006bN/A
Scondary, Tertiary, Quarternary, Quinary#606c76#f4f5f6#d1d1d1#e1e1e1N/A
ContrastN/A#fff59d#ffeb3b#f9c22dN/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