shine-and-bright

Dark and Light Theme Switch CSS

Installation

npm i shine-and-bright

Usage

Include shine-and-bright/index.css in your application.
Below is an example of including it in the root CSS.

@import url("./node_modules/shine-and-bright/index.css");

Markup

Switch:

<button class="snb-shine-and-bright-switch">
  <span class="snb-shine-and-bright"></span>
</button>

It changes to a moon icon when an ancestor element has dark class.
e.g.:

<button id="foo" class="snb-shine-and-bright-switch">
  <span class="snb-shine-and-bright"></span>
</button>
<script>
  document.querySelector("#foo").addEventListener("click", () => {
    document.documentElement.classList.toggle("dark");
  });
</script>

<->

Twinkle on hover:

<button class="snb-shine-and-bright-switch">
  <span class="snb-shine-and-bright snb-twinkle-on-hover"></span>
</button>

Icon only:

<button class="snb-shine-and-bright"></button>

It changes to a moon icon when an ancestor element has dark class.

Moon only:

<button class="snb-shine"></button>

Sun only:

<button class="snb-bright"></button>

Customization

You can customize some styles using CSS properties.

:root {
  --snb-icon-size: 18px; /* default 18px */
  --snb-animation-duration: 300ms; /* default 300ms */
  --snb-switch-width: 40px; /* default 40px (when 18px) */
  --snb-switch-padding: 1px; /* default 1px (when 18px) */
  --snb-switch-border-width: 1px; /* default 1px (when 18px) */
  --snb-switch-border-color: #888; /* default #888 */
  --snb-bright-color: orange; /* default orange */
  --snb-bright-color-second: gold; /* default gold */
  --snb-shine-color: yellow; /* default yellow */
}