Detaillierte Erklärung zum einfachen Wechseln von CSS-Themen

Ich habe meiner persönlichen Website vor Kurzem einen sehr einfachen Farbschema-(Design-)Umschalter hinzugefügt. Sie können diesen einfachen Farbumschalter in der Fußzeile Ihrer Website umschalten, um ihn in Aktion zu sehen. Für den Fall, dass jemand anders eine solche Funktionalität zu seiner eigenen Site/seinem eigenen Projekt hinzufügen möchte, dachte ich, ich schreibe einen kurzen Beitrag, in dem ich erkläre, wie das geht. Lasst uns anfangen.

HTML

Zuerst müssen wir die „Schaltflächen“ einbinden, die den Designwechsel basierend auf dem ausgewählten Design auslösen. (Hinweis: Sie können diese immer als options in einem select erstellen, wenn das für Sie besser ist.)

<div Klasse="Farbauswahl">
    <button onclick="toggleDefaultTheme()"></button>
    <button onclick="toggleSecondTheme()"></button>
    <button onclick="toggleThirdTheme()"></button>
</div>

Das ist es! Machen Sie sich vorerst nicht zu viele Gedanken über den onclick -Parameter. Wir kommen darauf zurück, wenn wir das JavaScript hinzufügen. Jetzt muss nur noch die Standarddesignklasse wie folgt zum html Element hinzugefügt werden:

<html Klasse="Thema-Standard">

CSS

Als Nächstes müssen wir die beiden color-select mit dem benutzerdefinierten Farbschema gestalten, das sich auf der gesamten Site ändert. Wir beginnen mit dem Farbschema.

Um einen nahtlosen Wechsel zwischen diesen Designs zu ermöglichen, legen wir die wechselnden Farbsätze als CSS-Variablen fest:

.theme-Standard {
   --Akzentfarbe: #72f1b8;
   --Schriftfarbe: #34294f;
}

.theme-zweite {
    --Akzentfarbe: #FFBF00;
    --Schriftfarbe: #59316B;
}

.theme-dritte {
    --Akzentfarbe: #d9455f;
    --Schriftfarbe: #303960;
}

Körper {
    Hintergrundfarbe: var(--accent-color);
    Farbe: var(--font-color);
}

Zum Schluss gestalten wir die benutzerseitige Farbpalette:

.Farbauswahl-Schaltfläche {
    -moz-Aussehen: keines;
    Aussehen: keines;
    Rand: 2px durchgezogen;
    Rahmenradius: 9999px;
    Cursor: Zeiger;
    Höhe: 20px;
    Rand: 0 0,8rem 0,8rem 0;
    Umriss: 0;
    Breite: 20px;
}

/* Gestalten Sie jedes Farbfeld so, dass es zum entsprechenden Design passt */
.Farbauswahl-Schaltfläche:n-tes Kind(1) { Hintergrund: #72f1b8; Rahmenfarbe: #34294f; }
.Farbauswahl-Schaltfläche:n-tes Kind(2) { Hintergrund: #FFBF00; Rahmenfarbe: #59316B; }
.Farbauswahl-Schaltfläche:n-tes Kind(3) { Hintergrund: #d9455f; Rahmenfarbe: #303960; }

JavaScript

Wir müssen dafür sorgen, dass jede der Farbfeldschaltflächen das entsprechende Design auslöst, und theme-default austauschen, die wir ursprünglich an das Haupt html Element angehängt haben. Wir müssen außerdem localStorage speichern, was der Benutzer ausgewählt hat, damit seine Auswahl erhalten bleibt, wenn er die Seite neu lädt oder zu einer anderen Seite navigiert.

// Legen Sie ein bestimmtes Design/Farbschema fest
Funktion setTheme(Themename) {
    localStorage.setItem('Thema', Themenname);
    Dokument.documentElement.Klassenname = Themenname;
}

// Zwischen Farbthemen umschalten
Funktion toggleDefaultTheme() {
    wenn (localStorage.getItem('theme') !== 'theme-default'){
        setTheme('Theme-Standard');
    }
}
Funktion toggleSecondTheme() {
    wenn (localStorage.getItem('theme') !== 'theme-zweite'){
        setTheme('Theme-Sekunde');
    }
}
Funktion toggleThirdTheme() {
    wenn (localStorage.getItem('Thema') !== 'Thema-Drittel'){
        setTheme('Theme-Drittes');
    }
}

// Das Design sofort beim ersten Laden festlegen
(Funktion () {
    wenn (localStorage.getItem('theme') === 'theme-default') {
        setTheme('Theme-Standard');
    }
    wenn (localStorage.getItem('theme') === 'theme-zweite') {
        setTheme('Theme-Sekunde');
    }
    wenn (localStorage.getItem('theme') === 'theme-third') {
        setTheme('Theme-Drittes');
    }
})();

Das ist es! Jetzt hängt es nur noch davon ab, wie individuell Sie die einzelnen Design-Stile gestalten möchten. Die Möglichkeiten sind endlos!

Damit ist dieser Artikel zum einfachen Wechseln von CSS-Designs abgeschlossen. Weitere Informationen zum Wechseln von CSS-Designs 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!

<<: Ausführliche Erläuterung der MySQL-Isolationsebene und des Sperrmechanismus

>>: Grundlegende Struktur von HTML-Dokumenten (Grundkenntnisse zur Erstellung von Webseiten)

CocosCreator Skelettanimation Drachenknochen

Artikel

Der beliebige Upload von Jar-Paketen in Apache Flink führt zu einem Wiederholungsproblem bei der Sicherheitsanfälligkeit bezüglich Remotecodeausführung (Sicherheitswarnung)

Artikel

Implementierung der Clusterkonstruktion im Docker Redis5.0-Cluster

Detaillierte Erklärung zum einfachen Wechseln von CSS-Themen

CocosCreator Skelettanimation Drachenknochen

Der beliebige Upload von Jar-Paketen in Apache Flink führt zu einem Wiederholungsproblem bei der Sicherheitsanfälligkeit bezüglich Remotecodeausführung (Sicherheitswarnung)

Implementierung der Clusterkonstruktion im Docker Redis5.0-Cluster

Eine kurze Diskussion über MySql-Ansichten, Trigger und gespeicherte Prozeduren

Beispiel für die Implementierung von Unterstreichungseffekten mit CSS und JS

JS Asynchronous Stack Tracing: Warum „await“ besser ist als „Promise“

Beheben Sie den 1251-Fehler beim Herstellen einer Verbindung zwischen MySQL und Navicat

Windows 2019 Aktivierungs-Tutorial (Office2019)

Zwei Methoden zum Strecken des Hintergrundbilds einer Webseite

So installieren Sie Docker auf Raspberry Pi

Artikel empfehlen

Beispiel für die Einrichtung eines mehrspaltigen Layouts gleicher Höhe mit CSS

Problem beim Abrufen des Root-Passworts in MySQL 5.7 unter Linux (getestet und verfügbar)

Das native VIDEO-Tag der HTML-Seite verbirgt die Download-Button-Funktion

MySQL fügt automatisch Millionen simulierter Datenoperationscodes ein

Den Linux-Kernel erkunden: Die Geheimnisse von Kconfig

Die Verwendung von setState in React und die Verwendung von synchron und asynchron

Tutorial zu HTML-Tabellen-Tags (12): Rahmenstil-Attribut FRAME

JavaScript-Closures erklärt

Erfahren Sie, wie Sie den Zabbix-Dienst auf Saltstack bereitstellen

JS Cross-Domain-Lösung React-Konfiguration Reverse-Proxy

Detaillierte Erklärung der Funktionsweise von Nginx

Lösung für mehrere 302-Antworten im Nginx-Proxy (Nginx Follow 302)

Detaillierte Erläuterung der MySQL-Sicherungs- und Wiederherstellungspraxis von mysqlbackup

Warum Google und Facebook Docker nicht verwenden

Detaillierte Erklärung zur Verwendung von umask unter Linux