{"id":17796870,"url":"https://github.com/palcarazm/bs-darkmode","last_synced_at":"2025-03-17T02:31:47.851Z","repository":{"id":55761497,"uuid":"523218344","full_name":"palcarazm/bs-darkmode","owner":"palcarazm","description":"Bootstrap Darkmode is a bootstrap plugin/widget that supports toggling between light and dark theme","archived":false,"fork":false,"pushed_at":"2024-04-22T06:36:39.000Z","size":836,"stargazers_count":5,"open_issues_count":3,"forks_count":0,"subscribers_count":1,"default_branch":"v2.X.X","last_synced_at":"2025-02-27T16:56:51.001Z","etag":null,"topics":["bootstrap","bootstrap-dark-mode","dark-mode","dark-mode-toggle","dark-theme","darkmode"],"latest_commit_sha":null,"homepage":"https://palcarazm.github.io/bs-darkmode/","language":"HTML","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":"CHANGELOG.md","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":"2022-08-10T05:53:37.000Z","updated_at":"2023-11-03T18:16:27.000Z","dependencies_parsed_at":"2024-04-22T07:42:30.034Z","dependency_job_id":"ce0ac5f0-590f-4462-9ad0-14adf0e207c8","html_url":"https://github.com/palcarazm/bs-darkmode","commit_stats":{"total_commits":64,"total_committers":2,"mean_commits":32.0,"dds":0.1875,"last_synced_commit":"5bae28cff0993a005eb7aa3817be3efcfc672587"},"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/palcarazm%2Fbs-darkmode","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/palcarazm%2Fbs-darkmode/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/palcarazm%2Fbs-darkmode/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/palcarazm%2Fbs-darkmode/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/palcarazm","download_url":"https://codeload.github.com/palcarazm/bs-darkmode/tar.gz/refs/heads/v2.X.X","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243841202,"owners_count":20356441,"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-dark-mode","dark-mode","dark-mode-toggle","dark-theme","darkmode"],"created_at":"2024-10-27T11:48:54.178Z","updated_at":"2025-03-17T02:31:47.458Z","avatar_url":"https://github.com/palcarazm.png","language":"HTML","funding_links":["https://github.com/sponsors/palcarazm"],"categories":[],"sub_categories":[],"readme":"[![GitHub license](https://img.shields.io/github/license/palcarazm/bs-darkmode.svg)](https://github.com/palcarazm/bs-darkmode/blob/master/LICENSE)\n[![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)\n[![JSDelivr Badge](https://img.shields.io/jsdelivr/npm/hm/bs-darkmode?color=success\u0026label=hits\u0026logo=jsdelivr\u0026logoColor=white)](https://www.jsdelivr.com/package/npm/bs-darkmode)\n[![NPM Badge](https://img.shields.io/npm/dm/bs-darkmode?logo=npm\u0026color=success)](https://www.npmjs.com/package/bs-darkmode)\n[![Maintenance](https://img.shields.io/badge/maintained%3F-yes-success.svg)](https://github.com/palcarazm/bs-darkmode/graphs/contributors)\n[![Funding](https://img.shields.io/badge/sponsor-30363D?style=flat\u0026logo=GitHub-Sponsors\u0026logoColor=#white)](https://github.com/sponsors/palcarazm)\n[![Rate this package](https://badges.openbase.com/js/rating/bs-darkmode.svg?)](https://openbase.com/js/bs-darkmode?utm_source=embedded\u0026amp;utm_medium=badge\u0026amp;utm_campaign=rate-badge)\n\n# Bootstrap Darkmode\n\n**Bootstrap Darkmode** is a bootstrap plugin/widget that supports toggling between light and dark theme.\n\n***\n\n#### Library Distributions\nBranch | Bootstrap Support | Last Release\n---|---|---\n[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\u0026message=v5.X.X\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/v2.X.X?logo=github)](https://github.com/palcarazm/bs-darkmode/releases)\n[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\u0026message=v4.X.X\u0026color=informational\u0026logo=bootstrap\u0026logoColor=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)\n# Demos\n**Demos and API Docs:** https://palcarazm.github.io/bs-darkmode/  \n\n# Related Bootstrap Puglins\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**Table of Contents**  *generated with [DocToc](https://github.com/thlorenz/doctoc)*\n\n- [Bootstrap Darkmode](#bootstrap-darkmode)\n      - [Library Distributions](#library-distributions)\n- [Demos](#demos)\n- [Installation](#installation)\n  - [CDN](#cdn)\n    - [jQuery Interface](#jquery-interface)\n    - [ECMAS Interface](#ecmas-interface)\n  - [Download](#download)\n  - [NPM](#npm)\n  - [Yarn](#yarn)\n- [Usage](#usage)\n  - [Initialize With HTML](#initialize-with-html)\n  - [Initialize With Code](#initialize-with-code)\n- [API](#api)\n  - [Options](#options)\n  - [CSS Vars to change](#css-vars-to-change)\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[![JSDelivr Badge](https://img.shields.io/jsdelivr/npm/hm/bs-darkmode?color=success\u0026label=hits\u0026logo=jsdelivr\u0026logoColor=white)](https://www.jsdelivr.com/package/npm/bs-darkmode)\n### jQuery Interface\n```html\n\u003clink href=\"https://cdn.jsdelivr.net/npm/bs-darkmode@2.0.0/css/bs-darkmode.min.css\" rel=\"stylesheet\"\u003e  \n\u003cscript src=\"https://cdn.jsdelivr.net/npm/bs-darkmode@2.0.0/js/bs-darkmode.jquery.min.js\"\u003e\u003c/script\u003e\n```\n\n### ECMAS Interface\n```html\n\u003clink href=\"https://cdn.jsdelivr.net/npm/bs-darkmode@2.0.0/css/bs-darkmode.min.css\" rel=\"stylesheet\"\u003e  \n\u003cscript src=\"https://cdn.jsdelivr.net/npm/bs-darkmode@2.0.0/js/bs-darkmode.ecmas.min.js\"\u003e\u003c/script\u003e\n```\n\n## Download\n[![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)\n\n## NPM\n[![NPM Badge](https://img.shields.io/npm/dm/bs-darkmode?logo=npm\u0026color=success)](https://www.npmjs.com/package/bs-darkmode)\n```ksh\nnpm install bs-darkmode@2.0.0\n```\n\n## Yarn\n```ksh\nyarn add bs-darkmode@2.0.0\n```\n\n# Usage\n\n## Initialize With HTML\nSimply add `data-plugin=\"bsdarkmode\"` to automatically convert an element to a Bootstrap.\n\n```html\n\u003cbutton class=\"btn btn-primary\" data-plugin=\"bsdarkmode\"\u003e\u003c/button\u003e\n```\n\n## Initialize With Code\nToggles can also be initialized via JavaScript code.  \n\nEX: Initialize id `darkmodeToggle` with a single line of JavaScript.\n```html\n\u003cbutton class=\"btn btn-primary\" id=\"darkmodeToggle\"\u003e\u003c/button\u003e\n\u003cscript\u003e\n  $(function(){\n    $('#darkmodeToggle').bsDarkmode();\n  });\n\u003c/script\u003e\n```\n\n# API\n\n## Options\n* Options can be passed via data attributes or JavaScript\n* For data attributes, append the option name to `data-` (ex: `data-state=\"light\"`)\n\n```html\n\u003cdiv id=\"api-example\"\u003e\n    \u003cbutton class=\"btn btn-primary\" data-plugin=\"bsdarkmode\" data-state=\"dark\" data-root=\"#api-example\"\n        data-lightvars='{\"primary\":\"#FF0000\",\"secondary\":\"#00FF00\"}'\n        data-darkvars='{\"primary\":\"#0000FF\",\"secondary\":\"#FFFF00\"}'\u003e\u003c/button\u003e\n    \u003cbutton class=\"btn btn-primary\" id=\"darkmodeToggle\"\u003e\u003c/button\u003e\n\u003c/div\u003e\n\u003cscript\u003e\n    $(function () {\n        $('#darkmodeToggle').bsDarkmode({\n            state: false,\n            root:'#api-example',\n            lightvars: '{\"primary\":\"#FF0000\",\"secondary\":\"#00FF00\"}',\n            darkvars: '{\"primary\":\"#0000FF\",\"secondary\":\"#FFFF00\"}'\n        });\n    })\n\u003c/script\u003e\n```\n\nName          |Type   |Default |Description                 \n--------------|-------|--------|------------\n`state`       |boolean|true    |Initial state (For data-state use `light` or `dark`). The user preferred color scheme dark is prioritary.\n`root`        |string |\":root\" |Root element to apply CSS vars\n`allowsCookie`|boolean|false   |Cookie authorization status\n`lightlabel`  |html   |sun svg |Element inner HTML for light mode\n`darklabel`   |html   |moon svg|Element inner HTML for dark mode\n`lightvars`   |string |\"{}\"    |JSON object with CSS vars for light mode\n`darkvars`    |string |\"{}\"    |JSON object with CSS vars for dark mode\n\n## CSS Vars to change\nThe following CSS Vars that can be changed form `lightvars` and `darkvars` attributes.\n\nVar             |Type     |Default Ligth|Default Dark|Description\n----------------|---------|-------------|------------|-----------\n`blue`          |HEX color|#0d6efd      |#3f6791     |Standard Bootstrap [color](https://getbootstrap.com/docs/4.0/getting-started/theming/#all-colors)\n`indigo`        |HEX color|#6610f2      |#6610f2     |Standard Bootstrap [color](https://getbootstrap.com/docs/4.0/getting-started/theming/#all-colors)\n`purple`        |HEX color|#6f42c1      |#6f42c1     |Standard Bootstrap [color](https://getbootstrap.com/docs/4.0/getting-started/theming/#all-colors)\n`pink`          |HEX color|#d63384      |#e83e8c     |Standard Bootstrap [color](https://getbootstrap.com/docs/4.0/getting-started/theming/#all-colors)\n`red`           |HEX color|#dc3545      |#e74c3c     |Standard Bootstrap [color](https://getbootstrap.com/docs/4.0/getting-started/theming/#all-colors)\n`orange`        |HEX color|#fd7e14      |#fd7e14     |Standard Bootstrap [color](https://getbootstrap.com/docs/4.0/getting-started/theming/#all-colors)\n`yellow`        |HEX color|#ffc107      |#f39c12     |Standard Bootstrap [color](https://getbootstrap.com/docs/4.0/getting-started/theming/#all-colors)\n`green`         |HEX color|#198754      |#00bc8c     |Standard Bootstrap [color](https://getbootstrap.com/docs/4.0/getting-started/theming/#all-colors)\n`teal`          |HEX color|#20c997      |#20c997     |Standard Bootstrap [color](https://getbootstrap.com/docs/4.0/getting-started/theming/#all-colors)\n`cyan`          |HEX color|#0dcaf0      |#3498db     |Standard Bootstrap [color](https://getbootstrap.com/docs/4.0/getting-started/theming/#all-colors)\n`gray`          |HEX color|#6c757d      |#ced4da     |Standard Bootstrap [gray color](https://getbootstrap.com/docs/4.0/getting-started/theming/#grays)\n`gray-dark`     |HEX color|#343a40      |#e9ecef     |Standard Bootstrap [gray color](https://getbootstrap.com/docs/4.0/getting-started/theming/#grays)\n`gray-100`      |HEX color|#f8f9fa      |#212529     |Standard Bootstrap [gray color](https://getbootstrap.com/docs/4.0/getting-started/theming/#grays)\n`gray-200`      |HEX color|#e9ecef      |#343a40     |Standard Bootstrap [gray color](https://getbootstrap.com/docs/4.0/getting-started/theming/#grays)\n`gray-300`      |HEX color|#dee2e6      |#495057     |Standard Bootstrap [gray color](https://getbootstrap.com/docs/4.0/getting-started/theming/#grays)\n`gray-400`      |HEX color|#ced4da      |#6c757d     |Standard Bootstrap [gray color](https://getbootstrap.com/docs/4.0/getting-started/theming/#grays)\n`gray-500`      |HEX color|#adb5bd      |#adb5bd     |Standard Bootstrap [gray color](https://getbootstrap.com/docs/4.0/getting-started/theming/#grays)\n`gray-600`      |HEX color|#6c757d      |#ced4da     |Standard Bootstrap [gray color](https://getbootstrap.com/docs/4.0/getting-started/theming/#grays)\n`gray-700`      |HEX color|#495057      |#dee2e6     |Standard Bootstrap [gray color](https://getbootstrap.com/docs/4.0/getting-started/theming/#grays)\n`gray-800`      |HEX color|#343a40      |#e9ecef     |Standard Bootstrap [gray color](https://getbootstrap.com/docs/4.0/getting-started/theming/#grays)\n`gray-900`      |HEX color|#212529      |#f8f9fa     |Standard Bootstrap [gray color](https://getbootstrap.com/docs/4.0/getting-started/theming/#grays)\n`primary`       |HEX color|#0d6efd      |#3f6791     |Standard Bootstrap [theme color](https://getbootstrap.com/docs/4.0/getting-started/theming/#theme-colors)\n`secondary`     |HEX color|#6c757d      |#ced4da     |Standard Bootstrap [theme color](https://getbootstrap.com/docs/4.0/getting-started/theming/#theme-colors)\n`success`       |HEX color|#198754      |#00bc8c     |Standard Bootstrap [theme color](https://getbootstrap.com/docs/4.0/getting-started/theming/#theme-colors)\n`info`          |HEX color|#0dcaf0      |#3498db     |Standard Bootstrap [theme color](https://getbootstrap.com/docs/4.0/getting-started/theming/#theme-colors)\n`warning`       |HEX color|#ffc107      |#f39c12     |Standard Bootstrap [theme color](https://getbootstrap.com/docs/4.0/getting-started/theming/#theme-colors)\n`danger`        |HEX color|#dc3545      |#e74c3c     |Standard Bootstrap [theme color](https://getbootstrap.com/docs/4.0/getting-started/theming/#theme-colors)\n`light`         |HEX color|#f8f9fa      |#212529     |Standard Bootstrap [theme color](https://getbootstrap.com/docs/4.0/getting-started/theming/#theme-colors)\n`dark`          |HEX color|#212529      |#f8f9fa     |Standard Bootstrap [theme color](https://getbootstrap.com/docs/4.0/getting-started/theming/#theme-colors)\n`body-color`    |HEX color|#212529      |#f8f9fa     |Body color\n`body-bg`       |HEX color|#fff         |#495057     |Body background color\n`white`         |HEX color|#fff         |#000        |White color\n`black`         |HEX color|#000         |#fff        |Black color\n\nTheme colors, black and white are also exposed in HSL with `{color}-h`, `{color}-s` and `{color}-l`and in RGB with `{color}-rgb`.\n\n## Methods\nMethods can be used to control toggles directly.\n\n```html\n\u003cbutton class=\"btn btn-primary\" id=\"darkmodeToggle\"\u003e\u003c/button\u003e\n```\n\nMethod               |Example                                                            |Description\n---------------------|-------------------------------------------------------------------|------------\ninitialize           | `$('#darkmodeToggle').bsDarkmode()`                               |Initializes the darkmode plugin with options\nlight                | `$('#darkmodeToggle').bsDarkmode('light')`                        |Sets the darkmode toggle to 'light' state\ndark                 | `$('#darkmodeToggle').bsDarkmode('dark')`                         |Sets the darkmode toggle to 'dark' state\ntoggle               | `$('#darkmodeToggle').bsDarkmode('toggle')`                       |Toggles the state of the darkmode toggle light/dark\nsetCookieAutorization| `$('#darkmodeToggle').bsDarkmode('setCookieAutorization', status)`|Sets the Cookie authorization status. Status can be `true` or `false`\n\n# Events\n\n## Event Propagation\nNote All events are propagated to and from the element to the darkmode toggle.\n\nYou should listen to events from the HTML element directly rather than look for custom events.\n\n```html\n\u003cbutton class=\"btn btn-primary\" id=\"darkmodeToggle\" data-plugin=\"bsdarkmode\"\u003e\u003c/button\u003e\n\u003cdiv id=\"console-event\"\u003e\u003c/div\u003e\n\u003cscript\u003e\n  $(function() {\n    $('#darkmodeToggle').change(function() {\n      $('#console-event').html('Mode changed')\n    })\n  })\n\u003c/script\u003e\n```\n\n## Stopping Event Propagation\nPassing `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.\n\n```html\n\u003cbutton class=\"btn btn-primary\" data-plugin=\"bsdarkmode\" id=\"darkmodeToggle\"\u003e\u003c/button\u003e\n\u003cbutton class=\"btn btn-success\" onclick=\"$('#darkmodeToggle').bsDarkmode('light',true)\" \u003eLight by API (silent)\u003c/button\u003e\n\u003cbutton class=\"btn btn-success\" onclick=\"$('#darkmodeToggle').bsDarkmode('dark',true)\"\u003eDark by API (silent)\u003c/button\u003e\n\u003cbutton class=\"btn btn-warning\" onclick=\"$('#darkmodeToggle').bsDarkmode('light')\"\u003eLight by API (not silent)\u003c/button\u003e\n\u003cbutton class=\"btn btn-warning\" onclick=\"$('#darkmodeToggle').bsDarkmode('dark')\"\u003eDark by API (not silent)\u003c/button\u003e\n```\n\n# Collaborators welcom!\n- :sos: ¿Do you need some help? Open a issue in [GitHub help wanted](https://github.com/palcarazm/bs-darkmode/issues/new?assignees=\u0026labels=help+wanted\u0026template=help-wanted.md\u0026title=%5BHELP%5D)\n - :bug: ¿Do you find a bug? Open a issue in [GitHub bug report](https://github.com/palcarazm/bs-darkmode/issues/new?assignees=\u0026labels=bug\u0026template=bug_report.md\u0026title=%5BBUG%5D)\n - :bulb: ¿Do you have a great idea? Open a issue in [GitHub feature request](https://github.com/palcarazm/bs-darkmode/issues/new?assignees=\u0026labels=enhancement\u0026template=feature_request.md\u0026title=%5BFEATURE%5D)\n - :computer: ¿Do you know how to fix a bug? Open a pull request in [GitHub pull repuest](https://github.com/palcarazm/bs-darkmode/compare).\n\n[![GitHub Contributors](https://contrib.rocks/image?repo=palcarazm/bs-darkmode)](https://github.com/palcarazm/bs-darkmode/graphs/contributors)\n\n¿Do you like the project? Give us a :star: in [GitHub](https://github.com/palcarazm/bs-darkmode).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpalcarazm%2Fbs-darkmode","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpalcarazm%2Fbs-darkmode","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpalcarazm%2Fbs-darkmode/lists"}