How to add dark mode (Color theme)

Operating System

In Mac, you can choose your color theme:
System Preferences --> General --> Appearance

The prefers-color-scheme CSS media feature is used to detect if the user has requested a light or dark color theme.

Syntax example:

@media (prefers-color-scheme: dark) {
  .day.dark-scheme   { background:  #333; color: white; }
  .night.dark-scheme { background: black; color:  #ddd; }
}

@media (prefers-color-scheme: light) {
  .day.light-scheme   { background: white; color:  #555; }
  .night.light-scheme { background:  #eee; color: black; }
}

Result: https://yari-demos.prod.mdn.mozit.cloud/en-US/docs/Web/CSS/@media/prefers-color-scheme/_sample_.examples.html

Change to dark mode manually(such as switch toggle) using ‘class’ strategy in Tailwindcss

First, add "dark:" before the class you want in dark mode

 <div class="bg-white dark:bg-black">
    <!-- ... -->
  </div>

Then, in tailwind.config.js, add

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

Resources:
https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme

https://tailwindcss.com/docs/dark-mode