Ankündigung

Einklappen
Keine Ankündigung bisher.

Dark Mode für die Webseite - wer hat Erfahrungen?

Einklappen
X
 
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • Dark Mode für die Webseite - wer hat Erfahrungen?

    Hallo,

    gestern habe ich zum ersten Mal gesehen, dass Android (und Apple / macOS wohl schon länger) einen Dark-Mode in den Einstellungen anbieten.

    Eine aufgerufene Webseite, die mit hellem Hintergrund designt ist, wird mit schwarzem Hintergrund dargestellt.
    Alles wirkt ein bisschen neonfarben und sieht aus wie Ende der 90er Jahre - da hatte ich auch eine schwarze Webseite mit weißer Schrift und leuchtend bunten Hyperlinks :-)

    Extrem übel sehen transparente Grafiken aus - teilweise dunkle Schrift auf schwarzem Hintergrund - fast unsichtbare Logos werden Realität.

    Jetzt meine Fragen:

    Wem ist der Dark Mode schon aufgefallen?

    Wer nutzt es aktiv und warum?
    Ich lese da was von Akku sparen bei leistungsschwachen Handys
    und besserer Lesbarkeit in sehr dunklen Umgebungen.

    Und die wichtigste Frage: Wer hat das Thema Dark Mode bei seiner Webseite (handgecodet, Dreamweaver oder CMS wie Wordpress) schon abgearbeitet und gelöst?
    Was ist dabei zu beachten?
    Wäre eine gute Sonderrubrik für meine-erste-homepage.com ;-)

    Und dafür brauche ich Input und Lösungsansätze :-)

    Bin gespannt was euch so einfällt,

    Viele Grüße
    Karl
    Zuletzt geändert von admin; 16.01.2021, 08:37.

  • #2
    Hallo,

    ich konnte den "düsteren Webseiten", die schon vor über 15 Jahren in bestimmten Bereichen (z.B. Spiele) zu finden waren, nicht viel abgewinnen. Ich liebe helle Hintergründe, ähnlich wie bei Zeitungen und Büchern.

    Bei Fotografien lässt ein dunkler Hintergrund die Fotos besser wirken, daher wird ja auch bei Lighbox-Scripten der Hintergrund meistens abgedunkelt, um das größere Foto besser hervorzuheben.

    Solange es eine Spielerei des Browsers bleibt und nicht Massen von Webseiten in den "Dark Mode" wechseln, ist mir das egal.

    daniel5959
    FindeLinks.de - Kurzinfos mit Linkempfehlung
    Homepage-FAQs.de - seit Ende 2020 offline

    Kommentar


    • #3
      Und gerade darin sehe ich das Problem - ich habe es gerade mit meinem Handy probiert... Der "Dark Mode" wird in den Basiseinstellungen aktiviert (da wo ich mein Handy auch auf "Nicht stören" stelle, wo ich den "Offline-Modus" aktiviere - also quasi in den obersten schnellen Grundeinstellungen). Ich nutze Chrome auf dem Smartphone - da wird netterweise auch im Dark Modus meine-erste-homepage.com so dargestellt, wie ich es mir mal ausgedacht habe...

      Wenn ich nun aber den Basis-Browser Samsung Internet aufrufe, ist die gesamte Seite optisch verdunkelt...

      So sieht es "normalerweise" aus:

      Screenshot_20210116-082726_Samsung Internet.png

      Und so sieht es im Dark Mode aus:

      Screenshot_20210116-082558_Samsung Internet.png

      Ich weiß nicht mal, ob Google Analytics anzeigt, wer den Dark Mode nutzt - er scheint aber bei den jüngeren Leuten absolut angesagt zu sein...

      Von daher ist es dann schon ein relevantes Thema, vor allem wen man z.B. Kundenwebseiten erstellt und zumindestens auf die Situation vorbereitet sein sollte ;-)

      Gruß
      Karl
      Zuletzt geändert von admin; 16.01.2021, 08:39.

      Kommentar


      • #4
        Hallo,

        zum Thema "Dark Mode" einige Links (für Leute, die nicht googlen wollen):

        Webdesign-Trend: Was taugt der Dark Mode für Websites? >> https://t3n.de/news/webdesign-trend-...-mode-1285427/

        Dark Mode Design: Wie du Webseiten und Apps im Dark Mode designst >> https://99designs.de/blog/web-digita...k-mode-design/

        Mit 12 Zeilen CSS: Einfacher Dark Mode für Webseiten >> https://www.iphone-ticker.de/mit-12-...seiten-148596/

        Dark Mode für Websites per JavaScript >> https://www.designerinaction.de/tipp...ites-umsetzen/

        daniel5959
        FindeLinks.de - Kurzinfos mit Linkempfehlung
        Homepage-FAQs.de - seit Ende 2020 offline

        Kommentar


        • #5
          Schön, dass sich tatsächlich jemand für den Dark Mode interessiert.
          Ich hab' das mal für meine Website (handgestrickt) umgesetzt.
          Für den einfachen Fall, das der Dark Mode im Client (Browser, Smartphone) eingestellt wird, sieht die entsprechende CSS-Anweisung vereinfacht so aus:
          HTML-Code:
          @media (prefers-color-scheme: dark) {
             html {background:#050505;}
             body,header,object {filter:invert(1);}
             img, .nicht_invertieren {filter:invert(0)}
          }
          Im konkreten Fall ist allerdings viel Handarbeit erforderlich, weil viele Elemente, z.B. Bilder, eben nicht invertiert werden sollen.
          Klar, an Stelle von filter:invert() kann man sich natürlich auch die Mühe machen, jedes Element (tag, id, class) einzeln zu stylen.

          Kommentar


          • #6
            Hallo wdw,

            ich habe auf Deiner Webseite gesehen, dass es bei Dir einen "Style-Switcher" gibt mit dem man den Dark-Mode von Hand aktivieren kann... Wie hast Du den realisiert?
            Ist auf jeden Fall sehr cool geworden :-)

            Gruß
            Karl

            Kommentar


            • #7
              Zitat von admin Beitrag anzeigen
              Hallo wdw,

              ich habe auf Deiner Webseite gesehen, dass es bei Dir einen "Style-Switcher" gibt mit dem man den Dark-Mode von Hand aktivieren kann... Wie hast Du den realisiert?
              Ist auf jeden Fall sehr cool geworden :-)

              Gruß
              Karl
              Falls du es noch nicht gesehen hast: Vbulltin hat verschiedene Farbeinstellungsmöglichkeiten.
              https://arnego2.com <Webseiten, Umbau ab €80 und einiges mehr>

              VPS 8GB RAM 50 GB ROM < Server in der EU, 1rstes Jahr €38

              Kommentar


              • #8
                Oh mein Gott sind die Styles gruselig... ich hoffe die nutzt niemand von euch... nicht lachen, das war mir tatsächlich entgangen da ich immer nur mit dem vB5 Standard Style unterwegs bin... Da mus vBulletin auf jeden Fall mal ran die modernisieren ;-)

                Kommentar


                • #9
                  Zitat von admin Beitrag anzeigen
                  Oh mein Gott sind die Styles gruselig... ich hoffe die nutzt niemand von euch... nicht lachen, das war mir tatsächlich entgangen da ich immer nur mit dem vB5 Standard Style unterwegs bin... Da mus vBulletin auf jeden Fall mal ran die modernisieren ;-)
                  Ich könnte wetten dafür gibt es extensions
                  für die 3er gabs das hier https://www.vbulletin.org/forum/showthread.php?t=104298
                  https://arnego2.com <Webseiten, Umbau ab €80 und einiges mehr>

                  VPS 8GB RAM 50 GB ROM < Server in der EU, 1rstes Jahr €38

                  Kommentar


                  • #10
                    Zitat von admin Beitrag anzeigen
                    ich habe auf Deiner Webseite gesehen, dass es bei Dir einen "Style-Switcher" gibt mit dem man den Dark-Mode von Hand aktivieren kann... Wie hast Du den realisiert?
                    Im Prinzip basiert der Style-Switcher auf einer uralten Technik, die u.a. bei A List Apart beschrieben ist. Das .css-file für den "Dark Mode Style" ist dabei im Prinzip aufgebaut wie der in meinem Ausgangsposting gezeigte Dreizeiler für
                    @media (prefers-color-scheme: dark)

                    Etwas tricky war es, die Anwendung beider CSS-Anweisungen gegenseitig auszuschließen. Im Klartext: Wenn im Betriebsystem Dark Mode eingestellt ist, dann darf der Style-Switcher natürlich nicht noch einmal den Dark Mode anbieten.

                    Das ganze Konstrukt lässt sich leider nicht ohne weiteres portabel gestalten, wie viele andere meiner Scripte, sonst hätte ich sicher schon mal einen entsprechenden Artikel geschrieben.

                    Kommentar


                    • #11
                      Hi all...

                      Switchen finde ich gut, dann kann der Client nach eigenem Gusto verfahren. Im JavaScript-Kurs haben wir da welche gecodet. War recht simpel wenn man mit JavaScript vertraut ist. Einfach die aufgerufene Funktion mit neuen Style-Anweisungen an die entsprechenden DOM-Knoten aufrufen. Mit 'element.toggle' kann man easy wieder in die 'Urkonfig' zurückgehen.

                      PS: Den Kontrast (nach WCAG) dabei nicht vergessen (siehe z.B. https://webaim.org/resources/contrastchecker/...
                      Wird beim DarkMode gerne missachtet weswegen Schrift oft eher 'verwaschen' aussieht...

                      Kommentar

                      homepage-forum.de - Hilfe für Webmaster! Statistiken

                      Einklappen

                      Themen: 56.806   Beiträge: 430.100   Mitglieder: 28.559   Aktive Mitglieder: 52
                      Willkommen an unser neuestes Mitglied, daetr2095.

                      Online-Benutzer

                      Einklappen

                      233 Benutzer sind jetzt online. Registrierte Benutzer: 4, Gäste: 229.

                      Mit 3.502 Benutzern waren am 23.01.2020 um 18:20 die meisten Benutzer gleichzeitig online.

                      Die neuesten Themen

                      Einklappen

                      • daetr2095
                        Webseite, die local erreichbar ist, im Internet erreichbar machen
                        Ich habe auf Debian Buster: Mysql, php8, Apache, Phomyadmin laufen.
                        Local funktioniert auch alles.
                        Ich möchte nun meine Webseite, die local erreichbar ist, im Internet erreichbar machen.
                        Per Portfreigabe habe ich es schon probiert doch die unterstützt mein Router(Vodaphone Station)...
                        Heute, 10:12
                      • Megabyte
                        Antwort auf Vane
                        Hallo...

                        Öffne mal mit einem reinen Texteditor (notepad++, vscode etc.) die Datei 'wp-config.php' im Wordpress-Installationsverzeichnis. Dort solltest du folgende Zeile finden: define( 'WP_AUTO_UPDATE_CORE', 'minor' );

                        Kannst auch mal 'minor' mit 'true' überschreiben. Das...
                        Gestern, 02:41
                      • Megabyte
                        Antwort auf Formularvalidierung - Wie macht ihr es?
                        Ist ein Kurs von "WBS Training" und nennt sich "Webdevelopement & Webdesign" mit Abschlusszertifikat. Da es in dem Bereich ja keine regulierten Normen für diese Begrifflichkeiten gibt ist es wohl eher ein Teilnahmenachweis und Zeugnis. Da mein letzter Arbeitgeber Konkurs anmelden...
                        Gestern, 02:34
                      • Localfu
                        Antwort auf Formularvalidierung - Wie macht ihr es?
                        Mag schon sein, dass Siemens noch den Internet Explorer 8 als Standard verwendet, aber selbst zu der Zeit des Internet Explorer 8 war dieser schon veraltet und hat Standards aus HTML4 nicht wieder gegeben. Zudem war der Zweifel der Sicherheit schon immer groß, wenn es um IE geht. HTML4 ist seit Jahren...
                        03.03.2021, 23:40
                      • Megabyte
                        Antwort auf Formularvalidierung - Wie macht ihr es?
                        Hehehe... War genau MEIN Argument an den Dozenten :-). Seine Antwort war, dass diese Kenntnisse im Kurs vermittelt werden damit zumindest das Wissen über die Unterschiede und deren Historie bekannt sind. Ferner meinte er, dass er schon etliche Kunden hatte welche ewig nicht upgedatet haben (aus zum...
                        03.03.2021, 22:50

                      Die neuesten Beiträge

                      Einklappen

                      Lädt...
                      X