Gerhard: Hilfe bei Erstellung eines Toggles

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

  1. 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

    --
    Einfach mal was von der ToDo-Liste auf die Was-Solls-Liste setzen.“
    1. 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:

      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

      --
      Einfach mal was von der ToDo-Liste auf die Was-Solls-Liste setzen.“
      1. 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

        1. 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

          --
          Einfach mal was von der ToDo-Liste auf die Was-Solls-Liste setzen.“
          1. 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

            --
            Einfach mal was von der ToDo-Liste auf die Was-Solls-Liste setzen.“
            1. 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

              --
              sumpsi - posui - obstruxi
              1. 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:

                2013

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

                Ich habe das 2014 so realisiert:

                2014

                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.

                1. #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:

                Herzliche Grüße

                Matthias Scharwies

                --
                Einfach mal was von der ToDo-Liste auf die Was-Solls-Liste setzen.“
                1. Servus!

                  Der 2. Versuch ist online

                  Entwurf

                  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?

                  1. 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!?

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

                  2. 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

                  --
                  Einfach mal was von der ToDo-Liste auf die Was-Solls-Liste setzen.“
                  1. Hallo

                    Der 2. Versuch ist online

                    Entwurf

                    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.

                    1. 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

                    --
                    Ein echtes Alchimistenlabor musste voll mit Glasgefäßen sein, die so aussahen, als wären sie beim öffentlichen Schluckaufwettbewerb der Glasbläsergilde entstanden.
                    Hohle Köpfe von Terry Pratchett
                    1. Servus!

                      Hallo

                      Der 2. Versuch ist online

                      Entwurf

                      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.

                      1. 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

                      --
                      Einfach mal was von der ToDo-Liste auf die Was-Solls-Liste setzen.“
                      1. 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

                        --
                        Ein echtes Alchimistenlabor musste voll mit Glasgefäßen sein, die so aussahen, als wären sie beim öffentlichen Schluckaufwettbewerb der Glasbläsergilde entstanden.
                        Hohle Köpfe von Terry Pratchett
                        1. 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

                          --
                          Einfach mal was von der ToDo-Liste auf die Was-Solls-Liste setzen.“
  2. 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

    --
    sumpsi - posui - obstruxi
    1. Servus!

      grad noch gefunden:

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

      Herzliche Grüße

      Matthias Scharwies

      --
      Einfach mal was von der ToDo-Liste auf die Was-Solls-Liste setzen.“
      1. 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

        --
        sumpsi - posui - obstruxi
        1. 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

          --
          Einfach mal was von der ToDo-Liste auf die Was-Solls-Liste setzen.“
    2. 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

      --
      Meine Meinung zu DSGVO & Co:
      „Principiis obsta. Sero medicina parata, cum mala per longas convaluere moras.“
      1. 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

    3. 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