{"id":17796863,"url":"https://github.com/palcarazm/bs-darkmode-toggle","last_synced_at":"2026-04-04T13:22:48.904Z","repository":{"id":65151318,"uuid":"584317223","full_name":"palcarazm/bs-darkmode-toggle","owner":"palcarazm","description":"Bootstrap Darkmode Toggle is a plugin for bootstrap to add a ligthmode/darkmode switch in to your app.","archived":false,"fork":false,"pushed_at":"2023-08-21T02:06:55.000Z","size":580,"stargazers_count":3,"open_issues_count":3,"forks_count":0,"subscribers_count":1,"default_branch":"v1","last_synced_at":"2025-04-02T02:52:48.457Z","etag":null,"topics":["bootstrap","bootstrap-darkmode","bootstrap-plugin","darkmode","darkmode-switch","darkmode-toggle"],"latest_commit_sha":null,"homepage":"https://palcarazm.github.io/bs-darkmode-toggle/","language":"JavaScript","has_issues":true,"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/palcarazm.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":"SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":["palcarazm"],"patreon":null,"open_collective":null,"ko_fi":null,"tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null,"lfx_crowdfunding":null,"custom":null}},"created_at":"2023-01-02T08:03:42.000Z","updated_at":"2024-02-08T22:50:33.000Z","dependencies_parsed_at":"2024-10-27T12:11:21.408Z","dependency_job_id":null,"html_url":"https://github.com/palcarazm/bs-darkmode-toggle","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/palcarazm/bs-darkmode-toggle","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/palcarazm%2Fbs-darkmode-toggle","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/palcarazm%2Fbs-darkmode-toggle/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/palcarazm%2Fbs-darkmode-toggle/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/palcarazm%2Fbs-darkmode-toggle/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/palcarazm","download_url":"https://codeload.github.com/palcarazm/bs-darkmode-toggle/tar.gz/refs/heads/v1","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/palcarazm%2Fbs-darkmode-toggle/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":263104325,"owners_count":23414455,"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":["bootstrap","bootstrap-darkmode","bootstrap-plugin","darkmode","darkmode-switch","darkmode-toggle"],"created_at":"2024-10-27T11:48:50.378Z","updated_at":"2026-04-04T13:22:48.855Z","avatar_url":"https://github.com/palcarazm.png","language":"JavaScript","funding_links":["https://github.com/sponsors/palcarazm"],"categories":[],"sub_categories":[],"readme":"[![GitHub license](https://img.shields.io/github/license/palcarazm/bs-darkmode-toggle.svg?color=informational)](https://github.com/palcarazm/bs-darkmode-toggle/blob/master/LICENSE)\n[![Latest release](https://img.shields.io/github/package-json/v/palcarazm/bs-darkmode-toggle/v1?logo=github)](https://github.com/palcarazm/bs-darkmode-toggle/releases)\n[![Bootstrap 5](https://img.shields.io/static/v1?label=bootstrap\u0026message=%5E5.3.0-alpha\u0026color=informational\u0026logo=bootstrap\u0026logoColor=white)](https://getbootstrap.com/docs/5.0)\n[![BS Toggle](https://img.shields.io/static/v1?label=bs-toggle\u0026message=%5E5.0.0\u0026color=informational)](https://palcarazm.github.io/bootstrap5-toggle/)\n[![JSDelivr Badge](https://img.shields.io/jsdelivr/npm/hm/bs-darkmode-toggle?label=hits\u0026logo=jsdelivr\u0026logoColor=white)](https://www.jsdelivr.com/package/npm/bs-darkmode-toggle)\n[![NPM Badge](https://img.shields.io/npm/dm/bs-darkmode-toggle?logo=npm)](https://www.npmjs.com/package/bs-darkmode-toggle)\n[![Build](https://img.shields.io/github/actions/workflow/status/palcarazm/bs-darkmode-toggle/build.yml?branch=v1\u0026logo=npm)](https://github.com/palcarazm/bs-darkmode-toggle/actions?query=workflow%3A%22Build+Check%22)\n[![Test](https://img.shields.io/github/actions/workflow/status/palcarazm/bs-darkmode-toggle/cypress.yml?branch=v1\u0026label=tests\u0026logo=cypress)](https://github.com/palcarazm/bs-darkmode-toggle/actions?query=workflow%3A%22Cypress+Tests%22)\n[![Security](https://img.shields.io/snyk/vulnerabilities/npm/bs-darkmode-toggle@1.0.0-alpha2?logo=snyk)](https://snyk.io/advisor/npm-package/bs-darkmode-toggle)\n[![EOL](https://img.shields.io/endpoint?url=https%3A%2F%2Fpalcarazm.github.io%2Fbs-darkmode-toggle%2Fapi%2Feol%2Fv1)](https://github.com/palcarazm/bs-darkmode-toggle/security/policy)\n[![Funding](https://img.shields.io/badge/sponsor-30363D?style=flat\u0026logo=GitHub-Sponsors\u0026logoColor=#white)](https://github.com/sponsors/palcarazm)\n\u003c!--[![Rate this package](https://badges.openbase.com/js/rating/bs-darkmode-toggle.svg?token=rNvznTVToo+EmX5g+KTvfYqI9+YTWJeUWTxPj7tLA6o=)](https://openbase.com/js/bs-darkmode-toggle?utm_source=embedded\u0026utm_medium=badge\u0026utm_campaign=rating-badge\u0026utm_term=js/bs-darkmode-toggle)--\u003e\n\n# Bootstrap Darkmode Toggle\n**Bootstrap Darkmode Toggle** is a plugin for bootstrap to add a ligthmode/darkmode switch in to your app.\n\n---\n#### Library Distributions\n\n| Branch | Bootstrap Support | Last Release |\n| :----: | :---------------: | :----------: |\n| [bootstrap5-toggle v1](https://github.com/palcarazm/bs-darkmode-toggle/tree/v1) | [![Bootstrap 5](https://img.shields.io/static/v1?label=bootstrap\u0026message=%5E5.3.0-alpha\u0026color=informational\u0026logo=bootstrap\u0026logoColor=white)](https://getbootstrap.com/docs/5.0) | [![Latest release](https://img.shields.io/github/package-json/v/palcarazm/bs-darkmode-toggle/v1?logo=github)](https://github.com/palcarazm/bs-darkmode-toggle/releases) |\n\nSee EOL for each version in [Security Policy Page](https://github.com/palcarazm/bs-darkmode-toggle/security/policy).\n# Demos\n\n**Demos and API Docs:** https://palcarazm.github.io/bs-darkmode-toggle/\n\n# Related Bootstrap Plugins\n\n\u003cdiv align=\"center\"\u003e\n  \u003ca href=\"https://github.com/palcarazm/bootstrap5-toggle\" title=\"Boostrap Toggle\"\n    \u003e\u003cimg\n      src=\"https://github-readme-stats.vercel.app/api/pin/?username=palcarazm\u0026repo=bootstrap5-toggle\u0026border_radius=10\u0026show_owner=true\"\n  /\u003e\u003c/a\u003e\n\u003c/div\u003e\n\n---\n\n\u003c!-- To update TOC run .\\node_modules\\.bin\\doctoc README.md --github --\u003e\n\u003c!-- START doctoc generated TOC please keep comment here to allow auto update --\u003e\n\u003c!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE --\u003e\n\n\n- [Installation](#installation)\n  - [CDN](#cdn)\n    - [ECMAS Interface](#ecmas-interface)\n    - [jQuery Interface](#jquery-interface)\n  - [Download](#download)\n  - [NPM](#npm)\n  - [Yarn](#yarn)\n- [Usage](#usage)\n  - [Initialize with HTML](#initialize-with-html)\n  - [Initialize with JS](#initialize-with-js)\n- [API](#api)\n  - [Options](#options)\n  - [Methods](#methods)\n- [Events](#events)\n  - [Event Propagation](#event-propagation)\n  - [Stopping Event Propagation](#stopping-event-propagation)\n- [Collaborators welcom!](#collaborators-welcom)\n\n\u003c!-- END doctoc generated TOC please keep comment here to allow auto update --\u003e\n\n---\n\n# Installation\n\n## CDN\n\n[![JSDelivr Badge](https://img.shields.io/jsdelivr/npm/hm/bs-darkmode-toggle?label=hits\u0026logo=jsdelivr\u0026logoColor=white)](https://www.jsdelivr.com/package/npm/bs-darkmode-toggle)\n\n### ECMAS Interface\n\n```html\n\u003c!-- Consider loading Bootstrap and Bootstrap 5 toggle dependencies --\u003e\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/bs-darkmode-toggle@1.0.0-alpha2/js/bs-darkmode-toggle.ecmas.min.js\"\u003e\u003c/script\u003e\n```\n\n### jQuery Interface\n\n```html\n\u003c!-- Consider loading Bootstrap, jQuery and Bootstrap 5 toggle dependencies --\u003e\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/bs-darkmode-toggle@1.0.0-alpha2/js/bs-darkmode-toggle.jquery.min.js\"\u003e\u003c/script\u003e\n```\n\n## Download\n\n[![Latest release](https://img.shields.io/github/package-json/v/palcarazm/bs-darkmode-toggle/v1?logo=github)](https://github.com/palcarazm/bs-darkmode-toggle/releases)\n\n## NPM\n\n[![NPM Badge](https://img.shields.io/npm/dm/bs-darkmode-toggle?logo=npm)](https://www.npmjs.com/package/bs-darkmode-toggle)\n\n```ksh\nnpm install bs-darkmode-toggle@1.0.0-alpha2\n```\n\n## Yarn\n\n```ksh\nyarn add bs-darkmode-toggle@1.0.0-alpha2\n```\n\n# Usage\n\n## Initialize with HTML\nSimply create a `div` with the data attribute `data-plugin=\"bs-darkmode-toggle\"`.\n```html\n\u003cdiv data-plugin=\"bs-darkmode-toggle\"\u003e\u003c/div\u003e\n```\n\n## Initialize with JS\nSimply select the element and invoke the Boostrap Darkmode Toggle API.\n```html\n\u003cdiv id=\"bs-darkmode-toggle\"\u003e\u003c/div\u003e\n\u003cscript\u003e\n  document.getElementById('bs-darkmode-toggle').bsDarkmodeToggle();\n\u003c/script\u003e\n```\n\n# API\n\n## Options\nOptions can be passed via data attributes or JavaScript. For data attributes, append the option name to `data-`. Options and data attributes can be use together.\n\nFind in the example the same toggle can be personalize vía API options and data attributes.\n\n```html\n\u003cdiv data-plugin=\"bs-darkmode-toggle\" data-state=\"dark\" data-allowCookie data-lightColorMode=\"blue\"\u003e\u003c/div\u003e\n\n\u003cdiv id=\"bs-darkmode-toggle\"\u003e\u003c/div\u003e\n\u003cscript\u003e\n  document.getElementById('bs-darkmode-toggle').bsDarkmodeToggle({\n    state: false,\n    allowCookie: true,\n    lightColorMode: \"blue\"\n  });\n\u003c/script\u003e\n```\n\n| Name             | Type        | Default               | Description |\n| :--------------- | :---------: | :-------------------: | :---------- |\n| `state`          | Boolean     | \"true\"                | Default light (true) or dark (false) color scheme. For data attributes use light/dark instead. |\n| `root`           | String      | \":root\"               | CSS selector for root element to apply color scheme. |\n| `allowCookie`    | Boolean     | \"false\"               | Set if the user has allowed to use cookies. For data attribute the presence means true and the absence false. |\n| `lightLabel`     | string/html | ![sun](https://raw.githubusercontent.com/palcarazm/bs-darkmode-toggle/v1/img/sun.svg)   | Set the light toggle label. |\n| `darkLabel`      | string/html | ![moon](https://raw.githubusercontent.com/palcarazm/bs-darkmode-toggle/v1/img/moon.svg) | Set the dark toggle label. |\n| `lightColorMode` | string      | \"light\"               | Set the light color scheme. |\n| `darkColorMode`  | string      | \"dark\"                | Set the dark color scheme. |\n\n## Methods\nMethods can be used to control the darkmode toggle directly.\n\n```html\n\u003cdiv id=\"bs-darkmode-toggle\"\u003e\u003c/div\u003e\n\u003cscript\u003e\n  let demoElement = document.getElementById('bs-darkmode-toggle');\n  demoElement.bsDarkmodeToggle({\n    state: false,\n    allowCookie: true,\n    lightColorMode: \"blue\"\n  });\n\u003c/script\u003e\n```\n\n\n| Method        | Example                                       | Description                                     |\n| :------------ | :-------------------------------------------- | :---------------------------------------------- |\n| `light`       | `demoElement.bsDarkmodeToggle(\"light\")`       | Enable light color scheme.                      |\n| `dark`        | `demoElement.bsDarkmodeToggle(\"dark\")`        | Enable dark color scheme.                       |\n| `toggle`      | `demoElement.bsDarkmodeToggle(\"toggle\")`      | Switch the enable color scheme.                 |\n| `allowCookie` | `demoElement.bsDarkmodeToggle(\"allowCookie\")` | Set the Cookie Authorization status to allowed. |\n| `denyCookie`  | `demoElement.bsDarkmodeToggle(\"denyCookie\")`  | Set the Cookie Authorization status to denied.  |\n\n# Events\n\n## Event Propagation\nWhen the color scheme changes a `change` event is fired from bootstrap darkmode toggle element. so you can listner for this event. \n\n```html\n\u003cdiv data-plugin=\"bs-darkmode-toggle\" id=\"bs-darkmode-toggle\"\u003e\u003c/div\u003e\n\n\u003cdiv id=\"bs-darkmode-toggle\"\u003e\u003c/div\u003e\n\u003cscript\u003e\n  let demoElement = document.getElementById('bs-darkmode-toggle');\n  demoElement.addEventListener('Change',(_e)=\u003e{\n    //Do something\n  });\n\u003c/script\u003e\n```\n## Stopping Event Propagation\nPassing `true` to the `light`, `dark` and `toggle` methods will enable the silent option to prevent firing the `change` event in cases where you want to update the color scheme but do not want to fire the `change` event.\n\n\n# Collaborators welcom!\n\n- :sos: ¿Do you need some help? Open a question in [GitHub Discussion](https://github.com/palcarazm/bs-darkmode-toggle/discussions/categories/q-a)\n- :bug: ¿Do you find a bug? Open a issue in [GitHub bug report](https://github.com/palcarazm/bs-darkmode-toggle/issues/new?assignees=-\u0026labels=bug\u0026template=bug_report.yml\u0026title=Provide+a+general+summary+of+the+issue)\n- :bulb: ¿Do you have a great idea? Open a issue in [GitHub feature request](https://github.com/palcarazm/bs-darkmode-toggle/issues/new?assignees=\u0026labels=feature\u0026template=feature_request.yml\u0026title=Provide+a+general+summary+of+the+feature)\n- :computer: ¿Do you know how to fix a bug? Open a pull request in [GitHub pull repuest](https://github.com/palcarazm/bs-darkmode-toggle/compare).\n\n[![GitHub Contributors](https://contrib.rocks/image?repo=palcarazm/bs-darkmode-toggle)](https://github.com/palcarazm/bs-darkmode-toggle/graphs/contributors)\n\n¿Do you like the project? Give us a :star: in [GitHub](https://github.com/palcarazm/bs-darkmode-toggle).","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpalcarazm%2Fbs-darkmode-toggle","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpalcarazm%2Fbs-darkmode-toggle","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpalcarazm%2Fbs-darkmode-toggle/lists"}