Dark Theme Generator

v4.10.12

Preview

Dark Theme

Color 01
Color 02
Color 03
Color 04
Color 05
Color 06
Color 07
Color 08
Color 09

System status

API Rate Limit Warning

You're approaching your API rate limit. Consider upgrading your plan.

Featured integrations

Featured Card

Far far away, behind the word mountains #1.

Featured Card

Far far away, behind the word mountains #2.

Featured Card

Far far away, behind the word mountains #3.

Featured Card

Far far away, behind the word mountains #4.

Featured Card

Far far away, behind the word mountains #5.

Featured Card

Far far away, behind the word mountains #6.

All integrations

Card Surface #1

Far far away, behind the word mountains, far from the countries Vokalia and Consonantia.

Active

Card Surface #2

Far far away, behind the word mountains, far from the countries Vokalia and Consonantia.

Pending

Card Surface #3

Far far away, behind the word mountains, far from the countries Vokalia and Consonantia.

Error

Card Surface #4

Far far away, behind the word mountains, far from the countries Vokalia and Consonantia.

Unavailable

Card Surface #5

Far far away, behind the word mountains, far from the countries Vokalia and Consonantia.

Active

Card Surface #6

Far far away, behind the word mountains, far from the countries Vokalia and Consonantia.

Pending

Card Surface #7

Far far away, behind the word mountains, far from the countries Vokalia and Consonantia.

Error

Card Surface #8

Far far away, behind the word mountains, far from the countries Vokalia and Consonantia.

Unavailable

Dashboard

Analytics

Files

Settings

Build your perfect dark theme instantly

Quickly implement a cohesive and accessible dark mode that gives your users a stunning and comfortable viewing experience. This tool helps you manage all your custom theme variables in one place and instantly generates a ready-to-use code block for your project.

How does it work?

Simply define a few of your core brand colors. Our engine will intelligently calculate a full suite of accessible dark theme colors, including various surface, text, and accent shades. The tool then generates a complete, ready-to-use code block of CSS custom properties and SCSS variables. Just copy the code into your project to activate your new theme.

AI-generated content can make mistakes, so double-check it.

Primary palette

Tints

Best used for primary elements like buttons, links, and other primary elements.

#aca674

AAA - 8.46

#b4af82

AAA - 9.39

#bcb78f

AAA - 10.3

#c4c09d

AAA - 11.37

#ccc9ab

AAA - 12.51

#d5d2b9

AAA - 13.74

Generated Code

Preview or copy code. Use Export to download full files.

Loading syntax highlighting...

Export dark theme

Choose an export category, then select the format that matches your workflow.

CSS (.css)

PRO

Export web-ready CSS variables.

SCSS (.scss)

PRO

Export Sass tokens and variables.

Tailwind Config v3 (.js)

PRO

Generate a Tailwind v3 config file.

Tailwind Theme v4 (.css)

PRO
NEW

Export theme variables for Tailwind v4.

Contrast Checker

Check accessibility compliance of your palette colors.

#aca674

Fail - 2.48

#121212

AAA - 18.73

Click on a color block to open the full contrast checker. Levels are based on WCAG 2.1 guidelines.

AAA

Perfect ≥ 7:1

Easy to read for everyone, including people with visual impairments.

AA

Good ≥ 4.5:1

Meets standard requirements for most users and situations.

Fail

Poor < 4.5:1

Text may be difficult to read, especially for people with visual challenges.

Tips & Keyboard shortcuts

Learn how to use the tools effectively with these tips and shortcuts.

Generate & History

  • Generate random theme colors

    Space

  • Show this help

    F1

  • Undo last theme change

    Ctrl + Z

  • Redo undone change

    Ctrl + Shift + Z

Theme Controls

  • Switch surface preview mode

    Use surface style controls

  • Adjust primary and surface colors

    Use theme color inputs

  • Reset semantic colors

    Use semantic colors reset action

  • Reset palette counts

    Use color counts reset action

Code & Export

  • Open generated code dialog

    Click Code in toolbar

  • Open contrast dialog

    Click Contrast in toolbar

  • Export the theme files

    Click Export in toolbar

  • Open the light theme generator

    Click the forward button in toolbar

Pro Tips

  • Surface and tonal previews help you test the same palette across different dark UI surfaces

  • Your theme configuration is kept in the URL, so you can refresh or share it without losing state

  • Semantic palettes update with the rest of the theme, which makes accessibility checks faster

  • The toolbar forward action carries your current setup into the light theme generator for quick comparison

Submit feedback

We'd love to hear from you, tell us what you think about Colorffy, and what we can improve.

What's your suggestion?

0/250 characters

Optional

Some basic browser environment data is included to help us reproduce issues.

Colorffy Logo

Create your Colorffy account

Create. Explore. Build. Check.

Continue with

or

Already have an account? Log in

By signing up, you agree to our Terms of Service and Privacy Policy

Upgrade to Pro and build faster.

Trusted by designers and developers around the world.

.css.csv.scss.json.pdf.jpg.png.svgtailwindstyle dictionarywallpapers4kultrawidewidescreenapp tokensflutterandroidswiftmaui.nethdr colors

Create faster. Export anywhere.

Unlock advanced exports, exportable app token files, unlimited collections, wallpapers, and an ad-free experience.

  • Generate color palettes with AI

  • Find assets using AI Search

  • Export polished Branding Kits (PDF)

  • Export Light/Dark themes

  • Export platform-native app tokens

  • Generate native gradient codes

  • Download 4K & mobile wallpapers

  • Save unlimited collections

  • Export to Web code

  • Enjoy an ad-free experience

PWA Prompt