🌚🌝 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:

• A Work in Progress

You may read more about it in the following articles:

• Sun Moon Blending Mode
• Friends don't let friends implement dark mode alone

🛠 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