{"id":13760206,"url":"https://github.com/silvinor/bootstrap-dark-5","last_synced_at":"2025-09-26T22:31:44.889Z","repository":{"id":38256045,"uuid":"330077617","full_name":"vinorodrigues/bootstrap-dark-5","owner":"vinorodrigues","description":"The Ancillary Guide to Dark Mode and Bootstrap 5 - A continuation of the v4 Dark Mode POC.","archived":true,"fork":false,"pushed_at":"2023-04-28T08:07:59.000Z","size":5564,"stargazers_count":355,"open_issues_count":3,"forks_count":47,"subscribers_count":7,"default_branch":"main","last_synced_at":"2024-09-21T05:04:37.396Z","etag":null,"topics":["add-on","bootstrap","bootstrap-dark","bootstrap5","color","color-scheme","concept","css","dark","dark-mode","framework","front-end","mobile-first","prefers-color-scheme","proof","proof-of-concept","responsive","scss","web"],"latest_commit_sha":null,"homepage":"http://vinorodrigues.github.io/bootstrap-dark-5","language":"SCSS","has_issues":false,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/vinorodrigues.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"patreon":"vinorodrigues","custom":["https://paypal.me/vinorodrigues"]}},"created_at":"2021-01-16T03:43:49.000Z","updated_at":"2024-08-23T15:37:15.000Z","dependencies_parsed_at":"2024-06-18T14:05:58.305Z","dependency_job_id":"507b5642-9691-4c3d-8c08-be5ad229bd43","html_url":"https://github.com/vinorodrigues/bootstrap-dark-5","commit_stats":{"total_commits":247,"total_committers":8,"mean_commits":30.875,"dds":"0.12145748987854255","last_synced_commit":"d15dec249cfcc923699838d7da23479c1412474a"},"previous_names":[],"tags_count":13,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vinorodrigues%2Fbootstrap-dark-5","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vinorodrigues%2Fbootstrap-dark-5/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vinorodrigues%2Fbootstrap-dark-5/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vinorodrigues%2Fbootstrap-dark-5/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/vinorodrigues","download_url":"https://codeload.github.com/vinorodrigues/bootstrap-dark-5/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":219871825,"owners_count":16554457,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["add-on","bootstrap","bootstrap-dark","bootstrap5","color","color-scheme","concept","css","dark","dark-mode","framework","front-end","mobile-first","prefers-color-scheme","proof","proof-of-concept","responsive","scss","web"],"created_at":"2024-08-03T13:01:05.368Z","updated_at":"2025-09-26T22:31:44.884Z","avatar_url":"https://github.com/vinorodrigues.png","language":"SCSS","readme":"# The Ancillary Guide to Dark Mode and Bootstrap 5\r\n**A continuation of the v4 Dark Mode POC, but this time for v5**\r\n\r\n\u003e This is a follow up to [The Definitive Guide to Dark Mode and Bootstrap 4](https://silvinor.github.io/bootstrap-dark) body of work, and pertains to [Bootstrap 5](https://getbootstrap.com) *([Github repo.](https://github.com/twbs/bootstrap))*.\r\n\r\n\u003e If you're after the same work for [Bootstrap 4](https://getbootstrap.com/docs/4.5/) please visit the [silvinor/bootstrap-dark](https://github.com/silvinor/bootstrap-dark) repo.\r\n\r\n-----------------------------------------------------------------------------\r\n\r\n\u003e ### ![NOTE:](https://img.shields.io/badge/NOTE%3A-069)  \u0026nbsp; \u0026#9888; An important note on status of this project \u0026#9888;:\r\n\u003e\r\n\u003e Development efforts back at Bootstrap 5's core repository have reached **v5.3** - that now includes \"color modes\" and within that an implementation of dark mode.  See:\r\n\u003e\r\n\u003e https://getbootstrap.com/docs/5.3/customize/color-modes/\r\n\u003e\r\n\u003e This, thus, makes this project redundant and will be retired, leaving its code and repository here for the benefit of education.\r\n\r\n-----------------------------------------------------------------------------\r\n\r\n\r\n## About\r\n\r\nThis code will make little sense if you don't read\r\n[The Definitive Guide to Dark Mode and Bootstrap 4](https://silvinor.github.io/bootstrap-dark) first.\r\n\r\n\r\n## What do you get?\r\n\r\nThe code compiles the four methods *(and variants - **six in total**)* of the original body of work, but compiled for and sourcing **Bootstrap 5**.  These are:\r\n\r\n### Method 1\r\n\r\n\u003csmall\u003e*([link to original](https://github.com/silvinor/bootstrap-dark/blob/master/README.md#method-1))*\u003c/small\u003e\r\n\r\n  *  **`bootstrap-night`**: This is simply a dark bootstrap theme.  It can however be used with the Bootstrap core CSS to deliver a 2-file dark mode functionality.\r\n\r\n### Method 2\r\n\r\n\u003csmall\u003e*([link to original](https://github.com/silvinor/bootstrap-dark/blob/master/README.md#method-2))*\u003c/small\u003e\r\n\r\n  * **`bootstrap-nightfall`**: This is simply the \"color only\" CSS of all the  components of Bootstrap core, but dark, and is intended to be used as an add-on.  It can also, with a simple media query, drive automatic dark mode switching.\r\n\r\n### Method 3\r\n\r\n\u003csmall\u003e*([link to original](https://github.com/silvinor/bootstrap-dark/blob/master/README.md#method-3))*\u003c/small\u003e\r\n\r\n  * **`bootstrap-nightshade`**: This is a modification of the Bootstrap core and adds dark color CSS for all the components, but dark, nested in a `html.dark` class wrapper.  By itself it cannot offer dark mode switching, but add the included `darkmode.js` library and you have an interactive dark mode switching variant of Bootstrap with built in ***\"toggle\"*** button support.\r\n\r\n  * **`bootstrap-blackbox`**: ![New](https://img.shields.io/badge/NEW-red) This variant is essentially the same as the \"nightshade\" variant, but instead of using a HTML tag class, it uses a HTML tag data attribute; `data-bs-color-scheme`.  The same `darkmode.js` library drives this one, all you need to do is add the data attribute to your HTML tag.\r\n\r\n### Method 4\r\n\r\n\u003csmall\u003e*([link to original](https://github.com/silvinor/bootstrap-dark/blob/master/README.md#method-4))*\u003c/small\u003e\r\n\r\n  * **`bootstrap-dark`**: This is the recommended method; one CSS with both light and dark themes, toggle-able only with the OS or browser `prefers-color-scheme` media query.\r\n\r\n  * **`bootstrap-unlit`**: This variant is essentially the same as the \"dark\" variant, but with \"dark\" scheme as the primary/fallback and \"light\" as optioned in color scheme.\r\n\r\n## Get started\r\n\r\n| **1.** `bootstrap-night` | **2.** `bootstrap-nightfall` | **3.** `bootstrap-nightshade` | **3b.** `bootstrap-blackbox` | **4.** `bootstrap-dark` | **4b.** `bootstrap-unlit` |\r\n|:---:|:---:|:---:|:---:|:---:|:---:|\r\n| [Quick Start Guide](docs/bootstrap-night.md) | [Quick Start Guide](docs/bootstrap-nightfall.md) | [Quick Start Guide](docs/bootstrap-nightshade.md) | [Quick Start Guide](docs/bootstrap-blackbox.md) | [Quick Start Guide](docs/bootstrap-dark.md) | [Quick Start Guide](docs/bootstrap-unlit.md) |\r\n| | | [`darkmode.js` Reference](docs/darkmode.js.md) | [`darkmode.js` Reference](docs/darkmode.js.md) | | |\r\n| [See Example](https://silvinor.github.io/bootstrap-dark-5/examples/cheatsheet-night.html) | | [See Example](https://silvinor.github.io/bootstrap-dark-5/examples/cheatsheet-nightshade.html) | | [See Example](https://silvinor.github.io/bootstrap-dark-5/examples/cheatsheet-dark.html) | |\r\n\r\n## The Proof is in the Pudding\r\n\r\nSome of the test pages have been set up at [silvinor.github.io/bootstrap-dark-5](https://silvinor.github.io/bootstrap-dark-5/)\r\n\r\n\r\n## Can you use this?\r\n\r\nYes.\r\n\r\n\u003e Licence is MIT.  *i.e. use as you whish as long as you credit the original authors and leave the copyright in situ.*\r\n\r\nIf you're a theme builder or want to use its principles in your own project you'll need to have\r\n[Git](https://help.github.com/articles/set-up-git) and [Node](https://nodejs.org/) installed.\r\n\r\n1. Fork or download the repository: `git clone https://github.com/silvinor/bootstrap-dark-5.git`\r\n2. Install Node dependencies: `npm install`  *(See note below.)*\r\n3. Modify `_variables.scss` and `_variables-alt.scss` in the `scss` sub-folder.\r\n4. Run `npm run build` to build your theme.\r\n5. The compiled code will be in the `dist` folder.\r\n\r\n\u003e ![NOTE:](https://img.shields.io/badge/NOTE%3A-069) The build system is based on [NPM Scripts](https://docs.npmjs.com/cli/v6/using-npm/scripts). Most of the build tools _(NPM modules)_ will need to be installed as *\"global\"* to ensure the scripts are executable from the command line.\r\n\r\n```bash\r\nnpm 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\r\n```\r\n\r\n#### Note 1:\r\n\r\nThis code is just a rehash of Bootstrap 5 core code to add \"dark mode\" functionality and is declared as a \"Proof of Concept\" *(PoC)* - that means it's not intended as a production source, but merely an exercise to prove that dark-mode is attainable via various methods, i.e. it is an educative piece.  It also means that it's author *(Silvino Rodrigues)* is not compelled to support it.\r\n\r\n#### Note 2:\r\n\r\nThis project will ***not*** compile with Node-Sass.  Refer to the original Bootstrap 5 docs, especially here (https://getbootstrap.com/docs/5.1/getting-started/build-tools/#sass), and you'll note that they have deprecated the use of Node-Sass in favour of Dart-Sass.\r\n\r\nThey in turn cite this (https://sass-lang.com/blog/libsass-is-deprecated) article wherein the Sass curators state they will no longer support LibSass, that Node-Sass is dependant on.\r\n\r\n\r\n### NPM\r\n\r\n[![](https://img.shields.io/npm/v/bootstrap-dark-5)](http://npmjs.com/package/bootstrap-dark-5)\r\n\r\nDevelopers can include the `scss` and `dist` folders into your own project with:\r\n\r\n`npm install bootstrap-dark-5`\r\n\r\n\r\n### CDN\r\n\r\n[![](https://data.jsdelivr.com/v1/package/npm/bootstrap-dark-5/badge?style=rounded)](https://www.jsdelivr.com/package/npm/bootstrap-dark-5)\r\n\r\nYou can also hotlink the theme via CDN with [jsdelivr.com](https://www.jsdelivr.com).\r\n\r\nYou can access the theme CSS file from the GitHub release:\r\n\r\n* **`bootstrap-dark`** - the @media `perfers-color-scheme` variant\r\n  * Production / minified variant:\r\n    * [`https://cdn.jsdelivr.net/npm/bootstrap-dark-5@1.1.3/dist/css/bootstrap-dark.min.css`](https://cdn.jsdelivr.net/npm/bootstrap-dark-5@1.1.3/dist/css/bootstrap-dark.min.css)\r\n  * Development / Debug variant:\r\n    * [`https://cdn.jsdelivr.net/npm/bootstrap-dark-5@1.1.3/dist/css/bootstrap-dark.css`](https://cdn.jsdelivr.net/npm/bootstrap-dark-5@1.1.3/dist/css/bootstrap-dark.css)\r\n  * Also, read the [Quick Start Guide](docs/bootstrap-dark.md).\r\n\r\n* **`bootstrap-nightshade`** - the `html.dark` css class + JS library variant\r\n  * Production / minified variants:\r\n    * [`https://cdn.jsdelivr.net/npm/bootstrap-dark-5@1.1.3/dist/css/bootstrap-nightshade.min.css`](https://cdn.jsdelivr.net/npm/bootstrap-dark-5@1.1.3/dist/css/bootstrap-nightshade.min.css)\r\n    * [`https://cdn.jsdelivr.net/npm/bootstrap-dark-5@1.1.3/dist/js/darkmode.min.js`](https://cdn.jsdelivr.net/npm/bootstrap-dark-5@1.1.3/dist/js/darkmode.min.js)\r\n  * Development / Debug variants:\r\n    * [`https://cdn.jsdelivr.net/npm/bootstrap-dark-5@1.1.3/dist/css/bootstrap-nightshade.css`](https://cdn.jsdelivr.net/npm/bootstrap-dark-5@1.1.3/dist/css/bootstrap-nightshade.css)\r\n    * [`https://cdn.jsdelivr.net/npm/bootstrap-dark-5@1.1.3/dist/js/darkmode.js`](https://cdn.jsdelivr.net/npm/bootstrap-dark-5@1.1.3/dist/js/darkmode.js)\r\n  * Also, read the [Quick Start Guide](docs/bootstrap-nightshade.md) and the [`darkmode.js` Reference](docs/darkmode.js.md).\r\n\r\n* **`bootstrap-night`** - that dark theme only variant\r\n  * Production / minified variant:\r\n    * [`https://cdn.jsdelivr.net/npm/bootstrap-dark-5@1.1.3/dist/css/bootstrap-night.min.css`](https://cdn.jsdelivr.net/npm/bootstrap-dark-5@1.1.3/dist/css/bootstrap-night.min.css)\r\n  * Development / Debug variant:\r\n    * [`https://cdn.jsdelivr.net/npm/bootstrap-dark-5@1.1.3/dist/css/bootstrap-night.css`](https://cdn.jsdelivr.net/npm/bootstrap-dark-5@1.1.3/dist/css/bootstrap-night.css)\r\n  * Also, read the [Quick Start Guide](docs/bootstrap-night.md).\r\n\r\n* Source etc. are [here](https://cdn.jsdelivr.net/gh/silvinor/bootstrap-dark-5/), but I recommend using [GitHub](https://github.com/silvinor/bootstrap-dark-5).\r\n\r\n\r\n## Further Reading\r\n\r\n**Must reads** for all developers wanting to write for dark mode:\r\n\r\n* ...obviously, the original content: [The Definitive Guide to Dark Mode and Bootstrap 4](https://silvinor.github.io/bootstrap-dark#readme)\r\n\r\n* web.dev, Thomas Steiner ([@tomayac](https://github.com/tomayac)), Jun 27, 2019 *(updated Jun 9, 2020)*, \"[prefers-color-scheme: Hello darkness, my old friend](https://web.dev/prefers-color-scheme/)\"\r\n\r\n* web.dev, Thomas Steiner ([@tomayac](https://github.com/tomayac)), Apr 8, 2020 *(updated Jun 16, 2020)*, \"[Improved dark mode default styling with the color-scheme CSS property and the corresponding meta tag](https://web.dev/color-scheme/)\"\r\n\r\n* CSS-TRICKS, Adhuham, Sep 9, 2020 \"[A Complete Guide to Dark Mode on the Web](https://css-tricks.com/a-complete-guide-to-dark-mode-on-the-web/)\"\r\n\r\n* My bit about [images and other considerations](https://silvinor.github.io/bootstrap-dark/readme.html#but-thats-not-enough) in my \"[.. Definitive Guide ..](https://silvinor.github.io/bootstrap-dark)\" piece.\r\n\r\n\r\n## Feedback\r\n\r\nIf you have [useful feedback](https://alearningaday.blog/2020/08/04/useful-feedback/) drop me an \"Issue\" on the [GitHub Issues](https://github.com/silvinor/bootstrap-dark-5/issues) page.\r\n\r\n\r\n---\r\n\r\n\u003cp align=\"center\" style=\"display:block;font-size:75%;text-align:center\"\u003e\u0026copy; 2022\u003c/p\u003e\r\n","funding_links":["https://patreon.com/vinorodrigues","https://paypal.me/vinorodrigues"],"categories":["SCSS"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsilvinor%2Fbootstrap-dark-5","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsilvinor%2Fbootstrap-dark-5","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsilvinor%2Fbootstrap-dark-5/lists"}