https://github.com/remy/light-dark-switcher

Light/Dark theme switcher for Firefox
https://github.com/remy/light-dark-switcher

addon dark firefox firefox-addon firefox-extension light theme

Last synced: 17 days ago
JSON representation

Light/Dark theme switcher for Firefox

• Host: GitHub
• URL: https://github.com/remy/light-dark-switcher
• Owner: remy
• Created: 2021-06-21T09:24:01.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2021-12-21T20:17:32.000Z (almost 3 years ago)
• Last Synced: 2024-05-02T00:10:35.394Z (7 months ago)
• Topics: addon, dark, firefox, firefox-addon, firefox-extension, light, theme
• Language: JavaScript
• Homepage:
• Size: 411 KB
• Stars: 15
• Watchers: 2
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • Funding: .github/FUNDING.yml

Awesome Lists containing this project

README

        
# Light/Dark switcher

This Firefox addon bakes in functionality I suspect will eventually make its way into the browser, but in the mean time it's an extension that quietly waits for your system theme to toggle and reflects the change in your theme at the same time.

## Overview

This project uses two methods to allow the user to select their theme. The first is using the `management` permission which allows us to iterate through each theme installed in the browser.

The second method uses the excellent [color.firefox.com](https://color.firefox.com) and source code from that project to convert a `https://color.firefox.com?theme=...` URL to a theme.

Once selected, this content is stored in the `storage` addon feature.

Under the hood, a background script watches a media query and fires an event when it changes:

```

window.matchMedia('(prefers-color-scheme: dark)').addListener((e) => {

  toggleTo(e.matches ? DARK : LIGHT);

});

```

## Specific notes about code/linting

- Function eval is being used in a 3rd party module, specifically: `json-url` - this is used by the color.firefox project to convert encoded themes into JSON (saving a handful of bytes)

- `innerHTML` is used to generate the list of theme options - this is consistently faster both in render time and writing time to use over DOM scripting, and is controlled by the addon and not user generated.

## To test and develop

- `npm ci` to install all dependencies

- `npm run dev` will generate the root `background.html` file required for testing

- `npm run build` to generate a new build

## License

- [MIT License](https://rem.mit-license.org/)