ThemeToggle

by Andrey Izman

HTML

<div class="Tooltip---root d-inline-block f-right">
<div class="ThemeToggle"><input type="checkbox" id="ThemeToggle" class="ThemeToggle--input">
  <label class="ThemeToggle--toggle" for="ThemeToggle">
    <div class="ThemeToggle--toggle-handle"></div>
    <div class="ThemeToggle--toggle-handle-icon ThemeToggle--sun"><svg viewBox="0 0 16 16" fill="currentcolor" role="img" aria-labelledby="title-8812071124069258" xmlns="http://www.w3.org/2000/svg">
        <title id="title-8812071124069258">Light theme icon (depiction of a sun)</title>
        <path d="M7.5 11.465a3.482 3.482.0 01-1.596-.662L4.11 12.596a.5.5.0 01-.707-.707l1.793-1.793A3.482 3.482.0 014.535 8.5H2a.5.5.0 010-1h2.535a3.482 3.482.0 01.662-1.596L3.404 4.11a.5.5.0 01.707-.707l1.793 1.793A3.482 3.482.0 017.5 4.535V2a.5.5.0 011 0v2.535a3.482 3.482.0 011.596.662l1.793-1.793a.5.5.0 01.707.707l-1.793 1.793c.343.458.577 1.003.662 1.596H14a.5.5.0 110 1h-2.535a3.482 3.482.0 01-.662 1.596l1.793 1.793a.5.5.0 01-.707.707l-1.793-1.793a3.482 3.482.0 01-1.596.662V14a.5.5.0 11-1 0v-2.535z"></path>
      </svg></div>
    <div class="ThemeToggle--toggle-handle-icon ThemeToggle--moon"><svg viewBox="0 0 16 16" fill="currentcolor" role="img" aria-labelledby="title-5971296394189265" xmlns="http://www.w3.org/2000/svg">
        <title id="title-5971296394189265">Dark theme icon (depiction of a moon)</title>
        <path d="M7.067 3.087a5 5 0 005.466 7.026A5 5 0 117.067 3.087z"></path>
      </svg></div>
  </label><span class="Tooltip" id="ThemeToggle--tooltip" role="tooltip" position="bottom-end">Set theme to dark (⇧+D)</span>
  </div>
</div>

SCSS

body {
  max-width: 300px;
}


html {
  --orange-rgb: 243, 128, 32;
  --orange: rgb(var(--orange-rgb));
  --gray-00-rgb: 23, 23, 24;
  --gray-00: rgb(var(--gray-00-rgb));
  --gray-2-rgb: 78, 82, 85;
  --gray-2: rgb(var(--gray-2-rgb));
  --gray-3-rgb: 98, 103, 106;
  --gray-3: rgb(var(--gray-3-rgb));
  --gray-6-rgb: 183, 187, 189;
  --gray-6: rgb(var(--gray-6-rgb));
  --focus-size: 0;
  --focus-color: rgba(var(--orange-rgb), .5);
  --background-color-rgb: 255, 255, 255;
  --background-color: rgb(var(--background-color-rgb));
  --gray-0-rgb: 29, 31, 32;
  --gray-0: rgb(var(--gray-0-rgb));
  --color-rgb: var(--gray-0-rgb);
  --color: rgb(var(--color-rgb));
  --line-height: 1.5;
}

html[theme=dark] {
  --color-rgb: 255, 255, 255;
  --color: rgb(var(--color-rgb));
  --background-color-rgb: var(--gray-0-rgb);
  --background-color: rgb(var(--background-color-rgb));
  color-scheme: dark;
}

html {
  line-height: var(--line-height);
  color: var(--color);
  background: var(--background-color);
}


.DocsToolbar--theme-toggle {
  display: flex;
}
.Superscript, .Tooltip---root {
  position: relative;
}
.ThemeToggle {
  width: 50px;
  height: 28px;
  border-radius: 99em;  
}
.ThemeToggle--input {
  -webkit-tap-highlight-color: transparent;
  position: absolute;
  opacity: 0;
  top: -9999em;
}
.ThemeToggle--toggle {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 99em;
  background: rgba(var(--gray-6-rgb),.7);
  cursor: pointer;
  box-shadow: 0 0 0 var(--focus-size)var(--focus-color);
}
.ThemeToggle--input:not([is-focus-visible])~.ThemeToggle--toggle {
  --focus-size: 0;
}
.ThemeToggle--input:checked~.ThemeToggle--toggle, [theme=dark] .ThemeToggle[data-is-loading=true] .ThemeToggle--toggle {
  background: rgba(var(--gray-2-rgb),.7);
}
.ThemeToggle--toggle-handle {
  position: absolute;
  top: 3px;
  left: 3px;
  --size: 22px;
  width: var(--size);
  height: var(--size);
  border-radius: 99em;
  background: #fff;
  box-shadow: 0 0.15em...

JavaScript

$("#ThemeToggle").on("change", function() {
	const $this = $(this);
  const is_checked = $this.prop("checked");
  console.log({is_checked});
  $("html").attr("theme", is_checked ? "dark" : "light");
  $("#ThemeToggle--tooltip").text(is_checked ? "Set theme to light (⇧+D)" : "Set theme to dark (⇧+D)")
});