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)

Beispielcode für CSS-Layout an beiden Enden (unter Verwendung des negativen Rands des übergeordneten Elements)

Detaillierte Erklärung zur Implementierung der Anmeldefunktion durch Kombination von React mit der Formularkomponente von Antd

Artikel

Geplante vollständige MySQL-Datenbanksicherung

Artikel

So zeigen Sie den Kennwortablauf unter Linux an und konfigurieren ihn

Artikel

Detaillierte Erklärung zum einfachen Wechseln von CSS-Themen

Beispielcode für CSS-Layout an beiden Enden (unter Verwendung des negativen Rands des übergeordneten Elements)

Methodenbeispiel zum sicheren Abrufen tiefer Objekte von Object in Js

HTML+CSS zum Erreichen eines Surround-Reflexionsladeeffekts

Zwei Tools zum Teilen des Bildschirms im Linux-Befehlszeilenterminal

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

Detaillierte Erläuterung der Routing-Parameterübergabe und der komponentenübergreifenden Parameterübergabe in Vue

So ändern Sie schnell die Tabellenstruktur einer MySQL-Tabelle

Detaillierte Erklärung zur Implementierung der Anmeldefunktion durch Kombination von React mit der Formularkomponente von Antd

Geplante vollständige MySQL-Datenbanksicherung

So zeigen Sie den Kennwortablauf unter Linux an und konfigurieren ihn

Artikel empfehlen

Detailliertes Tutorial zur Installation von Hbase 2.3.5 auf Vmware + Ubuntu18.04

Detaillierte Erklärung der Verwendung des Bash-Befehls

Einführung in den Unterschied zwischen Verknüpfungssymbol und Symbolcode

Detaillierte Erklärung zum Erkennen und Verhindern von JavaScript-Endlosschleifen

Detaillierte Erklärung zum CSS-Randkollaps

Tutorial zur Installation von MySQL 8.0.11 mit RPM unter Linux (CentOS7)

Detaillierte Erklärung, wie Sie mit CSS einige Pixel Leerraum unter einem Bild freigeben können

Designreferenz Schönes und originelles Blog-Design

Docker stellt Laravel-Anwendung bereit, um Warteschlangen- und Aufgabenplanung zu realisieren

Zusammenfassung der Erfahrungen mit der Entwicklung von HTML+CSS-Projekten (empfohlen)

Vue.js implementiert den Code zum Klicken auf das Symbol zum Vergrößern und Verlassen

Beispiel für eine CSS3-Tab-Animation mit dynamischem Hintergrundwechseleffekt

Lassen Sie uns über das Problem der Parameterübergabe an React onClick sprechen

Detaillierte Erklärung der Concat-bezogenen Funktionen in MySQL

Installationsmethode für mysql-8.0.17-winx64 unter Windows 10