Dark Theme Generator

Surface color

Featured integrations

All integrations

Variables

Primaries



--clr-primary-a0



--clr-primary-a10



--clr-primary-a20



--clr-primary-a30



--clr-primary-a40



--clr-primary-a50

Surface



--clr-surface-a0



--clr-surface-a10



--clr-surface-a20



--clr-surface-a30



--clr-surface-a40



--clr-surface-a50

How the Dark Theme Generator works

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



/** Base colors */
--clr-dark-a0: #000000;
--clr-light-a0: #ffffff;

/** 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;

/** 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;

/** 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);
}

PWA prompt

CSS dark theme generator

Dark Theme

How the Dark Theme Generator works

Tonal palettes

Primary tints

Surface colors

Tonal surface colors