{"id":15295905,"url":"https://github.com/clashsoft/bootstrap-darkmode","last_synced_at":"2025-04-13T18:34:04.636Z","repository":{"id":37701775,"uuid":"216216546","full_name":"Clashsoft/bootstrap-darkmode","owner":"Clashsoft","description":"Stylesheet and scripts for implementing dark mode with Bootstrap 4","archived":false,"fork":false,"pushed_at":"2024-02-26T10:19:08.000Z","size":537,"stargazers_count":43,"open_issues_count":0,"forks_count":8,"subscribers_count":5,"default_branch":"master","last_synced_at":"2024-04-30T04:05:18.878Z","etag":null,"topics":["bootstrap","bootstrap-theme","dark-mode","dark-theme"],"latest_commit_sha":null,"homepage":"","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"bsd-3-clause","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Clashsoft.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"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}},"created_at":"2019-10-19T14:10:42.000Z","updated_at":"2024-06-18T21:31:38.106Z","dependencies_parsed_at":"2024-02-08T11:25:42.753Z","dependency_job_id":"b7e2bf66-bcf6-4198-b9da-27a67b55816d","html_url":"https://github.com/Clashsoft/bootstrap-darkmode","commit_stats":null,"previous_names":[],"tags_count":19,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Clashsoft%2Fbootstrap-darkmode","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Clashsoft%2Fbootstrap-darkmode/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Clashsoft%2Fbootstrap-darkmode/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Clashsoft%2Fbootstrap-darkmode/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Clashsoft","download_url":"https://codeload.github.com/Clashsoft/bootstrap-darkmode/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248760936,"owners_count":21157461,"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-theme","dark-mode","dark-theme"],"created_at":"2024-09-30T18:08:34.028Z","updated_at":"2025-04-13T18:34:04.611Z","avatar_url":"https://github.com/Clashsoft.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Bootstrap Darkmode\n\n[![npm version](https://badge.fury.io/js/bootstrap-darkmode.svg)](https://www.npmjs.com/package/bootstrap-darkmode)\n\n\u003e [!Warning]\n\u003e Bootstrap v5.3 natively provides a [dark color mode](https://getbootstrap.com/docs/5.3/customize/color-modes/).\n\u003e As such, this package will no longer be actively developed.\n\u003e Major bugs, security issues and Pull Requests will still be reviewed however.\n\u003e Contributions are welcome.\n\nThis project provides a stylesheet and two scripts that allow you to implement a dark theme on your website.\nIt is initially loaded based on user preference, can be toggled via a switch, and is saved via `localStorage`.\n\nYou can view the [test page](testpage.html) with all default bootstrap components in light and dark\n(thanks to [juzraai](https://juzraai.github.io/)!).\n\nIf you are using Angular, check out [ng-bootstrap-darkmode](https://github.com/Clashsoft/ng-bootstrap-darkmode).\n\n## Usage\n\n### With NPM/Yarn/PNPM\n\nInstall the [npm package](https://www.npmjs.com/package/bootstrap-darkmode):\n\n```sh\n$ npm install bootstrap-darkmode\n$ yarn add bootstrap-darkmode\n$ pnpm install bootstrap-darkmode\n```\n\nInclude the stylesheet, e.g. in `styles.scss`:\n\n```scss\n@import \"~bootstrap-darkmode/scss/darktheme\";\n```\n\n### Via unpkg.com\n\n1. Put the stylesheet link in `\u003chead\u003e`. Do not forget to add bootstrap.\n\n    ```html\n    \u003chead\u003e\n        \u003c!-- ... --\u003e\n        \u003c!-- Bootstrap CSS ... --\u003e\n    \n        \u003c!-- Dark mode CSS --\u003e\n        \u003clink rel=\"stylesheet\" href=\"https://unpkg.com/bootstrap-darkmode@0.7.0/css/darktheme.css\"/\u003e\n        \u003c!-- ... --\u003e\n    \u003c/head\u003e\n    ```\n\n2. Load the theme script as the first thing in `\u003cbody\u003e`.\n\n    ```html\n    \u003cbody\u003e\n    \u003cscript src=\"https://unpkg.com/bootstrap-darkmode@0.7.0/bundles/bootstrap-darkmode.umd.js\"\u003e\u003c/script\u003e\n    \u003c!-- ... ---\u003e\n    ```\n\n### Building Yourself\n\n1. Clone this repo.\n2. Run `npm build`.\n3. Find `darktheme.css` and `theme.js` in the `dist/` directory.\n4. Follow the steps for unpkg.com, but replace the links with whatever local paths you put the files in.\n\n## Setup\n\n\u003e If you are using [ng-bootstrap-darkmode](https://github.com/Clashsoft/ng-bootstrap-darkmode),\n\u003e you can skip this section entirely.\n\u003e It comes with its own JavaScript implementation that is used very differently.\n\n### Import\n\nES module import:\n\n```js\nimport {ThemeConfig, writeDarkSwitch} from 'bootstrap-darkmode';\n```\n\nBrowser:\n\n```js\nconst bootstrapDarkmode = window['bootstrap-darkmode'];\nconst ThemeConfig = bootstrapDarkmode.ThemeConfig;\nconst writeDarkSwitch = bootstrapDarkmode.writeDarkSwitch;\n```\n\n### Theme\n\nAs soon as possible after `\u003cbody\u003e`, initialize the config and load the theme:\n\n```js\nconst themeConfig = new ThemeConfig();\n// place customizations here\nthemeConfig.initTheme();\n```\n\nLoading the theme early shortens the time until the white default background becomes dark.\n\n### Dark Switch\n\nIf you want to use the default dark switch, load the switch script and add the element using this code:\n\n```js\n// this will write the html to the document and return the element.\nconst darkSwitch = writeDarkSwitch(themeConfig);\n```\n\n## Configuration\n\nBootstrap Darkmode can be configured regarding both colors and the way the JavaScript helper behaves.\n\n### SCSS\n\nMany colors can be changed via SCSS variables, similar to how Bootstrap allows changing the theme.\nYou can find all variables in [`_variables.scss`](src/scss/_variables.scss).\nTo change them, just put a new value *before* importing `darktheme.scss`.\n\n```scss\n$dark-body-bg: #111;\n\n@import \"~bootstrap-darkmode/scss/darktheme\";\n```\n\n### JavaScript\n\nYou can listen to theme changes by registering a callback with `themeChangeHandlers`:\n\n```js\nconfig.themeChangeHandlers.push(theme =\u003e console.log(`using theme: ${theme}`));\n```\n\nTo change the way the theme is persisted, you can change the `loadTheme` and `saveTheme` functions:\n\n```js\nthemeConfig.loadTheme = () =\u003e {\n    // custom logic\n    return 'dark';\n};\n\nthemeConfig.saveTheme = theme =\u003e {\n    // custom logic\n    console.log(theme);\n};\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fclashsoft%2Fbootstrap-darkmode","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fclashsoft%2Fbootstrap-darkmode","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fclashsoft%2Fbootstrap-darkmode/lists"}