{"id":15646752,"url":"https://github.com/jonaskuske/favicon-mode-switcher","last_synced_at":"2025-04-15T11:53:00.922Z","repository":{"id":34915388,"uuid":"189743270","full_name":"jonaskuske/favicon-mode-switcher","owner":"jonaskuske","description":"🕯 Make your favicon adapt to dark and light mode","archived":false,"fork":false,"pushed_at":"2024-06-18T11:44:10.000Z","size":1183,"stargazers_count":13,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-28T19:45:03.252Z","etag":null,"topics":["color-scheme","dark-mode","dark-theme","favicon","icon","light-mode","light-theme","prefers-color-scheme"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/favicon-mode-switcher","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/jonaskuske.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","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-06-01T14:38:19.000Z","updated_at":"2024-06-18T11:44:07.000Z","dependencies_parsed_at":"2024-06-18T13:19:07.072Z","dependency_job_id":"777978aa-5f4c-4055-909c-452e31267ad9","html_url":"https://github.com/jonaskuske/favicon-mode-switcher","commit_stats":{"total_commits":52,"total_committers":2,"mean_commits":26.0,"dds":0.3653846153846154,"last_synced_commit":"460c98165448378a240f47efc5448214b82887e8"},"previous_names":[],"tags_count":7,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jonaskuske%2Ffavicon-mode-switcher","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jonaskuske%2Ffavicon-mode-switcher/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jonaskuske%2Ffavicon-mode-switcher/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jonaskuske%2Ffavicon-mode-switcher/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jonaskuske","download_url":"https://codeload.github.com/jonaskuske/favicon-mode-switcher/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248717249,"owners_count":21150389,"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":["color-scheme","dark-mode","dark-theme","favicon","icon","light-mode","light-theme","prefers-color-scheme"],"created_at":"2024-10-03T12:14:36.457Z","updated_at":"2025-04-15T11:53:00.903Z","avatar_url":"https://github.com/jonaskuske.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://www.npmjs.com/package/favicon-mode-switcher\"\u003e\u003cimg align=\"center\" src=\"https://img.shields.io/npm/v/favicon-mode-switcher.svg\" alt=\"NPM version\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://travis-ci.org/jonaskuske/favicon-mode-switcher\"\u003e\u003cimg align=\"center\" src=\"https://travis-ci.org/jonaskuske/favicon-mode-switcher.svg?branch=master\" alt=\"Build status\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://bundlephobia.com/result?p=favicon-mode-switcher@latest\"\u003e\u003cimg align=\"center\" src=\"https://img.shields.io/bundlephobia/minzip/favicon-mode-switcher/latest.svg\" alt=\"Bundle size\"\u003e\u003c/a\u003e\n  \u003ca href=\"./LICENSE\"\u003e\u003cimg align=\"center\" src=\"https://img.shields.io/npm/l/favicon-mode-switcher.svg\" alt=\"License\"\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n\u0026nbsp;  \n\u0026nbsp;\n\n\u003ch1 align=\"center\"\u003efavicon-mode-switcher\u003c/h1\u003e\n\u003cp align=\"center\"\u003e🕯 Make your favicon adapt to dark and light mode\u003c/p\u003e\n\n\u0026nbsp;\n\u0026nbsp;  \n\u0026nbsp;\n\u0026nbsp;\n\n## Installation\n\nYou can install `favicon-mode-switcher` using the package manager of your choice or load it through a CDN:\n\n**npm:**\n\n```bash\nnpm install favicon-mode-switcher\n```\n\n**yarn:**\n\n```bash\nyarn add favicon-mode-switcher\n```\n\n**CDN ([unpkg](https://unpkg.com)):**\n\n```html\n\u003cscript type=\"module\"\u003e\n  import faviconModeSwitcher from 'https://unpkg.com/favicon-mode-switcher/dist/index.min.mjs'\n  // ...\n\u003c/script\u003e\n```\n\nor the UMD build:\n\n```html\n\u003cscript src=\"https://unpkg.com/favicon-mode-switcher\"\u003e\n```\n\n\u003e 💡 Since all browsers supporting `(prefers-color-scheme)` also support JavaScript modules, usage of the module version is highly recommended. The UMD build is only meant for scenarios where you can't use `\u003cscript type=\"module\"\u003e`, for example when inserting the script using a WordPress hook.\n\n\u0026nbsp;\n\n## Usage\n\n#### TL;DR\n\n```js\nimport faviconModeSwitcher from 'favicon-mode-switcher'\n// or\nconst faviconModeSwitcher = require('favicon-mode-switcher')\n// or\nconst faviconModeSwitcher = window.faviconModeSwitcher.default\n\n// then...\n\nfaviconModeSwitcher('link[rel=\"shortcut icon\"]')\n// or\nfaviconModeSwitcher(document.querySelector('#favicon'))\n// or\nfaviconModeSwitcher({\n  element: document.querySelector('#favicon'),\n  href: { dark: '/icons/favicon-light.ico' },\n})\n```\n\n\u0026nbsp;\n\nThe module exports a single function as **default export**. If the UMD build is used, this function will be exposed on **`window.faviconModeSwitcher.default`**. It has the following type signature:\n\n```ts\nfunction faviconModeSwitcher(FaviconTarget | FaviconTarget[] | NodeListOf\u003cHTMLLinkElement\u003e): DestroyFunction\n```\n\nIt takes either the configuration for a single icon to be updated, or an Array containing multiple configurations if you want to keep many icons in sync with the active color scheme. `NodeList` is supported too, so you can use it with `document.querySelectorAll()`.\n\n\u003e 🕯 Even though it's technically not an icon, you can also update the web app manifest (`\u003clink rel=\"manifest\"\u003e`) of your website using `favicon-mode-switcher`!\n\n\u003cbr\u003e\n\nThe configuration for an icon is either:\n\n- a CSS selector string, which has to return a `\u003clink\u003e` element when passed to `document.querySelector()`\n- a `\u003clink\u003e` element itself\n- an Object, containing one of the above as the `element` property, along with an _optional_ `href` config\n\n```ts\ntype FaviconTarget =\n  | string\n  | HTMLLinkElement\n  | {\n      element: string | HTMLLinkElement\n      href?: { dark?: string; light?: string }\n    }\n```\n\n\u0026nbsp;\n\n### Automatic `href` updates\n\nIf you use a selector, Element or Object without `href` property as icon config, the icon's `href` will be updated automatically.\nFor this, `favicon-mode-switcher` will look for the substring \"dark\" or \"light\" in the `href` you specified in the HTML and replace it with the currently active color scheme.\n\u003cbr\u003e\u003cbr\u003e\n**For example:** here, the `href` will be replaced with `./my-favicon.dark.ico` whenever the device is in dark mode:\n\n```html\n\u003clink rel=\"shortcut icon\" href=\"./my-favicon.light.ico\" /\u003e\n```\n\n(if the `href` in the HTML doesn't contain either `\"light\"` or `\"dark\"`, nothing will happen)\n\n\u0026nbsp;\n\n### Specyfing the `href` to use\n\nAlternatively, you can specify `href` configuration when using an Object. The object keys must match a color scheme and the value is the `href` that should be used when the color scheme from the key is active.\n\u003cbr\u003e\u003cbr\u003e\n**For example:** with the following config the `href` of `\u003clink id=\"icon\"\u003e` will be set to `./logo-teal.ico` while the device is in dark mode, and `logo-navyblue.ico` while the device is in light mode.\n\n```js\n{ element: '#icon', href: { dark: './logo-teal.ico', light: './logo-navyblue.ico' } }\n```\n\n**However, you only need to specify the `href` for one color scheme:**  \nIf there is no `href` defined for the color scheme that is currently active, `favicon-mode-switcher` will simply use the one that was initially specified in the HTML.\n\n\u0026nbsp;\n\n### Stopping the mode switcher\n\nThe main function described above returns a destroy function when called. Run it and the switcher will stop and reset all the icons to their original `href`:\n\n```js\nconst destroyIconSwitcher = faviconModeSwitcher(document.querySelectorAll('.favicon'))\n\n// later...\ndestroyIconSwitcher()\n```\n\n\u0026nbsp;\n\n### Browser Support \u0026 SSR\n\nDetecting the active color scheme is a relatively new feature and as such has [limited browser support](https://caniuse.com/#feat=prefers-color-scheme). The script itself should run in any browser from at least Internet Explorer 9 upwards without throwing an error, so you can use it for Progressive Enhancement.  \nIt also doesn't throw if `window` is `undefined`, so you can safely require and execute it in a Node environment for SSR.\n\nNote that the ESModule versions (`.mjs` file extension) only work in browsers with support for `ES2015 / ES6`. Modern bundlers like webpack will automatically import these versions by default. If you're using such a bundler and need legacy browser support, either transpile the module yourself or directly import the CommonJS version at `dist/index.js`.\n\n\u0026nbsp;\n\u0026nbsp;  \n\u0026nbsp;\n\n---\n\n**PRs welcome!**\n\n\u0026nbsp;\n\n© 2021, Jonas Kuske\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjonaskuske%2Ffavicon-mode-switcher","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjonaskuske%2Ffavicon-mode-switcher","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjonaskuske%2Ffavicon-mode-switcher/lists"}