todamax.net v2.137: Welcome to the dark side (update: hallo?)
Donnerstag, 16.12.2021, 17:32 > daMaxGestern und heute habe ich mich (mal wieder) etwas intensiver mit CSS beschäftigt. Das so gewonnene Wissen kommt natürlich sofort dem Blog zugute und so gibt es todamax v2 in der einhundertsiebenunddreißigsten Iteration jetzt auch in dunkel.
Hell:
Dunkel:
Je nachdem, wie ihr euer Gerät eingestellt habt, wird das entsprechende Theme automatisch für euch eingestellt. Und wenn ich nächste Woche ein bisschen Zeit finde, baue ich vielleicht noch einen Schalter ein, mit dem man die Themes manuell wechseln kann.
Bekannte Probleme bisher:
- Die Smilies/Emoticons sehen im dunklen Modus noch nicht so toll aus, weil sie eine weiße Kantenglättung beinhalten. Das zu fixen wird ein Äkt
- Das Radio-Widget muss auch noch lernen, sich dunkel zu machen
Was meint ihr? Taugt das? Oder nicht? Habt ihr noch irgendwelche Bugs entdeckt?
Update (22.12.2021): Hm... irgendwie hatte ich mir ja ein bisschen mehr Feedback erhofft... Seid ihr noch da?
Artikel als RSS
und natürlich habe ich mich ca…
Hihi, da will ich grad schreiben, wie gut ich das finde und dabei anmerken daß du vielleicht das hintergrund-Orange im Darkmode noch etwas zähmen könntest, weil bei breitem Browserfenster das doch noch etwas blendet, aber da sehe ich: du hast die Textfarbe im Kommentarbereich vergessen... Also kann ich das gar nicht schreiben... ;-P
Noch nicht hübsch, aber vielleicht eine Übergangslösung.
.wp-smiley {
filter: invert() brightness(100%) grayscale(100%);
}
}
Eventuell auch mit einem
sepia(200%) saturate(200%)filter zusätzlich, dann werden sie wieder etwas orangener.Brightness kann man auch noch bisschenmit experimentieren, fand es bei 100% aber nciht ganz schlecht..
@Eloi: oh shit. Danke! Die Schriftfarbe in den Eingabefeldern habe ich direkt gefixt, um das Orange kümmere ich mich ggf. später, denn da steckt halt auch Grafikkrams mit drin.
@meh: nee, invertiert gefallen die mir nicht. Ich finde den Post-It-Look schon gut, nur die geglätteten Kanten muss ich mal besser hinbekommen. Aber das ist halt ein Mordsgefrickel. Deine Tipps sind trotzdem interessant, damit spiele ich bei Gelegenheit mal rum.
@Eloi: hm.... eigentlich liebe ich mein patentiertes #e89900-Orange ja schon sehr
, aber ich kann deinen Punkt mit dem breiten Monitor und der Blendigkeit schon nachvollziehen.
Was hältste denn hiervon?
manueller schalter would rule! und ohne kantenglättung gefallen mir die emos sogar 1/2wegs und definitiv bessa! bischen punklaziness inna gestaltung iss schon viel zu lange her. so!
Sieht nicht schlecht aus, ist abends auf‘m Tablet auch angenehmer.
Wenn Du noch ein bisschen tunen willst, kannst Du ja noch an der Barrierefreiheit basteln. Habe das mal gecheckt, Es fehlt vor allem an Kontrast und ein paar Images sind nicht betextet.
@Woogie: Bilder betexten? Neelassma, da hab ich echt keine Zeit für. Es fehlt an Kontrast? Wie meinen? Text zu Hintergrund oder was? Wie misst du denn das?
Ich muss gestehen, mich hat schon wieder ein bisschen die Lust verlassen. Ich wollte das alles noch viel "cleverer" machen inkl. manuellem Umschalten, aber nach diversen Stunden Fummelei bin ich immer noch nicht fertig damit. Ich finde Webdev immer noch nicht so richtig spannend
@da]v[ax: Den Test habe ich mit FF gemacht. Der hat seit einiger Zeit einen Barrierefreiheits-Modul eingebaut, was für eine erste Überprüfung sehr brauchbar ist.
Gemeint war der Kontrast der Links (Orange auf Weiss). Bei der Beschriftung kann man sich gut damit behelfen Bilder den Names des Bildes unterzuschieben, ebenso wie bei Links. Das lässt sich durchaus automatisieren.
Aber ich kann Dich gut verstehen, Barrierefreiheit ist manchmal hartes Brot. Und auch ein "Kontrast"-Schalter ist nicht mal eben gebaut. Wirklich sinnvoll und in vertretbarem Aufwand ist/geht das meistens nur, wenn man eine Seite neu aufbaut.
@Woogie: Ach so, du redest vom hellen Theme. Tja also äh... ich habe die Links eh schon mal dunkler gemacht, weil das "originale" Orange (#e89900) tatsächlich nicht gut zu lesen war. Natürlich kann ich nicht mit den Augen eines Gehandicappten sehen, aber ich fand den Kontrast bisher eigentlich immer ganz gut so.
Nee, das geht sowieso gar nicht. Den Dark-Theme-Unschalter bekomme ich schon noch hin, das bedeutet allerdings noch einen Cookie mehr, denn diese Einstellung muss ich mir in der Session merken, sonst wird sie bei jeden Neuladen der Site (z.B. beim Klick auf einen Artikel) wieder von der
prefers-color-schemeEinstellung überschrieben und dann bringt der Schalter nix.Da gibts wahrscheinlich sogar ein Plugin für. Ich denk mal drüber nach.
@daMax: Ich bekomme auf meinem Linux-PC oder dem FF keine Einstellung hin, damit das dunkle Theme erscheint
Auf'm ipad ist das kein Problem.
@Woogie: im Moment wird die Einstellung deines Betriebssystems übernommen. Android und Windows haben einen dark mode, ich weiß gar nicht, ob macOS und Linux sowas auch haben. Ich denke ja, aber denken ist halt nicht wissen.
Deshalb brauche ich ja den manuellen Schalter noch
@daMax: Na das is doch viel angenehmer! Und immernoch hübsch orange
@Woogie: Ich weiß ja nicht, was für eine Desktopumgebung du verwendest, bei den "großen" (Gnome, KDE) gibt es bestimmt irgendwo in den Einstellungen einen Schalter für "Dark theme".
Was aber eig. klappen sollte (zumindest bei mir im FF): In deiner ~/.config/gtk-3.0/settings.ini die Zeile
gtk-application-prefer-dark-theme=true
ändern/einfügen.
Chromium und Co bekomme ich aber biser auch nicht dazu bewegt, daß zu respektieren.
Sorry für den Spam, aber einen muss ich noch: Die Hover-popups für Zitate bei den Antworten auf einen vorherigen Post (div.baloonquote) haben auch noch einen weißen Hintergrund...
@Eloi (13): oh danke. Das hab ich noch nicht gesehen *notier*
Der manuelle Schalter kommt noch, das Radiowidget lernt hoffentlich auch noch den dunklen Modus und auch der Menu Button aufm Handy kriegt noch dunkle Icons!
@alle: Dauert noch ein bisschen, gut Ding will bekanntlich Weile haben aber ich habe immer nur begrenzt Laune, an diesem Kram rumzufummeln. Ich kann schon mal verraten, dass das Orange insgesamt dunkler wird und zwar so:
