Stylesheet und Skripte zur Implementierung des Dark Mode mit Bootstrap 4

Blog

Stylesheet und Skripte zur Implementierung des Dark Mode mit Bootstrap 4

Stylesheet und Skripte zur Implementierung des Dark Mode mit Bootstrap 4

Bootstrap-Dunkelmodus

Dieses Projekt stellt ein Stylesheet und zwei Skripte bereit, mit denen Sie den Dark Mode auf Ihrer Website implementieren können. Es wird je nach Benutzerpräferenz initial geladen, kann über einen Schalter umgeschaltet werden und wird über |_+_| gespeichert.

Sie können die Testseite mit allen Standard-Bootstrap-Komponenten in hell und dunkel (danke an juzraai !).

Beachten Sie, dass noch nicht alle Komponenten vollständig unterstützt werden. Meistens können die kontextabhängigen Farbklassen Probleme bereiten.

Reagieren-Native-Fortschritt-Kreis

Wenn Sie Angular verwenden, überprüfen Sie es of-bootstrap-darkmode .

Verwendungszweck

Mit NPM/Garn/PNPM

Installiere das npm-Paket :

localStorage

Fügen Sie das Stylesheet ein, z.B. in |_+_|:

$ npm install bootstrap-darkmode $ yarn add bootstrap-darkmode $ pnpm install bootstrap-darkmode

Über unpkg.com

  1. Fügen Sie den Stylesheet-Link in |_+_| ein. Vergessen Sie nicht, Bootstrap hinzuzufügen.

    styles.scss
  2. Laden Sie das Theme-Skript als erstes in |_+_|.

    @import '~bootstrap-darkmode/darktheme';

Selbst bauen

  1. Klonen Sie dieses Repository.
  2. Führen Sie |_+_| aus.
  3. Suche |_+_| und |_+_| im |_+_| Verzeichnis.
  4. Folgen Sie den Schritten für unpkg.com , aber ersetzen Sie die Links durch die lokalen Pfade, in die Sie die Dateien eingefügt haben.

Aufstellen

Wenn Sie verwenden of-bootstrap-darkmode , können Sie diesen Abschnitt ganz überspringen. Es kommt mit einer eigenen JavaScript-Implementierung, die sehr unterschiedlich verwendet wird.

Thema

So bald wie möglich nach |_+_| die Konfiguration initialisieren und das Theme laden:

Cash-App-Zahlung fehlgeschlagen

Das frühe Laden des Themes verkürzt die Zeit, bis der weiße Standardhintergrund dunkel wird.

Dunkler Schalter

Wenn Sie den Standard-Dark-Switch verwenden möchten, laden Sie das Switch-Skript und fügen Sie das Element mit diesem Code hinzu:

Aufbau

Sie können sich Themenänderungen anhören, indem Sie einen Rückruf mit |_+_| registrieren:

Um zu ändern, wie das Design beibehalten wird, können Sie |_+_| . ändern und |_+_| Funktionen:

Python-Record-Linkage-Toolkit

Download-Details:

Autor: Clashsoft

Quellcode: https://github.com/Clashsoft/bootstrap-darkmode

#javascript #bootstrap