demo-switch

Summary

A floating sun/moon control pinned to the side of the viewport. Clicking either icon flips a dark_bg / light_bg class on the page wrapper, which a parallel darkmode.css rewires for every component.

HTML structure (minimal)

<div class="demo-switch">
  <div class="demo-dark-bg demo_switch">
    <button><i class="fas fa-moon"></i></button>
  </div>
  <div class="demo-light-bg demo_switch">
    <button><i class="fas fa-sun"></i></button>
  </div>
</div>

Key SCSS tokens

.demo-switch {
  position: fixed; right: 20px; top: 50%;
  transform: translateY(-50%);
  display: flex; flex-direction: column; gap: 8px;
  z-index: 999;
}
.demo_switch button {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--theme-color); color: #fff;
  display: grid; place-items: center;
}
.dark_bg { background-color: #111112 !important; }

Animation logic

if ($('.demo-switch').length) {
  $('.demo_switch button').on('click', function() {
    $('.boxed_wrapper').toggleClass(function() {
      return $(this).is('.dark_bg, .light_bg') ? 'dark_bg light_bg' : 'dark_bg';
    });
  });
}

Notable details

• All theme overrides live in a single darkmode.css scoped under .dark_bg ...; no CSS-variable rewrite is needed.
• The toggle never persists across reloads — it is a demo widget, not a full theme system. Wrap the click in a localStorage.setItem('theme', ...) to upgrade.
• Two buttons rather than one let you bias the user toward "back to light", which is unusual.

Use when

• Quick demos for clients deciding whether to ship light or dark.
• Templates that want to advertise dark-mode support without committing to an OS-preference media query.

Caveats

• Class swap on .boxed_wrapper means everything below the switch needs to live inside that wrapper — verify before extracting components.
• No prefers-color-scheme integration; users who prefer dark by default land on light.