Ich verwende aus medizinischen Gründen einen dark mode für die Anzeige der Wikipedia. Dazu habe ich eine eigene CSS-Datei erstellt, die immer dann, wenn ich ein weiteres Element finde, das zu helle Eigenschaften hat und änderbar ist, aktualisiert wird.
Farbzuweisungen Bearbeiten
Einzelnen Elementen (Texte, Hintergrundfarben) können mit Cascading Style Sheets (CSS) verschiedene Farben zugewiesen werden. Diese CSS sind kaskadierend aufgebaut, das heißt, sie werden in der Reihenfolge, wie diese Style Sheets gelesen werden, ergänzt und/oder überschrieben. Die letzte Instanz sind hierbei die im HTML-Text direkt zugewiesenen Farben. Diese können durch den Nutzer nicht mehr überschrieben werden oder nur noch sehr Aufwändig und einzeln mithilfe von Browsereinstellungen. Das ist derzeit in der Wikipedia die häufigste Farbgestaltungsweise.
Oft werden derart Farbeinstellungen nur für den Standard-Farbensatz gemacht, das heißt, eine individuell geänderte Darstellung (zum Beispiel eine dunkle Bildschirmverwaltung, der sogenannte dark mode) werden nicht berücksichtigt.
Teiltransparenz Bearbeiten
Für eine Definition einer Farbe gibt es mehrere Möglichkeiten. Oft wird nur ein Farbcode in Hexadezimalwerten angegeben, wobei #FFFFFF für die Farbe Weiß und #000000 für die Farbe Schwarz steht.
Bei einer weiteren Möglichkeit wird die Farbe als rgba(r,g,b,a) kodiert. Hier werden die Farben r (rot) g (grün) b (blau) durch eine Zahl zwischen 0 und 255 präsentiert. Interessant ist dabei der Wert a, welcher ursprünglich ein Helligkeitswert war, jetzt aber mit einer Zahl zwischen 0 und 1 eine Teiltransparenz der Farbe ermöglicht. Bei Null wird die Farbe gar nicht gezeigt, bei Eins ist sie vollständig deckend.
Für den dark mode kann die Farbe als sehr intensive Farbe gewählt werden und der Wert a dann zwischen 0.1 und 0.5 diese Intensität abschwächen. Bei Darstellungen in einem hellen Modus wird die Farbe dann heller, weil der helle Hintergrund durchscheint, bei Darstellungen in einem dunklen Modus wirkt die Farbe dunkler, weil der dunkle Hintergrund durchscheint. Mit einer solchen Farbzuweisung können auf einfache Weise sowohl helle als auch dunkle Farbzusammenstellungen unterstützt werden.
Kopiervorlagen Bearbeiten
Die Textschnipsel der Kopiervorlage enthalten für den Wert a eine 1, sind also Deckfarben. Um eine gewünschte Abschwächung der Stärke (Teiltransparenz) zu erhalten, muss diese Eins mit zum Beispiel 0.35 ersetzt werden. (Aufpassen: nicht das Komma vor der 1 mit ersetzen, es muss hier also ein … ,0.35)" erscheinen!)
| Farbe | Kopiervorlage | 50% | 40% | 30% | 20% | 10% |
| Rot: | style="background-color:rgba(255,0,0,1)" | 0.5 | 0.4 | 0.3 | 0.2 | 0.1 |
| Grün: | style="background-color:rgba(0,255,0,1)" | 0.5 | 0.4 | 0.3 | 0.2 | 0.1 |
| Blau: | style="background-color:rgba(0,0,255,1)" | 0.5 | 0.4 | 0.3 | 0.2 | 0.1 |
| Gelb: | style="background-color:rgba(255,255,0,1)" | 0.5 | 0.4 | 0.3 | 0.2 | 0.1 |
| Cyan: | style="background-color:rgba(0,255,255,1)" | 0.5 | 0.4 | 0.3 | 0.2 | 0.1 |
| Magenta: | style="background-color:rgba(255,0,255,1)" | 0.5 | 0.4 | 0.3 | 0.2 | 0.1 |
| Pink: | style="background-color:rgba(255,192,203,1)" | 0.5 | 0.4 | 0.3 | 0.2 | 0.1 |
| HotPink: | style="background-color:rgba(255,105,180,1)" | 0.5 | 0.4 | 0.3 | 0.2 | 0.1 |
| DeepPink: | style="background-color:rgba(255,20,147,1)" | 0.5 | 0.4 | 0.3 | 0.2 | 0.1 |
| LightSalmon: | style="background-color:rgba(255,160,122,1)" | 0.5 | 0.4 | 0.3 | 0.2 | 0.1 |
| Salmon: | style="background-color:rgba(250,128,114,1)" | 0.5 | 0.4 | 0.3 | 0.2 | 0.1 |
| Crimson: | style="background-color:rgba(220,20,60,1)" | 0.5 | 0.4 | 0.3 | 0.2 | 0.1 |
| DarkRed: | style="background-color:rgba(139,0,0,1)" | 0.5 | 0.4 | 0.3 | 0.2 | 0.1 |
| OrangeRed: | style="background-color:rgba(255,69,0,1)" | 0.5 | 0.4 | 0.3 | 0.2 | 0.1 |
| Tomato: | style="background-color:rgba(255,99,71,1)" | 0.5 | 0.4 | 0.3 | 0.2 | 0.1 |
| Coral: | style="background-color:rgba(255,127,80,1)" | 0.5 | 0.4 | 0.3 | 0.2 | 0.1 |
| DarkOrange: | style="background-color:rgba(255,140,0,1)" | 0.5 | 0.4 | 0.3 | 0.2 | 0.1 |
| Orange: | style="background-color:rgba(255,165,0,1)" | 0.5 | 0.4 | 0.3 | 0.2 | 0.1 |
| LightGoldenrodYellow: | style="background-color:rgba(250,250,210,1)" | 0.5 | 0.4 | 0.3 | 0.2 | 0.1 |
| Moccasin: | style="background-color:rgba(255,228,181,1)" | 0.5 | 0.4 | 0.3 | 0.2 | 0.1 |
| PeachPuff: | style="background-color:rgba(255,218,185,1)" | 0.5 | 0.4 | 0.3 | 0.2 | 0.1 |
| Khaki: | style="background-color:rgba(240,230,140,1)" | 0.5 | 0.4 | 0.3 | 0.2 | 0.1 |
| Gold: | style="background-color:rgba(255,215,0,1)" | 0.5 | 0.4 | 0.3 | 0.2 | 0.1 |
| Bisque: | style="background-color:rgba(255,228,196,1)" | 0.5 | 0.4 | 0.3 | 0.2 | 0.1 |
| MistyRose: | style="background-color:rgba(255,228,225,1)" | 0.5 | 0.4 | 0.3 | 0.2 | 0.1 |
| Seashell: | style="background-color:rgba(255,245,238,1)" | 0.5 | 0.4 | 0.3 | 0.2 | 0.1 |
| SandyBrown: | style="background-color:rgba(244,164,96,1)" | 0.5 | 0.4 | 0.3 | 0.2 | 0.1 |
| Chocolate: | style="background-color:rgba(210,105,30,1)" | 0.5 | 0.4 | 0.3 | 0.2 | 0.1 |
| DarkOliveGreen: | style="background-color:rgba(85,107,47,1)" | 0.5 | 0.4 | 0.3 | 0.2 | 0.1 |
| Olive: | style="background-color:rgba(80,80,0,1)" | 0.5 | 0.4 | 0.3 | 0.2 | 0.1 |
| ForestGreen: | style="background-color:rgba(34,139,34,1)" | 0.5 | 0.4 | 0.3 | 0.2 | 0.1 |
| DarkGreen: | style="background-color:rgba(0,100,0,1)" | 0.5 | 0.4 | 0.3 | 0.2 | 0.1 |
| GreenYellow: | style="background-color:rgba(173,255,47,1)" | 0.5 | 0.4 | 0.3 | 0.2 | 0.1 |
| Aquamarine: | style="background-color:rgba(127,255,212,1)" | 0.5 | 0.4 | 0.3 | 0.2 | 0.1 |
| DarkCyan: | style="background-color:rgba(0,139,139,1)" | 0.5 | 0.4 | 0.3 | 0.2 | 0.1 |
| SkyBlue: | style="background-color:rgba(135,206,235,1)" | 0.5 | 0.4 | 0.3 | 0.2 | 0.1 |
| MediumBlue: | style="background-color:rgba(0,0,205,1)" | 0.5 | 0.4 | 0.3 | 0.2 | 0.1 |
| DarkBlue: | style="background-color:rgba(0,0,139,1)" | 0.5 | 0.4 | 0.3 | 0.2 | 0.1 |
| MidnightBlue: | style="background-color:rgba(25,25,112,1)" | 0.5 | 0.4 | 0.3 | 0.2 | 0.1 |
| Indigo: | style="background-color:rgba(75,0,130,1)" | 0.5 | 0.4 | 0.3 | 0.2 | 0.1 |
| BlueViolet: | style="background-color:rgba(138,43,226,1)" | 0.5 | 0.4 | 0.3 | 0.2 | 0.1 |
| Violet: | style="background-color:rgba(238,130,238,1)" | 0.5 | 0.4 | 0.3 | 0.2 | 0.1 |
| lightGray: | style="background-color:rgba(211,211,211,1)" | 0.5 | 0.4 | 0.3 | 0.2 | 0.1 |
| Silver: | style="background-color:rgba(192,192,192,1)" | 0.5 | 0.4 | 0.3 | 0.2 | 0.1 |
| DarkGray: | style="background-color:rgba(169,169,169,1)" | 0.5 | 0.4 | 0.3 | 0.2 | 0.1 |
| Gray: | style="background-color:rgba(128,128,128,1)" | 0.5 | 0.4 | 0.3 | 0.2 | 0.1 |
| SlateGray: | style="background-color:rgba(112,128,144,1)" | 0.5 | 0.4 | 0.3 | 0.2 | 0.1 |
| DarkSlateGray: | style="background-color:rgba(47,79,79,1)" | 0.5 | 0.4 | 0.3 | 0.2 | 0.1 |
| oft verwendete unbenannte Farben: | ||||||
| noname1: | style="background-color:rgba(102,123,226,1)" | 0.5 | 0.4 | 0.3 | 0.2 | 0.1 |
| noname2: | style="background-color:rgba(241,222,95,1)" | 0.5 | 0.4 | 0.3 | 0.2 | 0.1 |