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