open-index/open-npm huggingface dataset:
npm package: @galpop/themetoggler
Description: An accessible theme toggler adapting dynamically to prefers-color-scheme media query.
Latest version: 1.1.3

# ThemeToggler

![npm (scoped)](https://img.shields.io/npm/v/@galpop/themetoggler) ![GitHub code size in bytes](https://img.shields.io/github/languages/code-size/gwendolinerodriguez/themetoggler)

![Dark Mode](/img/darkMode.png)
![Light Mode](/img/lightMode.png)

![Showcase](/img/toggler-showcase.gif)

A Web component, accessible theme toggler adapting dynamically to prefers-color-scheme media query, so to the user settings of dark mode enabled or not. It's a vanilla javascript web component, hence can be intalled on an Angular, React or Vue app.

Example here : <https://polyhedra-viewer.netlify.app/>

## Install

```bash
npm i @galpop/themetoggler
```

## Usage

This component is largely based on this [wonderful article](https://web.dev/prefers-color-scheme/) that lead to its own [dark mode toggler](https://github.com/GoogleChromeLabs/dark-mode-toggle) webcomponent.
Therefore, this assumes that you have your dark and light mode styles into different css files.

```html
<link rel="stylesheet" href="/dark.css" media="(prefers-color-scheme: dark)" />
<link
  rel="stylesheet"
  href="/light.css"
  media="(prefers-color-scheme: light)"
/>
<!-- The main stylesheet -->
<link rel="stylesheet" href="/style.css" />
```

Then add the component this way in your html, lightFocusColor and darkFocusColor being optional.

```javascript
<script type="module" src="../node_modules/@galpop/themetoggler/src/themetoggler.module.js"></script>
...
<theme-toggler lightFocusColor="#5859ff" darkFocusColor="#42c996"></theme-toggler>
```

## Features

- focusable with the keyboard
- reacts dynamically to the user setting defining dark/light mode

## Resources

This code is based on two main resources :

- <https://www.w3schools.com/howto/howto_css_switch.asp>
- <https://web.dev/prefers-color-scheme/>
npm package: @galtproject/libp2p-interfaces
Description: Interfaces for JS Libp2p
Latest version: 0.10.6

# JS libp2p Interfaces

[![](https://img.shields.io/badge/made%20by-Protocol%20Labs-blue.svg?style=flat-square)](http://protocol.ai)
[![](https://img.shields.io/badge/project-libp2p-yellow.svg?style=flat-square)](http://libp2p.io/)
[![](https://img.shields.io/badge/freenode-%23libp2p-yellow.svg?style=flat-square)](http://webchat.freenode.net/?channels=%23libp2p)
[![](https://img.shields.io/discourse/https/discuss.libp2p.io/posts.svg)](https://discuss.libp2p.io)
[![codecov](https://img.shields.io/codecov/c/github/libp2p/js-libp2p-interfaces.svg?style=flat-square)](https://codecov.io/gh/libp2p/js-libp2p-interfaces)
[![GitHub Workflow Status](https://img.shields.io/github/workflow/status/libp2p/js-libp2p-interfaces/ci?label=ci&style=flat-square)](https://github.com/libp2p/js-libp2p-interfaces/actions?query=branch%3Amaster+workflow%3Aci+)

> Contains test suites and interfaces you can use to implement the various components of libp2p.

## Lead Maintainer

[Jacob Heun](https://github.com/jacobheun).

## Interfaces

- [Connection](./src/connection)
- [Content Routing](./src/content-routing)
- [Crypto](./src/crypto)
- [Peer Discovery](./src/peer-discovery)
- [Peer Routing](./src/peer-routing)
- [Pubsub](./src/pubsub)
- [Record](./src/record)
- [Stream Muxer](./src/stream-muxer)
- [Topology](./src/topology)
- [Transport](./src/transport)

### Origin Repositories

For posterity, here are links to the original repositories for each of the interfaces (if they had one).
- [Connection](https://github.com/libp2p/interface-connection)
- [Content Routing](https://github.com/libp2p/interface-content-routing)
- [Peer Discovery](https://github.com/libp2p/interface-peer-discovery)
- [Peer Routing](https://github.com/libp2p/interface-peer-routing)
- [Pubsub](https://github.com/libp2p/js-libp2p-pubsub)
- [Stream Muxer](https://github.com/libp2p/interface-stream-muxer)
- [Transport](https://github.com/libp2p/interface-transport)

## Contribute

Feel free to join in. All welcome. Open an [issue](https://github.com/libp2p/js-interfaces/issues)!

This repository falls under the IPFS [Code of Conduct](https://github.com/ipfs/community/blob/master/code-of-conduct.md).

[![](https://cdn.rawgit.com/jbenet/contribute-ipfs-gif/master/img/contribute.gif)](https://github.com/ipfs/community/blob/master/contributing.md)

## License

MIT - Protocol Labs 2019