Descargar bootstrap dark 5 - Descargar el código fuente de bootstrap dark 5

bootstrap dark 5

Datos del sitio web

v1.1.3 Release

Descargar

La guía auxiliar del modo oscuro y la bootstrap 5

Una continuación del V4 Dark Mode POC, pero esta vez para V5

Este es un seguimiento de la guía definitiva del modo oscuro y el cuerpo de trabajo de Bootstrap 4, y se refiere a Bootstrap 5 (Repo de GitHub) .

Si buscas el mismo trabajo para Bootstrap 4, visite el repositorio de Vinorodrigues/Bootstrap-Dark.

Una nota importante sobre el estado de este proyecto:
Los esfuerzos de desarrollo en el repositorio central de Bootstrap 5 han alcanzado V5.3 , que ahora incluye "modos de color" y dentro de eso una implementación del modo oscuro. Ver:
https://getbootstrap.com/docs/5.3/customize/color-modes/
Esto, por lo tanto, hace que este proyecto sea redundante y se retirará, dejando su código y repositorio aquí en beneficio de la educación.

Acerca de

Este código tendrá poco sentido si no lee la guía definitiva para el modo oscuro y el bootstrap 4 primero.

¿Qué obtienes?

El código compila los cuatro métodos (y las variantes: seis en total ) del cuerpo de trabajo original, pero compilados y abastecimiento de bootstrap 5 . Estos son:

Método 1

(enlace al original)

bootstrap-night : este es simplemente un tema de bootstrap oscuro. Sin embargo, se puede usar con el CSS de núcleo Bootstrap para ofrecer una funcionalidad de modo oscuro de 2 archivos.

Método 2

(enlace al original)

bootstrap-nightfall : este es simplemente el CSS "solo color" de todos los componentes del núcleo de bote de arranque, pero oscuro, y está destinado a usarse como un complemento. También puede, con una simple consulta de medios, un cambio de modo de modo oscuro automático.

Método 3

(enlace al original)

bootstrap-nightshade : esta es una modificación del núcleo de bootstrap y agrega CSS de color oscuro para todos los componentes, pero oscuros, anidados en un envoltorio de clase html.dark . Por sí solo, no puede ofrecer conmutación de modo oscuro, pero agregue la biblioteca darkmode.js incluida y tendrá una variante interactiva de conmutación de modo oscuro de Bootstrap con soporte de botón "Toggle" incorporado.
bootstrap-blackbox : esta variante es esencialmente la misma que la variante "Nightshade", pero en lugar de usar una clase de etiqueta HTML, utiliza un atributo de datos de etiqueta HTML; data-bs-color-scheme . La misma biblioteca darkmode.js impulsa esta, todo lo que necesita hacer es agregar el atributo de datos a su etiqueta HTML.

Método 4

(enlace al original)

bootstrap-dark : este es el método recomendado; Un CSS con temas claros y oscuros, alternar solo con el sistema operativo o el navegador prefers-color-scheme .
bootstrap-unlit : esta variante es esencialmente la misma que la variante "oscura", pero con esquema "oscuro" como el primario/altálico y la "luz" como se opta en el esquema de color.

Empezar

1. `bootstrap-night`	2. `bootstrap-nightfall`	3. `bootstrap-nightshade`	3B. `bootstrap-blackbox`	4. `bootstrap-dark`	4B. `bootstrap-unlit`
Guía de inicio rápido	Guía de inicio rápido	Guía de inicio rápido	Guía de inicio rápido	Guía de inicio rápido	Guía de inicio rápido
		Referencia de `darkmode.js`	Referencia de `darkmode.js`
Ver ejemplo		Ver ejemplo		Ver ejemplo

La prueba está en el pudín

Algunas de las páginas de prueba se han establecido en Vinorodrigues.github.io/Bootstrap-Dark-5

¿Puedes usar esto?

Sí.

La licencia es MIT. es decir, use mientras lhezca siempre que le acredite a los autores originales y deje los derechos de autor in situ.

Si usted es un constructor de temas o desea utilizar sus principios en su propio proyecto, deberá tener instalado Git y Node.

Bifurca o descargue el repositorio: git clone https://github.com/vinorodrigues/bootstrap-dark-5.git
Instalar dependencias del nodo: npm install (consulte la nota a continuación).
Modifique _variables.scss y _variables-alt.scss en el subcarpelo scss .
Ejecute npm run build para construir su tema.
El código compilado estará en la carpeta dist .

El sistema de compilación se basa en scripts NPM. La mayoría de las herramientas de compilación (módulos NPM) deberán instalarse como "globales" para garantizar que los scripts sean ejecutables desde la línea de comandos.

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

Nota 1:

Este código es solo una repetición del código de núcleo de Bootstrap 5 para agregar la funcionalidad del "modo oscuro" y se declara como una "prueba de concepto" (POC) , lo que significa que no pretende ser una fuente de producción, sino simplemente un ejercicio para demostrar que el modo oscuro es posible a través de varios métodos, es decir, es una pieza educativa. También significa que su autor (vino Rodrigues) no está obligado a apoyarlo.

Nota 2:

Este proyecto no se compilará con Node-Sass. Consulte los documentos originales de Bootstrap 5, especialmente aquí (https://getbootstrap.com/docs/5.1/getting-started/build-tools/#sass), y notará que han desaprobado el uso de nodo-sass a favor de dart-sass.

A su vez citan este artículo (https://sass-lang.com/blog/libsass-is-epeced) en el que los curadores de Sass indican que ya no admitirán libsass, de la que depende del nodo-sass depende.

Npm

Los desarrolladores pueden incluir las carpetas scss y dist en su propio proyecto con:

npm install bootstrap-dark-5

CDN

También puede contener el tema a través de CDN con jsdelivr.com.

Puede acceder al archivo CSS del tema desde la versión de GitHub:

bootstrap-dark : la variante @Media perfers-color-scheme
- Producción / variante minificada:
  - https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap-dark.min.css
- Variante de desarrollo / depuración:
  - https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap-dark.css
- Además, lea la guía de inicio rápido.
bootstrap-nightshade - La variante de la biblioteca html.dark CSS + JS
- Producción / variantes minificadas:
  - https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap-nightshade.min.css
  - https://cdn.jsdelivr.net/npm/[email protected]/dist/js/darkmode.min.js
- Variantes de desarrollo / depuración:
  - https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap-nightshade.css
  - https://cdn.jsdelivr.net/npm/[email protected]/dist/js/darkmode.js
- Además, lea la guía de inicio rápido y la referencia darkmode.js .
bootstrap-night - esa variante de tema oscura solamente
- Producción / variante minificada:
  - https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap-night.min.css
- Variante de desarrollo / depuración:
  - https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap-night.css
- Además, lea la guía de inicio rápido.
La fuente, etc. está aquí, pero recomiendo usar GitHub.

Lectura adicional

Debe leer para todos los desarrolladores que desean escribir para el modo oscuro:

... obviamente, el contenido original: la guía definitiva del modo oscuro y la bootstrap 4
Web.dev, Thomas Steiner (@Tomayac), 27 de junio de 2019 (actualizado el 9 de junio de 2020) , "Prefiere color-esquema: hola oscuridad, mi viejo amigo"
Web.dev, Thomas Steiner (@Tomayac), 8 de abril de 2020 (actualizado el 16 de junio de 2020) , "Modo oscuro mejorado de estilo predeterminado con la propiedad CSS de Scheme Color y la metaetiqueta correspondiente"
CSS-Tricks, Adhuham, 9 de septiembre de 2020 "Una guía completa para el modo oscuro en la web"
Mi parte sobre las imágenes y otras consideraciones en mi pieza ".. Guía definitiva ...".