``` Dark Mode - Tailwind CSS

Tailwind CSS

Dark Mode Toggling

Build beautiful and accessible interfaces that switch between light and dark appearances based on user choices or system preferences.

Light Mode

The default mode for most applications and websites. Designed for clarity, readability, and contrast.

<body>

Dark Mode

A low-light, inverted color scheme for users who prefer reduced contrast and a sleeker display when used in dim environments.

<body class="dark">

Getting Started With Dark Mode in Tailwind CSS

Enabling Dark Mode

  • Add the dark class to your <html> element to globally apply dark theme.

  • Tailwind automatically inverts light colors in dark mode while preserving the intent of each element.

  • Customize and extend dark mode colors using tailwind.config.js.

// tailwind.config.js
module.exports = {
  darkMode: 'class',
  theme: {
    extend: {
      colors: {
        dark: {
          100: '#f0f0f0',
          200: '#e5b5b5',
          DEFAULT: '#2D3748',
          800: '#1A202