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.
Tonal palettes
Primary tints
Best used for primary elements like buttons, links, and other primary elements.
#aca674
Primary - a0
#b5b083
Primary - a10
#bfb992
Primary - a20
#c8c3a1
Primary - a30
#d1cdb0
Primary - a40
#dad7bf
Primary - a50
Surface colors
Best used for surface elements like cards, backgrounds, and other surface elements.
#121212
Surface - a0
#282828
Surface - a10
#3f3f3f
Surface - a20
#575757
Surface - a30
#717171
Surface - a40
#8b8b8b
Surface - a50
Tonal surface colors
A tonal surface variant, best used for surface elements like cards, backgrounds, and other surface elements.
#201f1b
Tonal - a0
#353430
Tonal - a10
#4b4a46
Tonal - a20
#62615e
Tonal - a30
#7a7977
Tonal - a40
#939390
Tonal - a50
Tip: Press SPACE to generate a random primary color
Click a color block to copy to your clipboard.
Preview
Hover over the elements to preview the color variables.
Colorffy
Dashboard
Analytics
Users
Settings
Dashboard
Dark Theme
Card Surface #1
Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.
Card Surface #2
Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.
Card Surface #3
Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.
Card Surface #4
Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.
Card Surface #5
Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.
Card Surface #6
Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.
Card Surface #7
Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.
Card Surface #8
Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.
Card Surface #9
Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.
Code
/** Dark theme primary colors */
--clr-primary-a0: #aca674;
--clr-primary-a10: #b5b083;
--clr-primary-a20: #bfb992;
--clr-primary-a30: #c8c3a1;
--clr-primary-a40: #d1cdb0;
--clr-primary-a50: #dad7bf;
/** Dark theme surface colors */
--clr-surface-a0: #121212;
--clr-surface-a10: #282828;
--clr-surface-a20: #3f3f3f;
--clr-surface-a30: #575757;
--clr-surface-a40: #717171;
--clr-surface-a50: #8b8b8b;
/** Dark theme tonal surface colors */
--clr-surface-tonal-a0: #201f1b;
--clr-surface-tonal-a10: #353430;
--clr-surface-tonal-a20: #4b4a46;
--clr-surface-tonal-a30: #62615e;
--clr-surface-tonal-a40: #7a7977;
--clr-surface-tonal-a50: #939390;
/** Examples */
.bg-primary {
color: var(--clr-primary-a50);
background-color: var(--clr-surface-a0);
}