Hilfe bei Erstellung eines Toggles

[Gerhard]

Hallo,

Wer kann mir bei einer Toggle Erstellung helfen? ( bin ein kompletter Newbie in diesen Dingen)

Würde gerne einen Toggle mit Text haben wo man zwischen einen hellen und dunklen Hintergrund wählen kann.

Hier der HTML Code:

Heller Background:

<!-- TradingView Widget BEGIN -->
<div class="tradingview-widget-container">
  <div class="tradingview-widget-container__widget"></div>
  <div class="tradingview-widget-copyright"><a href="https://de.tradingview.com/symbols/EURUSD/?exchange=FX" rel="noopener" target="_blank"><span class="blue-text">EURUSD Kurse</span></a> von TradingView</div>
  <script type="text/javascript" src="https://s3.tradingview.com/external-embedding/embed-widget-single-quote.js" async>
  {
  "symbol": "FX:EURUSD",
  "width": 350,
  "colorTheme": "light",
  "isTransparent": false,
  "locale": "de_DE"
}
  </script>
</div>
<!-- TradingView Widget END -->

Dunkler Background:

<!-- TradingView Widget BEGIN -->
<div class="tradingview-widget-container">
  <div class="tradingview-widget-container__widget"></div>
  <div class="tradingview-widget-copyright"><a href="https://de.tradingview.com/symbols/EURUSD/?exchange=FX" rel="noopener" target="_blank"><span class="blue-text">EURUSD Kurse</span></a> von TradingView</div>
  <script type="text/javascript" src="https://s3.tradingview.com/external-embedding/embed-widget-single-quote.js" async>
  {
  "symbol": "FX:EURUSD",
  "width": 350,
  "colorTheme": "dark",
  "isTransparent": false,
  "locale": "de_DE"
}
  </script>
</div>
<!-- TradingView Widget END -->

Danke im Vorfeld

Gerhard

[Matthias Scharwies]

Herzlich willkommen bei SELFHTML!

Hallo,

Wer kann mir bei einer Toggle Erstellung helfen? ( bin ein kompletter Newbie in diesen Dingen)

Würde gerne einen Toggle mit Text haben wo man zwischen einen hellen und dunklen Hintergrund wählen kann.

Hier der HTML Code:

Dein Ansatz ist falsch. Das HTML-Markup bleibt gleich - es wird nur eine Klasse getoggelt.

Hier auf englisch: w3schools.com/howto_js_toggle_dark_mode

Und auf Deutsch: JavaScript/DOM/Element/classList

Herzliche Grüße

Matthias Scharwies

[Matthias Scharwies]

Servus!

Herzlich willkommen bei SELFHTML!

Hallo,

Wer kann mir bei einer Toggle Erstellung helfen? ( bin ein kompletter Newbie in diesen Dingen)

Würde gerne einen Toggle mit Text haben wo man zwischen einen hellen und dunklen Hintergrund wählen kann.

Hier der HTML Code:

Dein Ansatz ist falsch. Das HTML-Markup bleibt gleich - es wird nur eine Klasse getoggelt.

Noch besser wäre es, das dem Nutzer zu überlassen (der es schon im OS eingestellt hat) und im CSS folgende Einstellung zu setzen:

@media (prefers-color-scheme: dark) {
  /* Dark theme styles go here */
}


@media (prefers-color-scheme: light) {
  /* Light theme styles go here */
}

Das könnte man mit JS dann auch noch abfragen / bzw. mit einem Toggle-Button aktivieren.

Siehe: css-tricks: A Complete Guide to Dark Mode on the Web

[[EDIT]] Ich hab's im SELF-Wiki mal eingefügt:

• CSS/Media_Queries/Medienmerkmale#prefers-color-scheme

Eigentlich sollte es dazu auch ein Live-Beispiel und eine ausführlichere Erklärung geben. Direkt im Absatz oder als eigenes Kapitel?

[[/EDIT]]

Herzliche Grüße

Matthias Scharwies

[Gerhard]

Hallo Matthias,

Vielen Dank für deine Hilfe!!

Ich werde mir die Links die du gepostet hast, mir mal in Ruhe anschauen.

Auf jeden Fall hast du mir weitergeholfen !!

schöne Woche noch

Gerhard

[Matthias Scharwies]

Hallo Gerhard,

Ich finde das Thema interessant. Es taucht im Forum immer wieder mal auf und deshalb haben wir 2019 einen kurzen Glossar-Artikel: Dark_Mode angelegt.

In den Weblinks unten findest Du die Diskussionen von 2018 und 2019 verlinkt.

Mittlerweile gibt es eine gute Browserunterstützung für prefers-color-scheme und trotzdem ...

@Rolf B schrieb mir in einer PN dazu:

Für ein Beispiel muss man sich etwas mehr Gedanken über die drei Varianten "light", "dark" und "Betriebssystem-Default" machen. Das Thema "Dark Mode" ist ja auch bei weitem nicht so einfach, wie es auf css-tricks suggeriert wird.

Das Farbschema einer Webseite hat zumeist mehr als 2 Farben, eher 10. Man muss jede Farbangabe über custom property machen.

Und man muss schauen, was der IE macht - der kennt nämlich keine custom properties und würde damit jede Farbangabe ignorieren.

Der Ansatz von Lea Verou, nicht die Farben, sondern nur die Helligkeit mit custom properties zu veränden, ist charmant, wirkt aber auch nur auf den neuesten Macs:

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

Da frag ich mich, wieso die Fotos HSl vs. LCH auch auf normalen Bildschirmen den Farbraum so unterschiedlich zeigen?

Herzliche Grüße

Matthias Scharwies

[Matthias Scharwies]

Hallo Gerhard, hallo ihr anderen,

ich habe mal versucht, alles in einem Tutorial zusammenzufassen:

Benutzer:MScharwies/Dark_Mode

Da arbeite ich noch weiter. Jetzt habe ich erst einmal versucht 3 gute Themes zu realisieren.

1. Für IE9-11 und ältere Versionen der Evergreen-Browser (laut caniuse fast mehr als der IE) Farbangaben mit festen Hex-Werten
2. ein Helligkeits-Modus, bei dem die HEX-Werte als custom properties notiert sind.
3. eine class .dark, die diese custom properties überschreibt.

Ein erster Design-Entwurf: Design01 zum Toggeln, aber auch Auslesen mit prefers-color-scheme

Wie würdet ihr folgende Knackpunkte lösen?

1. Heller Modus: Textfarbe footer

2. #news-Box, welche Hintergrundfarbe im dunklen Modus oder...

3. Dark mode: Schriftfarbe #news für

   • h3
   • li
   • span

4. Hintergrund der SVG-Grafiken: so lassen oder als inline-SVG auch mit custom-properties füllen? (Dann wird evtl. das Markup nicht mehr anfängergerecht.)

5. Soll ich für die Navi nur feste HEX-Werte nehmen, oder zusätzlich auch custom properties notieren?

Herzliche Grüße

Matthias Scharwies

[Rolf B]

Hallo Matthias,

grundsätzlich finde ich es toll, dass Du das mal eben aus dem Boden gestampft hast. Am Text kann man sicher noch einiges erweitern - aber da will ich mich jetzt nicht reinmengen, sonst arbeiten wir noch gegeneinander.

Eins nur: Du schreibst, dass ein Dark-Mode Control nichts auf der Page verloren hat und bringst dann ein Control. Man kann das begründen (es ist für OS die das nicht anbieten und für Anwender, die die OS-Einstellung überschreiben wollen), sollte es aber auch tun.

Zur Demoseite:

Die Platzierung des Dark Mode Control mitten auf der Seite finde ich unglücklich. Ich habe eine Weile gesucht. Ich habe zuerst am Rand der Seite gesucht. Vorzugsweise oben rechts.

Und ich bin im Light- und Dark-Mode mit den Kontrasten unzufrieden. Der Lightmode ist das fertige Design - da mag das meine grundsätzliche Abneigung gegen Ammerländer Farbwahl sein (d.h. knapp an Ostfriesland vorbei, deren Banner ja bekanntlich der weiße Adler auf weißem Grund ist). Im Darkmode ist der Kontrast fast überall gut, auch wenn Kontrast-Tools meinen, dass das Orange auf dem Body zu schwach kontrastiert.

Leider ist der Kontrast-Inspektor von Chrome unzuverlässig und zeigt nur nach Lust und Laune was an, aber soviel sehe ich:

• die News-Boxen müssten im Darkmode dunkler werden und nicht ihre Farbe behalten. Weiß auf #ccc ist eindeutig zu wenig Kontrast.
• der Body muss ebenfalls dunkler werden, damit das Orange des Footer-Texts stark genug herauskommt. Du hellst ihn sogar noch explizit auf , warum?
• Es gibt einige Stellen, im light-Design, wo grau auf weiß steht. Vielleicht stylish, aber zu kontrastschwach. Dass ein Designer automatisch ein guter Ergonom ist, scheint durch dieses Design mal wieder widerlegt. Es sei denn, ich bin zu streng, das kann Marc vermutlich besser beurteilen als ich.

Rolf

[Matthias Scharwies]

Servus!

Zur Demoseite:

Die Platzierung des Dark Mode Control mitten auf der Seite finde ich unglücklich. Ich habe eine Weile gesucht. Ich habe zuerst am Rand der Seite gesucht. Vorzugsweise oben rechts.

Das war meine Frage 6 nach der Positionierung des Widgets, wollte ich nach dem Absenden eigentlich editieren und musste dann weg.

Ich habe jetzt ein Settings-Icon, das ich oben rechts positionieren werde und das dann auf den entsprechenden Abschnitt verlinken soll.

Und ich bin im Light- und Dark-Mode mit den Kontrasten unzufrieden. Der Lightmode ist das fertige Design - da mag das meine grundsätzliche Abneigung gegen Ammerländer Farbwahl sein (d.h. knapp an Ostfriesland vorbei, deren Banner ja bekanntlich der weiße Adler auf weißem Grund ist).

Das Design beruht auf diesem Entwurf von 2013:

Divsuppe, nicht responsiv, floats und Text als Bild, viele Rastergrafiken.

Ich habe das 2014 so realisiert:

HTML5, responsiv und Flexbox, SVG

• Es gibt einige Stellen, im light-Design, wo grau auf weiß steht. Vielleicht stylish, aber zu kontrastschwach. Dass ein Designer automatisch ein guter Ergonom ist, scheint durch dieses Design mal wieder widerlegt. Es sei denn, ich bin zu streng, das kann Marc vermutlich besser beurteilen als ich.

Der Designer hat 50€ dafür gekriegt.

Bevor ich jetzt alles im Dark mode mache, muss ich / sollten wir erst mal schauen, was man am Light Mode verbessern kann.

Den Schatten der Nav-Bar werde ich auch (in geringerem Umfang) auf die #news-Boxen und die Icons legen, um räumliche Tiefe zu erzielen.

1. Heller Modus: Textfarbe footer

Der Footer muss verbessert werden, bloß wie? Entweder

a. ohne Extra-Styling oder

b. als dunkelroter Balken am unteren Seitenrand mit weißer Schrift.

2. #news-Box, welche Hintergrundfarbe im dunklen Modus oder...

• die News-Boxen müssten im Darkmode dunkler werden und nicht ihre Farbe behalten. Weiß auf #ccc ist eindeutig zu wenig Kontrast.

Mit der Hintergundfarbe #ccc im hellen Modus und dem Schatten an zwei Seiten sieht es gut aus. Ich finde es interessant, dass man im Dark Mode meint, dass sich das #ccc geändert hätte.

Ja, die Textfarbe muss entweder #333 oder darkred sein. Für h3 will ich aber kein darkred nehmen, da das ja die Linkfarbe ist. Mal überlegen.

Im Darkmode ist der Kontrast fast überall gut, auch wenn Kontrast-Tools meinen, dass das Orange auf dem Body zu schwach kontrastiert.

Ja #333 und orange bringen 1:6.41s anstelle 1:2.93

• der Body muss ebenfalls dunkler werden, damit das Orange des Footer-Texts stark genug herauskommt. Du hellst ihn sogar noch explizit auf , warum?

Siehe 1. ich weiß noch nicht, was ich mit dem footer machen soll

Das Tutorial passe ich an, wenn das Beispiel vorzeigbar ist.

Weitere Aufgaben:

• Bilder, deren Brillianz im Dark Mode angepasst wird
• evtl. andere Fonts im Dunklen Modus, wobei ich aber keine Lust auf einen Google-Font habe.

Herzliche Grüße

Matthias Scharwies

[Matthias Scharwies]

Servus!

Der 2. Versuch ist online

Wie würdet ihr folgende Knackpunkte lösen?

1. Footer ist in beiden Modi jetzt dunkelrot. Gut so?

2. Dark mode: Schriftfarbe .news für

   • h3
   • li
   • span

jetzt dunkelgrau und -rot, .news ul span hat einen orangen Hintergrund. Gut so?

4. Hintergrund der SVG-Grafiken: so lassen oder als inline-SVG auch mit custom-properties füllen? (Dann wird evtl. das Markup nicht mehr anfängergerecht.)

Dies betrifft vor allem die .more-"Weiter lesen"-Icons. Da muss ich mir noch was überlegen!?

5. Soll ich für die Navi nur feste HEX-Werte nehmen, oder zusätzlich auch custom properties notieren?

6. Position Widget, das Rad oben rechts gefällt mir; optimalerweise würde beim Klick drauf ne Dialog-Box aufgehen, oder? Zu schwierig für Anfänger-Tutorial?

Herzliche Grüße

Matthias Scharwies

[Auge]

Hallo

Der 2. Versuch ist online

Wie würdet ihr folgende Knackpunkte lösen?

1. Footer ist in beiden Modi jetzt dunkelrot. Gut so?

Auf dem dunkelgrauen Hintergrund des Dark Mode geht der dunkelrote Footer IMHO unter. Vielleicht sollte der Footer ein µ heller sein (dann aber auch Navi und rote balten des Logos) oder er sollte, wie die Navi auch, durch einen Schattenwurf vor dem Hintergrund hervorgehoben werden.

3. Dark mode: Schriftfarbe .news für
   • h3
   • li
   • span

Die orangenen Überschriften in den hellgrauen Boxen (.news) sind für mich sehr schlecht erkennbar. Das gilt auch für die Listenbulletdreiecke und – in gewissem Maße – die Konturen der Ions. Interessanterweise gilt das mehr für den Dark Mode als für den Light Mode, wo für den Hintergrund der Boxen, die Dreiecke und die Farben der Icons die selben Farben benutzt werden. Das hellere Drumherum lässt mich die genannten Elemente im Light Mode zumindest besser erkennen.

[edit]
Der Vollständigkeit halber noch eine Ergänzung: Das dunkelrot gesetzte Wort „Recht“ im Slogan im Seitenkopf auf dunklem Hintergrund ist für mich ebenfalls kaum erkennbar. Das ist das selbe Problem wie beim Footer, aber durch die sehr viel kleinere Anzeigefläche des Schriftzugs ist das Problem an dieser Stelle sehr viel gravierender.
[/edit]

Für mich bleibt als definitiv änderungsbedürftig der untergehende Footer und die orangenen Überschriften auf hellem Boxenhintergrund in .news übrig.

Tschö, Auge

[Matthias Scharwies]

Servus!

Hallo

Der 2. Versuch ist online

Wie würdet ihr folgende Knackpunkte lösen?

1. Footer ist in beiden Modi jetzt dunkelrot. Gut so?

Auf dem dunkelgrauen Hintergrund des Dark Mode geht der dunkelrote Footer IMHO unter. Vielleicht sollte der Footer ein µ heller sein (dann aber auch Navi und rote balten des Logos) oder er sollte, wie die Navi auch, durch einen Schattenwurf vor dem Hintergrund hervorgehoben werden.

3. Dark mode: Schriftfarbe .news für
   • h3
   • li
   • span

Die orangenen Überschriften in den hellgrauen Boxen (.news) sind für mich sehr schlecht erkennbar. Das gilt auch für die Listenbulletdreiecke und – in gewissem Maße – die Konturen der Ions. Interessanterweise gilt das mehr für den Dark Mode als für den Light Mode, wo für den Hintergrund der Boxen, die Dreiecke und die Farben der Icons die selben Farben benutzt werden. Das hellere Drumherum lässt mich die genannten Elemente im Light Mode zumindest besser erkennen.

Für mich bleibt als definitiv änderungsbedürftig der untergehende Footer und die orangenen Überschriften auf hellem Boxenhintergrund in .news übrig.

Danke! Ich schau's mir die Tage wieder an, ob ich mit den bis jetzt verwendeten Farben eine andere, bessere Kombination herbringen kann.

Tschö, Auge

Herzliche Grüße

Matthias Scharwies

[Auge]

Hallo

Für mich bleibt als definitiv änderungsbedürftig der untergehende Footer und die orangenen Überschriften auf hellem Boxenhintergrund in .news übrig.

Danke! Ich schau's mir die Tage wieder an, ob ich mit den bis jetzt verwendeten Farben eine andere, bessere Kombination herbringen kann.

Ich habe gerade beim rumspielen noch etwas gefunden, was ich als Bug klassifizieren würde. Im Dark Mode bleibt die Schriftfarbe der Navigationspunkte beim hovern eines Links weiß auf dem dann blassgilbem Hintergrund. Im Light Mode wechselt die Farbe bei :hover von weiß auf dunkelrot.

Tschö, Auge

[Matthias Scharwies]

Servus!

Ich habe gerade beim rumspielen noch etwas gefunden, was ich als Bug klassifizieren würde. Im Dark Mode bleibt die Schriftfarbe der Navigationspunkte beim hovern eines Links weiß auf dem dann blassgilbem Hintergrund. Im Light Mode wechselt die Farbe bei :hover von weiß auf dunkelrot.

Danke! Korrigiere ich!

Herzliche Grüße

Matthias Scharwies

[Auge]

Hallo

Ich habe gerade beim rumspielen noch etwas gefunden, was ich als Bug klassifizieren würde. Im Dark Mode bleibt die Schriftfarbe der Navigationspunkte beim hovern eines Links weiß auf dem dann blassgilbem Hintergrund. Im Light Mode wechselt die Farbe bei :hover von weiß auf dunkelrot.

Danke! Korrigiere ich!

Ich habe mir gerade eben deine bisherigen Korrekturen für den Dark Mode angeschaut. Gefunden habe ich den Schattenwurf des Footers, womit er tatsächlich besser sichtbar ist und die nunmehr dunkelrote Farbe der gehoverten Links der Hauptnavigation.

Was für mich bleibt, sind die schlecht lesbaren Überschriften. Das ist einerseits die orangene Schrift auf hellgrauem Grund in den Boxen mit der Klasse .news und andererseits das in meinem ersten Posting als Nachtrag vermerkte Wort „Recht“ im Slogan „Für alle, die Recht haben“, das mit dunkelroter Schrift auf dunkelgrauem Hintergrund für mich gänzlich absäuft.

Diese unglückliche Farbkombination mit den selben daraus resultierenden Unzulänglichkeiten gibt es übrigens auch im Logo sowie in den Icons für „Über uns“ und „Kosten“. Ob bei „Über uns“ nun ein oder zwei Männekens im Icon zu sehen sind, kann man als unkritisch ansehen (no pun intended), wenn das „€“ in „Kosten“ aber zu einem „=“ wird, passt das irgendwie nicht mehr übereinander.

Vielleicht würde schon ein etwas hellerer Rotton reichen … vielleicht aber auch nur für mich. 🤔

Tschö, Auge

[Matthias Scharwies]

Hallo Auge,

danke für Dein Feedback, ich habe die Seite mal kurz vom Netz genommen, werde aber weiter dran arbeiten.

Wenn's fertig ist, bzw. die nächste Vorversion halbfertig ist, melde ich mich wieder!

Herzliche Grüße

Matthias Scharwies

[Rolf B]

Anfrage an die anderen Moderatoren:

Da der gezeigte Code so gut wie gar nichts mit dem Problem zu tun hat (außer ein JS-Objekt in einem <script src...> Element zu zeigen, wo eine colorTheme Eigenschaft als Feigenblatt drinsteckt), frage ich mich, ob das eine ernst gemeinte Frage ist oder Link-Spam für tradingview.com?

Hallo Gerhard,

wenn das kein Link-Spam ist und Du dieses Snippet einfach nur von tradingview.com geklaut abgeguckt hast, dann hast Du zwar die Einstellung für hell/dunkel gefunden, den Mechanismus zur Realisierung aber komplett übersehen.

Matthias Vorschlag mit der prefers-color-scheme Medienabfrage scheint mir der sinnvollste und vor allem für Newbies beste. Denn dann brauchst Du gar nichts eigenes auf deiner Webseite. Du musst lediglich dein CSS so gestalten, dass Du alle für's Farbschema relevanten Farben über custom properties setzt, damit die Umschaltung klappt. Und Du musst deine Seite mit einem leeren Satz custom-properties testen, denn nicht alle Browser können die und du möchtest ja auch für Kunden mit Internet Explorer zumindest erreichen, dass die Seite grundbedienbar bleibt.

Zu beachten ist allerdings, dass der bei css-tricks gezeigte Weg, die OS-Einstellung überschreiben zu können, unvollständig ist. Man kann damit ein light-Thema abdunkeln, aber kein dark-Thema aufhellen. Und ich finde es lästig, beide Farbschemata doppelt notieren zu müssen (einmal in der Klassen-Abfrage und einmal in der @media Query - sowas ist nur mit einem CSS Präprozessor sinnvoll machbar).

Eine Lösung ohne JavaScript wäre wohl auch möglich, dann brauchst Du drei Buttons / Links für die Themen, von denen jeweils zwei aktiv sind. Und zwar "Hell", "Dunkel" und "Default". Das Setzen der Thema-Klasse am body machst Du dann mit serverseitigem Code. Sofern Du sowas kannst.

Rolf

[Matthias Scharwies]

Servus!

grad noch gefunden:

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

Herzliche Grüße

Matthias Scharwies

[Rolf B]

Hallo Matthias,

nun ja, 5 Minuten plus die Umstellung auf HSL plus die Erkenntnis, dass HSL nicht das beste Farbmodell dafür ist und man ein gaaaanz neues Farbmodell bräuchte, dass außer Safari noch kein Browser kennt.

Es klingt durchaus spannend, ist aber mit Vorsicht und einer Prise Senf (bzw. Sempf) zu genießen.

Rolf

[Matthias Scharwies]

Servus!

Hallo Matthias,

nun ja, 5 Minuten plus die Umstellung auf HSL plus die Erkenntnis, dass HSL nicht das beste Farbmodell dafür ist und man ein gaaaanz neues Farbmodell bräuchte, dass außer Safari noch kein Browser kennt.

Ich hab doch Safari 5.1.7 auf meiner Windows-Kiste! 😀

Es klingt durchaus spannend, ist aber mit Vorsicht und einer Prise Senf (bzw. Sempf) zu genießen.

Rolf

Herzliche Grüße

Matthias Scharwies

[Henry]

Hallo Rolf,

frage ich mich, ob das eine ernst gemeinte Frage ist oder Link-Spam für tradin....view.com?

gut möglich.

Gruss
Henry

[Gerhard]

Hallo Henry,

Das war eine ernstgemeinte Fage von mir und kein LinkSpam.

Den Code ist frei zugänglich und kann in jede Webseite eingebettet werden.

Ich wollte meine Frage "Realitätsnah" formulieren 😉

Grüße

Gerhard

[Gerhard]

Hallo Rolf,

Vielen Dank auch bei dir für deine Ausführung!

Hat mir genauso weitergeholfen wie die von Matthias!!

schöne Grüße

Gerhard