To have a dark mode is a more and more common thing. But it can be pretty tricky.

Lea Verou wrote an awesome article how you can handle this task with CSS and custom properties in a pretty nice way:

Dark mode in 5 minutes, with inverted lightness variables – Lea Verou

I already followed that guide for my latest web project.

Auf der Website bekommst du auch einen guten Eindruck, was sich geändert hat. Unter anderem neue Formen und neue Animationen.

Was ich am spannendsten finde: dynamische Farben.

Google hat in Android 12 ein Algorithmus integriert, der Farbtöne aus dem Wallpaper der Nutzer:innen extrahiert, die vom UI verwendet werden können. So bekommen die Apps eine persönlichere Note.

Ich habe kein Android-Gerät, deswegen konnte ich das Feature noch nicht selbst ausprobieren.

Umsetzung für Webseiten?

Bisher ist Material You hauptsächlich für Android vorgesehen, es wird aber eine Frage der Zeit sein, dass auch an Web gedacht wird. Webseiten haben keine direkte Möglichkeit, den Wallpaper vom Betriebssystem abzugreifen.

Möglicherweise wird Google für Chrome die Theme-Farben als CSS-Variablen liefern, sodass Webentwickler:innen diese einfach nutzen können. Andere Chromium-Browser (wie Edge) könnten diese API dann ebenfalls erhalten.

Übergangslösung

Ich habe ein wenig experimentiert und Farben aus dem Standard-Wallpaper aus macOS Monterey mit Hilfe von Adobe Color extrahiert.

Den Dark Mode habe ich ebenfalls berücksichtigt:

In nächsten Schritten könnte man mit JavaScript herausfinden, welches Betriebssystem verwendet wird und jeweils Farben der Standard-Wallpaper anwenden.

Oder man erlaubt, Benutzer:innen ein Bild zum Analysieren hochzuladen/auszuwählen. Das halte ich allerdings für einen nicht sehr eleganten Ansatz.

Before the update:

After the update:

I now use display: grid; to show the latest blog post link next to my introduction card. This way, I waste less space and the user can see more, the links to the featured apps are visible again on the first view. ^^

I also like the new blog post view, I now show the thumbnail image of the post in the background.

Of course the grid view is designed mobile-first. On mobile, the introduction card and the blog post will be just underneath each other.

LESS und Sass sind sogenannte “CSS Pre-Prozessoren”.
Damit ist es möglich, Stylesheets effizienter als je zu vor zu erstellen.
Mehr über die Vorteile von CSS Pre-Prozessoren »

Es ist nun möglich, seine Paletten aus Colorganize.com direkt mit eigenen LESS- und Sass-Code zu verbinden.
Ein @import genügt und du kannst deine Farben aus deiner Palette innerhalb deines Projektes benutzen.
Sobald du etwas an deiner Palette in der Web App änderst, wirkt sich das automatisch auf deinen Code aus.
Wenn du eine z.B. aus LESS-generierte CSS-Datei verwendest, muss diese vorher neu komprimiert werden.

Damit du eine Palette mit LESS oder Sass nutzen willst, muss diese als “public” markiert sein.
Standardmäßig sind aber alle Nutzer-Paletten als “private” markiert. So kannst du das ändern:

1. Klicke oben rechts auf “Edit mode”, um in den Bearbeitungs-Modus zu gelangen.
2. Klicke links im Paletten-Menü auf das jeweilige Stift-Symbol, um die Palette zu bearbeiten.
3. Aktiviere “public”, indem du auf den entsprechenden Button klickst.

Die Variablen-Namen der Farben stehen immer griffbereit. Ein Klick genügt und die gewünschte Farb-Variable kann in deinen LESS-, bzw. Sass-Code eingefügt werden.

Probiere es gleich aus »

Falls du noch nicht registriert bist, ist es übrigens auch möglich sich mit seinen Twitter-Account anzumelden. Mehr dazu hier »

Ich nutze für meine Projekte gerne das Framework Bootstrap.
Allerdings gefallen mir die abgerundeten Elemente nicht besonders.

Fügt man diesen CSS-Code nach dem Einbinden von Bootstrap, werden alle Abrundungen abgeschalten:

.alert,.breadcrumb,.btn,.btn-group-lg>.btn,.btn-group-sm>.btn,.btn-group-vertical>.btn-group:not(:first-child):not(:last-child)>.btn,.btn-group-vertical>.btn:not(:first-child):not(:last-child),.btn-group-xs>.btn,.btn-group>.btn-group:not(:first-child):not(:last-child)>.btn,.btn-group>.btn:not(:first-child):not(:last-child):not(.dropdown-toggle),.btn-lg,.btn-link,.btn-sm,.btn-xs,.container .jumbotron,.dropdown-menu,.form-control,.form-horizontal .form-group-lg .form-control,.form-horizontal .form-group-sm .form-control,.img-rounded,.img-thumbnail,.input-group .form-control:not(:first-child):not(:last-child),.input-group-addon,.input-group-addon.input-lg,.input-group-addon.input-sm,.input-group-addon:not(:first-child):not(:last-child),.input-group-btn:not(:first-child):not(:last-child),.input-group-lg>.form-control,.input-group-lg>.input-group-addon,.input-group-lg>.input-group-btn>.btn,.input-group-sm>.form-control,.input-group-sm>.input-group-addon,.input-group-sm>.input-group-btn>.btn,.input-lg,.input-sm,.label,.modal-content,.nav-pills>li>a,.nav-tabs-justified>li>a,.nav-tabs.nav-justified>li>a,.nav-tabs>li>a,.navbar-toggle,.pager li>a,.pager li>span,.pagination,.panel,.panel-group .panel,.panel>.list-group .list-group-item,.popover,.progress,.thumbnail,.tooltip-inner,.well,.well-lg,.well-sm,code,kbd,pre,pre code{border-radius:0}@media (min-width:768px){.nav-tabs.nav-justified>li>a,.navbar,.navbar-fixed-bottom,.navbar-fixed-top,.navbar-static-top,.list-group-item:first-child,.list-group-item:last-child{border-radius:0}}

Oder ausführlich:

.img-thumbnail,
code,
kbd,
pre,
pre code,
.form-control,
.input-sm,
.form-horizontal .form-group-sm .form-control,
.input-lg,
.form-horizontal .form-group-lg .form-control,
.btn,
.btn-link,
.btn-lg,
.btn-group-lg > .btn,
.btn-sm,
.btn-group-sm > .btn,
.btn-xs,
.btn-group-xs > .btn,
.dropdown-menu,
.btn-group > .btn:not(:first-child):not(:last-child):not(.dropdown-toggle),
.btn-group > .btn-group:not(:first-child):not(:last-child) > .btn,
.btn-group-vertical > .btn:not(:first-child):not(:last-child),
.btn-group-vertical > .btn-group:not(:first-child):not(:last-child) > .btn,
.input-group-lg > .form-control,
.input-group-lg > .input-group-addon,
.input-group-lg > .input-group-btn > .btn,
.input-group-sm > .form-control,
.input-group-sm > .input-group-addon,
.input-group-sm > .input-group-btn > .btn,
.input-group-addon:not(:first-child):not(:last-child),
.input-group-btn:not(:first-child):not(:last-child),
.input-group .form-control:not(:first-child):not(:last-child),
.input-group-addon,
.input-group-addon.input-sm,
.input-group-addon.input-lg,
.nav-tabs > li > a,
.nav-tabs.nav-justified > li > a,
.nav-pills > li > a,
.nav-tabs-justified > li > a,
.navbar-toggle,
.breadcrumb,
.pagination,
.pager li > a,
.pager li > span,
.container .jumbotron,
.thumbnail,
.alert,
.progress,
.panel,
.panel > .list-group .list-group-item,
.panel-group .panel,
.well,
.well-lg,
.well-sm,
.modal-content,
.tooltip-inner,
.popover,
.nav-pills > li > a,
.label,
.img-rounded,
.list-group-item:first-child,
.list-group-item:last-child {
  border-radius: 0;
}

@media (min-width: 768px) {
    .nav-tabs.nav-justified > li > a {
        border-radius: 0 0 0 0;
    }
    
    .navbar-static-top,
    .navbar-fixed-top,
    .navbar-fixed-bottom,
    .navbar {
        border-radius: 0 0 0 0;
    }
}

Update am 09.04.2015: Die Elemente .list-group-item:first-child und .list-group-item:last-child wurden hinzugefügt.

Besonders in Zeiten des PRISM-Skandals, will man seine Dateien wohl nur noch ungern Internet-Riesen wie Google oder Microsoft anvertrauen.

Hat man einen eigenen Server, lagert man seine Dateien am liebsten dort.

Orange Files bietet die Möglichkeit, seine Dateien übersichtlich aufzulisten und diese zu teilen.

Die Dateien lädt der Nutzer selbst auf seinen eigenen FTP-Server hoch. Orange Files dient dann als Viewer. Damit aber nicht jeder Zugriff zu deinen Dateien bekommt, kannst du den Client durch Keys schützen.

Weitere Infos und den Link zum Download findest du hier:
orange-files.tk

Es ist mir wichtig hervorzuheben, dass Orange Files nicht dazu dient, seine Dateien zu sichern.
Die Methode der Keys dient nur wenig Schutz.

Orange Files ist lediglich dazu da, seine Dateien aufzulisten um es für Andere übersichtlicher zu halten.

Der CSS-Standard orange css wurde nun aktualisiert.

Es gibt zwei neue Definitionen und zwei weitere Verbesserungen.

Mit den Klassen “info-box” und “error-box” können nun Benachrichtigungs-Boxen erstellt werden.
Das eignet sich z.B. Formularen sehr gut. Wurde das Formular erfolgreich abgeschickt, erscheint eine Info-Box, gab es ein Problem erscheint eine Fehler-Box.

Außerdem wurden die Tags <code> und <li> neu gestylt.

Wer orange css per Einbindung nutzt, braucht nichts zu ändern. Wer den Stylesheet runtergeladen hat, sollte sich die neueste Version von der Website runterladen: orange-css.tk

Das hauseigene CSS-Framework orange css wird jetzt für das Kontaktformular und dem Impressum verwendet: lgkonline.de/about

orange css kann von jeden kostenlos genutzt werden. Du kannst entweder den Stylesheet direkt vom Server einbinden. Damit nutzt du immer die aktuellste Version.

Oder du downloadest die aktuellste Version und bindest diese ein. Das garantiert die Verfügbarkeit.

Hier geht’s zur Seite: orange-css.tk
Eine Dokumentation gibt es auch.

Eine Entwicklungsumgebung beschäftigt sich mit der Erstellung von HTML, CSS usw. Also zur Entwicklung einfacher Webseiten.

Anders als Dreamweaver, ist Edge Code nicht so mit Funktionen überladen, sondern liefert nur das nötigste.

Edge Code befindet sich zwar noch in der Entwicklungs-Phase, bietet aber bereits einige nützliche Features.

Mit Live Preview zum Beispiel, braucht man lediglich Strg + Alt + P drücken, und die Seite, an der man gerade arbeitet, wird direkt im Browser angezeigt.

Mit Strg + E lässt sich ein markiertes HTML-Element direkt stylen, ohne dass man extra zur CSS-Datei wechseln muss.

Momentan gibt es Edge Code nur als Preview und gratis zum Downloaden. Hoffentlich bleibt auch die finale Version kostenlos. Das Programm hat eine aufgeräumte Oberfläche und macht die Web-Entwicklung einfach smarter.

Edge Code und weitere interessante Teile der Adobe Edge-Familie findest du hier: http://html.adobe.com/edge/