Seit geraumer Zeit habe ich meine Betriebssysteme alle in den Dunkelmodus geschaltet und zum Glück gehen mehr und mehr Webseiten dazu über, diese Entscheidung zu respektieren und bieten von sich aus einen Dark Mode an. So zuletzt geschehen bei tagesschau, Stuttgarter Nachrichten und Wikipedia, um nur einige Beispiele aus meiner Browserhistorie zu nennen.

Allerdings gibt es immer noch Sites, die das eben nicht machen - was ich durchaus respektiere, denn ich weiß sehr gut, was für ein Aufwand das sein kann - aber leider blenden mich solche Seiten inzwischen richtiggehend.

Deshalb habe ich mir erlaubt, ein kleines Bookmarklet zu schreiben vibecoden^*, das mir per Knopfdruck die gerade angezeigte Webseite einfach invertiert. Bilder und eingebettete Videos werden dabei ausgenommen, weil das sonst ja völlig seltsam aussieht.

Das wird zwar kein perfekter Dark Mode, denn manchmal stechen Bilder mit weißem Hintergrund noch ein bisschen unangenehm hervor, aber für einen ersten Wurf ist das für meine Zwecke schon okay.

So sieht das dann aus und ich hoffe sehr, Konstantin, Jan, Andreas und Ronny sind nicht allzu erbost darüber, hier als Beispiel herhalten zu dürfen

Sogar das WordPress-Backend wird damit etwas erträglicher (aber dieses Plugin ist natürlich besser, weil es persistent ist auch wenn mir speziell die Farben des Editors arg gegen den Strich gehen):

^*Ich benutze den Begriff hier etwas anders als das in Wikipedia definiert ist, denn ich bin der Meinung dass es für diese Art des Codings sehr wohl möglichst viel Erfahrung im Coding der jeweiligen Sprache benötigt, ansonsten entsteht extrem uneleganter und dysfunktionaler Code.

Und das geht so:

1. Rechtsklick in die Bookmarkleiste da oben (wird nicht angezeigt? Strg-Shift-B).
2. Neuen Bookmark hinzufügen.
3. Als Name sowas wie "--invert --" oder was euch eben taugt.
4. Als URL diesen Code eingeben:

   javascript:(function(){
   var html = document.documentElement;
   var inverted = html.style.filter === 'invert(1)';
   html.style.filter = inverted ? 'invert(0)' : 'invert(1)';
   document.querySelectorAll('img, video, iframe').forEach(el => {
   el.style.filter = inverted ? 'invert(0)' : 'invert(1)';
   });
   })();

5. Speichern.
6. Fertig.

Jetzt könnt ihr mit einem Klick auf diesen Link beliebige Webseiten farblich invertieren. Bäm.

| Abgelegt unter 1337, Coding
The views expressed by the author are personal.