Dark Mode: Warum Websites das neue Feature unterstützen sollten

Der Dark Mode für digitale Interfaces ist ein ziemlich heißes Thema. Erst kürzlich stellte Microsoft Office seine Suite auf Dark Mode Kompatibilität um. Sogar ein eigener Trailer wurde dafür produziert. Mit den neuen Betriebssystem iOS und iPad OS Versionen von Apple hält der Dark Mode auch Einzug auf die mobilen Endgeräte der Apple Nutzer. Android kann dies bereits etwas länger. Der Verbreitung des Features wird es jedoch neuen Schub verleihen.

Durch die größere Verbreitung wird es Zeit über die Anpassung der eigenen Website und Webapps nachzudenken.

Website Nutzer im Dark Modus nicht mit Licht fluten

Aus eigener Erfahrung kann ich sagen, wie schnell man sich an den Dark Mode beim Mac OS gewöhnen kann. Ich selbst nutze One Switch – Fireball Studio als App, die den Dark Mode mit Sonnenuntergang aktiviert. So ist das Arbeiten in lichtärmeren Umgebungen für die Augen angenehmer.

Viele native Programme wie Mail, Kalender und auch Code Editoren unterstützen den Dark Mode bereits komplett. Im Web sieht das Bild jedoch anders aus. Sobald man in den Browser wechselt, werden Nutzer relativ schnell wieder mit hellen Sites geflutet. Das Erlebnis kann dann schnell anstrengend werden. Es gibt bereits einige Browser Plugins, die versuchen für alle Websites einen Dark Mode zu generieren. Jedoch haben Unternehmen hier keinen Einfluss auf die Farbgestaltungen und das Corporate Design. Besser wäre es daher von Haus aus, die Unterstützung des Dark Modes einzubauen, um die volle Kontrolle der Darstellung zu haben.

Aktuelle Browser Versionen wie Chrome, Safari und Firefox unterstützen den Dark Mode bereits und können auch an Websites, die Info zum Licht abschalten weitergeben. Jedoch muss der Support auch innerhalb der Website implementiert sein.

Wir haben mit PHMU.de den Dark Mode implementiert und erhoffen uns so ein angenehmeres Surfen bei Nutzern und die Schonung der Augen.

Wie du Tailwind CSS im Vue.js-Projekt nutzen kannst

Du hast erfolgreich ein Vue-Projekt gestartet (wie das geht haben wir hier aufgeschrieben) und möchtest nun TailwindCSS als Utility-Framework zur Entwicklung nutzen? Dann zeigen wir dir im folgenden Beitrag, wie du das relativ einfach hin bekommst.

Zuerst musst du die notwendigen Packages installieren:

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

Dann kannst du mit dem folgenden Command das tailwindcss.config.js file in deinem Projekt erstellen:

npx tailwind init

Ist das erledigt, kannst du unter assets einen neuen Ordner /css erstellen und dort die Datei tailwind.css anlegen. Hier fügst du folgende Imports hinzu:

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

Nun müssen wir der Vue-App mitteilen, dass die CSS-Styles genutzt werden sollen. Dafür importieren wir unsere neue tailwind.css in die App.vue.

import Vue from 'vue';
import App from './App.vue';

import './assets/styles/tailwind.css';

Im letzten Schritt passen wir unser postcss.config.js an. So geben wir an, dass wir beide Plugins nutzen wollen.

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

Ist das erledigt, können wir prüfen, ob alles funktioniert. Füge am besten eine Tailwind-CSS-Klasse wie bg-red-500 einem div in App.vue hinzu und schaue ob du die Änderung nach dem Livereload siehst. Passt alles? Perfekt, dann hast du erfolgreich TailwindCSS zu deinem Projekt hinzugefügt.

Bundle-Größe optimieren

Tailwind vergrößert dein CSS immens. Wenn du also nun npm run build ausführst solltest du die Veränderung sehen. Über 679 KiB ist das CSS nun groß. Das bekommen wir jedoch relativ einfach reduziert.

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

Um nicht genutzte Tailwind-CSS-Klassen aus deinem Bundle zu entfernen, nutzen wir PurgeCSS in Verbindung mit PostCSS. Dazu füge zuerst das notwendige Package dem Projekt hinzu:

npm install purgecss  @fullhuman/postcss-purgecss

Ist die Installation abgeschlossen, müssen wir in der PostCSS Config folgende Änderung vornehmen:

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'],
        })
      : '',
  ],
}

Wenn wir nun npm run build erneut starten, sollten wir bereits drastische Verbesserungen bei der CSS-Datei erkennen.

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 damit lässt sich starten!

Links:

Setup eines VueJS Projektes mit der Vue CLI

Um ein neues VueJS Projekt zu starten gibt es verschiedene Wege. Der einfachste und angenehmste Weg ist das Setup mithilfe der Vue CLI. Um die CLI nutzen zu können, müssen zuerst die notwendigen NPM Module global installiert werden. Dazu kann folgender Command im Terminal ausgeführt werden:

npm install -g @vue/cli

#oder 

yarn global add @vue/cli 

Läuft die Installation erfolgreich durch, steht danach ein neuer Command im Terminal zur Verfügung. Mit vue -v lässt sich beispielsweise prüfen, welchen Version der Vue CLI nun installiert ist.

Das Projekt Setup über die CLI

Um ein Projektsetup zu starten kann man nun mithilfe von vue create + den gewünschten Projektname den Setup-Prozess über das Terminal starten.

vue create vue-setup

Nach dem Command startet ein kleiner Wizard, der durch das Setup führt. Zunächst wird man gefragt, ob man die Konfiguration manuell durchführen oder das Standard-Setup das nur Babel und ESLint beinhaltet, nutzen möchte. Wir wählen zunächst manuell mit den Pfeiltasten und anschließender Leertaste um zu sehen, welche Möglichkeiten angeboten werden.

Im manuellen Modus erscheinen nun alle Optionen und Packages die genutzt werden können. Beispielsweise kann ich relativ schnell und simpel den Vue Router meinem Projekt dadurch hinzufügen. Aber auch das Setup für Unit- und End-to-End Testing lässt sich anwählen.

Nachdem die gewünschte Auswahl vorgenommen wurde, lässt sich die Installation des Projektes und der nötigen Packages starten.

Mithilfe der CLI UI ein visuelles Projektsetup

Sollte man nicht zu den Terminal-Liebhabern gehören, lässt sich mithilfe eines modernen Interfaces ebenso ein Projektsetup durchführen. Dazu startet man im Terminal zunächst die UI mit:

vue ui

Dadurch öffnet sich auf Port 8000 das Vue UI Interface. Über Project Create startet man den bereits aus der CLI gewohnten Prozess beim Initialisieren eines neuen Projektes.

Zunächst lässt sich über der Speicherort aussuchen und der Projektname angeben. Ebenso kann zwischen npm oder yarn als Standard Package Manager gewählt werden. Eine Festlegung ist aber kein Muss. Sind die Einstellung getroffen, wird auch hier der Wizard Prozess gestartet.

Auch über die UI kann ein manuelles Setup durchgeführt werden, wenn zum Beispiel schon während des Setups der Vue Router oder Vuex hinzugefügt werden sollen.

Nach dem erfolgreichen Setup ist man startklar und kann sein Vue Projekt weiterentwickeln.