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 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
Featured tools