Dark Mode Color Palette for Tailwind CSS

Want to implement dark mode in your Tailwind CSS project? Here's what you need to know:

Dark mode uses dark backgrounds with light text for better eye comfort
Tailwind CSS has built-in dark mode support using the dark: prefix
Avoid pure black (#000000) for backgrounds - use dark grays instead
Aim for a 15.8:1 contrast ratio between text and background
Test your design in different lighting conditions

To set up dark mode in Tailwind:

Enable it in your tailwind.config.js file
Use the dark: prefix before color classes
Toggle the dark class on your HTML element

Quick tips for great dark mode colors:

Use off-whites like #F0F0F0 for text
Reduce saturation of accent colors by about 20%
Keep your brand colors, but adjust them for dark backgrounds
Use subtle gradients to add depth without hurting readability

Remember: Good dark mode isn't just inverting colors - it's about creating a comfortable, readable experience for users.

Color theory for dark mode

Dark mode isn't just flipping colors. It's a new design approach. Let's explore the science behind dark mode colors and how to use them in Tailwind CSS projects.

Colors in the dark

Our eyes work differently in low light:

Contrast is key: Dark settings make our eyes crave contrast. That's why text stands out on dark backgrounds.
Skip pure black: Pure black (#000000) can be harsh. Use dark grays like #121212 instead.
Tone down colors: Bright, saturated colors can look weird against dark backgrounds. Soften them for better viewing.

Keeping colors accessible

Accessibility isn't optional. Here's how to make your dark mode colors work for everyone:

Contrast ratio: Aim for at least 4.5:1 between text and background.
Text opacity: For white text on dark backgrounds, use:

Emphasis	Opacity
High	87%
Medium	60%
Disabled	38%

Color choices: Stick to lighter tones (200-50 range) for better readability.

Setting up dark mode in Tailwind CSS

Tailwind CSS makes dark mode a breeze. Here's how:

Enable dark mode

Add this to your tailwind.config.js:

module.exports = {
  darkMode: 'class',
  // ...
}

This lets you control dark mode with JavaScript.

Want automatic dark mode? Use:

module.exports = {
  darkMode: 'media',
  // ...
}

Use dark mode

Tailwind creates dark variants for color classes. Use the dark: prefix:

<div class="bg-white dark:bg-gray-800">
  <h1 class="text-black dark:text-white">Hello, Dark Mode!</h1>
</div>

This div? White background in light mode, dark gray in dark mode. Text? Black in light, white in dark.

Toggle dark mode manually

For class strategy, you'll need JavaScript:

// Check preference
if (localStorage.getItem('darkMode') === 'true' || 
    (!('darkMode' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
  document.documentElement.classList.add('dark')
} else {
  document.documentElement.classList.remove('dark')
}

// Toggle
document.getElementById('darkModeToggle').addEventListener('click', function() {
  document.documentElement.classList.toggle('dark')
  localStorage.setItem('darkMode', document.documentElement.classList.contains('dark'))
})

This script checks for saved preferences, applies them, and lets users toggle with a button.

Making your own dark mode colors

Creating custom dark mode colors in Tailwind CSS is easy. Here's how:

Pick main colors

Choose colors that work well in dark settings. Skip pure black for backgrounds - it's hard on the eyes. Go for dark grays or navy blues instead.

For text, use off-whites or light grays. Pure white can be too bright.

Create color shades

Make a range of shades for each main color. It adds depth to your design. Use Tailwind's color generator or Adobe Color to build your palette.

Let's say you pick dark blue (#1E3A8A) as your main color. Here's a shade range:

Shade	Hex Code
100	#DBEAFE
200	#BFDBFE
300	#93C5FD
400	#60A5FA
500	#3B82F6
600	#2563EB
700	#1D4ED8
800	#1E40AF
900	#1E3A8A

Add colors to Tailwind

To use your custom colors in Tailwind:

Open tailwind.config.js
Add your colors to theme.extend.colors:

module.exports = {
  theme: {
    extend: {
      colors: {
        'custom-blue': {
          100: '#DBEAFE',
          200: '#BFDBFE',
          // ... other shades
          900: '#1E3A8A',
        },
      },
    },
  },
}

Now you can use these colors in your HTML:

<div class="bg-custom-blue-900 dark:bg-custom-blue-100">
  <p class="text-custom-blue-100 dark:text-custom-blue-900">Dark mode text</p>
</div>

This method keeps your colors consistent and works with Tailwind's utility-first approach.

Tips for good dark mode colors

Creating a great dark mode palette in Tailwind CSS isn't rocket science. Here's how to nail it:

Getting contrast right

You need good contrast for readability. Aim for at least 4.5:1 between text and background. Check it out:

Element	Light Mode	Dark Mode
Background	#FFFFFF	#121212
Text	#000000	#E0E0E0
Contrast Ratio	21:1	14.6:1

This keeps things readable without blinding anyone.

Why not to use pure black

Don't use pure black (#000000) for backgrounds. It's too harsh. Go for dark grays or navy blues instead. Google likes #121212 for dark backgrounds.

Why? Dark grays let you use shadows and depth. They also stop that weird effect where white text seems to bleed into black backgrounds.

Using accent colors well

Accent colors are your secret weapon in dark mode. They highlight important stuff. But don't go overboard. Here's the deal:

Make your accent colors about 20% less saturated.
Use lighter shades (200-50 range) against dark backgrounds.
Use accents for buttons, links, and icons.

Zeplin does this well. They use their orange brand color for key headers and icons in dark mode.

Using dark mode colors in Tailwind

Tailwind CSS makes dark mode a breeze. Here's the lowdown:

Text color tools

Want dark mode text? Just add dark: before your color class:

<p class="text-gray-900 dark:text-white">Dark mode? No problem.</p>

Background color tools

Backgrounds work the same way:

<div class="bg-white dark:bg-gray-800">
  <h1 class="text-gray-900 dark:text-white">Dark mode heading</h1>
  <p class="text-gray-600 dark:text-gray-300">And some text</p>
</div>

Border and accent tools

Borders and accents? You guessed it:

<button class="border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-800 text-gray-900 dark:text-white">
  Click me
</button>

To make it all work, update your Tailwind config:

module.exports = {
  darkMode: 'class',
  // other stuff
}

Then, flip the switch with the dark class on your <html> tag:

<html class="dark">
  <!-- Site goes here -->
</html>

Toggle this class with JavaScript to switch modes. Easy, right?

Advanced dark mode color techniques

Smooth mode transitions

Want your site to shift between light and dark modes without jarring your users? Here's how:

Use CSS variables for your color palette. It's simple:

:root {
  --color-primary: 218 31 38;
}

.dark {
  --color-primary: 255 138 128;
}

Then, in your Tailwind config:

module.exports = {
  theme: {
    extend: {
      colors: {
        primary: 'rgb(var(--color-primary) / <alpha-value>)'
      }
    }
  }
}

Now your colors will transition smoothly when users switch modes.

CSS variables: Your new best friend

CSS variables aren't just for smooth transitions. They're a game-changer for managing your color palette. With them, you can:

Update colors across your entire site by changing one value
Create different themes easily
Let users customize their own themes

Here's a button using CSS variables:

<button class="bg-surface-light dark:bg-surface-dark text-primary-light dark:text-primary-dark hover:bg-surface-1-light dark:hover:bg-surface-1-dark transition-colors px-4 py-2 shadow rounded-md font-bold">
  Click me
</button>

Colors that adapt to your users

Want to take it a step further? Make your colors respond to user actions or settings.

Here's how to save user preferences:

const [isOn, setIsOn] = useState(() => {
  return localStorage.getItem('theme') === 'light';
});

const toggleSwitch = () => {
  setIsOn(!isOn);
  localStorage.setItem('theme', isOn ? 'dark' : 'light');
};

And here's how to apply the theme:

useEffect(() => {
  if (isOn) {
    document.documentElement.classList.remove('dark');
  } else {
    document.documentElement.classList.add('dark');
  }
}, [isOn]);

Now your site's colors will adapt to each user's preferences. Cool, right?

Testing your dark mode colors

Testing dark mode colors is key for a great user experience. Here's how to do it:

Color testing tools

Use these to check accessibility:

WebAIM Contrast Checker
Deque's Color Contrast Analyzer
WAVE

These tools help you meet WCAG 2.0 level AA standards: 4.5:1 contrast for normal text, 3:1 for large text.

Getting user feedback

User input helps refine your design:

1. Usability tests

Have users try your dark mode and share thoughts.

2. Surveys

Ask about readability and visual appeal.

3. Analytics

Track engagement after launching dark mode.

Making improvements

Based on tests and feedback:

Adjust contrast to meet WCAG standards
Use dark gray instead of pure black
Test on different screens

Remember: Good dark mode design is about balance. It's not just inverting colors - it's creating a comfortable, readable experience for your users.

Common dark mode mistakes to avoid

When setting up dark mode in Tailwind CSS, you might run into some issues. Here's how to dodge them:

Bright colors: A no-go

Bright colors in dark mode? Not a good idea. They can hurt your eyes and make reading tough. Instead:

Tone down colors by about 20 points
Use soft, neutral colors for most things
Save bright colors for buttons or important stuff

Keep text readable

You want your text to look good AND be easy to read:

Don't use pure white text on dark backgrounds
Go for off-white shades (like #F0F0F0)
Aim for a 15.8:1 contrast ratio between background and text

Pro tip: Check your contrast with WebAIM's Contrast Checker. Make sure it meets WCAG 2.0 level AA standards (4.5:1 for normal text, 3:1 for large text).

Use colors consistently

Your dark mode should look the same all over:

Element	Light Mode	Dark Mode
Background	#FFFFFF	#121212
Text	#000000	#E0E0E0
Primary Button	#3366CC	#4477DD
Secondary Button	#DDDDDD	#333333

Don't forget to adjust everything - backgrounds, text, buttons, forms, and icons. It'll make your design look put together.

Examples of good dark mode design

Let's check out some real-world dark mode designs that nail it. These examples show how to make dark mode work in practice.

Popular websites doing it right

GitHub

GitHub's dark mode is on point:

Element	Color
Background	#0d1117
Text	#c9d1d9
Links	#58a6ff
Buttons	#238636

They use a dark navy background instead of pure black. Smart move - it's easier on the eyes. The light gray text? Great contrast without being too harsh.

Spotify

Spotify's dark mode stands out with its accent colors:

Element	Color
Background	#121212
Text	#ffffff
Accent	#1db954

That dark gray background makes album artwork pop. And the bright green accent? It's like a neon sign pointing to important stuff.

Apple.com

Apple shows us how to use gradients in dark mode:

Element	Color
Background	#000000 to #1a1a1a
Text	#f5f5f7
Accent	#2997ff

That subtle gradient? It adds depth without messing with readability.

What we can learn

Ditch pure black: It's too harsh. Go for softer dark grays like GitHub's #0d1117.
Text color matters: Light grays like Apple's #f5f5f7 work well. Good contrast, not too bright.
Accent colors are key: Spotify's green and Apple's blue guide your eyes where they need to go.
Try gradients: A subtle gradient, like Apple's, can add depth to your design.
Keep your brand: Notice how they all kept their brand colors? They just tweaked them for dark mode.

Conclusion

Dark mode in Tailwind CSS isn't just a trend—it's a must-have for modern web design. Here's what you need to know:

1. Skip pure black

Use dark grays like #121212 for backgrounds. They're easier on the eyes and look better.

2. Nail the contrast

Aim for a 15.8:1 ratio between text and background. This keeps things readable without hurting eyes.

3. Tweak your brand colors

Don't just flip your palette. Adjust your brand colors to work in dark mode while staying on-brand.

4. Use accents carefully

Bright accents can guide users, but don't go overboard.

5. Test, test, test

Check your design in different lighting and get user feedback.

The future of dark mode

Dark mode is changing fast. Keep an eye out for:

Automatic switching between light and dark
Better accessibility tools
Performance boosts for mobile
Designs that adapt to your environment
Stronger support in design systems

"Of the 17.3% of people (42 in total) who don't use Dark Mode, a majority said it didn't look 'right', which is somewhat of a vague answer, but suggests they gave it a try but were disappointed." - Thomas Steiner, Chrome Developer Relations Engineer

This quote shows why getting dark mode right matters. As more users expect it, Tailwind CSS designers and developers need to create dark themes that look good AND work well.

FAQs

How do you add dark mode colors in Tailwind?

Adding dark mode colors in Tailwind is simple:

Set up your Tailwind config file
Use the dark: prefix before color classes

Like this:

<div class="bg-white dark:bg-gray-800 text-black dark:text-white">
  Dark mode magic happens here
</div>

Got a custom prefix? Just add it:

<div class="tw-bg-white tw-dark:bg-gray-800">
  Dark mode with a twist
</div>

How to setup Tailwind dark mode?

Setting up Tailwind dark mode is a breeze:

Open tailwind.config.js
Add this:

module.exports = {
  darkMode: 'selector',
  // other stuff...
}

Now you can toggle dark mode by adding the dark class to your HTML tree. Easy, right?

Does Tailwind UI support dark mode?

You bet! Tailwind UI is all about that dark mode life. Flowbite components, built on Tailwind CSS, also play nice with dark mode using the "class" option.

Want to use dark mode with Flowbite? Here's how:

Enable dark mode in your Tailwind config
Slap that dark: prefix on your HTML classes
Toggle the dark class on your <html> or <body> element

How do you turn on dark mode in Tailwind?

Turning on dark mode in Tailwind is like flipping a switch:

Add the dark class to your <html> or <body> element
Use JavaScript to toggle this class based on user preference

Here's a quick script to get you started:

// Check for dark mode preference
if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
  document.documentElement.classList.add('dark')
} else {
  document.documentElement.classList.remove('dark')
}

// Toggle dark mode
function toggleDarkMode() {
  document.documentElement.classList.toggle('dark')
}

Now you're ready to embrace the dark side (or the light side) with Tailwind!