\n\n

Deep Color Mode | Beginner Tutorial

\n

Deep color mode (Dark Mode) is a common user interface design trend that provides a dark-toned interface to reduce eye strain and save device battery.

\n

Tailwind CSS supports the deep color mode (Dark Mode) feature, making it easy for developers to create dark versions of websites to adapt to users' system preferences.

\n

Tailwind CSS provides a modifier named dark, which allows you to define styles specifically for dark mode.

\n

When the user's device or operating system is set to dark mode, styles with the dark: modifier will automatically take effect.

\n

Example

\n \n Try it »\n

In light mode: Background color is white (bg-white), text color is black (text-black).

\n

In dark mode: Background color is black (dark:bg-black), text color is white (dark:text-white).

\n

---

\n

Enabling Deep Color Mode

\n

By default, Tailwind uses a media strategy to detect dark mode, based on the user's system preference.

\n

If finer control is needed, the class strategy can also be used.

\n

1. Enabling Dark Mode in tailwind.config.js

\n

module.exports={\n        darkMode: 'media', // Based on system preference (default)\n        // darkMode: 'class', // Manually switch using class names\n        theme: {\n            extend: {},\n        },\n        plugins: [],\n    }

\n

`media` mode: Automatically switches based on the user's operating system settings (through media query `prefers-color-scheme: dark`).

\n

`class` mode: Allows developers to manually switch dark mode by adding the `dark` class to the `html` or `body` tag.

\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n

Mode	Detection Method	Control Method	Use Case
`media` mode	Media query based on system preference	Automatic switching	Simpler use cases without custom logic
`class` mode	Manually add `dark` class to `html` or `body`	Custom switching logic by developer	Complex scenarios requiring buttons or toggles

\n

Switching Logic Example (Class Mode)

\n

To support manual switching of dark mode instead of relying on system preferences, use the class strategy instead of the media strategy.

\n

Now, the dark:{class} class no longer works based on prefers-color-scheme; instead, it activates when the dark class appears in the HTML tree:

\n \n

Example

\n Toggle Dark Mode\n \n const toggle = document.getElementById('toggle-dark-mode');\n toggle.addEventListener('click', () => {\n document.documentElement.classList.toggle('dark');\n });\n \n Try it »\n

---

\n

How to Use Dark Mode Utility Classes

\n

1. Style Switching

\n

Use the dark: prefix to specify styles for dark mode.

\n

Example

\n \n Try it »\n

2. Responsive and Dark Mode Together

\n

Responsive breakpoints and dark mode can be used together:

\n

Example

\n \n Try it »\n

Small screen font size is xl.

\n

In dark mode, the small screen font color becomes light gray.

\n

3. Interactive States and Dark Mode Together

\n

You can apply styles to interactive states like hover, focus, etc., combined with dark mode:

\n

Example

\n \n Interactive Button\n \n Try it »\n

Extending Dark Mode

\n

In some cases, you may need to provide additional colors or styles for dark mode through theme.extend to customize the Tailwind configuration.

\n

module.exports = { theme: { extend: { colors: { brand: { DEFAULT: '#1DA1F2', dark: '#0d74b8', }, }, }, },}

\n

Using extended colors in HTML:

\n

Example

\n \n Try it »\n

---

\n

Complete Example

\n

Example

\n \n \n const toggle = document.getElementById('toggle-dark-mode');\n toggle.addEventListener('click', () => {\n const isDark = document.documentElement.classList.toggle('dark');\n localStorage.theme = isDark ? 'dark' : 'light';\n });\n \n Try it »