{"id":13808586,"url":"https://github.com/ColinEspinas/darken","last_synced_at":"2025-05-14T02:32:09.187Z","repository":{"id":46908118,"uuid":"234341374","full_name":"ColinEspinas/darken","owner":"ColinEspinas","description":"🌑 Dark mode made easy","archived":false,"fork":false,"pushed_at":"2023-01-05T05:15:34.000Z","size":742,"stargazers_count":608,"open_issues_count":8,"forks_count":33,"subscribers_count":11,"default_branch":"master","last_synced_at":"2024-11-16T09:06:11.334Z","etag":null,"topics":["css-variables","darkmode","javascript","javascript-library","prefers-color-scheme","user-preference","vanilla-javascript"],"latest_commit_sha":null,"homepage":"https://colinespinas.github.io/darken/","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/ColinEspinas.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":".github/CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-01-16T14:44:15.000Z","updated_at":"2024-10-18T20:09:51.000Z","dependencies_parsed_at":"2023-02-03T12:31:16.046Z","dependency_job_id":null,"html_url":"https://github.com/ColinEspinas/darken","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ColinEspinas%2Fdarken","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ColinEspinas%2Fdarken/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ColinEspinas%2Fdarken/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ColinEspinas%2Fdarken/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ColinEspinas","download_url":"https://codeload.github.com/ColinEspinas/darken/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":225273247,"owners_count":17448074,"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":["css-variables","darkmode","javascript","javascript-library","prefers-color-scheme","user-preference","vanilla-javascript"],"created_at":"2024-08-04T01:01:46.844Z","updated_at":"2024-11-19T00:30:52.462Z","avatar_url":"https://github.com/ColinEspinas.png","language":"JavaScript","funding_links":["https://www.buymeacoffee.com/ColinEspinas"],"categories":["JavaScript","前端常用"],"sub_categories":[],"readme":"# darken\n\n[![Codacy Badge](https://api.codacy.com/project/badge/Grade/c113e5acfef64430ae0db6917a78b612)](https://app.codacy.com/manual/ColinEspinas/darken?utm_source=github.com\u0026utm_medium=referral\u0026utm_content=ColinEspinas/darken\u0026utm_campaign=Badge_Grade_Dashboard)\n[![Size badge](https://img.shields.io/bundlephobia/min/darken)](https://bundlephobia.com/result?p=darken)\n[![Npm badge](https://img.shields.io/npm/v/darken)](https://www.npmjs.com/package/darken)\n[![Issue Badge](https://img.shields.io/github/issues/colinespinas/darken)](https://github.com/ColinEspinas/darken/issues)\n[![Licence Badge](https://img.shields.io/github/license/colinespinas/darken)](https://github.com/ColinEspinas/darken/blob/master/LICENSE)\n\nA **lightweight and cross-browser** library that allows you to easely **manage your dark mode** for your websites and applications. \n\nWritten in plain vanilla javascript.\n\n\u003c!-- FEATURES --\u003e\n## Features\n\n* Easy control over your dark mode\n* Custom class on dark mode\n* Switch CSS variables values on light/dark modes\n* Switch between different stylesheets on light/dark modes\n* Use prefers-color-scheme to get user preference\n* Use timestamps to change modes at chosen times\n* Save user preference to local storage\n\nCheck the [demo](https://colinespinas.github.io/darken/) to get a live exemple.\n\n\u003c!-- TABLE OF CONTENTS --\u003e\n## Table of Contents\n\n* [Getting Started](#getting-started)\n* [Usage](#usage)\n* [Options](#options)\n* [API](#api)\n* [Testing](#testing)\n* [Contributing](#contributing)\n* [License](#license)\n* [Contact](#contact)\n* [Acknowledgements](#acknowledgements)\n\n## Getting Started\n\n### ✈️ Using the CDN\n\nJust use this snippet to include darken to your code:\n```html\n\u003cscript src=\"https://unpkg.com/darken\"\u003e\u003c/script\u003e\n\u003cscript\u003e\n\tconst darkmode = new darken();\n\u003c/script\u003e\n```\n\n### 📦 Using NPM\n\nInstall darken with npm:\n```sh\nnpm install darken\n```\n\nAnd import it in your code:\n```javascript\nimport darken from 'darken';\n\nconst darkmode = new darken();\n```\n\n## Usage\n\nHere is a basic usage of darken:\n```html\n\u003c!-- index.html --\u003e\n\n\u003cbutton id=\"darkmode-button\"\u003eToggle dark mode\u003c/button\u003e\n\n\u003cscript src=\"path/to/darken\"\u003e\u003c/script\u003e\n\u003cscript\u003e\n\tconst darkmode = new darken({\n\t\tclass: \"darkmode-active\",\n\t\tvariables: {\n\t\t\t\"--primary-color\" : [\"#000000\", \"#fafafa\"],\n\t\t\t\"--background-color\" : [\"#fafafa\", \"#000000\"]\n\t\t},\n\t\ttoggle: \"#darkmode-button\",\n\t});\n\u003c/script\u003e\n```\n\nYou can either use a class and/or CSS variables to customize your styles.\n\n\n## Options\n\n```javascript\nconst defaultOptions = {\n\tcontainer: null,\n\tdefault: \"light\",\n\ttoggle: null,\n\tremember: \"darken-mode\",\n\tusePrefersColorScheme: true,\n\ttimestamps: {},\n\tclass: \"darken\",\n\tvariables: {},\n\tstylesheets: {},\n}\n```\n\n### container\n*Type: `String`*, *Default: `null`*\n\nElement selector to the container of darken. The dark mode will be applied only to the selected container.\n\nIf the value is left to `null`, the document element will be selected instead.\n\n### default\n*Type: `String`*, *Default: `\"light\"`*\n\nDefines the default mode on page load.\n\n### toggle\n*Type: `String`*, *Default: `null`*\n\nElement selector to the toggle button, the selected element will call the `toggle` method on click.\n\n### remember\n*Type: `String`*, *Default: `\"darken-mode\"`*\n\nName of the value stored in the browser local storage, this value contains the active mode (\"dark\" or \"light\").\n\nIf this option is set to `null` the active mode is not stored.\n\n### usePrefersColorScheme\n*Type: `Boolean`*, *Default: `true`*\n\nIf `true` the `prefers-color-scheme` media query will be used to determine the default mode.\n\nIf the `remember` option is active, this will only be used if no active mode is stored (in most case the first time a user comes to the app/website). If the `remember` option is not active then a listener will be added to the `prefers-color-scheme` media query for live update.\n\n### stylesheets\n*Type: `Object`*, *Default: `{}`*\n\nDefine the stylesheet path of each mode. This stylesheet `href` will be changed on mode switch dynamically. The stylesheet will be removed if no path is given for a mode.\n\nDefault stylesheet `id` is `darken-stylesheet` but can be changed.\n\n```javascript\nstylesheets: {\n\tid: \"darkmode-stylesheet\",\n\tdark: \"dark.css\",\n\tlight: \"light.css\",\n}\n```\n\n### timestamps\n*Type: `Object`*, *Default: `{}`*\n\nDefine a timestamps mode switch to start light and dark modes at given times of the day.\n\nThere is 2 keys to the object, `dark` and `light`, the values of those keys are defining the times (using the format `\u003chours\u003e:\u003cminutes\u003e`) at wich the corresponding mode will start being active.\n\nIf the `remember` option is active, this will only be used if no active mode is stored (in most case the first time a user comes to the app/website). \n\nIf the `usePrefersColorScheme` option is active, this option will not be used.\n\n```javascript\ntimestamps: {\n\tdark: \"20:00\",\n\tlight: \"6:00\",\n}\n```\n\n### class\n*Type: `String`*, *Default: `\"darken\"`*\n\nClass that will be added to the selected container when the dark Fmode is active. The class is removed of the selected container once the dark mode is disabled.\n\nIf no container is selected, the class will be added to the `body` element instead.\n\n### variables\n*Type: `Object`*, *Default: `{}`*\n\nList of CSS variables that will change when the dark mode is active.\n\nThe keys of the object are the variables names, the value are arrays where the 1th index is the value the variable will take in lightmode and the 2nd index the value the variable will take in dark mode. This is the most compact way to use variables.\n\n```javascript\nvariables: {\n\t\"--name-of-the-variable\": [\"light mode value\", \"dark mode value\"],\n\t\"--background-color\": [\"white\", \"black\"],\n}\n```\n\nIf you prefer, you can use an object based syntax. This syntax is more clear but less compact.\n\n```javascript\nvariables: {\n\t\"--name-of-the-variable\": {\n\t\tlight: \"light mode value\",\n\t\tdark: \"dark mode value\"\n\t},\n\t\"--background-color\": {\n\t\tlight: \"white\", \n\t\tdark: \"black\"\n\t},\n}\n```\n\n\n\n## API\n\nThe `darken` class is the entry point to the library.\n\n```javascript\nconst darkmode = new darken(options, callback);\n```\n\nSee details about options [above](#options). The `options` are optional.\n\nThe `callback` method will be called at every mode switch with a `active` boolean parameter. The `callback` is optional.\n\n```javascript\nconst darkmode = new darken(function(active) {\n\tif (active) console.log(\"Dark mode is active\");\n\telse console.log(\"Dark mode is inactive\");\n});\n```\n\n### toggle()\n*Return: `none`*\n\nToggles dark mode.\n\n```javascript\ndarkmode.toggle();\n```\n\n### on()\n*Return: `none`*\n\nEnables dark mode.\n\n```javascript\ndarkmode.on();\n```\n\n### off()\n*Return: `none`*\n\nDisables dark mode.\n\n```javascript\ndarkmode.off();\n```\n\n\u003c!-- TEST --\u003e\n## Testing\n\nYou can launch tests and generate a coverage report using the following npm command :\n```sh\nnpm test\n```\nIf you want to test while developing, another command triggers the watch mode (But it does not generate coverage report) :\n```sh\nnpm run test:watch\n```\n\n\u003c!-- CONTRIBUTING --\u003e\n## Contributing\n\nAny help and contribution is always welcome, feel free to submit issues and/or contribute to the project.\n\n1. Fork the Project\n2. Create your Feature or Fix Branch (`git checkout -b feature/feature-name` or `git checkout -b fix/fix-name`)\n3. Commit your Changes (`git commit -m 'Add some feature or fix'`)\n4. Push to the Branch (`git push origin feature/feature-name` or `git push origin fix/fix-name`)\n5. Open a Pull Request\n\n\n\n\u003c!-- LICENSE --\u003e\n## License\n\ndarken is distributed under the MIT License. See `LICENSE` for more information.\n\n\n\n\u003c!-- CONTACT --\u003e\n## Contact\n[![Buy me a coffee badge](https://img.shields.io/badge/-Buy%20me%20a%20coffee-important?logo=buy%20me%20a%20coffee\u0026logoColor=white)](https://www.buymeacoffee.com/ColinEspinas)\n[![LinkedIn badge](https://img.shields.io/badge/-LinkedIn-black.svg?logo=linkedin\u0026colorB=555)](https://www.linkedin.com/in/colin-espinas-9739b8178/l)\n\nColin Espinas - [Website](https://colinespinas.com) - contact@colinespinas.com\n\nProject link: [https://github.com/ColinEspinas/darken](https://github.com/ColinEspinas/darken)\n\n\n\n\u003c!-- ACKNOWLEDGEMENTS --\u003e\n## Acknowledgements\n\n* [microbundler](https://github.com/developit/microbundle)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FColinEspinas%2Fdarken","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FColinEspinas%2Fdarken","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FColinEspinas%2Fdarken/lists"}