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)

Ausführliches Tutorial zu Installations- und Upgradeproblemen bei MySQL 5.7.30

Detaillierte Erklärung zum einfachen Wechseln von CSS-Themen

Ausführliches Tutorial zu Installations- und Upgradeproblemen bei MySQL 5.7.30

So bereinigen Sie Ihre Docker-Daten vollständig

Detailliertes grafisches Tutorial zur Installation und Deinstallation von Tomcat8 unter Linux

Anweisungen zur Verwendung des Meta-Viewport-Tags (Zoom-Steuerung beim mobilen Surfen)

Der gesamte Prozess der Installation und Konfiguration von Harbor1.7 auf CentOS7.5

Bild-Scrolling-Effekt mit CSS3 erstellt

Detaillierte Erklärung zur Verwendung der Funktion find_in_set() in MySQL

HTML+CSS+JavaScript realisiert die Anzeige des ausgewählten Effekts nach der Mausbewegung

Verwenden Sie CSS3-Hintergrundsteuerungseigenschaften + Farbübergang, um einen Farbverlaufseffekt zu erzielen

Die automatische Inkrementierung der Primärschlüssel-ID von MySQL wird auf diese Weise nicht verarbeitet

Artikel empfehlen

Beschreiben Sie kurz den Unterschied zwischen Redis und MySQL

So unterstützen Sie Webdings-Schriftarten in Firefox

vue verwendet Ele.me UI, um die Filterfunktion von Teambition zu imitieren

Vergleich von CSS-Schatteneffekten: Schlagschatten und Box-Schatten

Echarts-Tutorial zur Implementierung von Baumdiagrammen

CSS erzielt einen proportionalen Anzeigeeffekt eines Elements mit fester Höhe und Breite

Detaillierte Schritte zur Installation von MYSQL8.0 auf CentOS7.6

Better-Scroll realisiert den Effekt der Verknüpfung von Menü und Inhalt

Detaillierte Erklärung der Rolle von Explain in MySQL

Zusammenfassung der drei Regeln für die React-Statusverwaltung

Lösung für dieselbe IP nach dem Klonen der virtuellen Ubuntu 18-Maschine

So erstellen Sie schnell eine LNMP-Umgebung mit Docker (neueste Version)

Detaillierte Erklärung, wie NGINX PV, UV und unabhängige IP der Website zählt

Einführung in die UFW-Firewall unter Linux

Verwenden Sie Vue, um die Funktion für handschriftliche Signaturen zu implementieren