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

Einklappen
X
 
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge
  • admin
    Administrator
    • 03.06.2002
    • 1845

    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, 07:37.
  • daniel5959
    Crazy User
    • 15.11.2003
    • 11751

    #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
    WindSolarMobil.de - neu ab 2023
    FindeLinks.de - seit Ende 2022 als Archiv
    Homepage-FAQs.de - seit Ende 2020 offline

    Kommentar

    • admin
      Administrator
      • 03.06.2002
      • 1845

      #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, 07:39.

      Kommentar

      • daniel5959
        Crazy User
        • 15.11.2003
        • 11751

        #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
        WindSolarMobil.de - neu ab 2023
        FindeLinks.de - seit Ende 2022 als Archiv
        Homepage-FAQs.de - seit Ende 2020 offline

        Kommentar

        • wdw
          Newbie
          • 16.01.2021
          • 2

          #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

          • admin
            Administrator
            • 03.06.2002
            • 1845

            #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

            • arnego2
              Kaiser
              • 07.03.2017
              • 1497

              #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://se544.com <Marketing, Webseiten, Server Umzug, SEO und mehr>

              Kommentar

              • admin
                Administrator
                • 03.06.2002
                • 1845

                #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

                • arnego2
                  Kaiser
                  • 07.03.2017
                  • 1497

                  #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://se544.com <Marketing, Webseiten, Server Umzug, SEO und mehr>

                  Kommentar

                  • wdw
                    Newbie
                    • 16.01.2021
                    • 2

                    #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

                    • Megabyte
                      Samurai
                      • 18.11.2020
                      • 229

                      #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...
                      ________
                      Megabyte66
                      ________

                      Kommentar

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

                      Einklappen

                      Themen: 57.385   Beiträge: 432.930   Mitglieder: 29.740   Aktive Mitglieder: 33
                      Willkommen an unser neuestes Mitglied, hacker2024.

                      Online-Benutzer

                      Einklappen

                      959 Benutzer sind jetzt online. Registrierte Benutzer: 0, Gäste: 959.

                      Mit 9.939 Benutzern waren am 17.05.2023 um 21:38 die meisten Benutzer gleichzeitig online.

                      Die neuesten Themen

                      Einklappen

                      • ST747
                        Signatur
                        Hallo,
                        da habe ich ein PDF-Dokument an einer Behörde geschickt und die schreibt zurück, entweder mit der Post oder ausdrucken, unterschreiben und wieder scannen, dann verschicken.
                        aber das drucken und den umstand will ich mir sparen.
                        bei adobe gibt es wohl eine funktion die ich mir...
                        Gestern, 16:41
                      • arnego2
                        Openvpn und cloud
                        Wer wie ich über OpenVPN ins Homepage-Forum gehen will, läuft Gefahr, nicht reingelassen zu werden.
                        Ich nehme an, die Cloud Manager sind davon überzeugt, dass wer einen VPN Service nutzt, etwas zu verbergen hat.

                        Leute, die wie ich in einem sanktionierten Land leben, müssen mit...
                        Gestern, 14:05
                      • Orhun
                        ORHUX.pictures - Free Image / Picture Hosting
                        Liebe Mitglieder der Community,

                        ich bin begeistert, euch mein neuestes Projekt "ORHUX.pictures" präsentieren zu können. Bei ORHUX.pictures habt ihr die Möglichkeit, eure Bilder und Fotos hochzuladen, von anderen Nutzern bewerten zu lassen und sie mit der ganzen Welt zu teilen....
                        Gestern, 01:11
                      • Lupus_III
                        Image vor Übeschrift setzen.
                        Hallo zusammen,

                        ich würde gerne vor h2-Überschriften in einer HTML-Seite ein kleines selbst erzeugtes Image setzen, so wie man das mit Fontawesome Icons machen kann. Das Image soll die gleiche Größe wie die H2-Überschrift haben. Hat jemand eine Idee, wie ich vorgehen kann?
                        17.03.2024, 12:03
                      • bodan
                        Warum KI viel Wasser und Strom braucht - zur Umweltbilanz der KI
                        Warum KI viel Wasser und Strom braucht - zur Umweltbilanz der KI

                        Warum KI viel Wasser und Strom braucht

                        interessante Einsichten über KI https://www.tagesschau.de/thema/k%C3...he_intelligenz

                        Stand: 15.03.2024 08:47 Uhr÷

                        Zit: Bei einem Gespräch...
                        15.03.2024, 17:48

                      Die neuesten Beiträge

                      Einklappen

                      • ST747
                        Signatur
                        Hallo,
                        da habe ich ein PDF-Dokument an einer Behörde geschickt und die schreibt zurück, entweder mit der Post oder ausdrucken, unterschreiben und wieder scannen, dann verschicken.
                        aber das drucken und den umstand will ich mir sparen.
                        bei adobe gibt es wohl eine funktion die ich mir...
                        Gestern, 16:41
                      • bdt600
                        Antwort auf Signatur
                        Scanne eine Unterschrift ein und füge die gescannte Datei in das PDF ein. Die Unterschrift mit der Maus herzustellen ist zu hakelig, wenn man nicht gerade ein Tablett mit Stift hat.
                        Gestern, 21:26
                      • ST747
                        Antwort auf Signatur
                        hallo,
                        ich habe pdf24.org gerade probiert.
                        das funktioniert gut.
                        ich habe da mit der maus meine unterschrift gemacht.
                        die ist noch ziemlich eckig, aber es geht.
                        war ein guter tip.
                        gerhard...
                        Gestern, 21:22
                      • bdt600
                        Antwort auf Signatur
                        Siehe https://www.pdf24.org/de/
                        Gestern, 18:04
                      • Merloto
                        Antwort auf Meine Homepage
                        ich wohne alleine, da störts niemanden, außer evtl die Nachbarn
                        Gestern, 16:46
                      • Merloto
                        Antwort auf Signatur
                        Hallo gerhard, meinst so ein Programm, bei dem man die PDFs direkt selbst bearbeiten kann, oder? - nach so etwas suche ich ebenfalls - wenn möglich ein kostenloses Programm. Kann da jemand etwas empfehlen?
                        Gestern, 16:45
                      • Orhun
                        ORHUX.pictures - Free Image / Picture Hosting
                        Liebe Mitglieder der Community,

                        ich bin begeistert, euch mein neuestes Projekt "ORHUX.pictures" präsentieren zu können. Bei ORHUX.pictures habt ihr die Möglichkeit, eure Bilder und Fotos hochzuladen, von anderen Nutzern bewerten zu lassen und sie mit der ganzen Welt zu teilen....
                        Gestern, 01:11
                      • arnego2
                        Antwort auf ORHUX.pictures - Free Image / Picture Hosting
                        Wie schützt ihr euch vor den Schelmen, die andere Leute Bilder hochladen?
                        Gestern, 14:06
                      • arnego2
                        Openvpn und cloud
                        Wer wie ich über OpenVPN ins Homepage-Forum gehen will, läuft Gefahr, nicht reingelassen zu werden.
                        Ich nehme an, die Cloud Manager sind davon überzeugt, dass wer einen VPN Service nutzt, etwas zu verbergen hat.

                        Leute, die wie ich in einem sanktionierten Land leben, müssen mit...
                        Gestern, 14:05
                      • bdt600
                        Antwort auf Welches CMS für gute Menüs?
                        Dateien wie footer.php solltest du sowieso nicht ändern, da sie bei nächsten Update des Themes wieder überschrieben werden. Wenn du an solchen Dateien etwas ändern willst/musst, dann lege ein Child-Theme an.


                        Keine Ahnung, allerdings kann man mit den Infos nur sehr wenig anfangen....
                        Gestern, 07:00
                      Lädt...
                      X