New

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.

CSS variables

variables.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;

SCSS variables

_variables.scss 
  
    // SCSS DARK THEME PRIMARY COLORS

    $primary-100: #382bf0;
    $primary-200: #5e43f3;
    $primary-300: #7a5af5;
    $primary-400: #9171f8;
    $primary-500: #a688fa;
    $primary-600: #ba9ffb;
    
  
  
    // SCSS DARK THEME SURFACE COLORS

    $surface-100: #121212;
    $surface-200: #282828;
    $surface-300: #3f3f3f;
    $surface-400: #575757;
    $surface-500: #717171;
    $surface-600: #8b8b8b;
    
  
  
    // SCSS DARK THEME MIXED SURFACE COLORS

    $surface-mixed-100: #1a1625;
    $surface-mixed-200: #2f2b3a;
    $surface-mixed-300: #46424f;
    $surface-mixed-400: #5e5a66;
    $surface-mixed-500: #76737e;
    $surface-mixed-600: #908d96;

Examples

buttons.css / _buttons.scss 

  // CSS ---> DARK BUTTON WITH PRIMARY COLOR TEXT
  color: var(--color-primary-600);
  background-color: var(--color-surface-300);

  // CSS ---> PRIMARY BUTTON WITH DARK COLOR TEXT
  color: var(--color-surface-300);
  background-color: var(--color-primary-600);

  // SCSS BODY SURFACE
  color: $white;
  background-color: $surface-100;

  // SCSS CARD SURFACE
  color: $white;
  background-color: $surface-200;

  // SCSS SIDEBAR SURFACE
  color: $white;
  background-color: $surface-300;

Click the code to copy or press CTRL + C

Be free to play and tweak the primary and surface colors to make your custom dark theme.

Featured tools

Gradient generator

Mesh gradient generator

Palette generator