Nethren UI - Vue 3 Edition

Appearance

Colors ​

By default, Nethren-UI ships with the following colors. Each component is colored based on appropriate shades of the following swatches. Use the lowercase of each swatch name when setting colors for components as props (ex: Primary swatch should be primary).

Default color pallete ​

Primary ​

50

#e8eaff

100

#c0c2f5

200

#9799e8

300

#6f70de

400

#4647d3

500

#2c2db9

600

#212391

700

#171969

800

#0c0e41

900

#04041c

Secondary ​

50

#fbfbdf

100

#f0f0bc

200

#e7e695

300

#dddc6e

400

#d3d246

500

#b9b82c

600

#908f20

700

#676614

800

#3e3d09

900

#161400

Success ​

50

#e2fbed

100

#c2ebd4

200

#9fddb9

300

#7ccf9e

400

#58c184

500

#3ea76a

600

#2e8251

700

#1f5d3a

800

#0f3921

900

#001506

Info ​

50

#e5eeff

100

#b9cbfb

200

#8da9f3

300

#6186eb

400

#3564e4

500

#1b4aca

600

#123abd

700

#0a2972

800

#031947

900

#00081d

Warning ​

50

#fff8de

100

#f9eab6

200

#f3dc8b

300

#eecf5e

400

#e9c131

500

#d0a719

600

#a18211

700

#735d09

800

#453802

900

#191300

Danger ​

50

#ffe4e4

100

#fcb8b8

200

#f48c8c

300

#ee5e5e

400

#e73131

500

#ce1818

600

#a11011

700

#73090b

800

#480405

900

#1f0000

Dark ​

50

#666666

100

#555555

200

#444444

300

#333333

400

#222222

500

#151515

600

#121212

700

#0f0f0f

800

#0d0d0d

900

#000000

Light ​

50

#ffffff

100

#fefefe

200

#fdfdfd

300

#fcfcfc

400

#fbfbfb

500

#fafafa

600

#e6e6e6

700

#bfbfbf

800

#999999

900

#737373

Configuring the color pallete ​

In the setColorPallete function exposed from @nethren-ui/vue, we can pass a configuration object with the full swatch for the colors in color scheme wa want to change.