Page d'accueil>Ressources de création de sites Web>Données du site Web
Télécharger

Le guide auxiliaire du mode sombre et du bootstrap 5

Une continuation du V4 Dark Mode POC, mais cette fois pour V5

Ceci est un suivi du Guide définitif du mode Dark et du corps de Bootstrap 4, et se rapporte à Bootstrap 5 (Github Repo.) .

Si vous recherchez le même travail pour Bootstrap 4, veuillez visiter le référentiel Vinorodrigues / bootstrap-dark.

Une note importante sur l'état de ce projet:

Les efforts de développement du référentiel de base de Bootstrap 5 ont atteint la v5.3 - qui comprend désormais des "modes de couleur" et à l'intérieur de cela une implémentation du mode sombre. Voir:

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

Cela rend ainsi ce projet redondant et sera retiré, laissant son code et son référentiel ici au profit de l'éducation.

À propos

Ce code aura peu de sens si vous ne lisez pas d'abord le guide définitif du mode sombre et du bootstrap 4.

Qu'obtenez-vous?

Le code compile les quatre méthodes (et variantes - six au total ) du corps d'origine d'origine, mais compilé pour et l'approvisionnement en bootstrap 5 . Ce sont:

Méthode 1

(lien vers l'original)

  • bootstrap-night : Il s'agit simplement d'un thème bootstrap sombre. Il peut cependant être utilisé avec le CSS du noyau bootstrap pour fournir une fonctionnalité en mode sombre à 2 fichiers.

Méthode 2

(lien vers l'original)

  • bootstrap-nightfall : Il s'agit simplement du CSS "Couleur uniquement" de tous les composants du noyau bootstrap, mais sombre, et est destiné à être utilisé comme complément. Il peut également, avec une simple requête multimédia, entraîner une commutation automatique en mode sombre.

Méthode 3

(lien vers l'original)

  • bootstrap-nightshade : Il s'agit d'une modification du noyau bootstrap et ajoute des CS de couleur foncée pour tous les composants, mais sombres, imbriqués dans un wrapper de classe html.dark . En soi, il ne peut pas offrir une commutation en mode noir, mais ajoutez la bibliothèque darkmode.js incluse et vous avez une variante de commutation de mode foncé interactif de Bootstrap avec prise en charge du bouton "Toggle" intégré.

  • bootstrap-blackbox : cette variante est essentiellement la même que la variante "Nightshade", mais au lieu d'utiliser une classe de balise HTML, il utilise un attribut de données de balise HTML; data-bs-color-scheme . La même bibliothèque darkmode.js pilote celle-ci, tout ce que vous avez à faire est d'ajouter l'attribut de données à votre balise HTML.

Méthode 4

(lien vers l'original)

  • bootstrap-dark : Il s'agit de la méthode recommandée; Un CSS avec des thèmes légers et sombres, basculables uniquement avec le système d'exploitation ou le navigateur prefers-color-scheme .

  • bootstrap-unlit : Cette variante est essentiellement la même que la variante "sombre", mais avec le schéma "sombre" que le primaire / secours et la "lumière" comme optionné dans le schéma de couleurs.

Commencer

1. bootstrap-night 2. bootstrap-nightfall 3. bootstrap-nightshade 3B. bootstrap-blackbox 4. bootstrap-dark 4b. bootstrap-unlit
Guide de démarrage rapide Guide de démarrage rapide Guide de démarrage rapide Guide de démarrage rapide Guide de démarrage rapide Guide de démarrage rapide
Référence darkmode.js Référence darkmode.js
Voir l'exemple Voir l'exemple Voir l'exemple

La preuve est dans le pudding

Certaines des pages de test ont été créées sur Vinorodrigues.github.io/bootstrap-dark-5

Pouvez-vous l'utiliser?

Oui.

La licence est le MIT. c'est-à-dire que vous utilisez aussi longtemps que vous créez les auteurs originaux et laissez le droit d'auteur in situ.

Si vous êtes un constructeur de thème ou si vous souhaitez utiliser ses principes dans votre propre projet, vous devrez installer Git et Node.

  1. Fork ou télécharger le référentiel: git clone https://github.com/vinorodrigues/bootstrap-dark-5.git
  2. Installer les dépendances du nœud: npm install (voir la note ci-dessous.)
  3. Modifier _variables.scss et _variables-alt.scss dans le sous-fichier scss .
  4. Exécutez npm run build pour construire votre thème.
  5. Le code compilé sera dans le dossier dist .

Le système de construction est basé sur les scripts NPM. La plupart des outils de construction (modules NPM) devront être installés en tant que "global" pour s'assurer que les scripts sont exécutables à partir de la ligne de commande. 

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

Remarque 1:

Ce code n'est qu'une nouvelle fois le code de base de bootstrap 5 pour ajouter des fonctionnalités de "mode sombre" et est déclaré comme une "preuve de concept" (POC) - cela signifie qu'il n'est pas conçu comme une source de production, mais simplement un exercice pour prouver que le mode noir est accessible via diverses méthodes, c'est-à-dire qu'il s'agit d'un morceau éducatif. Cela signifie également que son auteur (Vino Rodrigues) n'est pas obligé de le soutenir.

Remarque 2:

Ce projet ne se compilera pas avec Node-Sass. Reportez-vous aux documents Bootstrap 5 d'origine, en particulier ici (https://getbootstrap.com/docs/5.1/getting-started/build-tools/#sass), et vous noteras qu'ils ont déprécié l'utilisation du nœud-sass en faveur de Dart-Sass.

À leur tour, ils citent cet article (https://sass-lang.com/blog/libsass-is-deprecated) dans lequel les conservateurs SASS indiquent qu'ils ne prendront plus en charge Libsass, dont le nœud-sass dépend.

NPM

Les développeurs peuvent inclure les dossiers scss et dist dans votre propre projet avec:

npm install bootstrap-dark-5

Monnaie

Vous pouvez également cliquer sur le thème via CDN avec jsdelivr.com.

Vous pouvez accéder au fichier CSS du thème à partir de la version github:

  • bootstrap-dark - La variante @Media perfers-color-scheme

    • Production / variante minifiée:
    • Variante de développement / débogage:
    • Lisez également le guide de démarrage rapide.

  • bootstrap-nightshade - La variante de la bibliothèque html.dark CSS + JS

    • Production / variantes minifiées:
    • Variantes de développement / débogage:
    • Lisez également le guide de démarrage rapide et la référence darkmode.js .

  • bootstrap-night - cette variante de thème sombre uniquement

    • Production / variante minifiée:
    • Variante de développement / débogage:
    • Lisez également le guide de démarrage rapide.

  • Source, etc. sont là, mais je recommande d'utiliser GitHub.

Dès la lecture

Doit lire pour tous les développeurs qui souhaitent écrire pour le mode sombre:

  • ... Évidemment, le contenu original: le guide définitif du mode sombre et de l'amorçage 4

  • web.dev, Thomas Steiner (@tomayac), 27 juin 2019 (mis à jour le 9 juin 2020) , "Prefers-Color-Scheme: Hello Darkness, mon vieil ami"

  • web.dev, Thomas Steiner (@tomayac), 8 avril 2020 (mis à jour le 16 juin 2020) , "style par défaut amélioré en mode sombre avec la propriété COLD-Scheme CSS et la balise de méta correspondante"

  • CSS-Tricks, Adhuham, 9 sept. 2020 "Un guide complet du mode obscur sur le Web"

  • Mon morceau sur les images et autres considérations dans mon ".. Guide définitif .." pièce.

Retour

Si vous avez des commentaires utiles, écrivez-moi un "problème" sur la page GitHub Issues.

© 2022

Développer
Informations supplémentaires
Applications connexes
Recommandé pour vous
Actualités connexes Tout