Adapting to dark mode with tailwindcss is surprisingly easy

Picking up where I left off in the previous article, “Discovering color matching tips from Nuxt Documents,” this article continues my exploration of Nuxt/Content. When I studied its color system, I also found that it also provides dark mode, which is a kind of color system, after all, it is also related to color collocation. After a lot of learning, I found that the dark mode is very easy to implement. It doesn’t even require you to have a deep understanding of the mode, just need to set a few options to complete, and the color system with tailwindcss is very flexible.

In this article, the author will explore the background of dark mode -> the origin and importance of dark mode -> tailwindcss + vue3 practice dark mode to explain the ideas.

First let’s look at the style changes of the entire page through HTML source code.

As you can see from the contents of class in Dark mode, there are two changes compared to normal mode:

1. The root element will mount a dark-mode style.

2. Any style with dark:{class} set will take effect.

This is the built-in dark mode of tailwindCSS, which automatically inserts a class into the root element according to the mode switch, and makes the dark:{class} function that we set at the beginning effective. Why is there dark mode? Not only will the following answer that question, but I’ll also explain why dark mode is used.

The cause of

Let’s get started!

In the early days of computing, computer displays were dominated by “dark mode”. This was due to the use of cathode ray tubes (CRTS) in the 1960s and 1980s, when green text on a black background became the norm. (It’s an ongoing tradition.)

Even after the 1980s, color CRT monitors became popular, but the mainstream DOS did not have the concept of “graphical interface”, still continued the previous habit of black background. In 1984, Apple released the Macintosh personal computer and popularized the concept of Graphic User Interface, thus ushering in the era of Graphic interaction on a white background.

The popularity of “Dark Mode” reached an all-time high in October 2019 with the release of IOS 13, which supports Dark Mode.

Then, various Internet apps adapted the “dark mode”, which can be seen from the picture below. In fact, we also felt that since then, many people around the screen turned into a dark theme. So far we’ve talked about why there’s a dark mode. It’s always been there, but since Apple released it, it’s been getting a lot of attention.

If you look at the mobile Internet Industry Analysis report in recent years, you can see that more and more people are using their phones at night/in dim Settings.

The peak use time of many video apps is between 20:00 and 22:00, and the rise of short video apps like Kuaishou and Douyin also makes people go to bed late. As a result, the use of the night scene increased the demand for “dark mode”, so it was natural for manufacturers to adopt dark mode in order to attract people to use their products. This mode not only keeps us from going blind, but also brings visual immersion.

Now let’s get back to our business and take a look at tailwindcss adapting to “dark mode” with a new project.

practice

For this practice, I use the vuE3 created demo as an example. (Other frameworks are similar, only need to configure the corresponding loader)

We can directly through the tailwindcss website provide vue3 + vite command to new project (tailwindcss.com/docs/guides…

# create project
npm init vite my-project
cd my-project
# install dependencies
npm install
# Install tailwind dependency
npm install -D tailwindcss@latest postcss@latest autoprefixer@latest
Copy the code

# tailwind configuration initialization
npx tailwindcss init -p
Copy the code

After initialization, two files, tailwind.config.js and postcss.config.js, are automatically created in the directory, and our file directory looks like this.

. / ├ ─ ─ the README. Md ├ ─ ─ index. The HTML ├ ─ ─ package - lock. Json ├ ─ ─ package. The json ├ ─ ─ postcss. Config. Js ├ ─ ─ public │ └ ─ ─ Favicon. ├─ SRC │ ├── vue │ ├─ assets │ ├─ ├─ ├─ ├─ ├─ vite.config.jsCopy the code

Then in order to be able to use tailwindcss, we need to introduce some of his toolkits. We introduced its toolkit by creating an index.css in the SRC directory.

# to create tailwindcss
touch src/index.css
Copy the code

Modify our CSS file and introduce toolkit:

// src/index.css
@tailwind base;
@tailwind components;
@tailwind utilities;
Copy the code

Then import the CSS file in the entry file main.js.

// src/main.js
import { createApp } from 'vue'
import App from './App.vue'
import './index.css'

createApp(App).mount('#app')
Copy the code

Now that the vite + vue3 + TailwindCSS project has been initialized, it is time to configure the dark mode of tailwindCSS.

The first step is to choose the mode to use, and the second step is to make it easy to write code that fits the dark mode, such as Dark :{class}.

The first step

Open tailwind.config.js and let’s modify the outermost darkMode property, which has two options: Media and class:

1. media Media monitoring is used to monitor whether dark mode is enabled on the user’s operating system in real time.
2. class More manual, such as providing options or buttons on the site to switch between Light and Dark modes.

Here we use the Class pattern to implement our dark pattern.

.darkMode: "class".Copy the code

The second step

If you want to support dark mode in tailwindcss, you will need to add additional features in variants. For example, we made dark mode available for background colors and text colors below.

Will continue to work on tailwind.config.js and add variants. This will add some class code that will allow you to write quickly in Dark mode, for example, Dark :text-gray-300, which means that in dark mode the text will turn into a grayscale of 300. For this value, see my previous article “Color Matching Tips from Nuxt Documentation”, which is a set of theme color values for TailwindCSS. The lower the value, the lighter the color is, and the more white the color is, the darker the color is, and the more white the color is. Therefore, we need to select a lighter color value in dark mode. BackgroundColor, borderColor, gradientColorStops, placeholderColor, and textColor can be configured to write quickly in Dark mode. So why configure this step? It’s all about the amount of code. Configuring multiple attributes will introduce more CSS classes. If you don’t use all of your classes in Dark mode, just introduce a few.

// tailwind.config.js
module.exports = {
  ...
  variants: {
    extend: {
      textOpacity: ['dark'].backgroundColor: ['dark'].}}... }Copy the code

Tailwind CSS-dark-mode was added to support dark mode

const colors = require('tailwindcss/colors')
const plugin = require('tailwindcss/plugin')
const selectorParser = require('postcss-selector-parser')


module.exports = {
  // purge: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
  darkMode: "class".// or 'media' or 'class'
  theme: {
    colors,
    extend: {},},variants: {
    extend: {
      backgroundColor: ['dark'].textColor: ['dark'],}},plugins: [
   	require('tailwindcss-dark-mode') (the)],}Copy the code

Then we write our control topic code in app.vue

<div class="text-gray-700 dark:text-gray-300 dark:bg-gray-900 w-full h-full">
    <button @click="lightMode" class="border-2 p-1 m-1">Normal mode</button>
    <button @click="darkMode" class="border-2 p-1 m-1">Diablo mode</button>
    <div class="p-1">
      <h1 class="text-2xl">I am a H1</h1>
      <h2 class="text-xl">I am the H2</h2>
      <h3 class="text-lg">I am the H3</h3>
      <h4 class="">I am the H4</h4>
    </div>
</div>
Copy the code

When we are in dark mode, we change the font color to text-gray-300 and the background color to bg-gray-900 to see the effect:

The above code can be found at github.com/hua1995116/… To obtain.

conclusion

In fact, we found it very easy to write dark mode in this way. We just need to add dark in front of some key elements to easily adapt to Dark mode, no need to think of a class name, and write the corresponding code in the media query, the whole process is very simple.

feeling

Tailwindcss + vue3: How to use TailwindCSS to adapt to Dark Mode. The original origin was just to find a documentation site. So finding nuxt/ Content, and then slowly exploring it, has taught us that when we use good projects, if we are careful and just dig a little deeper, we can learn a lot of valuable knowledge. There is nothing unpleasant about learning through use and exploration

Refer to the article

www.199it.com/archives/10…

Finance.sina.com.cn/tech/2021-0…

www.uisdc.com/dark-mode-h…

Trends.google.com/trends/expl…

Tailwindcss.com/docs/dark-m…