EN
PortuguêsEnglishEspañol
All tools
Developer tools 100% free

Light and dark theme generator (CSS variables)

Choose the primary color. The generator builds both palettes, checks the contrast of each pair and shows the preview side by side.

How to use

Thank you so much for helping!

Every donation helps pay for the servers and keeps the tools free for everyone. Pick or type an amount:

Secure payment by Stripe. Opens in a new tab.
Back to CSS and design

Dark mode from your brand color







  
Available in: PortuguêsEnglish


Advertisement



  
Light and dark theme generator (CSS variables): what it is for
A well-made dark theme isn't the inverse of the light one. From your brand's primary color, the generator builds the CSS variables for both themes (background, surface, border, text, secondary text, primary color and the text on it) with neutral grays or grays tinted toward the brand color.
Each color pair has its contrast calculated with the WCAG formula and marked as AAA, AA or insufficient, and the primary color is adjusted to pass 4.5:1 in both themes. The code switches themes based on the system mode (prefers-color-scheme) and, if you like, also via a button with data-theme.
How to use
  1. Choose the primary color.
  2. Check the preview and the contrast table.
  3. Copy the CSS variables.
When to use it
  • Creating a dark mode for a website.
  • Building the palette for a new project.
  • Checking color accessibility.

  
Frequently asked questions
Why isn't dark mode just inverting the colors?
Inverting makes the background pure black and the brand colors garish, which tires the eyes. A good dark theme uses a very dark gray background, near-white text and a lighter version of the primary color, to keep contrast without glare.
What do AA and AAA mean for contrast?
They're levels from the WCAG accessibility guidelines. AA requires a contrast of at least 4.5:1 for normal text; AAA, 7:1. The generator shows the ratio of each color pair and warns when any falls below 4.5:1.
How do I switch themes with a button?
The code responds to the system mode (prefers-color-scheme) and also to the data-theme attribute on html. A button that sets data-theme="dark" or "light" forces the chosen theme; this site's Dark mode toggle tool generates that button.
Is it really free?
Yes, 100% free. No sign-up, no subscription and no usage limits. All Tools123 tools are free and run right in your browser.

  
Similar tools

  
Scroll reveal animation (pure CSS)Generate the effect of elements appearing as the page scrolls (scroll reveal) in pure CSS, with animation-timeline: view(): fade in, slide up, slide in from the sides, grow or unblur, with adjustable distance and scroll range, and without hiding anything in browsers that do not support it yet.Open →
CSS clamp() calculator for fluid typographyCalculate the CSS clamp() for text and spacing that grows with the screen width: enter the size on mobile and on desktop and the screen widths, and copy the value in rem, with a preview and a zoom accessibility warning.Open →
Google Fonts pairingsTry Google Fonts pairings for your website's headings and body text: pick a ready-made pair or build your own, see the preview with your text and copy the loading link and the CSS.Open →
Color contrast checker (WCAG)Check whether your text color has enough contrast with the background under the WCAG AA and AAA accessibility rules, with a live preview.Open →
Color converterConvert colors between HEX, RGB, HSL and CMYK and see lighter and darker shades.Open →
HEX color to Tailwind classFind out which color in the default Tailwind CSS (v3) palette is closest to your HEX or RGB color, with the perceptual distance and the five nearest options, or use the exact value with bracket syntax.Open →






The tools are provided as is, without warranty. We are not responsible for the results or for how they are used.