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)

MySQL-Deadlock-Routine: inkonsistente Batch-Einfügereihenfolge unter eindeutigem Index

Detaillierte Erklärung zum einfachen Wechseln von CSS-Themen

MySQL-Deadlock-Routine: inkonsistente Batch-Einfügereihenfolge unter eindeutigem Index

So behandeln Sie einen Überlauf numerischer MySQL-Typen

Beispielcode zur Implementierung der WeChat-Kontoaufteilung mit Nodejs

Detaillierte Schritte zum Hinzufügen von Hosts, die Sie in Zabbix überwachen müssen

Vorgänge der Kommunikation zwischen Docker-Containern und der externen Netzwerkkommunikation

Detaillierte Erklärung des Integer-Datentyps tinyint in MySQL

So implementieren Sie eine geplante Sicherung von MySQL unter Linux

HTML-Bildlaufleisten-Textbereichsattributeinstellung

Implementieren Sie eine einfache Suchmaschine auf Basis von MySQL

Zusammenfassung der Unterschiede und Verwendung von Plugins und Komponenten in Vue

Artikel empfehlen

MySQL verwendet SQL-Anweisungen zum Ändern von Tabellennamen

Zusammenfassung der Unterschiede zwischen den Methoden find() und filter() in JavaScript

CSS3 implementiert fehlendes Eckrechteck, gefaltetes Eckrechteck und fehlenden Eckrand

3 verschiedene Möglichkeiten zum Löschen der Optionsoptionen im Auswahltag

Zwei Möglichkeiten, den 30-Sekunden-Werbecode aus dem Youku-Video zu entfernen

Codebeispiele für allgemeine Vorgänge bei der Docker-Image-Verwaltung

MySQL-Datenbankterminal – allgemeine Befehlscodes für Vorgänge

Detaillierte Erläuterung der vorkompilierten CSS-Sprachen und ihrer Unterschiede

So erstellen Sie ein neues Image basierend auf einem vorhandenen Image in Docker

Lösen Sie das Problem der Groß- und Kleinschreibung der Linux+Apache-Server-URL

React implementiert Paging-Effekt

NodeJS realisiert die Bildtextsegmentierung

Detaillierte Erklärung des Unterschieds zwischen Tags und Elementen in HTML

Detaillierte Erläuterung des Ausführungsprozesses von MySQL-Abfrageanweisungen

So importieren Sie Vue-Komponenten automatisch bei Bedarf