CSS dark theme generator

Generate your custom dark theme with our easy-to-use CSS and SCSS Dark Theme Generator to easily create and manage your CSS and SCSS custom theme variables.

Color palettes

Primary tints colors

Primary - 100

#382bf0

Primary - 200

#5e43f3

Primary - 300

#7a5af5

Primary - 400

#9171f8

Primary - 500

#a688fa

Primary - 600

#ba9ffb

Dark surfaces colors

Dark - 100

#121212

Dark - 200

#282828

Dark - 300

#3f3f3f

Dark - 400

#575757

Dark - 500

#717171

Dark - 600

#8b8b8b

Dark surfaces mixed colors

Mixed - 100

#1a1625

Mixed - 200

#2f2b3a

Mixed - 300

#46424f

Mixed - 400

#5e5a66

Mixed - 500

#76737e

Mixed - 600

#908d96

Colors implementation

The following color implementations are examples of where it would be suitable to apply.

Dark surfaces colors

Dark/Mixed - 100: For body background color

Dark/Mixed - 200: For cards background color

Dark/Mixed - 300: For chips buttons, dropdowns background color

Dark/Mixed - 400: For sidebars, navbar background color

Dark/Mixed - 500: For modal, dialogs background color

Dark/Mixed - 600: For on background texts color

Dark theme example preview

Navigation drawer


Dashboard

Analytics

Settings

Dark - 300

Preview

Dark Theme (Dark - 100)


Card Surface (Dark - 200)

Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.

Card Surface (Dark - 200)

Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.

Card Surface (Dark - 200)

Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.

Card Surface (Dark - 200)

Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.

Card Surface (Dark - 200)

Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.

Card Surface (Dark - 200)

Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.

Dark mixed theme example preview

Navigation drawer


Dashboard

Analytics

Settings

Mixed - 300

Preview

Mixed Theme (Mixed - 100)


Card Surface (Mixed - 200)

Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.

Card Surface (Mixed - 200)

Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.

Card Surface (Mixed - 200)

Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.

Card Surface (Mixed - 200)

Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.

Card Surface (Mixed - 200)

Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.

Card Surface (Mixed - 200)

Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.

Code

css
        
          
/** CSS DARK THEME PRIMARY COLORS */
--color-primary-100: #382bf0;
--color-primary-200: #5e43f3;
--color-primary-300: #7a5af5;
--color-primary-400: #9171f8;
--color-primary-500: #a688fa;
--color-primary-600: #ba9ffb;
/** CSS DARK THEME SURFACE COLORS */
--color-surface-100: #121212;
--color-surface-200: #282828;
--color-surface-300: #3f3f3f;
--color-surface-400: #575757;
--color-surface-500: #717171;
--color-surface-600: #8b8b8b;
/** CSS DARK THEME MIXED SURFACE COLORS */
--color-surface-mixed-100: #1a1625;
--color-surface-mixed-200: #2f2b3a;
--color-surface-mixed-300: #46424f;
--color-surface-mixed-400: #5e5a66;
--color-surface-mixed-500: #76737e;
--color-surface-mixed-600: #908d96;
/** EXAMPLES */
color: var(--color-primary-600);
background-color: var(--color-surface-300);

Click a code line to select it and press CTRL + C to copy it