So erstellen Sie ein Dark -Modus -Thema mit CSS
Sep 23, 2025 am 02:11 AM
Definieren Sie CSS-Variablen und kombinieren Sie Vorlieben-Farbscheme, um den Dunklen Modus zu implementieren. Stellen Sie helle Themen durch: root, überschreiben Sie sie als dunkle Farben in @media, verwenden Sie Variablen, um Stile gleichm??ig anzuwenden, und wechseln optional zwischen JavaScript, um die Erfahrung des übergangs und der Kontrastoptimierung hinzuzufügen.
Um ein Dark-Modus-Thema mit CSS zu erstellen, k?nnen Sie eine Kombination aus benutzerdefinierten Eigenschaften (CSS-Variablen), den Root- Selektor und der @media-Regel (bevorzugt Color-Scheme) verwenden, um Benutzersystemeinstellungen zu erkennen. Mit diesem Ansatz k?nnen Sie sowohl helle als auch dunkle Themen definieren und reibungslos zwischen ihnen wechseln.
Definieren Sie CSS -Variablen für Themen
Stellen Sie zun?chst Farbvariablen in Ihrem CSS für helle und dunkle Modi ein. Verwendung : Root, um globale Variablen zu definieren und sie unter bestimmten Bedingungen zu überschreiben.
- Erstellen Sie Variablen für Hintergrund-, Text- und Akzentfarben.
- Nennen Sie sie logisch, damit sie einfach zu verwalten sind (z. B.--BG-Color, --textfarben).
Beispiel:
:Wurzel {
--BG-Color: #ffffff;
--Text-Color: #333333;
-Accent-Color: #007BFF;
}
@media (bevorzugt Farbscheme: dunkel) {
:Wurzel {
-BG-Color: #121212;
--Text-Color: #f5f5f5;
-Accent-Color: #0a6eff;
}
}
Wenden Sie Variablen auf Ihre Stile an
Verwenden Sie die definierten Variablen in Ihrem Stylesheet, um eine Konsistenz zu gew?hrleisten. Dies erleichtert die sp?tere Aktualisierung von Stilen und unterstützt dynamisches Themenwechsel.
- Wenden Sie Variablen auf K?rper, überschriften, Links, Schaltfl?chen und andere g?ngige Elemente an.
- Vermeiden Sie scharfe Farben; Halten Sie sich nach M?glichkeit an Variablen.
Beispiel:
K?rper {
Hintergrundfarbe: var (-bg-color);
Farbe: var (-Textfarbe);
übergang: Hintergrundfarbe 0,3s Leichtigkeit, Farbe 0,3s Leichtigkeit;
}
A {
Farbe: var (-Akzentfarbe);
}
STUPPER SCHULBERSTüTZEN (OPTIONAL)
Wenn Benutzer Themen manuell wechseln sollen, anstatt sich auf Systemeinstellungen zu verlassen, verwenden Sie einen JavaScript-Umschalter, der dem -Element eine Klasse (wie .dark-mode ) hinzufügt, und stylen Sie dann entsprechend.
- Fügen Sie eine Schaltfl?che hinzu, um die Themen?nderung auszul?sen.
- Verwenden Sie JavaScript, um eine Klasse im Dokumentelement umzuschalten.
- überschreiben Sie Variablen im Klassenauswahl.
CSS:
.Dark-Mode {
-BG-Color: #121212;
--Text-Color: #f5f5f5;
-Accent-Color: #0a6eff;
}
JavaScript:
document.getElementById ('themenhilfs'). addEventListener ('klick', () => {
document.documentElement.classList.toggle ('dark-modes');
});
Reibungslose überg?nge und Zug?nglichkeit
Verbessern Sie die Benutzererfahrung, indem Sie glatte Farbüberg?nge hinzufügen und in beiden Modi einen ausreichenden Kontrast sicherstellen.
- Fügen Sie den übergang zu Hintergrund- und Textfarben hinzu, um einen Fade -Effekt zu erzielen.
- Testkontrastverh?ltnisse, um die Barrierefreiheitsstandards (WCAG) zu erfüllen.
- Respektieren Sie die Benutzerpr?ferenz mithilfe von Vorlieben .
Richten Sie im Grunde nur Variablen ein, reagieren Sie auf Systemeinstellungen oder Benutzereingaben und wenden Sie Stile konsistent an. Es ist nicht komplex, macht aber einen gro?en Unterschied in der Benutzerfreundlichkeit.
Das obige ist der detaillierte Inhalt vonSo erstellen Sie ein Dark -Modus -Thema mit CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Hei?e KI -Werkzeuge
Undress AI Tool
Ausziehbilder kostenlos
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Stock Market GPT
KI-gestützte Anlageforschung für intelligentere Entscheidungen
Hei?er Artikel
Hei?e Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
So verwenden Sie die Funktion clamp () für reaktionsschnelle Typografie in CSS
Sep 23, 2025 am 01:24 AM
clamp () function realisiert reaktionsschnelle Schriftarten, die durch die minimalen, bevorzugten und maximalen Werte skaliert werden; 2. Die Syntax ist Klemme (Mindestwert, bevorzugter Wert, Maximalwert) und h?ufig verwendete REM- und VW -Einheiten; 3. Die Schriftart nimmt den Mindestwert auf dem kleinen Bildschirm an und skaliert nach VW mit zunehmendem Bildschirm und überschreitet den Maximalwert nicht. V. 5. Kombination des REM -Anteils zur Verbesserung der Konsistenz des Designs.
So erstellen Sie ein reaktionsschnelles Quadrat mit CSS
Sep 24, 2025 am 03:28 AM
Verwenden Sie Aspektverh?ltnis: 1/1, um ein reaktionsschnelles Quadrat zu erstellen und das Seitenverh?ltnis in modernen Browsern festzulegen. Wenn Sie mit alten Browsern kompatibel sein müssen, k?nnen Sie die 100% ige Technik verwenden, um die Konsistenz von Breite und H?he durch relative Einheiten aufrechtzuerhalten. Sie k?nnen auch VW -Einheiten verwenden, um den Quadrat mit dem Ansichtsfenster zu ?ndern.
So stellen Sie den Chrombrowser ein, um die Header und die Fu?zeile zu entfernen, wenn Sie drucken
Sep 25, 2025 am 09:54 AM
1. ?ffnen Sie die Webseiten -Druckschnittstelle, klicken Sie auf "Weitere Einstellungen" und deaktivieren Sie "Header und Fu?zeile", um automatisch URLs, Daten und andere Informationen hinzugefügt. 2. Durch Hinzufügen des CSS -Stils von @mediaprint {@page {margin: 0}} dem Webseitencode k?nnen die Standardmargen, Header und Fu?zeile gel?scht werden. 3. Installieren Sie Druckerweiterungen von Drittanbietern wie Printedit, mit denen Druckinhalte flexibler bearbeiten und die Standard-Header und die Fu?zeile deaktivieren k?nnen.
So verwenden Sie den CSS-Hintergrund
Sep 24, 2025 am 01:55 AM
Verwenden Sie Backdrop-Filter: Blur (), um den frostierten Glasffekt zu erzielen und RGBA-transparente Hintergrund, dünne R?nder und abgerundete Ecken zu kombinieren, wie z. .Frostierte Kard (Backdrop-Filter: Blur (10px); Hintergrundfarbe: RGBA (255,255,255,0,1); Grenze: 1pxsolidrgba (255,255,255,0,2); Border-Radius: 12px; Padding: 20px;}, sicher, dass es sich auf die Elemente befindet.
So erstellen Sie ein Dark -Modus -Thema mit CSS
Sep 23, 2025 am 02:11 AM
Definieren Sie CSS-Variablen und kombinieren Sie Vorlieben-Farbscheme, um den Dunklen Modus zu implementieren. Stellen Sie helle Themen durch: root, überschreiben Sie sie als dunkle Farben in @media, verwenden Sie Variablen, um Stile gleichm??ig anzuwenden, und wechseln optional zwischen JavaScript, um die Erfahrung des übergangs- und Kontrastoptimierungserlebnisses hinzuzufügen.
Wie ziele ich auf das letzte untergeordnete Element in CSS ab?
Sep 24, 2025 am 02:26 AM
Verwenden Sie den Last-Kind-Pseudoklasse-Selektor, um das letzte untergeordnete Element im übergeordneten Container genau zu finden, unabh?ngig von seinem Typ. Zum Beispiel wird LI: Last-Kind für das letzte Element auf der Liste verwendet, und *: Last-Kind ist für jedes Endelement geeignet. Im Gegensatz zu: Last-of-Type: Last-Kind konzentriert sich nur darauf, ob es sich um den letzten Kinderknoten handelt, w?hrend: Last-of-Type der letzten Instanz eines bestimmten Typs entspricht. Diese Methode ist weithin unterstützt und eignet sich für Szenarien wie das Entfernen unn?tiger Margen oder das Hervorheben des letzten Elements.
So verwenden Sie CSS logische Eigenschaften für die Internationalisierung
Sep 24, 2025 am 02:54 AM
LogicalPropertieSenableAtapable, internationallayouts-byreplacingFixedDirectionSwithflow-Relativeterms-?hnlich-blockandinline, sicherstellen, dass die Konsistentstylingacrossltr, RTL undvertische WritingModes sicherstellen.
So w?hlen Sie ein leeres Element mit der leeren Pseudoklasse in CSS aus
Sep 25, 2025 am 03:07 AM
Die: Leerepseudo-KlasseSelectsselementsWithnocontentorchildren, einschlie?lich der Nospacesorline-Breaks; Forexample, Div: leerstylesCompletelyEmptydivs und kombiningititithith :: BeforecaninsertFackbackMessages-?hnliches "nocontentApaillable" toimprovelayouthlingingIndinneNa
