1.1.1 • Published 3 years ago
sun-moon-toggle v1.1.1
🌚🌝 Sun Moon Toggle
🦄 How it works
The CSS property mix-blend-mode
(browser support) specifies how colors blend when graphics are stacked together. In brief, covering your site with a layer same as your background color and using mix-blend-mode: difference
will automatically yield a black background while preserving the contrast with the foreground.
We're using mix-blend-mode: exclusion
which is a lower contrast version of mix-blend-mode: difference
.
Site that uses this:
You may read more about it in the following articles:
🛠 Installation
$ yarn add sun-moon-toggle
🦊 Example
import React from 'react'
import SunMoonToggle from 'sun-moon-toggle'
const Layout = () => (
<div>
{/* put it before other content */}
<SunMoonToggle background="#efefef" style={{ right: '1rem' }} />
<main>
<h1>Hello, it's me</h1>
<img {/** img is by default escaped */} />
<iframe {/** iframe also */} />
<p>
Wrap emojis in a class
<span class="emoji">🌝🌚</span>
</p>
</main>
</div>
)
🍱 Props
Props | Type | Optional | Default | What it does |
---|---|---|---|---|
backgroundColor | string | Yes | 'white' | Background color of your site, used to compute the dark color while preserving the contrast to your foreground |
type | 'default' , 'hipster' | Yes | 'default' | 'default' uses opacity (see gif here), 'hipster' uses the expansion effect (gif above) |
style | object | Yes | undefined | In case you need to move the toggle, use this prop to set position on the screen |
1.1.1
3 years ago
1.1.0
3 years ago
1.0.18
3 years ago
1.0.17
3 years ago
1.0.16
5 years ago
1.0.15
5 years ago
1.0.14
5 years ago
1.0.13
5 years ago
1.0.12
5 years ago
1.0.11
5 years ago
1.0.10
5 years ago
1.0.9
5 years ago
1.0.8
5 years ago
1.0.7
5 years ago
1.0.6
5 years ago
1.0.5
5 years ago
1.0.2
5 years ago
1.0.1
5 years ago
1.0.0
5 years ago