https://github.com/dgrammatiko/dark-switch

Dark, light mode switcher
https://github.com/dgrammatiko/dark-switch

Last synced: 11 days ago
JSON representation

Dark, light mode switcher

• Host: GitHub
• URL: https://github.com/dgrammatiko/dark-switch
• Owner: dgrammatiko
• License: mit
• Created: 2020-02-01T11:27:13.000Z (almost 5 years ago)
• Default Branch: master
• Last Pushed: 2024-04-23T18:16:19.000Z (7 months ago)
• Last Synced: 2024-05-02T05:25:36.198Z (6 months ago)
• Language: JavaScript
• Homepage: https://codepen.io/dgrammatiko/pen/bGNXVQQ?editors=1010
• Size: 220 KB
• Stars: 5
• Watchers: 3
• Forks: 1
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE

Awesome Lists containing this project

README

        
# Yet another dark/light mode switcher

- It is a custom element wrapper around https://github.com/postcss/postcss-dark-theme-class

- A bit less code than https://github.com/GoogleChromeLabs/dark-mode-toggle/blob/master/src/dark-mode-toggle.mjs

- NO Shadow DOM

- Accessibility based on https://inclusive-components.design/a-theme-switcher/

- and https://www.smashingmagazine.com/2017/09/building-inclusive-toggle-buttons/

- Easily digestable (npm, etc)

## Working with the code

- Clone the repo `git clone ...`

- Install dependencies `npm install`

- Mesh with the code `npm run server`

## Using the code

- In the HTML insert the custom element:

```html

```

- Include the javascript and the stylesheet as well

```html

```

## Attributes

You can control aspects of the switcher through attributes:

- default: Indicates a prefered default theme. If the browser supports `prefers-color-scheme` then this value will be ignored and will get the one from the system. Also since the switcher is using the browser's `localstate` to preserve the state this will be effective only the first time a user visits a page with the switcher (consecutive requests will take the value directly from the `localstate`)

- text-on: Allows for I8n of the default string `on`, can be ommited for English sites

- text-off: Allows for I8n of the default string `off`, can be ommited for English sites

- text-legend: Allows for I8n of the default string `dark theme:`, can be ommited for English sites

## Events

- Every time the state is changed a `change` event is ommited from the `dark-light-switch`

## Note

- The switcher will also synchronise to the system events for `prefers-color-scheme`

### Icons from the Font Awesome icon set:

- https://fontawesome.com/icons/sun?style=regular

- https://fontawesome.com/icons/moon?style=solid