Startseite>Ressourcen zum Erstellen von Websites>Website-Daten
Herunterladen

Die Nebenanleitung zum Dunklen Modus und Bootstrap 5

Eine Fortsetzung des V4 Dark -Modus POC, aber diesmal für V5

Dies ist eine Folge der endgültigen Anleitung zum Dark -Modus und dem Bootstrap 4 -Arbeitsplatz und bezieht sich auf Bootstrap 5 (Github Repo.) .

Wenn Sie nach der gleichen Arbeit für Bootstrap 4 suchen, besuchen Sie bitte das Vinorodrigues/Bootstrap-Dark Repo.

Ein wichtiger Hinweis zum Status dieses Projekts:

Die Entwicklungsbemühungen im Kernrepository von Bootstrap 5 haben V5.3 erreicht - einschließlich "Farbmodi" und innerhalb der Implementierung des Dunklen Modus. Sehen:

https://getbootstrap.com/docs/5.3/customize/color-modes/

Dies macht dieses Projekt somit überflüssig und wird im Ruhestand gezogen, so dass der Code und sein Repository zum Vorteil der Bildung hinterlassen werden.

Um

Dieser Code ist wenig Sinn, wenn Sie die endgültige Anleitung zum Dark -Modus und zuerst nicht mit Bootstrap 4 lesen.

Was bekommst du?

Der Code erstellt die vier Methoden (und Varianten - insgesamt sechs ) des ursprünglichen Arbeitsplatzes, aber für Bootstrap 5 zusammengestellt und beschaffte. Diese sind:

Methode 1

(Link zum Original)

  • bootstrap-night : Dies ist einfach ein dunkles Bootstrap-Thema. Es kann jedoch mit dem Bootstrap Core CSS verwendet werden, um eine 2-file-Dark-Modus-Funktionalität zu liefern.

Methode 2

(Link zum Original)

  • bootstrap-nightfall : Dies ist einfach die "nur Farbe" CSS aller Komponenten des Bootstrap-Kerns, aber dunkel und soll als Add-On verwendet werden. Es kann auch mit einer einfachen Medienabfrage den automatischen Dark -Modus -Schaltungsumschaltungsumschaltungen vorantreiben.

Methode 3

(Link zum Original)

  • bootstrap-nightshade : Dies ist eine Modifikation des Bootstrap-Kerns und fügt dunkle Farb-CSS für alle Komponenten hinzu, aber dunkel, verschachtelt in einer html.dark Klassenverpackung. An sich kann es keinen Dark -Modus -Schalter bieten, sondern fügen Sie die mitgelieferte darkmode.js -Bibliothek hinzu, und Sie haben eine interaktive Dark -Modus -Schaltvariante von Bootstrap mit integriertem "Taste" -Knopfunterstützung.

  • bootstrap-blackbox : Diese Variante entspricht im Wesentlichen der Variante "Nightshade", aber anstatt eine HTML-Tag-Klasse zu verwenden, wird ein HTML-Tag-Datenattribut verwendet. data-bs-color-scheme . Die gleiche Bibliothek darkmode.js fährt dieses an. Sie müssen nur das Datenattribut zu Ihrem HTML -Tag hinzufügen.

Methode 4

(Link zum Original)

  • bootstrap-dark : Dies ist die empfohlene Methode; Ein CSS sowohl mit hellen als auch dunklen Themen, die nur mit dem Betriebssystem oder dem Browser-Medienabfrage prefers-color-scheme Schleif-Wert umschaltet.

  • bootstrap-unlit : Diese Variante ist im Wesentlichen die gleiche wie die "dunkle" Variante, aber mit dem "dunklen" Schema als Primär/Fallback und "Hell", wie im Farbschema ausgewählt.

Fangen an

1. bootstrap-night 2. bootstrap-nightfall 3.. bootstrap-nightshade 3b. bootstrap-blackbox 4. bootstrap-dark 4b. bootstrap-unlit
Schnellstarthandbuch Schnellstarthandbuch Schnellstarthandbuch Schnellstarthandbuch Schnellstarthandbuch Schnellstarthandbuch
darkmode.js Referenz darkmode.js Referenz
Siehe Beispiel Siehe Beispiel Siehe Beispiel

Der Beweis liegt im Pudding

Einige der Testseiten wurden bei Vinorodrigues.github.io/bootstrap-Dark-5 eingerichtet

Kannst du das benutzen?

Ja.

Lizenz ist MIT. dh benutze, wie du weißt, solange du den Originalautoren gut schreibst und das Urheberrecht in situ lassst.

Wenn Sie ein Themenbauer sind oder seine Prinzipien in Ihrem eigenen Projekt verwenden möchten, müssen Sie Git und Knoten installieren lassen.

  1. Fork oder Download das Repository: git clone https://github.com/vinorodrigues/bootstrap-dark-5.git
  2. Installieren Sie Knotenabhängigkeiten: npm install (siehe Hinweis unten.)
  3. Ändern Sie _variables.scss und _variables-alt.scss im scss -Unterordner.
  4. Führen Sie npm run build , um Ihr Thema zu erstellen.
  5. Der kompilierte Code befindet sich im dist -Ordner.

Das Build -System basiert auf NPM -Skripten. Die meisten Build -Tools (NPM -Module) müssen als "global" installiert werden, um sicherzustellen, dass die Skripte aus der Befehlszeile ausführen. 

npm i -g  autoprefixer  documentation browser-sync  clean-css-cli  cross-env  eslint  eslint-config-xo  eslint-plugin-import  eslint-plugin-unicorn  find-unused-sass-variables  imagemin-cli  nodemon  npm-run-all  postcss-cli  rtlcss  sass  stylelint  stylelint-config-twbs-bootstrap  svgo  terser typescript

Anmerkung 1:

Dieser Code ist nur eine Wiederholung von Bootstrap 5 -Kerncode zum Hinzufügen der "Dark -Modus" -Funktionalität und wird als "Proof of Concept" (POC) deklariert - das bedeutet, dass er nicht als Produktionsquelle gedacht ist, sondern lediglich eine Übung, um zu beweisen, dass Dark -Mode über verschiedene Methoden erreichbar ist, dh es ist ein pädagogisches Stück. Es bedeutet auch, dass der Autor (Vino Rodrigues) nicht gezwungen ist, es zu unterstützen.

Anmerkung 2:

Dieses Projekt wird nicht mit Node-Sass kompilieren. Insbesondere hier finden Sie in den Original-Bootstrap 5-Dokumenten (https://getbootstrap.com/docs/5.1/getting-started/build-tools/#sass), und Sie werden feststellen, dass sie die Verwendung von Knoten-Sass zugunsten von Dart-Sass veraltet haben.

Sie wiederum zitieren dies (https://sass-lang.com/blog/libsass-is-reprecated) Artikel, in dem die Sass-Kuratoren feststellen, dass sie Libs nicht mehr unterstützen, und dass Knotensass abhängig ist.

NPM

Entwickler können die scss und dist -Ordner in Ihr eigenes Projekt einbeziehen, wobei:

npm install bootstrap-dark-5

CDN

Sie können das Thema auch über CDN mit jsdelivr.com erhalten.

Sie können über die GitHub -Version auf die CSS -Datei zugreifen:

  • bootstrap-dark -Die Variante der @media perfers-color-scheme

    • Produktions- / Minifikationsvariante:
    • Entwicklungs- / Debug -Variante:
    • Lesen Sie auch den Schnellstarthandbuch.

  • bootstrap-nightshade - Die Variante der CSS -Klasse von html.dark CSS + JS -Bibliothek

    • Produktions- / Minifikationsvarianten:
    • Entwicklungs- / Debug -Varianten:
    • Lesen Sie auch den Quick Start Guide und die Referenz von darkmode.js .

  • bootstrap-night - Das dunkle Thema nur Variante

    • Produktions- / Minifikationsvariante:
    • Entwicklungs- / Debug -Variante:
    • Lesen Sie auch den Schnellstarthandbuch.

  • Quelle usw. sind hier, aber ich empfehle GitHub.

Weitere Lesen

Muss Reads für alle Entwickler, die für den Dark -Modus schreiben möchten:

  • ... Offensichtlich der ursprüngliche Inhalt: die endgültige Anleitung zum Dark -Modus und Bootstrap 4

  • Web.dev, Thomas Steiner (@tomayac), 27. Juni 2019 (aktualisiert 9. Juni 2020) , "bevorzugt die Farbscheme: Hallo Dunkelheit, mein alter Freund".

  • Web.dev, Thomas Steiner (@tomayac), 8. April 2020 (aktualisiert 16. Juni 2020) , "Verbessertes Styling des Dark-Modus mit der CSS-Eigenschaft CSS-Scheme und dem entsprechenden Meta-Tag"

  • CSS-Tricks, Adhuham, 9. September 2020 "Eine vollständige Anleitung zum Dunklen Modus im Web"

  • Mein Stück über Bilder und andere Überlegungen in meinem ".. definitiven Leitfaden .." Stück.

Rückmeldung

Wenn Sie nützliches Feedback haben, geben Sie mir ein "Problem" auf der Seite mit GitHub -Problemen an.

© 2022

Expandieren
Zusätzliche Informationen
Ähnliche Anwendungen
Empfohlen für Sie
Ähnliche Nachrichten Alle