Dark Mode: Why Websites Should Support the New Feature

Dark mode for digital interfaces is a pretty hot topic. Microsoft Office recently switched its suite to dark mode compatibility. Even a separate trailer was produced for it. With the new operating system iOS and iPad OS versions from Apple, dark mode is also finding its way into the mobile devices of Apple users. Android has offered the dark mode a bit longer. However, it will give new impetus to the spread of the feature.

As it becomes more widespread, it is time to think about adapting your website and webapps.

Do not flood website users with light in dark mode

From my own experience, you get used to dark mode in Mac OS very fast. I am using One Switch – Fireball Studio, an app that activates dark mode with sunset. This makes working in less light-poor surroundings easier for the eyes.

Many native programs such as mail, calendar and code editors already fully support dark mode. On the web, however, the picture is different. As soon as you switch to the browser, users are overwhelmed with bright sites again relatively quickly. The experience can then quickly become exhausting. There are already some browser plugins that try to generate a dark mode for all websites. However, companies do not influence the color schemes and corporate design. It would therefore be better to incorporate the support of the dark mode to have full control of the display.

Current browser versions such as Chrome, Safari and Firefox already support Dark Mode and can also pass on information about switching off the light to websites. However, the support must also be implemented within the website.

We have implemented the dark mode with PHMU.de and hope that this will make surfing more pleasant for users and protecting the eyes.

How to use Tailwind CSS in the Vue.js project

You have successfully started a Vue project (we have written how it works here) and now you want to use TailwindCSS as a utility framework for development? Then in the following article, we will show you how you can do this relatively easily.

First, you have to install the necessary packages:

npm install tailwindcss autoprefixer
-- ODER --
yarn add tailwindcss autoprefixer

Then you can create the tailwindcss.config.js file in your project with the following command:

npx tailwind init

Once that’s done, you can create a new / css folder under assets and create the tailwind.css file there. Here you add the following imports:

@tailwind base;
@tailwind components;
@tailwind utilities;

Now we have to tell the Vue app that the CSS styles should be used. To do this, we import our new tailwind.css into the App.vue.

@tailwind base;
@tailwind components;
@tailwind utilities;

In the last step, we adapt our postcss.config.js. So we state that we want to use both plugins.

module.exports = {
  plugins: [
    require('tailwindcss'),
    require('autoprefixer'),
  ]
}

Once that’s done, we can check that everything works. It’s best to add a Tailwind CSS class like bg-red-500 to a div in App.vue and see if you can see the change after the live reload. Does everything fit? Perfect, then you have successfully added TailwindCSS to your project.

Optimize bundle size

Tailwind increases your CSS immensely. So if you run npm run build you should see the change. The CSS is now over 679 KiB. However, we can reduce that relatively easily.

File                                      Size             Gzipped

dist/js/chunk-vendors.9080b304.js         119.90 KiB       41.68 KiB
dist/js/app.d8b6098b.js                   7.19 KiB         2.58 KiB
dist/service-worker.js                    0.96 KiB         0.54 KiB
dist/js/about.edf670de.js                 0.44 KiB         0.31 KiB
dist/css/app.6504396d.css                 679.39 KiB       85.10 KiB

To remove unused Tailwind CSS classes from your bundle, we use PurgeCSS in conjunction with PostCSS. To do this, first add the necessary package to the project:

npm install purgecss  @fullhuman/postcss-purgecss

Once the installation is complete, we have to make the following change in the PostCSS Config:

const purgecss = require(“@fullhuman/postcss-purgecss”);

module.exports = {
    plugins: [
      require(‘tailwindcss’),
      require(‘autoprefixer’),

    // Only add purgecss in production
    process.env.NODE_ENV === 'production'
      ? purgecss({
          content: ['./src/**/*.html', './src/**/*.vue'],
        })
      : '',
  ],
}

If we now start npm run build again, we should already see drastic improvements in the CSS file.

File                                      Size             Gzipped

dist/js/chunk-vendors.9080b304.js         119.90 KiB       41.68 KiB
dist/js/app.d8b6098b.js                   7.19 KiB         2.58 KiB
dist/service-worker.js                    0.96 KiB         0.55 KiB
dist/js/about.edf670de.js                 0.44 KiB         0.31 KiB
dist/css/app.69044861.css                 2.14 KiB         0.81 KiB

2.14 KiB so you can start!

Link: TailwindCSS (https://tailwindcss.com/)

Setting up a VueJS project using Vue CLI

There are different ways to start a new VueJS project. The easiest and most convenient way is the setup using the Vue CLI. To be able to use the CLI, the necessary NPM modules must first be installed globally. The following command can be executed in the terminal for this purpose:

npm install -g @vue/cli

#oder 

yarn global add @vue/cli 

If the installation is successful, a new command is then available in the terminal. With vue -v, for example, you can check which version of the Vue CLI is now installed.

The project setup via the CLI

To start a project setup, you can start the setup process via the terminal with the help of vue create + the desired project name.

vue create vue-setup

After the command, a small wizard starts that guides you through the setup. First, you are asked whether you want to carry out the configuration manually or use the standard setup, which only includes Babel and ESLint. We first select manually with the arrow keys and then the space bar to see which options are offered.

vue-cli

In manual mode, all options and packages that can be used now appear. For example, I can add the Vue Router to my project relatively quickly and easily. But the setup for unit and end-to-end testing can also be selected.

After the desired selection has been made, the installation of the project and the necessary packages can be started.

A visual project setup using the CLI UI

If you are not one of the terminal enthusiasts, a project setup can also be carried out using a modern interface. To do this, start the UI in the terminal with:

vue ui

This opens the Vue UI interface on port 8000. Project Create starts the process that is already familiar with the CLI when initializing a new project.

First, you can choose the storage location and specify the project name. You can also choose between npm or yarn as the standard package manager. However, a specification is not a must. Once the setting has been made, the wizard process is also started here.

A manual setup can also be carried out via the UI if, for example, the Vue router or Vuex should be added during the setup.

vue-ui

After the successful setup, you are ready to go and can further develop your Vue project.