# bs-darkmode > Bootstrap Darkmode is a bootstrap plugin/widget that supports toggling between light and dark theme Latest version **2.0.0** (published 2022-09-11) · MIT license · 0 weekly downloads > **Deprecated.** This package is deprecated. ## Install ```sh npm install bs-darkmode pnpm add bs-darkmode yarn add bs-darkmode bun add bs-darkmode ``` ## Health **Score 10/100 (F)** — status: deprecated. Negative: deprecated. ## Facts | | | |---|---| | Version | 2.0.0 | | Published | 2022-09-11 | | First published | 2022-08-10 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | none | | Module format | CommonJS | | Dependencies | 1 | | Unpacked size | 133.5 KB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 5 | | Author | Pablo Alcaraz Martínez | | Maintainers | palcarazm | | Keywords | bootstrap, dark-theme, dark-mode, darkmode, dark-mode-toggle, bootstrap-dark-mode | ## Links - npm: https://www.npmjs.com/package/bs-darkmode - Repository: https://github.com/palcarazm/bs-darkmode - Homepage: https://palcarazm.github.io/bs-darkmode - Issues: https://github.com/palcarazm/bs-darkmode/issues - Funding: https://github.com/sponsors/palcarazm - npm.io page: https://npm.io/package/bs-darkmode ## Dependencies (1) - [bootstrap](https://npm.io/package/bootstrap.md) ^5.0.0 ## Alternatives - [@sveltejs/kit](https://npm.io/package/@sveltejs/kit.md) — 2.2M weekly downloads - [@atlaskit/theme](https://npm.io/package/@atlaskit/theme.md) — 402.0K weekly downloads - [@tangle-network/brand](https://npm.io/package/@tangle-network/brand.md) — 10.0K weekly downloads - [seneca](https://npm.io/package/seneca.md) — 7.4K weekly downloads - [@bsb/base](https://npm.io/package/@bsb/base.md) — 7.2K weekly downloads ## Recent versions - 2.0.0 (latest) — 2022-09-11 - 1.2.0 — 2022-08-31 - 1.1.1 — 2022-08-22 - 1.1.0 — 2022-08-13 - 1.0.0 — 2022-08-10 ## README [![GitHub license](https://img.shields.io/github/license/palcarazm/bs-darkmode.svg)](https://github.com/palcarazm/bs-darkmode/blob/master/LICENSE) [![Latest release](https://img.shields.io/github/package-json/v/palcarazm/bs-darkmode/v2.X.X?logo=github)](https://github.com/palcarazm/bs-darkmode/releases) [![JSDelivr Badge](https://img.shields.io/jsdelivr/npm/hm/bs-darkmode?color=success&label=hits&logo=jsdelivr&logoColor=white)](https://www.jsdelivr.com/package/npm/bs-darkmode) [![NPM Badge](https://img.shields.io/npm/dm/bs-darkmode?logo=npm&color=success)](https://www.npmjs.com/package/bs-darkmode) [![Maintenance](https://img.shields.io/badge/maintained%3F-yes-success.svg)](https://github.com/palcarazm/bs-darkmode/graphs/contributors) [![Funding](https://img.shields.io/badge/sponsor-30363D?style=flat&logo=GitHub-Sponsors&logoColor=#white)](https://github.com/sponsors/palcarazm) [![Rate this package](https://badges.openbase.com/js/rating/bs-darkmode.svg?)](https://openbase.com/js/bs-darkmode?utm_source=embedded&utm_medium=badge&utm_campaign=rate-badge) # Bootstrap Darkmode **Bootstrap Darkmode** is a bootstrap plugin/widget that supports toggling between light and dark theme. *** #### Library Distributions Branch | Bootstrap Support | Last Release ---|---|--- [bs-darkmode v2.X.X](https://github.com/palcarazm/bs-darkmode/tree/v2.X.X) | [![Bootstrap 5](https://img.shields.io/static/v1?label=bootstrap&message=v5.X.X&color=informational&logo=bootstrap&logoColor=white)](https://getbootstrap.com/docs/5.0) | [![Latest release](https://img.shields.io/github/package-json/v/palcarazm/bs-darkmode/v2.X.X?logo=github)](https://github.com/palcarazm/bs-darkmode/releases) [bs-darkmode v1.X.X](https://github.com/palcarazm/bs-darkmode/tree/v1.X.X) | [![Bootstrap 4](https://img.shields.io/static/v1?label=bootstrap&message=v4.X.X&color=informational&logo=bootstrap&logoColor=white)](https://getbootstrap.com/docs/4.0) | [![Latest release](https://img.shields.io/github/package-json/v/palcarazm/bs-darkmode/v1.X.X?logo=github)](https://github.com/palcarazm/bs-darkmode/releases) # Demos **Demos and API Docs:** https://palcarazm.github.io/bs-darkmode/ **Table of Contents** *generated with [DocToc](https://github.com/thlorenz/doctoc)* - [Bootstrap Darkmode](#bootstrap-darkmode) - [Library Distributions](#library-distributions) - [Demos](#demos) - [Installation](#installation) - [CDN](#cdn) - [jQuery Interface](#jquery-interface) - [ECMAS Interface](#ecmas-interface) - [Download](#download) - [NPM](#npm) - [Yarn](#yarn) - [Usage](#usage) - [Initialize With HTML](#initialize-with-html) - [Initialize With Code](#initialize-with-code) - [API](#api) - [Options](#options) - [CSS Vars to change](#css-vars-to-change) - [Methods](#methods) - [Events](#events) - [Event Propagation](#event-propagation) - [Stopping Event Propagation](#stopping-event-propagation) - [Collaborators welcom!](#collaborators-welcom) ************************************************************************************************** # Installation ## CDN [![JSDelivr Badge](https://img.shields.io/jsdelivr/npm/hm/bs-darkmode?color=success&label=hits&logo=jsdelivr&logoColor=white)](https://www.jsdelivr.com/package/npm/bs-darkmode) ### jQuery Interface ```html ``` ### ECMAS Interface ```html ``` ## Download [![Latest release](https://img.shields.io/github/package-json/v/palcarazm/bs-darkmode/v2.X.X?logo=github)](https://github.com/palcarazm/bs-darkmode/releases) ## NPM [![NPM Badge](https://img.shields.io/npm/dm/bs-darkmode?logo=npm&color=success)](https://www.npmjs.com/package/bs-darkmode) ```ksh npm install bs-darkmode@2.0.0 ``` ## Yarn ```ksh yarn add bs-darkmode@2.0.0 ``` # Usage ## Initialize With HTML Simply add `data-plugin="bsdarkmode"` to automatically convert an element to a Bootstrap. ```html ``` ## Initialize With Code Toggles can also be initialized via JavaScript code. EX: Initialize id `darkmodeToggle` with a single line of JavaScript. ```html ``` # API ## Options * Options can be passed via data attributes or JavaScript * For data attributes, append the option name to `data-` (ex: `data-state="light"`) ```html
``` Name |Type |Default |Description --------------|-------|--------|------------ `state` |boolean|true |Initial state (For data-state use `light` or `dark`). The user preferred color scheme dark is prioritary. `root` |string |":root" |Root element to apply CSS vars `allowsCookie`|boolean|false |Cookie authorization status `lightlabel` |html |sun svg |Element inner HTML for light mode `darklabel` |html |moon svg|Element inner HTML for dark mode `lightvars` |string |"{}" |JSON object with CSS vars for light mode `darkvars` |string |"{}" |JSON object with CSS vars for dark mode ## CSS Vars to change The following CSS Vars that can be changed form `lightvars` and `darkvars` attributes. Var |Type |Default Ligth|Default Dark|Description ----------------|---------|-------------|------------|----------- `blue` |HEX color|#0d6efd |#3f6791 |Standard Bootstrap [color](https://getbootstrap.com/docs/4.0/getting-started/theming/#all-colors) `indigo` |HEX color|#6610f2 |#6610f2 |Standard Bootstrap [color](https://getbootstrap.com/docs/4.0/getting-started/theming/#all-colors) `purple` |HEX color|#6f42c1 |#6f42c1 |Standard Bootstrap [color](https://getbootstrap.com/docs/4.0/getting-started/theming/#all-colors) `pink` |HEX color|#d63384 |#e83e8c |Standard Bootstrap [color](https://getbootstrap.com/docs/4.0/getting-started/theming/#all-colors) `red` |HEX color|#dc3545 |#e74c3c |Standard Bootstrap [color](https://getbootstrap.com/docs/4.0/getting-started/theming/#all-colors) `orange` |HEX color|#fd7e14 |#fd7e14 |Standard Bootstrap [color](https://getbootstrap.com/docs/4.0/getting-started/theming/#all-colors) `yellow` |HEX color|#ffc107 |#f39c12 |Standard Bootstrap [color](https://getbootstrap.com/docs/4.0/getting-started/theming/#all-colors) `green` |HEX color|#198754 |#00bc8c |Standard Bootstrap [color](https://getbootstrap.com/docs/4.0/getting-started/theming/#all-colors) `teal` |HEX color|#20c997 |#20c997 |Standard Bootstrap [color](https://getbootstrap.com/docs/4.0/getting-started/theming/#all-colors) `cyan` |HEX color|#0dcaf0 |#3498db |Standard Bootstrap [color](https://getbootstrap.com/docs/4.0/getting-started/theming/#all-colors) `gray` |HEX color|#6c757d |#ced4da |Standard Bootstrap [gray color](https://getbootstrap.com/docs/4.0/getting-started/theming/#grays) `gray-dark` |HEX color|#343a40 |#e9ecef |Standard Bootstrap [gray color](https://getbootstrap.com/docs/4.0/getting-started/theming/#grays) `gray-100` |HEX color|#f8f9fa |#212529 |Standard Bootstrap [gray color](https://getbootstrap.com/docs/4.0/getting-started/theming/#grays) `gray-200` |HEX color|#e9ecef |#343a40 |Standard Bootstrap [gray color](https://getbootstrap.com/docs/4.0/getting-started/theming/#grays) `gray-300` |HEX color|#dee2e6 |#495057 |Standard Bootstrap [gray color](https://getbootstrap.com/docs/4.0/getting-started/theming/#grays) `gray-400` |HEX color|#ced4da |#6c757d |Standard Bootstrap [gray color](https://getbootstrap.com/docs/4.0/getting-started/theming/#grays) `gray-500` |HEX color|#adb5bd |#adb5bd |Standard Bootstrap [gray color](https://getbootstrap.com/docs/4.0/getting-started/theming/#grays) `gray-600` |HEX color|#6c757d |#ced4da |Standard Bootstrap [gray color](https://getbootstrap.com/docs/4.0/getting-started/theming/#grays) `gray-700` |HEX color|#495057 |#dee2e6 |Standard Bootstrap [gray color](https://getbootstrap.com/docs/4.0/getting-started/theming/#grays) `gray-800` |HEX color|#343a40 |#e9ecef |Standard Bootstrap [gray color](https://getbootstrap.com/docs/4.0/getting-started/theming/#grays) `gray-900` |HEX color|#212529 |#f8f9fa |Standard Bootstrap [gray color](https://getbootstrap.com/docs/4.0/getting-started/theming/#grays) `primary` |HEX color|#0d6efd |#3f6791 |Standard Bootstrap [theme color](https://getbootstrap.com/docs/4.0/getting-started/theming/#theme-colors) `secondary` |HEX color|#6c757d |#ced4da |Standard Bootstrap [theme color](https://getbootstrap.com/docs/4.0/getting-started/theming/#theme-colors) `success` |HEX color|#198754 |#00bc8c |Standard Bootstrap [theme color](https://getbootstrap.com/docs/4.0/getting-started/theming/#theme-colors) `info` |HEX color|#0dcaf0 |#3498db |Standard Bootstrap [theme color](https://getbootstrap.com/docs/4.0/getting-started/theming/#theme-colors) `warning` |HEX color|#ffc107 |#f39c12 |Standard Bootstrap [theme color](https://getbootstrap.com/docs/4.0/getting-started/theming/#theme-colors) `danger` |HEX color|#dc3545 |#e74c3c |Standard Bootstrap [theme color](https://getbootstrap.com/docs/4.0/getting-started/theming/#theme-colors) `light` |HEX color|#f8f9fa |#212529 |Standard Bootstrap [theme color](https://getbootstrap.com/docs/4.0/getting-started/theming/#theme-colors) `dark` |HEX color|#212529 |#f8f9fa |Standard Bootstrap [theme color](https://getbootstrap.com/docs/4.0/getting-started/theming/#theme-colors) `body-color` |HEX color|#212529 |#f8f9fa |Body color `body-bg` |HEX color|#fff |#495057 |Body background color `white` |HEX color|#fff |#000 |White color `black` |HEX color|#000 |#fff |Black color Theme colors, black and white are also exposed in HSL with `{color}-h`, `{color}-s` and `{color}-l`and in RGB with `{color}-rgb`. ## Methods Methods can be used to control toggles directly. ```html ``` Method |Example |Description ---------------------|-------------------------------------------------------------------|------------ initialize | `$('#darkmodeToggle').bsDarkmode()` |Initializes the darkmode plugin with options light | `$('#darkmodeToggle').bsDarkmode('light')` |Sets the darkmode toggle to 'light' state dark | `$('#darkmodeToggle').bsDarkmode('dark')` |Sets the darkmode toggle to 'dark' state toggle | `$('#darkmodeToggle').bsDarkmode('toggle')` |Toggles the state of the darkmode toggle light/dark setCookieAutorization| `$('#darkmodeToggle').bsDarkmode('setCookieAutorization', status)`|Sets the Cookie authorization status. Status can be `true` or `false` # Events ## Event Propagation Note All events are propagated to and from the element to the darkmode toggle. You should listen to events from the HTML element directly rather than look for custom events. ```html
``` ## Stopping Event Propagation Passing `true` to the light, dark and toggle methods will enable the silent option to prevent the control from propagating the change event in cases where you want to update the controls light/dark state, but do not want to fire the onChange event. ```html ``` # Collaborators welcom! - :sos: ¿Do you need some help? Open a issue in [GitHub help wanted](https://github.com/palcarazm/bs-darkmode/issues/new?assignees=&labels=help+wanted&template=help-wanted.md&title=%5BHELP%5D) - :bug: ¿Do you find a bug? Open a issue in [GitHub bug report](https://github.com/palcarazm/bs-darkmode/issues/new?assignees=&labels=bug&template=bug_report.md&title=%5BBUG%5D) - :bulb: ¿Do you have a great idea? Open a issue in [GitHub feature request](https://github.com/palcarazm/bs-darkmode/issues/new?assignees=&labels=enhancement&template=feature_request.md&title=%5BFEATURE%5D) - :computer: ¿Do you know how to fix a bug? Open a pull request in [GitHub pull repuest](https://github.com/palcarazm/bs-darkmode/compare). [![GitHub Contributors](https://contrib.rocks/image?repo=palcarazm/bs-darkmode)](https://github.com/palcarazm/bs-darkmode/graphs/contributors) ¿Do you like the project? Give us a :star: in [GitHub](https://github.com/palcarazm/bs-darkmode). --- _Source: https://npm.io/package/bs-darkmode · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._