Awesome Open Source
Awesome Open Source

Favicon Switcher

Live preview

Light mode favicon example Dark mode favicon example

Switches site's favicon by matching media queries. It could be used for light/dark mode switching. Due to browsers don't support all Media Query features in link tag, this module fixes it.

Usage

Script doesn't require any setup or configuration and works like a polyfill. The example below shows how to make dark/light mode icon switching.

Use the main library to automatically turn icon switching on:

<script src="https://unpkg.com/[email protected]/dist/index.js" crossorigin="anonymous" type="application/javascript"></script>

If you need more control to turn switching on and off use one of the next module:

UMD

Use with UMD:

<script src="https://unpkg.com/[email protected]/dist/index.umd.js" crossorigin="anonymous" type="application/javascript"></script>
<script>faviconSwitcher()</script>

ESM

Use as ES module:

<script type="module" language="javascript">
  import initSwitcher from 'https://unpkg.com/[email protected]/dist/index.esm.js'

  // Subscribe to media queries changing events
  const unsubscribe = initSwitcher()
  // Unsubscribe later on some condition. For example on page navigation.
  unsubscribe()
</script>

Complete example

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <link rel="icon" media="(prefers-color-scheme:dark)" href="favicon-dark.png" type="image/png" />
    <link rel="icon" media="(prefers-color-scheme:light)" href="favicon-light.png" type="image/png" />
    <script src="https://unpkg.com/[email protected]/dist/index.js" crossorigin="anonymous" type="application/javascript"></script>
  </head>
  <body></body>
</html>

License

MIT © Rumkin


Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
javascript (70,419
ui (1,032
utils (80
favicon (27
theming (25
site (20