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.
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
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
Navigation drawer
Dashboard
Analytics
Settings
Dark - 300
Preview
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.
Navigation drawer
Dashboard
Analytics
Settings
Mixed - 300
Preview
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
// 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
// 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
// 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