{"id":16412477,"url":"https://github.com/coliff/dark-mode-switch","last_synced_at":"2025-04-13T11:47:19.437Z","repository":{"id":34997560,"uuid":"194995309","full_name":"coliff/dark-mode-switch","owner":"coliff","description":"Add a dark-mode theme toggle with a Bootstrap Custom Switch","archived":false,"fork":false,"pushed_at":"2024-09-01T08:07:23.000Z","size":277,"stargazers_count":564,"open_issues_count":12,"forks_count":113,"subscribers_count":9,"default_branch":"main","last_synced_at":"2025-04-06T08:11:14.006Z","etag":null,"topics":["bootstrap","custom-switch","dark-mode-switcher","dark-mode-toggle"],"latest_commit_sha":null,"homepage":"https://coliff.github.io/dark-mode-switch/","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/coliff.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":".github/CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":".github/CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":".github/SUPPORT.md","governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":"coliff","ko_fi":"coliff","custom":"https://paypal.me/coliff"}},"created_at":"2019-07-03T06:44:02.000Z","updated_at":"2025-04-03T08:52:23.000Z","dependencies_parsed_at":"2024-05-01T09:59:15.447Z","dependency_job_id":"9fcf2c11-4cde-465b-a304-620e6031a587","html_url":"https://github.com/coliff/dark-mode-switch","commit_stats":{"total_commits":129,"total_committers":12,"mean_commits":10.75,"dds":"0.49612403100775193","last_synced_commit":"e2dc1fce5490fb04b2e1ec32e827e2178e006637"},"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/coliff%2Fdark-mode-switch","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/coliff%2Fdark-mode-switch/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/coliff%2Fdark-mode-switch/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/coliff%2Fdark-mode-switch/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/coliff","download_url":"https://codeload.github.com/coliff/dark-mode-switch/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248710409,"owners_count":21149186,"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","custom-switch","dark-mode-switcher","dark-mode-toggle"],"created_at":"2024-10-11T06:49:05.423Z","updated_at":"2025-04-13T11:47:19.418Z","avatar_url":"https://github.com/coliff.png","language":"HTML","funding_links":["https://github.com/sponsors/coliff","https://ko-fi.com/coliff","https://paypal.me/coliff"],"categories":[],"sub_categories":[],"readme":"[![LICENSE](https://img.shields.io/badge/license-MIT-lightgrey.svg)](https://raw.githubusercontent.com/coliff/dark-mode-switch/master/LICENSE)\n[![GitHub Super-Linter](https://github.com/coliff/dark-mode-switch/workflows/Lint%20Code%20Base/badge.svg)](https://github.com/marketplace/actions/super-linter)\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)\n[![Best of JS](https://img.shields.io/endpoint?url=https://bestofjs-serverless.now.sh/api/project-badge?fullName=coliff%2Fdark-mode-switch%26since=monthly)](https://bestofjs.org/projects/dark-mode-switch)\n[![GitHub Stars](https://img.shields.io/github/stars/coliff/dark-mode-switch.svg?label=github%20stars)](https://github.com/coliff/dark-mode-switch)\n[![NPM Downloads](https://img.shields.io/npm/dt/dark-mode-switch.svg)](https://www.npmjs.com/package/dark-mode-switch)\n\n# 🌓 Dark Mode Switch\n\nAdd a dark-mode theme toggle with a Bootstrap Custom Switch.\n\n- Uses local storage to save preference\n- Only 383 Bytes minified and gzipped!\n\n## Quick start\n\nSeveral quick start options are available:\n\n- [Download the latest release](https://github.com/coliff/dark-mode-switch/archive/v1.0.0.zip)\n- Clone the repo `git clone https://github.com/coliff/dark-mode-switch.git`\n- Install with [npm](https://www.npmjs.com/package/dark-mode-switch) `npm install dark-mode-switch`\n- Install with [yarn](https://yarnpkg.com/en/package/dark-mode-switch) `yarn add dark-mode-switch`\n\n## Usage\n\n1. Add your custom switch for the Dark Mode toggle followed by the `dark-mode-switch.min.js` script:\n\nBootstrap 4.x\n\n```html\n\u003cdiv class=\"custom-control custom-switch\"\u003e\n  \u003cinput type=\"checkbox\" class=\"custom-control-input\" id=\"darkSwitch\" /\u003e\n  \u003clabel class=\"custom-control-label\" for=\"darkSwitch\"\u003eDark Mode\u003c/label\u003e\n\u003c/div\u003e\n\u003cscript src=\"dark-mode-switch.min.js\"\u003e\u003c/script\u003e\n```\n\nBootstrap 5.x\n\n```html\n\u003cdiv class=\"form-check form-switch\"\u003e\n  \u003cinput type=\"checkbox\" class=\"form-check-input\" id=\"darkSwitch\" /\u003e\n  \u003clabel class=\"custom-control-label\" for=\"darkSwitch\"\u003eDark Mode\u003c/label\u003e\n\u003c/div\u003e\n\u003cscript src=\"dark-mode-switch.min.js\"\u003e\u003c/script\u003e\n```\n\n2. Edit the `dark-mode.css` to suit your site - the one included here is a basic example.\n\n## How it works\n\nTurning dark mode on will add `data-theme=\"dark\"` to the `body` tag. You can use CSS to target the elements on the page like so:\n\n```css\n[data-theme=\"dark\"] {\n  background-color: #111 !important;\n  color: #eee;\n}\n```\n\n## Demo\n\n[Bootstrap 5 Demo page](https://coliff.github.io/dark-mode-switch/)\n\n## Browser Support\n\nWorks well with all the browsers supported by [Bootstrap 4](https://getbootstrap.com/docs/4.5/getting-started/browsers-devices/#supported-browsers) and [Bootstrap 5](https://getbootstrap.com/docs/5.3/getting-started/browsers-devices/#supported-browsers)\n\n## To Enable DarkMode in Android Webview\n\n- You need DOM Storage API in order to [make this work with WebView](https://github.com/mcnaveen/Android-Webview-Darkmode-with-JavaScript).\n- Inside OnCreate under WebView paste this line.\n\n`WebSettings.setDomStorageEnabled(true)`\n\n## Credits\n\nCreated thanks to the excellent [dark-theme](https://codyhouse.co/blog/post/dark-light-switch-css-javascript) and [local storage](https://codyhouse.co/blog/post/store-theme-color-preferences-with-localstorage) tutorials over at [codyhouse.co](https://codyhouse.co).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcoliff%2Fdark-mode-switch","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcoliff%2Fdark-mode-switch","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcoliff%2Fdark-mode-switch/lists"}