Featured

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