How to have custom darkmode colors with TailwindCSS

When using Tailwind CSS, customizing dark mode can be achieved through several steps. Below are the detailed steps and examples:

1. Enabling Dark Mode Configuration

First, enable dark mode in the tailwind.config.js file. You can choose to control dark mode using classes (class) or media queries (media). Using classes is more flexible as it allows you to toggle dark mode at the page level.

javascript
// tailwind.config.js
module.exports = {
  darkMode: 'class', // or 'media' if you prefer media queries
  theme: {
    extend: {},
  },
  variants: {},
  plugins: [],
}

2. Marking Dark Mode in HTML

When configuring dark mode using classes, you need to add the appropriate classes to the top-level elements of HTML (such as <html> or <body>). For example, you can use JavaScript to automatically switch based on the user's system preferences.

html
<body class="dark">

You can also use JavaScript to dynamically switch dark mode:

javascript
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
  document.body.classList.add('dark');
} else {
  document.body.classList.remove('dark');
}

3. Defining Styles for Dark Mode

Use extend in tailwind.config.js to add styles specific to dark mode. You can add dark mode variants to almost any utility class.

javascript
// tailwind.config.js
module.exports = {
  darkMode: 'class', // assuming 'class' mode
  theme: {
    extend: {
      backgroundColor: {
        'primary': '#ffffff',
        'primary-dark': '#333333',
      },
      textColor: {
        'primary': '#333333',
        'primary-dark': '#ffffff',
      }
    },
  },
}

Then use these classes in HTML:

html
<div class="bg-primary dark:bg-primary-dark text-primary dark:text-primary-dark">
  Hello, Tailwind!
</div>

4. Testing and Adjusting

Finally, ensure that you test dark mode in various environments, including different browsers and operating systems. Carefully adjust the styles of each element to ensure a good user experience in dark mode.

Example

Suppose we want to create dark mode styles for a blog post card; we might do the following:

html
<div class="p-4 max-w-sm mx-auto bg-white dark:bg-gray-800">
  <h1 class="text-xl text-gray-900 dark:text-white">Tailwind CSS</h1>
  <p class="text-gray-600 dark:text-gray-300">
    Using Tailwind CSS can make it very easy to implement a custom design system.
  </p>
</div>

This way, when users switch to dark mode, the background and text colors of the card change accordingly, providing a better reading experience.

By following these steps, you can flexibly add dark mode support to your website or application, enhancing user experience and accommodating different user preferences.

2024年6月29日 12:07 回复

1个答案

1. Enabling Dark Mode Configuration

2. Marking Dark Mode in HTML

3. Defining Styles for Dark Mode

4. Testing and Adjusting

Example

你的答案