Reiner CSS-freier Implementierungscode für Websites mit Umschaltfunktion für den Dunkelmodus

Vorwort

Das Konzept des Dunkelmodus stammt ursprünglich aus Mojave MacOS系統und bietet Benutzern zwei Skins zur Auswahl:淺色主題und深色主題.深色主題ist das, was wir oft暗黑模式bezeichnen. Aus Gründen der Augengesundheit habe ich auf meinem Telefon, Tablet und Computer暗黑模式gewählt.

Da Apple nach und nach von allen wichtigen Systemplattformen die Anpassung an暗黑模式verlangt, hat der Autor auch eine網站暗黑模式適配方案erkundet, die die kostengünstigste auf dem Markt sein soll.

Freunde, die mich kennen, sollten alle wissen, dass ich ein großer CSS-Enthusiast bin. Natürlich verwende ich dieses Mal auch reines CSS, um diese Lösung zu implementieren. Ja, ohne Hinzufügen von JS wird die Leistungsfähigkeit von CSS erneut unter Beweis gestellt.

Ideen

Die Idee ist einfach: Verwenden Sie eine Schaltfläche, um zwischen Designstilen hin und her zu wechseln. Wenn die Schaltfläche nicht aktiviert ist, wird淺色主題aktiviert. Wenn die Schaltfläche aktiviert ist, wird深色主題aktiviert. Sie können :checked und + hit verwenden, um diese Aufgabe zu erledigen.

:checked : Das Formularelement mit der aktivierten Option

+ : benachbarte Geschwisterelemente eines Elements

Mit <input> wird ein Button simuliert. Befindet sich der Button im Zustand „Ausgewählt“, löst er :checked aus. Durch + wechselt der dahinterliegende, angrenzende Website-Body <div> in暗黑模式. Wird der Zustand „Ausgewählt“ aufgehoben, wird暗黑模式beendet.

<Text>
    <input Klasse="ios-switch" Typ="checkbox">
    <div class="main">Website-Text</div>
</body>

Weitere Selektorfunktionen und -klassifizierungen finden Sie in meinem Artikel „Die wahrscheinlich umfassendste und am einfachsten zu merkende Methode zur CSS-Selektorklassifizierung“.

Umschaltfläche

Ich wollte einen gut aussehenden Button entwerfen, hatte aber keine besonderen Ideen, also öffnete ich mein iPhone und implementierte切換按鈕in den Einstellungen mit reinem CSS.

Größe und Farbe entsprechen der Umschalttaste des iPhone . Die Idee besteht darin, mit <input> eine Schaltfläche zu simulieren, mit appearance:none ihr Standardaussehen zu löschen, mit ::before den Hintergrundbereich zu simulieren, mit ::after den Klickbereich zu simulieren und nach dem Auslösen von :checked einige kleine Animationen zur Änderung hinzuzufügen, um so iPhone切換按鈕nahezu perfekt zu realisieren.

<input Klasse="ios-switch" Typ="checkbox">

.btn {
    Rahmenradius: 31px;
    Breite: 102px;
    Höhe: 62px;
    Hintergrundfarbe: #e9e9eb;
}
.ios-Schalter {
    Position: relativ;
    Aussehen: keines;
    Cursor: Zeiger;
    Übergang: alle 100ms;
    @erweitern .btn;
    &::vor {
        Position: absolut;
        Inhalt: "";
        Übergang: alle 300 ms kubisch-bézier (.45, 1, .4, 1);
        @erweitern .btn;
    }
    &::nach {
        Position: absolut;
        links: 4px;
        oben: 4px;
        Rahmenradius: 27px;
        Breite: 54px;
        Höhe: 54px;
        Hintergrundfarbe: #fff;
        Kastenschatten: 1px 1px 5px rgba(#000, .3);
        Inhalt: "";
        Übergang: alle 300 ms kubisch-bézier (.4, .4, .25, 1.35);
    }
    &:geprüft {
        Hintergrundfarbe: #5eb662;
        &::vor {
            transformieren: Skalierung(0);
        }
        &::nach {
            transformieren: übersetzenX(40px);
        }
    }
}

Klicken Sie hier, um die Online-Demo und den Quellcode anzuzeigen.

Dunkler Modus

Erinnern Sie sich an den 4. April, als das gesamte Internet in Trauermodus ging? Der Autor veröffentlichte einen Artikel mit dem Titel „Eine Codezeile versetzt die gesamte Site in den Trauermodus“, in dem er geschickt den leistungsstarken CSS- filter verwendete.

html {
    Filter: Graustufen (1);
}

Es handelt sich tatsächlich nur um eine Codezeile, und dieses Mal ist keine Ausnahme.一行代碼全站進入暗黑模式.

html {
    Filter: invertieren(1) Farbton-Drehung(180 Grad);
}

Die Kompatibilität des filter ist nicht schlecht und die Schüler können ihn ohne Bedenken verwenden. Es gibt jedoch noch einige Details, die beachtet werden müssen und die in diesem Artikel nicht wiederholt werden. Weitere Einzelheiten finden Sie unter „Eine Codezeile versetzt die gesamte Site in den Trauermodus“.

filter ist eine sehr magische Eigenschaft, mit der einige grundlegende Filtereffekte Photoshop auf die Website angewendet werden können. Normalerweise verwende ich gerne filter . Auf meinem CodePen gibt es viele reine CSS-Spezialeffekte, die filter verwenden. Aufmerksame Schüler werden vielleicht feststellen, dass ich besonders gerne die Funktion hue-rotate() in Kombination mit CSS變量verwende, um Übergangsfarben dynamisch zu generieren. Weitere Informationen finden Sie unter „Verwenden Sie CSS-Variablen, um Ihr CSS spannender zu gestalten“.

Dieser暗黑模式verwendet zwei Filterfunktionen: invert() und hue-rotate() .

invert() : Kehrt das Bild um und gibt es umgekehrt aus. Ein Wert von 0% bedeutet keine Änderung, ein Wert von 0~100% bedeutet einen linearen Multiplikatoreffekt und ein Wert von 100% bedeutet eine vollständige Umkehrung.

hue-rotate() : Farbtonrotation, Abschwächung der Bildfärbung, Verarbeitung von anderen Farben als Schwarz und Weiß, ein Wert von 0deg bedeutet keine Änderung, ein Wert von 0~360deg bedeutet eine allmähliche Abschwächung und ein Wert über 360deg bedeutet N Kreise und anschließende Berechnung des verbleibenden Wertes

invert() kann einfach so verstanden werden, dass黑變白，白變黑，黑白顛倒. hue-rotate() kann einfach als沖淡顏色verstanden werden. Um sicherzustellen, dass sich der Farbton des Designs nicht ändert, ist es sinnvoll, die Farbtonrotation mit 180deg anzugeben.

Gemäß der obigen Analyse können Sie, wenn sich die Schaltfläche im ausgewählten Zustand befindet, mit + die folgenden Geschwisterelemente ebenfalls in den ausgewählten Zustand versetzen. Wenn das Geschwisterelement keine Hintergrundfarbe hat background-color:#fff deklariert werden, sonst wird der Filtereffekt nicht wirksam. Um den Übergang dieses Geschwisterelements bei Verwendung des Filtereffekts natürlicher zu gestalten, deklarieren Sie transition:all 300ms .

.ios-Schalter {
    ...
    &:geprüft {
        ...
        & + .main {
            Filter: invertieren(1) Farbton-Drehung(180 Grad);
        }
    }
}
.hauptsächlich {
    Hintergrundfarbe: #fff;
    Übergang: alle 300ms;
}

Um die Wirkung auf CodePen besser zu demonstrieren, verwenden wir <iframe> , um unsere bevorzugte Nuggets-Community vorzustellen und暗黑模式kostenlos hinzuzufügen:wink:. Gleichzeitig wurden einige kleinere Änderungen am Layout vorgenommen. Klicken Sie hier, um die Online-Demo und den Quellcode anzuzeigen.

Optimierung

Aufmerksamen Schülern kann es passieren, dass die Bilder alle wie Ultraschallbilder aussehen.

Gemäß den Designprinzipien bezieht sich Skinning nur auf Komponenten. Einige Medienelemente wie Hintergründe, Bilder, Videos usw. können nicht direkt verarbeitet werden und müssen so bleiben, wie sie sind. Da暗黑模式durch die Umkehrung und Farbtonrotation des Filters erreicht wird, kann er wiederhergestellt werden, indem die Umkehrung und Farbtonrotation des Filters erneut auf diese Medienelemente angewendet wird. Studenten, die bereits Photoshop濾鏡verwendet haben, sollten damit besser vertraut sein.

Bild,
Video
    Filter: invertieren(1) Farbton-Drehung(180 Grad);
}

Eine weitere Frage ist, wie mit dem Hintergrund umzugehen ist? Wie wir alle wissen, werden Hintergründe mithilfe background deklariert und können daher nicht mit einem bestimmten Selektor markiert werden. Sie können es sich jedoch auch anders vorstellen, d. h. dem Element mit Hintergrund einen bestimmten Klassennamen hinzuzufügen und es in die obigen Regeln einzubeziehen.

Durch Anzeigen des Website-Quellcodes掘金社區mit Chrome DevTools haben wir festgestellt, dass diese Avatare, Miniaturansichten und Anzeigebilder alle über bestimmte Klassennamen verfügen und dass diese bestimmten Klassennamen den Regeln hinzugefügt wurden.

Bild,
Video,
.Avatar,
.Bild,
.Daumen {
    Filter: invertieren(1) Farbton-Drehung(180 Grad);
}

Auf einer allgemeinen Website können Sie diesen Klassennamen selbst definieren. Am praktischsten ist es, einen bestimmten .exclude zu definieren.exclude . Fügen Sie .exclude zu allen Elementen hinzu, die keine Filtereffekte verwenden.

.ausschließen {
    Filter: invertieren(1) Farbton-Drehung(180 Grad);
}

Renovierung

Um die Demonstration des Codes zu erleichtern, verwenden wir <iframe> in der CodePen-Demo, um unsere bevorzugte Nuggets-Community vorzustellen. Da es unmöglich ist, Stile für <iframe> zu deklarieren, sind wir zur Nuggets-Community gewechselt und haben es direkt über Chrome DevTools geändert.

Drücken Sie F12 oder Cmd+Alt+I im Chrome瀏覽器, um Chrome DevTools zu öffnen und die HTML-Struktur der Website zu analysieren.

<Text>
    <div id="__nuxt">...</div>
</body>

Fügen Sie切換按鈕in <body> ein.

<Text>
    <input Klasse="ios-switch" Typ="checkbox">
    <div id="__nuxt">...</div>
</body>

Wandeln Sie den folgenden SCSS代碼in CSS代碼um und fügen Sie ihn in den neu erstellten <style> im <head> ein. Ich empfehle eine Website mit einem Online-Tool SASS轉CSS . Kopieren Sie den folgenden Code zur direkten Konvertierung auf die Website und fügen Sie ihn nach der Fertigstellung in <style> ein.

.btn {
    Rahmenradius: 31px;
    Breite: 102px;
    Höhe: 62px;
    Hintergrundfarbe: #e9e9eb;
}
.ios-Schalter {
    Position: relativ;
    Aussehen: keines;
    Cursor: Zeiger;
    Übergang: alle 100ms;
    @erweitern .btn;
    &::vor {
        Position: absolut;
        Inhalt: "";
        Übergang: alle 300 ms kubisch-bézier (.45, 1, .4, 1);
        @erweitern .btn;
    }
    &::nach {
        Position: absolut;
        links: 4px;
        oben: 4px;
        Rahmenradius: 27px;
        Breite: 54px;
        Höhe: 54px;
        Hintergrundfarbe: #fff;
        Kastenschatten: 1px 1px 5px rgba(#000, .3);
        Inhalt: "";
        Übergang: alle 300 ms kubisch-bézier (.4, .4, .25, 1.35);
    }
    &:geprüft {
        Hintergrundfarbe: #5eb662;
        &::vor {
            transformieren: Skalierung(0);
        }
        &::nach {
            transformieren: übersetzenX(40px);
        }
        & + #__nuxt {
            Filter: invertieren(1) Farbton-Drehung(180 Grad);
            Bild,
            Video,
            .Avatar,
            .Bild,
            .Daumen {
                Filter: invertieren(1) Farbton-Drehung(180 Grad);
            }
        }
    }
}
#__nuxt {
    Hintergrundfarbe: #fff;
    Übergang: alle 300ms;
}

Wenn切換按鈕nach Abschluss nicht angezeigt wird, können Sie ihn mit position:absolute absolut an der Stelle positionieren, an der er angezeigt werden soll.

.ios-Schalter {
    Position: absolut;
    rechts: 0;
    oben: 0;
    Z-Index: 99999;
    Gliederung: keine;
}

Oder erstellen Sie irgendwo in <div id="__nuxt"> ein <label> und binden Sie <input class="ios-switch" id="toggle" hidden> und <label for="toggle"> aneinander, um den Auslösebereich von <input> nach <label> zu übertragen. Spezifische Implementierungsmethoden finden Sie in der reinen CSS-Implementierung der Registerkartennavigationsleiste des Autors.

Wenn Sie die Erklärung als etwas verwirrend empfinden, können Sie sie etwas übersichtlicher gestalten und die obigen Vorgänge in drei Schritten durchführen.

Öffnen Sie die Nuggets Community-Website

Drücken Sie F12 oder Cmd+Alt+I , um Chrome DevTools zu öffnen

<style> in <head> einfügen

Um das Kopieren und Einfügen zu erleichtern, hat der Autor den aus der obigen Analyse erhaltenen CSS-Code komprimiert.

<Styles> .btn, .ios-switch :: vor, .ios-switch {border-radius: 31px; width: 102px; Höhe: 62px; Hintergrundfarbe:#e9e9eb;}. iOS-switch {Position: Relativ; Aussehen: Keine Cursor: Düster; IC-Bezier (0,45,1,0,4,1); -Bezier (0,4,0,4,0,25,1,35); 1) Hue-Rotate (180-°);} );} #__ nuxt {Hintergrund-Color: #fff; Übergang: Alle 300 ms;}

<input> in <body> einfügen

<Text>
    <input Klasse="ios-switch" Typ="checkbox">
    <div id="__nuxt">...</div>
</body>

Auf diese Weise kann eine reine CSS-Implementierung dafür sorgen, dass die Website sofort über暗黑模式verfügt. Betrachten Sie CSS jetzt mit anderen Augen?

Zusammenfassen

Die gesamte純CSS實現方案dreht sich um drei Punkte :checked , + und filter , von denen keiner fehlen darf. Es scheint einfach. Wenn CSS nicht häufig für Spezialeffekte verwendet wird, ist es schwer vorstellbar, dass eine so leistungsstarke Funktion mit nur drei Hilfspunkten erreicht werden kann.

<Text>
    <input Klasse="ios-switch" Typ="checkbox">
    <div class="main">Website-Text</div>
</body>

.ios-Schalter {
    ...
    &:geprüft {
        ...
        & + .main {
            Filter: invertieren(1) Farbton-Drehung(180 Grad);
            Bild,
            Video,
            .ausschließen {
                Filter: invertieren(1) Farbton-Drehung(180 Grad);
            }
        }
    }
}
.hauptsächlich {
    Hintergrundfarbe: #fff;
    Übergang: alle 300ms;
}

Im Vergleich zur CSS+JS實現方案muss kein vollständiger Satz von Codes暗黑模式-Stil gepflegt werden, es ist kein DOM -Betrieb erforderlich und es sind keine üblichen komplizierten Vorgänge erforderlich. Sofern Sie keinen vollständigen Satz hochgradig angepasster暗黑模式erstellen möchten, benötigen Sie eine CSS+JS實現方案. Andernfalls können Sie diese Lösung verwenden.

Diese Lösung hat die folgenden Funktionen.

• Reine CSS-Implementierung, einfach und effizient, stilvoller
• Fast keine Wartungskosten, schnelle Iteration
• Nutzen Sie die Filtereffekte voll aus und sorgen Sie für eine gute Kompatibilität

Es ist in Ordnung, es zu versuchen. Wenn Sie fertig sind und denken, dass die Ergebnisse gut sind, bitten Sie Ihren Chef um eine Gehaltserhöhung:stuck_out_tongue_winking_eye:, haha!

Damit ist dieser Artikel über die kostenlose Verwendung von reinem CSS zum Aktivieren des Dunkelmodus für Websites abgeschlossen. Weitere Informationen zum CSS-Dunkelmodus finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!