Theme Preview | pygmentize-stylesheets

Preview of all themes with example code. Be aware that the current theme of the site also effects the theme previews since non-existent values use initial in highlight.scss. Based on dark or light mode initial values change.

abap

Raw CSS Preview | Download CSS | Download SCSS-Mixin

Python

def available_next(itrbl):
    """
    Splits an iterable into two streams
    i is the normal ordered iterable
    n is the next element from i
    """
    i, n = tee(itrbl, 2)
    n = chain(islice(n, 1, None), [None])
    return zip(i, n)

Javascript

function switchTheme(e) {
  if (e.target.checked) {
    currentTheme = 'light';
  }
  else {
    currentTheme = 'dark';
  }
  document.documentElement.setAttribute('data-theme', currentTheme);
  localStorage.setItem('theme', currentTheme);
}

SCSS

@mixin dark-scheme {
  --font-color: #e3e0d7;
  --bg-color: #242424;
  --heading-color: #fff;
  --link-color: #80a0ff;
  --link-color-visited: #d787ff;
}
@media (prefers-color-scheme: dark) {
  :root {
    @include dark-scheme;
  }
}
[data-theme="dark"]:root {
  @include dark-scheme;
}

HTML

<header>
  <nav class="theme-switch-wrapper">
    <h1>Theme Preview</h1>
    <label class="theme-switch" for="checkbox">
      <input type="checkbox" id="checkbox" />
      <div class="round slider"></div>
    </label>
  </nav>
</header>

aimmslexer

Raw CSS Preview | Download CSS | Download SCSS-Mixin

Python

def available_next(itrbl):
    """
    Splits an iterable into two streams
    i is the normal ordered iterable
    n is the next element from i
    """
    i, n = tee(itrbl, 2)
    n = chain(islice(n, 1, None), [None])
    return zip(i, n)

Javascript

function switchTheme(e) {
  if (e.target.checked) {
    currentTheme = 'light';
  }
  else {
    currentTheme = 'dark';
  }
  document.documentElement.setAttribute('data-theme', currentTheme);
  localStorage.setItem('theme', currentTheme);
}

SCSS

@mixin dark-scheme {
  --font-color: #e3e0d7;
  --bg-color: #242424;
  --heading-color: #fff;
  --link-color: #80a0ff;
  --link-color-visited: #d787ff;
}
@media (prefers-color-scheme: dark) {
  :root {
    @include dark-scheme;
  }
}
[data-theme="dark"]:root {
  @include dark-scheme;
}

HTML

<header>
  <nav class="theme-switch-wrapper">
    <h1>Theme Preview</h1>
    <label class="theme-switch" for="checkbox">
      <input type="checkbox" id="checkbox" />
      <div class="round slider"></div>
    </label>
  </nav>
</header>

algol

Raw CSS Preview | Download CSS | Download SCSS-Mixin

Python

def available_next(itrbl):
    """
    Splits an iterable into two streams
    i is the normal ordered iterable
    n is the next element from i
    """
    i, n = tee(itrbl, 2)
    n = chain(islice(n, 1, None), [None])
    return zip(i, n)

Javascript

function switchTheme(e) {
  if (e.target.checked) {
    currentTheme = 'light';
  }
  else {
    currentTheme = 'dark';
  }
  document.documentElement.setAttribute('data-theme', currentTheme);
  localStorage.setItem('theme', currentTheme);
}

SCSS

@mixin dark-scheme {
  --font-color: #e3e0d7;
  --bg-color: #242424;
  --heading-color: #fff;
  --link-color: #80a0ff;
  --link-color-visited: #d787ff;
}
@media (prefers-color-scheme: dark) {
  :root {
    @include dark-scheme;
  }
}
[data-theme="dark"]:root {
  @include dark-scheme;
}

HTML

<header>
  <nav class="theme-switch-wrapper">
    <h1>Theme Preview</h1>
    <label class="theme-switch" for="checkbox">
      <input type="checkbox" id="checkbox" />
      <div class="round slider"></div>
    </label>
  </nav>
</header>

algol_nu

Raw CSS Preview | Download CSS | Download SCSS-Mixin

Python

def available_next(itrbl):
    """
    Splits an iterable into two streams
    i is the normal ordered iterable
    n is the next element from i
    """
    i, n = tee(itrbl, 2)
    n = chain(islice(n, 1, None), [None])
    return zip(i, n)

Javascript

function switchTheme(e) {
  if (e.target.checked) {
    currentTheme = 'light';
  }
  else {
    currentTheme = 'dark';
  }
  document.documentElement.setAttribute('data-theme', currentTheme);
  localStorage.setItem('theme', currentTheme);
}

SCSS

@mixin dark-scheme {
  --font-color: #e3e0d7;
  --bg-color: #242424;
  --heading-color: #fff;
  --link-color: #80a0ff;
  --link-color-visited: #d787ff;
}
@media (prefers-color-scheme: dark) {
  :root {
    @include dark-scheme;
  }
}
[data-theme="dark"]:root {
  @include dark-scheme;
}

HTML

<header>
  <nav class="theme-switch-wrapper">
    <h1>Theme Preview</h1>
    <label class="theme-switch" for="checkbox">
      <input type="checkbox" id="checkbox" />
      <div class="round slider"></div>
    </label>
  </nav>
</header>

apprentice

Raw CSS Preview | Download CSS | Download SCSS-Mixin

Python

def available_next(itrbl):
    """
    Splits an iterable into two streams
    i is the normal ordered iterable
    n is the next element from i
    """
    i, n = tee(itrbl, 2)
    n = chain(islice(n, 1, None), [None])
    return zip(i, n)

Javascript

function switchTheme(e) {
  if (e.target.checked) {
    currentTheme = 'light';
  }
  else {
    currentTheme = 'dark';
  }
  document.documentElement.setAttribute('data-theme', currentTheme);
  localStorage.setItem('theme', currentTheme);
}

SCSS

@mixin dark-scheme {
  --font-color: #e3e0d7;
  --bg-color: #242424;
  --heading-color: #fff;
  --link-color: #80a0ff;
  --link-color-visited: #d787ff;
}
@media (prefers-color-scheme: dark) {
  :root {
    @include dark-scheme;
  }
}
[data-theme="dark"]:root {
  @include dark-scheme;
}

HTML

<header>
  <nav class="theme-switch-wrapper">
    <h1>Theme Preview</h1>
    <label class="theme-switch" for="checkbox">
      <input type="checkbox" id="checkbox" />
      <div class="round slider"></div>
    </label>
  </nav>
</header>

arduino

Raw CSS Preview | Download CSS | Download SCSS-Mixin

Python

def available_next(itrbl):
    """
    Splits an iterable into two streams
    i is the normal ordered iterable
    n is the next element from i
    """
    i, n = tee(itrbl, 2)
    n = chain(islice(n, 1, None), [None])
    return zip(i, n)

Javascript

function switchTheme(e) {
  if (e.target.checked) {
    currentTheme = 'light';
  }
  else {
    currentTheme = 'dark';
  }
  document.documentElement.setAttribute('data-theme', currentTheme);
  localStorage.setItem('theme', currentTheme);
}

SCSS

@mixin dark-scheme {
  --font-color: #e3e0d7;
  --bg-color: #242424;
  --heading-color: #fff;
  --link-color: #80a0ff;
  --link-color-visited: #d787ff;
}
@media (prefers-color-scheme: dark) {
  :root {
    @include dark-scheme;
  }
}
[data-theme="dark"]:root {
  @include dark-scheme;
}

HTML

<header>
  <nav class="theme-switch-wrapper">
    <h1>Theme Preview</h1>
    <label class="theme-switch" for="checkbox">
      <input type="checkbox" id="checkbox" />
      <div class="round slider"></div>
    </label>
  </nav>
</header>

autumn

Raw CSS Preview | Download CSS | Download SCSS-Mixin

Python

def available_next(itrbl):
    """
    Splits an iterable into two streams
    i is the normal ordered iterable
    n is the next element from i
    """
    i, n = tee(itrbl, 2)
    n = chain(islice(n, 1, None), [None])
    return zip(i, n)

Javascript

function switchTheme(e) {
  if (e.target.checked) {
    currentTheme = 'light';
  }
  else {
    currentTheme = 'dark';
  }
  document.documentElement.setAttribute('data-theme', currentTheme);
  localStorage.setItem('theme', currentTheme);
}

SCSS

@mixin dark-scheme {
  --font-color: #e3e0d7;
  --bg-color: #242424;
  --heading-color: #fff;
  --link-color: #80a0ff;
  --link-color-visited: #d787ff;
}
@media (prefers-color-scheme: dark) {
  :root {
    @include dark-scheme;
  }
}
[data-theme="dark"]:root {
  @include dark-scheme;
}

HTML

<header>
  <nav class="theme-switch-wrapper">
    <h1>Theme Preview</h1>
    <label class="theme-switch" for="checkbox">
      <input type="checkbox" id="checkbox" />
      <div class="round slider"></div>
    </label>
  </nav>
</header>

base16-3024

Raw CSS Preview | Download CSS | Download SCSS-Mixin

Python

def available_next(itrbl):
    """
    Splits an iterable into two streams
    i is the normal ordered iterable
    n is the next element from i
    """
    i, n = tee(itrbl, 2)
    n = chain(islice(n, 1, None), [None])
    return zip(i, n)

Javascript

function switchTheme(e) {
  if (e.target.checked) {
    currentTheme = 'light';
  }
  else {
    currentTheme = 'dark';
  }
  document.documentElement.setAttribute('data-theme', currentTheme);
  localStorage.setItem('theme', currentTheme);
}

SCSS

@mixin dark-scheme {
  --font-color: #e3e0d7;
  --bg-color: #242424;
  --heading-color: #fff;
  --link-color: #80a0ff;
  --link-color-visited: #d787ff;
}
@media (prefers-color-scheme: dark) {
  :root {
    @include dark-scheme;
  }
}
[data-theme="dark"]:root {
  @include dark-scheme;
}

HTML

<header>
  <nav class="theme-switch-wrapper">
    <h1>Theme Preview</h1>
    <label class="theme-switch" for="checkbox">
      <input type="checkbox" id="checkbox" />
      <div class="round slider"></div>
    </label>
  </nav>
</header>

base16-apathy

Raw CSS Preview | Download CSS | Download SCSS-Mixin

Python

def available_next(itrbl):
    """
    Splits an iterable into two streams
    i is the normal ordered iterable
    n is the next element from i
    """
    i, n = tee(itrbl, 2)
    n = chain(islice(n, 1, None), [None])
    return zip(i, n)

Javascript

function switchTheme(e) {
  if (e.target.checked) {
    currentTheme = 'light';
  }
  else {
    currentTheme = 'dark';
  }
  document.documentElement.setAttribute('data-theme', currentTheme);
  localStorage.setItem('theme', currentTheme);
}

SCSS

@mixin dark-scheme {
  --font-color: #e3e0d7;
  --bg-color: #242424;
  --heading-color: #fff;
  --link-color: #80a0ff;
  --link-color-visited: #d787ff;
}
@media (prefers-color-scheme: dark) {
  :root {
    @include dark-scheme;
  }
}
[data-theme="dark"]:root {
  @include dark-scheme;
}

HTML

<header>
  <nav class="theme-switch-wrapper">
    <h1>Theme Preview</h1>
    <label class="theme-switch" for="checkbox">
      <input type="checkbox" id="checkbox" />
      <div class="round slider"></div>
    </label>
  </nav>
</header>

base16-ashes

Raw CSS Preview | Download CSS | Download SCSS-Mixin

Python

def available_next(itrbl):
    """
    Splits an iterable into two streams
    i is the normal ordered iterable
    n is the next element from i
    """
    i, n = tee(itrbl, 2)
    n = chain(islice(n, 1, None), [None])
    return zip(i, n)

Javascript

function switchTheme(e) {
  if (e.target.checked) {
    currentTheme = 'light';
  }
  else {
    currentTheme = 'dark';
  }
  document.documentElement.setAttribute('data-theme', currentTheme);
  localStorage.setItem('theme', currentTheme);
}

SCSS

@mixin dark-scheme {
  --font-color: #e3e0d7;
  --bg-color: #242424;
  --heading-color: #fff;
  --link-color: #80a0ff;
  --link-color-visited: #d787ff;
}
@media (prefers-color-scheme: dark) {
  :root {
    @include dark-scheme;
  }
}
[data-theme="dark"]:root {
  @include dark-scheme;
}

HTML

<header>
  <nav class="theme-switch-wrapper">
    <h1>Theme Preview</h1>
    <label class="theme-switch" for="checkbox">
      <input type="checkbox" id="checkbox" />
      <div class="round slider"></div>
    </label>
  </nav>
</header>

base16-atelier-cave-light

Raw CSS Preview | Download CSS | Download SCSS-Mixin

Python

def available_next(itrbl):
    """
    Splits an iterable into two streams
    i is the normal ordered iterable
    n is the next element from i
    """
    i, n = tee(itrbl, 2)
    n = chain(islice(n, 1, None), [None])
    return zip(i, n)

Javascript

function switchTheme(e) {
  if (e.target.checked) {
    currentTheme = 'light';
  }
  else {
    currentTheme = 'dark';
  }
  document.documentElement.setAttribute('data-theme', currentTheme);
  localStorage.setItem('theme', currentTheme);
}

SCSS

@mixin dark-scheme {
  --font-color: #e3e0d7;
  --bg-color: #242424;
  --heading-color: #fff;
  --link-color: #80a0ff;
  --link-color-visited: #d787ff;
}
@media (prefers-color-scheme: dark) {
  :root {
    @include dark-scheme;
  }
}
[data-theme="dark"]:root {
  @include dark-scheme;
}

HTML

<header>
  <nav class="theme-switch-wrapper">
    <h1>Theme Preview</h1>
    <label class="theme-switch" for="checkbox">
      <input type="checkbox" id="checkbox" />
      <div class="round slider"></div>
    </label>
  </nav>
</header>

base16-atelier-cave

Raw CSS Preview | Download CSS | Download SCSS-Mixin

Python

def available_next(itrbl):
    """
    Splits an iterable into two streams
    i is the normal ordered iterable
    n is the next element from i
    """
    i, n = tee(itrbl, 2)
    n = chain(islice(n, 1, None), [None])
    return zip(i, n)

Javascript

function switchTheme(e) {
  if (e.target.checked) {
    currentTheme = 'light';
  }
  else {
    currentTheme = 'dark';
  }
  document.documentElement.setAttribute('data-theme', currentTheme);
  localStorage.setItem('theme', currentTheme);
}

SCSS

@mixin dark-scheme {
  --font-color: #e3e0d7;
  --bg-color: #242424;
  --heading-color: #fff;
  --link-color: #80a0ff;
  --link-color-visited: #d787ff;
}
@media (prefers-color-scheme: dark) {
  :root {
    @include dark-scheme;
  }
}
[data-theme="dark"]:root {
  @include dark-scheme;
}

HTML

<header>
  <nav class="theme-switch-wrapper">
    <h1>Theme Preview</h1>
    <label class="theme-switch" for="checkbox">
      <input type="checkbox" id="checkbox" />
      <div class="round slider"></div>
    </label>
  </nav>
</header>

base16-atelier-dune-light

Raw CSS Preview | Download CSS | Download SCSS-Mixin

Python

def available_next(itrbl):
    """
    Splits an iterable into two streams
    i is the normal ordered iterable
    n is the next element from i
    """
    i, n = tee(itrbl, 2)
    n = chain(islice(n, 1, None), [None])
    return zip(i, n)

Javascript

function switchTheme(e) {
  if (e.target.checked) {
    currentTheme = 'light';
  }
  else {
    currentTheme = 'dark';
  }
  document.documentElement.setAttribute('data-theme', currentTheme);
  localStorage.setItem('theme', currentTheme);
}

SCSS

@mixin dark-scheme {
  --font-color: #e3e0d7;
  --bg-color: #242424;
  --heading-color: #fff;
  --link-color: #80a0ff;
  --link-color-visited: #d787ff;
}
@media (prefers-color-scheme: dark) {
  :root {
    @include dark-scheme;
  }
}
[data-theme="dark"]:root {
  @include dark-scheme;
}

HTML

<header>
  <nav class="theme-switch-wrapper">
    <h1>Theme Preview</h1>
    <label class="theme-switch" for="checkbox">
      <input type="checkbox" id="checkbox" />
      <div class="round slider"></div>
    </label>
  </nav>
</header>

base16-atelier-dune

Raw CSS Preview | Download CSS | Download SCSS-Mixin

Python

def available_next(itrbl):
    """
    Splits an iterable into two streams
    i is the normal ordered iterable
    n is the next element from i
    """
    i, n = tee(itrbl, 2)
    n = chain(islice(n, 1, None), [None])
    return zip(i, n)

Javascript

function switchTheme(e) {
  if (e.target.checked) {
    currentTheme = 'light';
  }
  else {
    currentTheme = 'dark';
  }
  document.documentElement.setAttribute('data-theme', currentTheme);
  localStorage.setItem('theme', currentTheme);
}

SCSS

@mixin dark-scheme {
  --font-color: #e3e0d7;
  --bg-color: #242424;
  --heading-color: #fff;
  --link-color: #80a0ff;
  --link-color-visited: #d787ff;
}
@media (prefers-color-scheme: dark) {
  :root {
    @include dark-scheme;
  }
}
[data-theme="dark"]:root {
  @include dark-scheme;
}

HTML

<header>
  <nav class="theme-switch-wrapper">
    <h1>Theme Preview</h1>
    <label class="theme-switch" for="checkbox">
      <input type="checkbox" id="checkbox" />
      <div class="round slider"></div>
    </label>
  </nav>
</header>

base16-atelier-estuary-light

Raw CSS Preview | Download CSS | Download SCSS-Mixin

Python

def available_next(itrbl):
    """
    Splits an iterable into two streams
    i is the normal ordered iterable
    n is the next element from i
    """
    i, n = tee(itrbl, 2)
    n = chain(islice(n, 1, None), [None])
    return zip(i, n)

Javascript

function switchTheme(e) {
  if (e.target.checked) {
    currentTheme = 'light';
  }
  else {
    currentTheme = 'dark';
  }
  document.documentElement.setAttribute('data-theme', currentTheme);
  localStorage.setItem('theme', currentTheme);
}

SCSS

@mixin dark-scheme {
  --font-color: #e3e0d7;
  --bg-color: #242424;
  --heading-color: #fff;
  --link-color: #80a0ff;
  --link-color-visited: #d787ff;
}
@media (prefers-color-scheme: dark) {
  :root {
    @include dark-scheme;
  }
}
[data-theme="dark"]:root {
  @include dark-scheme;
}

HTML

<header>
  <nav class="theme-switch-wrapper">
    <h1>Theme Preview</h1>
    <label class="theme-switch" for="checkbox">
      <input type="checkbox" id="checkbox" />
      <div class="round slider"></div>
    </label>
  </nav>
</header>

base16-atelier-estuary

Raw CSS Preview | Download CSS | Download SCSS-Mixin

Python

def available_next(itrbl):
    """
    Splits an iterable into two streams
    i is the normal ordered iterable
    n is the next element from i
    """
    i, n = tee(itrbl, 2)
    n = chain(islice(n, 1, None), [None])
    return zip(i, n)

Javascript

function switchTheme(e) {
  if (e.target.checked) {
    currentTheme = 'light';
  }
  else {
    currentTheme = 'dark';
  }
  document.documentElement.setAttribute('data-theme', currentTheme);
  localStorage.setItem('theme', currentTheme);
}

SCSS

@mixin dark-scheme {
  --font-color: #e3e0d7;
  --bg-color: #242424;
  --heading-color: #fff;
  --link-color: #80a0ff;
  --link-color-visited: #d787ff;
}
@media (prefers-color-scheme: dark) {
  :root {
    @include dark-scheme;
  }
}
[data-theme="dark"]:root {
  @include dark-scheme;
}

HTML

<header>
  <nav class="theme-switch-wrapper">
    <h1>Theme Preview</h1>
    <label class="theme-switch" for="checkbox">
      <input type="checkbox" id="checkbox" />
      <div class="round slider"></div>
    </label>
  </nav>
</header>

base16-atelier-forest-light

Raw CSS Preview | Download CSS | Download SCSS-Mixin

Python

def available_next(itrbl):
    """
    Splits an iterable into two streams
    i is the normal ordered iterable
    n is the next element from i
    """
    i, n = tee(itrbl, 2)
    n = chain(islice(n, 1, None), [None])
    return zip(i, n)

Javascript

function switchTheme(e) {
  if (e.target.checked) {
    currentTheme = 'light';
  }
  else {
    currentTheme = 'dark';
  }
  document.documentElement.setAttribute('data-theme', currentTheme);
  localStorage.setItem('theme', currentTheme);
}

SCSS

@mixin dark-scheme {
  --font-color: #e3e0d7;
  --bg-color: #242424;
  --heading-color: #fff;
  --link-color: #80a0ff;
  --link-color-visited: #d787ff;
}
@media (prefers-color-scheme: dark) {
  :root {
    @include dark-scheme;
  }
}
[data-theme="dark"]:root {
  @include dark-scheme;
}

HTML

<header>
  <nav class="theme-switch-wrapper">
    <h1>Theme Preview</h1>
    <label class="theme-switch" for="checkbox">
      <input type="checkbox" id="checkbox" />
      <div class="round slider"></div>
    </label>
  </nav>
</header>

base16-atelier-forest

Raw CSS Preview | Download CSS | Download SCSS-Mixin

Python

def available_next(itrbl):
    """
    Splits an iterable into two streams
    i is the normal ordered iterable
    n is the next element from i
    """
    i, n = tee(itrbl, 2)
    n = chain(islice(n, 1, None), [None])
    return zip(i, n)

Javascript

function switchTheme(e) {
  if (e.target.checked) {
    currentTheme = 'light';
  }
  else {
    currentTheme = 'dark';
  }
  document.documentElement.setAttribute('data-theme', currentTheme);
  localStorage.setItem('theme', currentTheme);
}

SCSS

@mixin dark-scheme {
  --font-color: #e3e0d7;
  --bg-color: #242424;
  --heading-color: #fff;
  --link-color: #80a0ff;
  --link-color-visited: #d787ff;
}
@media (prefers-color-scheme: dark) {
  :root {
    @include dark-scheme;
  }
}
[data-theme="dark"]:root {
  @include dark-scheme;
}

HTML

<header>
  <nav class="theme-switch-wrapper">
    <h1>Theme Preview</h1>
    <label class="theme-switch" for="checkbox">
      <input type="checkbox" id="checkbox" />
      <div class="round slider"></div>
    </label>
  </nav>
</header>

base16-atelier-heath-light

Raw CSS Preview | Download CSS | Download SCSS-Mixin

Python

def available_next(itrbl):
    """
    Splits an iterable into two streams
    i is the normal ordered iterable
    n is the next element from i
    """
    i, n = tee(itrbl, 2)
    n = chain(islice(n, 1, None), [None])
    return zip(i, n)

Javascript

function switchTheme(e) {
  if (e.target.checked) {
    currentTheme = 'light';
  }
  else {
    currentTheme = 'dark';
  }
  document.documentElement.setAttribute('data-theme', currentTheme);
  localStorage.setItem('theme', currentTheme);
}

SCSS

@mixin dark-scheme {
  --font-color: #e3e0d7;
  --bg-color: #242424;
  --heading-color: #fff;
  --link-color: #80a0ff;
  --link-color-visited: #d787ff;
}
@media (prefers-color-scheme: dark) {
  :root {
    @include dark-scheme;
  }
}
[data-theme="dark"]:root {
  @include dark-scheme;
}

HTML

<header>
  <nav class="theme-switch-wrapper">
    <h1>Theme Preview</h1>
    <label class="theme-switch" for="checkbox">
      <input type="checkbox" id="checkbox" />
      <div class="round slider"></div>
    </label>
  </nav>
</header>

base16-atelier-heath

Raw CSS Preview | Download CSS | Download SCSS-Mixin

Python

def available_next(itrbl):
    """
    Splits an iterable into two streams
    i is the normal ordered iterable
    n is the next element from i
    """
    i, n = tee(itrbl, 2)
    n = chain(islice(n, 1, None), [None])
    return zip(i, n)

Javascript

function switchTheme(e) {
  if (e.target.checked) {
    currentTheme = 'light';
  }
  else {
    currentTheme = 'dark';
  }
  document.documentElement.setAttribute('data-theme', currentTheme);
  localStorage.setItem('theme', currentTheme);
}

SCSS

@mixin dark-scheme {
  --font-color: #e3e0d7;
  --bg-color: #242424;
  --heading-color: #fff;
  --link-color: #80a0ff;
  --link-color-visited: #d787ff;
}
@media (prefers-color-scheme: dark) {
  :root {
    @include dark-scheme;
  }
}
[data-theme="dark"]:root {
  @include dark-scheme;
}

HTML

<header>
  <nav class="theme-switch-wrapper">
    <h1>Theme Preview</h1>
    <label class="theme-switch" for="checkbox">
      <input type="checkbox" id="checkbox" />
      <div class="round slider"></div>
    </label>
  </nav>
</header>

base16-atelier-lakeside-light

Raw CSS Preview | Download CSS | Download SCSS-Mixin

Python

def available_next(itrbl):
    """
    Splits an iterable into two streams
    i is the normal ordered iterable
    n is the next element from i
    """
    i, n = tee(itrbl, 2)
    n = chain(islice(n, 1, None), [None])
    return zip(i, n)

Javascript

function switchTheme(e) {
  if (e.target.checked) {
    currentTheme = 'light';
  }
  else {
    currentTheme = 'dark';
  }
  document.documentElement.setAttribute('data-theme', currentTheme);
  localStorage.setItem('theme', currentTheme);
}

SCSS

@mixin dark-scheme {
  --font-color: #e3e0d7;
  --bg-color: #242424;
  --heading-color: #fff;
  --link-color: #80a0ff;
  --link-color-visited: #d787ff;
}
@media (prefers-color-scheme: dark) {
  :root {
    @include dark-scheme;
  }
}
[data-theme="dark"]:root {
  @include dark-scheme;
}

HTML

<header>
  <nav class="theme-switch-wrapper">
    <h1>Theme Preview</h1>
    <label class="theme-switch" for="checkbox">
      <input type="checkbox" id="checkbox" />
      <div class="round slider"></div>
    </label>
  </nav>
</header>

base16-atelier-lakeside

Raw CSS Preview | Download CSS | Download SCSS-Mixin

Python

def available_next(itrbl):
    """
    Splits an iterable into two streams
    i is the normal ordered iterable
    n is the next element from i
    """
    i, n = tee(itrbl, 2)
    n = chain(islice(n, 1, None), [None])
    return zip(i, n)

Javascript

function switchTheme(e) {
  if (e.target.checked) {
    currentTheme = 'light';
  }
  else {
    currentTheme = 'dark';
  }
  document.documentElement.setAttribute('data-theme', currentTheme);
  localStorage.setItem('theme', currentTheme);
}

SCSS

@mixin dark-scheme {
  --font-color: #e3e0d7;
  --bg-color: #242424;
  --heading-color: #fff;
  --link-color: #80a0ff;
  --link-color-visited: #d787ff;
}
@media (prefers-color-scheme: dark) {
  :root {
    @include dark-scheme;
  }
}
[data-theme="dark"]:root {
  @include dark-scheme;
}

HTML

<header>
  <nav class="theme-switch-wrapper">
    <h1>Theme Preview</h1>
    <label class="theme-switch" for="checkbox">
      <input type="checkbox" id="checkbox" />
      <div class="round slider"></div>
    </label>
  </nav>
</header>

base16-atelier-plateau-light

Raw CSS Preview | Download CSS | Download SCSS-Mixin

Python

def available_next(itrbl):
    """
    Splits an iterable into two streams
    i is the normal ordered iterable
    n is the next element from i
    """
    i, n = tee(itrbl, 2)
    n = chain(islice(n, 1, None), [None])
    return zip(i, n)

Javascript

function switchTheme(e) {
  if (e.target.checked) {
    currentTheme = 'light';
  }
  else {
    currentTheme = 'dark';
  }
  document.documentElement.setAttribute('data-theme', currentTheme);
  localStorage.setItem('theme', currentTheme);
}

SCSS

@mixin dark-scheme {
  --font-color: #e3e0d7;
  --bg-color: #242424;
  --heading-color: #fff;
  --link-color: #80a0ff;
  --link-color-visited: #d787ff;
}
@media (prefers-color-scheme: dark) {
  :root {
    @include dark-scheme;
  }
}
[data-theme="dark"]:root {
  @include dark-scheme;
}

HTML

<header>
  <nav class="theme-switch-wrapper">
    <h1>Theme Preview</h1>
    <label class="theme-switch" for="checkbox">
      <input type="checkbox" id="checkbox" />
      <div class="round slider"></div>
    </label>
  </nav>
</header>

base16-atelier-plateau

Raw CSS Preview | Download CSS | Download SCSS-Mixin

Python

def available_next(itrbl):
    """
    Splits an iterable into two streams
    i is the normal ordered iterable
    n is the next element from i
    """
    i, n = tee(itrbl, 2)
    n = chain(islice(n, 1, None), [None])
    return zip(i, n)

Javascript

function switchTheme(e) {
  if (e.target.checked) {
    currentTheme = 'light';
  }
  else {
    currentTheme = 'dark';
  }
  document.documentElement.setAttribute('data-theme', currentTheme);
  localStorage.setItem('theme', currentTheme);
}

SCSS

@mixin dark-scheme {
  --font-color: #e3e0d7;
  --bg-color: #242424;
  --heading-color: #fff;
  --link-color: #80a0ff;
  --link-color-visited: #d787ff;
}
@media (prefers-color-scheme: dark) {
  :root {
    @include dark-scheme;
  }
}
[data-theme="dark"]:root {
  @include dark-scheme;
}

HTML

<header>
  <nav class="theme-switch-wrapper">
    <h1>Theme Preview</h1>
    <label class="theme-switch" for="checkbox">
      <input type="checkbox" id="checkbox" />
      <div class="round slider"></div>
    </label>
  </nav>
</header>

base16-atelier-savanna-light

Raw CSS Preview | Download CSS | Download SCSS-Mixin

Python

def available_next(itrbl):
    """
    Splits an iterable into two streams
    i is the normal ordered iterable
    n is the next element from i
    """
    i, n = tee(itrbl, 2)
    n = chain(islice(n, 1, None), [None])
    return zip(i, n)

Javascript

function switchTheme(e) {
  if (e.target.checked) {
    currentTheme = 'light';
  }
  else {
    currentTheme = 'dark';
  }
  document.documentElement.setAttribute('data-theme', currentTheme);
  localStorage.setItem('theme', currentTheme);
}

SCSS

@mixin dark-scheme {
  --font-color: #e3e0d7;
  --bg-color: #242424;
  --heading-color: #fff;
  --link-color: #80a0ff;
  --link-color-visited: #d787ff;
}
@media (prefers-color-scheme: dark) {
  :root {
    @include dark-scheme;
  }
}
[data-theme="dark"]:root {
  @include dark-scheme;
}

HTML

<header>
  <nav class="theme-switch-wrapper">
    <h1>Theme Preview</h1>
    <label class="theme-switch" for="checkbox">
      <input type="checkbox" id="checkbox" />
      <div class="round slider"></div>
    </label>
  </nav>
</header>

base16-atelier-savanna

Raw CSS Preview | Download CSS | Download SCSS-Mixin

Python

def available_next(itrbl):
    """
    Splits an iterable into two streams
    i is the normal ordered iterable
    n is the next element from i
    """
    i, n = tee(itrbl, 2)
    n = chain(islice(n, 1, None), [None])
    return zip(i, n)

Javascript

function switchTheme(e) {
  if (e.target.checked) {
    currentTheme = 'light';
  }
  else {
    currentTheme = 'dark';
  }
  document.documentElement.setAttribute('data-theme', currentTheme);
  localStorage.setItem('theme', currentTheme);
}

SCSS

@mixin dark-scheme {
  --font-color: #e3e0d7;
  --bg-color: #242424;
  --heading-color: #fff;
  --link-color: #80a0ff;
  --link-color-visited: #d787ff;
}
@media (prefers-color-scheme: dark) {
  :root {
    @include dark-scheme;
  }
}
[data-theme="dark"]:root {
  @include dark-scheme;
}

HTML

<header>
  <nav class="theme-switch-wrapper">
    <h1>Theme Preview</h1>
    <label class="theme-switch" for="checkbox">
      <input type="checkbox" id="checkbox" />
      <div class="round slider"></div>
    </label>
  </nav>
</header>

base16-atelier-seaside-light

Raw CSS Preview | Download CSS | Download SCSS-Mixin

Python

def available_next(itrbl):
    """
    Splits an iterable into two streams
    i is the normal ordered iterable
    n is the next element from i
    """
    i, n = tee(itrbl, 2)
    n = chain(islice(n, 1, None), [None])
    return zip(i, n)

Javascript

function switchTheme(e) {
  if (e.target.checked) {
    currentTheme = 'light';
  }
  else {
    currentTheme = 'dark';
  }
  document.documentElement.setAttribute('data-theme', currentTheme);
  localStorage.setItem('theme', currentTheme);
}

SCSS

@mixin dark-scheme {
  --font-color: #e3e0d7;
  --bg-color: #242424;
  --heading-color: #fff;
  --link-color: #80a0ff;
  --link-color-visited: #d787ff;
}
@media (prefers-color-scheme: dark) {
  :root {
    @include dark-scheme;
  }
}
[data-theme="dark"]:root {
  @include dark-scheme;
}

HTML

<header>
  <nav class="theme-switch-wrapper">
    <h1>Theme Preview</h1>
    <label class="theme-switch" for="checkbox">
      <input type="checkbox" id="checkbox" />
      <div class="round slider"></div>
    </label>
  </nav>
</header>

base16-atelier-seaside

Raw CSS Preview | Download CSS | Download SCSS-Mixin

Python

def available_next(itrbl):
    """
    Splits an iterable into two streams
    i is the normal ordered iterable
    n is the next element from i
    """
    i, n = tee(itrbl, 2)
    n = chain(islice(n, 1, None), [None])
    return zip(i, n)

Javascript

function switchTheme(e) {
  if (e.target.checked) {
    currentTheme = 'light';
  }
  else {
    currentTheme = 'dark';
  }
  document.documentElement.setAttribute('data-theme', currentTheme);
  localStorage.setItem('theme', currentTheme);
}

SCSS

@mixin dark-scheme {
  --font-color: #e3e0d7;
  --bg-color: #242424;
  --heading-color: #fff;
  --link-color: #80a0ff;
  --link-color-visited: #d787ff;
}
@media (prefers-color-scheme: dark) {
  :root {
    @include dark-scheme;
  }
}
[data-theme="dark"]:root {
  @include dark-scheme;
}

HTML

<header>
  <nav class="theme-switch-wrapper">
    <h1>Theme Preview</h1>
    <label class="theme-switch" for="checkbox">
      <input type="checkbox" id="checkbox" />
      <div class="round slider"></div>
    </label>
  </nav>
</header>

base16-atelier-sulphurpool-light

Raw CSS Preview | Download CSS | Download SCSS-Mixin

Python

def available_next(itrbl):
    """
    Splits an iterable into two streams
    i is the normal ordered iterable
    n is the next element from i
    """
    i, n = tee(itrbl, 2)
    n = chain(islice(n, 1, None), [None])
    return zip(i, n)

Javascript

function switchTheme(e) {
  if (e.target.checked) {
    currentTheme = 'light';
  }
  else {
    currentTheme = 'dark';
  }
  document.documentElement.setAttribute('data-theme', currentTheme);
  localStorage.setItem('theme', currentTheme);
}

SCSS

@mixin dark-scheme {
  --font-color: #e3e0d7;
  --bg-color: #242424;
  --heading-color: #fff;
  --link-color: #80a0ff;
  --link-color-visited: #d787ff;
}
@media (prefers-color-scheme: dark) {
  :root {
    @include dark-scheme;
  }
}
[data-theme="dark"]:root {
  @include dark-scheme;
}

HTML

<header>
  <nav class="theme-switch-wrapper">
    <h1>Theme Preview</h1>
    <label class="theme-switch" for="checkbox">
      <input type="checkbox" id="checkbox" />
      <div class="round slider"></div>
    </label>
  </nav>
</header>

base16-atelier-sulphurpool

Raw CSS Preview | Download CSS | Download SCSS-Mixin

Python

def available_next(itrbl):
    """
    Splits an iterable into two streams
    i is the normal ordered iterable
    n is the next element from i
    """
    i, n = tee(itrbl, 2)
    n = chain(islice(n, 1, None), [None])
    return zip(i, n)

Javascript

function switchTheme(e) {
  if (e.target.checked) {
    currentTheme = 'light';
  }
  else {
    currentTheme = 'dark';
  }
  document.documentElement.setAttribute('data-theme', currentTheme);
  localStorage.setItem('theme', currentTheme);
}

SCSS

@mixin dark-scheme {
  --font-color: #e3e0d7;
  --bg-color: #242424;
  --heading-color: #fff;
  --link-color: #80a0ff;
  --link-color-visited: #d787ff;
}
@media (prefers-color-scheme: dark) {
  :root {
    @include dark-scheme;
  }
}
[data-theme="dark"]:root {
  @include dark-scheme;
}

HTML

<header>
  <nav class="theme-switch-wrapper">
    <h1>Theme Preview</h1>
    <label class="theme-switch" for="checkbox">
      <input type="checkbox" id="checkbox" />
      <div class="round slider"></div>
    </label>
  </nav>
</header>

base16-bespin

Raw CSS Preview | Download CSS | Download SCSS-Mixin

Python

def available_next(itrbl):
    """
    Splits an iterable into two streams
    i is the normal ordered iterable
    n is the next element from i
    """
    i, n = tee(itrbl, 2)
    n = chain(islice(n, 1, None), [None])
    return zip(i, n)

Javascript

function switchTheme(e) {
  if (e.target.checked) {
    currentTheme = 'light';
  }
  else {
    currentTheme = 'dark';
  }
  document.documentElement.setAttribute('data-theme', currentTheme);
  localStorage.setItem('theme', currentTheme);
}

SCSS

@mixin dark-scheme {
  --font-color: #e3e0d7;
  --bg-color: #242424;
  --heading-color: #fff;
  --link-color: #80a0ff;
  --link-color-visited: #d787ff;
}
@media (prefers-color-scheme: dark) {
  :root {
    @include dark-scheme;
  }
}
[data-theme="dark"]:root {
  @include dark-scheme;
}

HTML

<header>
  <nav class="theme-switch-wrapper">
    <h1>Theme Preview</h1>
    <label class="theme-switch" for="checkbox">
      <input type="checkbox" id="checkbox" />
      <div class="round slider"></div>
    </label>
  </nav>
</header>

base16-brewer

Raw CSS Preview | Download CSS | Download SCSS-Mixin

Python

def available_next(itrbl):
    """
    Splits an iterable into two streams
    i is the normal ordered iterable
    n is the next element from i
    """
    i, n = tee(itrbl, 2)
    n = chain(islice(n, 1, None), [None])
    return zip(i, n)

Javascript

function switchTheme(e) {
  if (e.target.checked) {
    currentTheme = 'light';
  }
  else {
    currentTheme = 'dark';
  }
  document.documentElement.setAttribute('data-theme', currentTheme);
  localStorage.setItem('theme', currentTheme);
}

SCSS

@mixin dark-scheme {
  --font-color: #e3e0d7;
  --bg-color: #242424;
  --heading-color: #fff;
  --link-color: #80a0ff;
  --link-color-visited: #d787ff;
}
@media (prefers-color-scheme: dark) {
  :root {
    @include dark-scheme;
  }
}
[data-theme="dark"]:root {
  @include dark-scheme;
}

HTML

<header>
  <nav class="theme-switch-wrapper">
    <h1>Theme Preview</h1>
    <label class="theme-switch" for="checkbox">
      <input type="checkbox" id="checkbox" />
      <div class="round slider"></div>
    </label>
  </nav>
</header>

base16-bright

Raw CSS Preview | Download CSS | Download SCSS-Mixin

Python

def available_next(itrbl):
    """
    Splits an iterable into two streams
    i is the normal ordered iterable
    n is the next element from i
    """
    i, n = tee(itrbl, 2)
    n = chain(islice(n, 1, None), [None])
    return zip(i, n)

Javascript

function switchTheme(e) {
  if (e.target.checked) {
    currentTheme = 'light';
  }
  else {
    currentTheme = 'dark';
  }
  document.documentElement.setAttribute('data-theme', currentTheme);
  localStorage.setItem('theme', currentTheme);
}

SCSS

@mixin dark-scheme {
  --font-color: #e3e0d7;
  --bg-color: #242424;
  --heading-color: #fff;
  --link-color: #80a0ff;
  --link-color-visited: #d787ff;
}
@media (prefers-color-scheme: dark) {
  :root {
    @include dark-scheme;
  }
}
[data-theme="dark"]:root {
  @include dark-scheme;
}

HTML

<header>
  <nav class="theme-switch-wrapper">
    <h1>Theme Preview</h1>
    <label class="theme-switch" for="checkbox">
      <input type="checkbox" id="checkbox" />
      <div class="round slider"></div>
    </label>
  </nav>
</header>

base16-brushtrees-dark

Raw CSS Preview | Download CSS | Download SCSS-Mixin

Python

def available_next(itrbl):
    """
    Splits an iterable into two streams
    i is the normal ordered iterable
    n is the next element from i
    """
    i, n = tee(itrbl, 2)
    n = chain(islice(n, 1, None), [None])
    return zip(i, n)

Javascript

function switchTheme(e) {
  if (e.target.checked) {
    currentTheme = 'light';
  }
  else {
    currentTheme = 'dark';
  }
  document.documentElement.setAttribute('data-theme', currentTheme);
  localStorage.setItem('theme', currentTheme);
}

SCSS

@mixin dark-scheme {
  --font-color: #e3e0d7;
  --bg-color: #242424;
  --heading-color: #fff;
  --link-color: #80a0ff;
  --link-color-visited: #d787ff;
}
@media (prefers-color-scheme: dark) {
  :root {
    @include dark-scheme;
  }
}
[data-theme="dark"]:root {
  @include dark-scheme;
}

HTML

<header>
  <nav class="theme-switch-wrapper">
    <h1>Theme Preview</h1>
    <label class="theme-switch" for="checkbox">
      <input type="checkbox" id="checkbox" />
      <div class="round slider"></div>
    </label>
  </nav>
</header>

base16-brushtrees

Raw CSS Preview | Download CSS | Download SCSS-Mixin

Python

def available_next(itrbl):
    """
    Splits an iterable into two streams
    i is the normal ordered iterable
    n is the next element from i
    """
    i, n = tee(itrbl, 2)
    n = chain(islice(n, 1, None), [None])
    return zip(i, n)

Javascript

function switchTheme(e) {
  if (e.target.checked) {
    currentTheme = 'light';
  }
  else {
    currentTheme = 'dark';
  }
  document.documentElement.setAttribute('data-theme', currentTheme);
  localStorage.setItem('theme', currentTheme);
}

SCSS

@mixin dark-scheme {
  --font-color: #e3e0d7;
  --bg-color: #242424;
  --heading-color: #fff;
  --link-color: #80a0ff;
  --link-color-visited: #d787ff;
}
@media (prefers-color-scheme: dark) {
  :root {
    @include dark-scheme;
  }
}
[data-theme="dark"]:root {
  @include dark-scheme;
}

HTML

<header>
  <nav class="theme-switch-wrapper">
    <h1>Theme Preview</h1>
    <label class="theme-switch" for="checkbox">
      <input type="checkbox" id="checkbox" />
      <div class="round slider"></div>
    </label>
  </nav>
</header>

base16-chalk

Raw CSS Preview | Download CSS | Download SCSS-Mixin

Python

def available_next(itrbl):
    """
    Splits an iterable into two streams
    i is the normal ordered iterable
    n is the next element from i
    """
    i, n = tee(itrbl, 2)
    n = chain(islice(n, 1, None), [None])
    return zip(i, n)

Javascript

function switchTheme(e) {
  if (e.target.checked) {
    currentTheme = 'light';
  }
  else {
    currentTheme = 'dark';
  }
  document.documentElement.setAttribute('data-theme', currentTheme);
  localStorage.setItem('theme', currentTheme);
}

SCSS

@mixin dark-scheme {
  --font-color: #e3e0d7;
  --bg-color: #242424;
  --heading-color: #fff;
  --link-color: #80a0ff;
  --link-color-visited: #d787ff;
}
@media (prefers-color-scheme: dark) {
  :root {
    @include dark-scheme;
  }
}
[data-theme="dark"]:root {
  @include dark-scheme;
}

HTML

<header>
  <nav class="theme-switch-wrapper">
    <h1>Theme Preview</h1>
    <label class="theme-switch" for="checkbox">
      <input type="checkbox" id="checkbox" />
      <div class="round slider"></div>
    </label>
  </nav>
</header>

base16-circus

Raw CSS Preview | Download CSS | Download SCSS-Mixin

Python

def available_next(itrbl):
    """
    Splits an iterable into two streams
    i is the normal ordered iterable
    n is the next element from i
    """
    i, n = tee(itrbl, 2)
    n = chain(islice(n, 1, None), [None])
    return zip(i, n)

Javascript

function switchTheme(e) {
  if (e.target.checked) {
    currentTheme = 'light';
  }
  else {
    currentTheme = 'dark';
  }
  document.documentElement.setAttribute('data-theme', currentTheme);
  localStorage.setItem('theme', currentTheme);
}

SCSS

@mixin dark-scheme {
  --font-color: #e3e0d7;
  --bg-color: #242424;
  --heading-color: #fff;
  --link-color: #80a0ff;
  --link-color-visited: #d787ff;
}
@media (prefers-color-scheme: dark) {
  :root {
    @include dark-scheme;
  }
}
[data-theme="dark"]:root {
  @include dark-scheme;
}

HTML

<header>
  <nav class="theme-switch-wrapper">
    <h1>Theme Preview</h1>
    <label class="theme-switch" for="checkbox">
      <input type="checkbox" id="checkbox" />
      <div class="round slider"></div>
    </label>
  </nav>
</header>

base16-classic-dark

Raw CSS Preview | Download CSS | Download SCSS-Mixin

Python

def available_next(itrbl):
    """
    Splits an iterable into two streams
    i is the normal ordered iterable
    n is the next element from i
    """
    i, n = tee(itrbl, 2)
    n = chain(islice(n, 1, None), [None])
    return zip(i, n)

Javascript

function switchTheme(e) {
  if (e.target.checked) {
    currentTheme = 'light';
  }
  else {
    currentTheme = 'dark';
  }
  document.documentElement.setAttribute('data-theme', currentTheme);
  localStorage.setItem('theme', currentTheme);
}

SCSS

@mixin dark-scheme {
  --font-color: #e3e0d7;
  --bg-color: #242424;
  --heading-color: #fff;
  --link-color: #80a0ff;
  --link-color-visited: #d787ff;
}
@media (prefers-color-scheme: dark) {
  :root {
    @include dark-scheme;
  }
}
[data-theme="dark"]:root {
  @include dark-scheme;
}

HTML

<header>
  <nav class="theme-switch-wrapper">
    <h1>Theme Preview</h1>
    <label class="theme-switch" for="checkbox">
      <input type="checkbox" id="checkbox" />
      <div class="round slider"></div>
    </label>
  </nav>
</header>

base16-classic-light

Raw CSS Preview | Download CSS | Download SCSS-Mixin

Python

def available_next(itrbl):
    """
    Splits an iterable into two streams
    i is the normal ordered iterable
    n is the next element from i
    """
    i, n = tee(itrbl, 2)
    n = chain(islice(n, 1, None), [None])
    return zip(i, n)

Javascript

function switchTheme(e) {
  if (e.target.checked) {
    currentTheme = 'light';
  }
  else {
    currentTheme = 'dark';
  }
  document.documentElement.setAttribute('data-theme', currentTheme);
  localStorage.setItem('theme', currentTheme);
}

SCSS

@mixin dark-scheme {
  --font-color: #e3e0d7;
  --bg-color: #242424;
  --heading-color: #fff;
  --link-color: #80a0ff;
  --link-color-visited: #d787ff;
}
@media (prefers-color-scheme: dark) {
  :root {
    @include dark-scheme;
  }
}
[data-theme="dark"]:root {
  @include dark-scheme;
}

HTML

<header>
  <nav class="theme-switch-wrapper">
    <h1>Theme Preview</h1>
    <label class="theme-switch" for="checkbox">
      <input type="checkbox" id="checkbox" />
      <div class="round slider"></div>
    </label>
  </nav>
</header>

base16-codeschool

Raw CSS Preview | Download CSS | Download SCSS-Mixin

Python

def available_next(itrbl):
    """
    Splits an iterable into two streams
    i is the normal ordered iterable
    n is the next element from i
    """
    i, n = tee(itrbl, 2)
    n = chain(islice(n, 1, None), [None])
    return zip(i, n)

Javascript

function switchTheme(e) {
  if (e.target.checked) {
    currentTheme = 'light';
  }
  else {
    currentTheme = 'dark';
  }
  document.documentElement.setAttribute('data-theme', currentTheme);
  localStorage.setItem('theme', currentTheme);
}

SCSS

@mixin dark-scheme {
  --font-color: #e3e0d7;
  --bg-color: #242424;
  --heading-color: #fff;
  --link-color: #80a0ff;
  --link-color-visited: #d787ff;
}
@media (prefers-color-scheme: dark) {
  :root {
    @include dark-scheme;
  }
}
[data-theme="dark"]:root {
  @include dark-scheme;
}

HTML

<header>
  <nav class="theme-switch-wrapper">
    <h1>Theme Preview</h1>
    <label class="theme-switch" for="checkbox">
      <input type="checkbox" id="checkbox" />
      <div class="round slider"></div>
    </label>
  </nav>
</header>

base16-cupcake

Raw CSS Preview | Download CSS | Download SCSS-Mixin

Python

def available_next(itrbl):
    """
    Splits an iterable into two streams
    i is the normal ordered iterable
    n is the next element from i
    """
    i, n = tee(itrbl, 2)
    n = chain(islice(n, 1, None), [None])
    return zip(i, n)

Javascript

function switchTheme(e) {
  if (e.target.checked) {
    currentTheme = 'light';
  }
  else {
    currentTheme = 'dark';
  }
  document.documentElement.setAttribute('data-theme', currentTheme);
  localStorage.setItem('theme', currentTheme);
}

SCSS

@mixin dark-scheme {
  --font-color: #e3e0d7;
  --bg-color: #242424;
  --heading-color: #fff;
  --link-color: #80a0ff;
  --link-color-visited: #d787ff;
}
@media (prefers-color-scheme: dark) {
  :root {
    @include dark-scheme;
  }
}
[data-theme="dark"]:root {
  @include dark-scheme;
}

HTML

<header>
  <nav class="theme-switch-wrapper">
    <h1>Theme Preview</h1>
    <label class="theme-switch" for="checkbox">
      <input type="checkbox" id="checkbox" />
      <div class="round slider"></div>
    </label>
  </nav>
</header>

base16-cupertino

Raw CSS Preview | Download CSS | Download SCSS-Mixin

Python

def available_next(itrbl):
    """
    Splits an iterable into two streams
    i is the normal ordered iterable
    n is the next element from i
    """
    i, n = tee(itrbl, 2)
    n = chain(islice(n, 1, None), [None])
    return zip(i, n)

Javascript

function switchTheme(e) {
  if (e.target.checked) {
    currentTheme = 'light';
  }
  else {
    currentTheme = 'dark';
  }
  document.documentElement.setAttribute('data-theme', currentTheme);
  localStorage.setItem('theme', currentTheme);
}

SCSS

@mixin dark-scheme {
  --font-color: #e3e0d7;
  --bg-color: #242424;
  --heading-color: #fff;
  --link-color: #80a0ff;
  --link-color-visited: #d787ff;
}
@media (prefers-color-scheme: dark) {
  :root {
    @include dark-scheme;
  }
}
[data-theme="dark"]:root {
  @include dark-scheme;
}

HTML

<header>
  <nav class="theme-switch-wrapper">
    <h1>Theme Preview</h1>
    <label class="theme-switch" for="checkbox">
      <input type="checkbox" id="checkbox" />
      <div class="round slider"></div>
    </label>
  </nav>
</header>

base16-darktooth

Raw CSS Preview | Download CSS | Download SCSS-Mixin

Python

def available_next(itrbl):
    """
    Splits an iterable into two streams
    i is the normal ordered iterable
    n is the next element from i
    """
    i, n = tee(itrbl, 2)
    n = chain(islice(n, 1, None), [None])
    return zip(i, n)

Javascript

function switchTheme(e) {
  if (e.target.checked) {
    currentTheme = 'light';
  }
  else {
    currentTheme = 'dark';
  }
  document.documentElement.setAttribute('data-theme', currentTheme);
  localStorage.setItem('theme', currentTheme);
}

SCSS

@mixin dark-scheme {
  --font-color: #e3e0d7;
  --bg-color: #242424;
  --heading-color: #fff;
  --link-color: #80a0ff;
  --link-color-visited: #d787ff;
}
@media (prefers-color-scheme: dark) {
  :root {
    @include dark-scheme;
  }
}
[data-theme="dark"]:root {
  @include dark-scheme;
}

HTML

<header>
  <nav class="theme-switch-wrapper">
    <h1>Theme Preview</h1>
    <label class="theme-switch" for="checkbox">
      <input type="checkbox" id="checkbox" />
      <div class="round slider"></div>
    </label>
  </nav>
</header>

base16-default-dark

Raw CSS Preview | Download CSS | Download SCSS-Mixin

Python

def available_next(itrbl):
    """
    Splits an iterable into two streams
    i is the normal ordered iterable
    n is the next element from i
    """
    i, n = tee(itrbl, 2)
    n = chain(islice(n, 1, None), [None])
    return zip(i, n)

Javascript

function switchTheme(e) {
  if (e.target.checked) {
    currentTheme = 'light';
  }
  else {
    currentTheme = 'dark';
  }
  document.documentElement.setAttribute('data-theme', currentTheme);
  localStorage.setItem('theme', currentTheme);
}

SCSS

@mixin dark-scheme {
  --font-color: #e3e0d7;
  --bg-color: #242424;
  --heading-color: #fff;
  --link-color: #80a0ff;
  --link-color-visited: #d787ff;
}
@media (prefers-color-scheme: dark) {
  :root {
    @include dark-scheme;
  }
}
[data-theme="dark"]:root {
  @include dark-scheme;
}

HTML

<header>
  <nav class="theme-switch-wrapper">
    <h1>Theme Preview</h1>
    <label class="theme-switch" for="checkbox">
      <input type="checkbox" id="checkbox" />
      <div class="round slider"></div>
    </label>
  </nav>
</header>

base16-default-light

Raw CSS Preview | Download CSS | Download SCSS-Mixin

Python

def available_next(itrbl):
    """
    Splits an iterable into two streams
    i is the normal ordered iterable
    n is the next element from i
    """
    i, n = tee(itrbl, 2)
    n = chain(islice(n, 1, None), [None])
    return zip(i, n)

Javascript

function switchTheme(e) {
  if (e.target.checked) {
    currentTheme = 'light';
  }
  else {
    currentTheme = 'dark';
  }
  document.documentElement.setAttribute('data-theme', currentTheme);
  localStorage.setItem('theme', currentTheme);
}

SCSS

@mixin dark-scheme {
  --font-color: #e3e0d7;
  --bg-color: #242424;
  --heading-color: #fff;
  --link-color: #80a0ff;
  --link-color-visited: #d787ff;
}
@media (prefers-color-scheme: dark) {
  :root {
    @include dark-scheme;
  }
}
[data-theme="dark"]:root {
  @include dark-scheme;
}

HTML

<header>
  <nav class="theme-switch-wrapper">
    <h1>Theme Preview</h1>
    <label class="theme-switch" for="checkbox">
      <input type="checkbox" id="checkbox" />
      <div class="round slider"></div>
    </label>
  </nav>
</header>

base16-dracula

Raw CSS Preview | Download CSS | Download SCSS-Mixin

Python

def available_next(itrbl):
    """
    Splits an iterable into two streams
    i is the normal ordered iterable
    n is the next element from i
    """
    i, n = tee(itrbl, 2)
    n = chain(islice(n, 1, None), [None])
    return zip(i, n)

Javascript

function switchTheme(e) {
  if (e.target.checked) {
    currentTheme = 'light';
  }
  else {
    currentTheme = 'dark';
  }
  document.documentElement.setAttribute('data-theme', currentTheme);
  localStorage.setItem('theme', currentTheme);
}

SCSS

@mixin dark-scheme {
  --font-color: #e3e0d7;
  --bg-color: #242424;
  --heading-color: #fff;
  --link-color: #80a0ff;
  --link-color-visited: #d787ff;
}
@media (prefers-color-scheme: dark) {
  :root {
    @include dark-scheme;
  }
}
[data-theme="dark"]:root {
  @include dark-scheme;
}

HTML

<header>
  <nav class="theme-switch-wrapper">
    <h1>Theme Preview</h1>
    <label class="theme-switch" for="checkbox">
      <input type="checkbox" id="checkbox" />
      <div class="round slider"></div>
    </label>
  </nav>
</header>

base16-eighties

Raw CSS Preview | Download CSS | Download SCSS-Mixin

Python

def available_next(itrbl):
    """
    Splits an iterable into two streams
    i is the normal ordered iterable
    n is the next element from i
    """
    i, n = tee(itrbl, 2)
    n = chain(islice(n, 1, None), [None])
    return zip(i, n)

Javascript

function switchTheme(e) {
  if (e.target.checked) {
    currentTheme = 'light';
  }
  else {
    currentTheme = 'dark';
  }
  document.documentElement.setAttribute('data-theme', currentTheme);
  localStorage.setItem('theme', currentTheme);
}

SCSS

@mixin dark-scheme {
  --font-color: #e3e0d7;
  --bg-color: #242424;
  --heading-color: #fff;
  --link-color: #80a0ff;
  --link-color-visited: #d787ff;
}
@media (prefers-color-scheme: dark) {
  :root {
    @include dark-scheme;
  }
}
[data-theme="dark"]:root {
  @include dark-scheme;
}

HTML

<header>
  <nav class="theme-switch-wrapper">
    <h1>Theme Preview</h1>
    <label class="theme-switch" for="checkbox">
      <input type="checkbox" id="checkbox" />
      <div class="round slider"></div>
    </label>
  </nav>
</header>

base16-embers

Raw CSS Preview | Download CSS | Download SCSS-Mixin

Python

def available_next(itrbl):
    """
    Splits an iterable into two streams
    i is the normal ordered iterable
    n is the next element from i
    """
    i, n = tee(itrbl, 2)
    n = chain(islice(n, 1, None), [None])
    return zip(i, n)

Javascript

function switchTheme(e) {
  if (e.target.checked) {
    currentTheme = 'light';
  }
  else {
    currentTheme = 'dark';
  }
  document.documentElement.setAttribute('data-theme', currentTheme);
  localStorage.setItem('theme', currentTheme);
}

SCSS

@mixin dark-scheme {
  --font-color: #e3e0d7;
  --bg-color: #242424;
  --heading-color: #fff;
  --link-color: #80a0ff;
  --link-color-visited: #d787ff;
}
@media (prefers-color-scheme: dark) {
  :root {
    @include dark-scheme;
  }
}
[data-theme="dark"]:root {
  @include dark-scheme;
}

HTML

<header>
  <nav class="theme-switch-wrapper">
    <h1>Theme Preview</h1>
    <label class="theme-switch" for="checkbox">
      <input type="checkbox" id="checkbox" />
      <div class="round slider"></div>
    </label>
  </nav>
</header>

base16-flat

Raw CSS Preview | Download CSS | Download SCSS-Mixin

Python

def available_next(itrbl):
    """
    Splits an iterable into two streams
    i is the normal ordered iterable
    n is the next element from i
    """
    i, n = tee(itrbl, 2)
    n = chain(islice(n, 1, None), [None])
    return zip(i, n)

Javascript

function switchTheme(e) {
  if (e.target.checked) {
    currentTheme = 'light';
  }
  else {
    currentTheme = 'dark';
  }
  document.documentElement.setAttribute('data-theme', currentTheme);
  localStorage.setItem('theme', currentTheme);
}

SCSS

@mixin dark-scheme {
  --font-color: #e3e0d7;
  --bg-color: #242424;
  --heading-color: #fff;
  --link-color: #80a0ff;
  --link-color-visited: #d787ff;
}
@media (prefers-color-scheme: dark) {
  :root {
    @include dark-scheme;
  }
}
[data-theme="dark"]:root {
  @include dark-scheme;
}

HTML

<header>
  <nav class="theme-switch-wrapper">
    <h1>Theme Preview</h1>
    <label class="theme-switch" for="checkbox">
      <input type="checkbox" id="checkbox" />
      <div class="round slider"></div>
    </label>
  </nav>
</header>

base16-github

Raw CSS Preview | Download CSS | Download SCSS-Mixin

Python

def available_next(itrbl):
    """
    Splits an iterable into two streams
    i is the normal ordered iterable
    n is the next element from i
    """
    i, n = tee(itrbl, 2)
    n = chain(islice(n, 1, None), [None])
    return zip(i, n)

Javascript

function switchTheme(e) {
  if (e.target.checked) {
    currentTheme = 'light';
  }
  else {
    currentTheme = 'dark';
  }
  document.documentElement.setAttribute('data-theme', currentTheme);
  localStorage.setItem('theme', currentTheme);
}

SCSS

@mixin dark-scheme {
  --font-color: #e3e0d7;
  --bg-color: #242424;
  --heading-color: #fff;
  --link-color: #80a0ff;
  --link-color-visited: #d787ff;
}
@media (prefers-color-scheme: dark) {
  :root {
    @include dark-scheme;
  }
}
[data-theme="dark"]:root {
  @include dark-scheme;
}

HTML

<header>
  <nav class="theme-switch-wrapper">
    <h1>Theme Preview</h1>
    <label class="theme-switch" for="checkbox">
      <input type="checkbox" id="checkbox" />
      <div class="round slider"></div>
    </label>
  </nav>
</header>

base16-google-dark

Raw CSS Preview | Download CSS | Download SCSS-Mixin

Python

def available_next(itrbl):
    """
    Splits an iterable into two streams
    i is the normal ordered iterable
    n is the next element from i
    """
    i, n = tee(itrbl, 2)
    n = chain(islice(n, 1, None), [None])
    return zip(i, n)

Javascript

function switchTheme(e) {
  if (e.target.checked) {
    currentTheme = 'light';
  }
  else {
    currentTheme = 'dark';
  }
  document.documentElement.setAttribute('data-theme', currentTheme);
  localStorage.setItem('theme', currentTheme);
}

SCSS

@mixin dark-scheme {
  --font-color: #e3e0d7;
  --bg-color: #242424;
  --heading-color: #fff;
  --link-color: #80a0ff;
  --link-color-visited: #d787ff;
}
@media (prefers-color-scheme: dark) {
  :root {
    @include dark-scheme;
  }
}
[data-theme="dark"]:root {
  @include dark-scheme;
}

HTML

<header>
  <nav class="theme-switch-wrapper">
    <h1>Theme Preview</h1>
    <label class="theme-switch" for="checkbox">
      <input type="checkbox" id="checkbox" />
      <div class="round slider"></div>
    </label>
  </nav>
</header>

base16-google-light

Raw CSS Preview | Download CSS | Download SCSS-Mixin

Python

def available_next(itrbl):
    """
    Splits an iterable into two streams
    i is the normal ordered iterable
    n is the next element from i
    """
    i, n = tee(itrbl, 2)
    n = chain(islice(n, 1, None), [None])
    return zip(i, n)

Javascript

function switchTheme(e) {
  if (e.target.checked) {
    currentTheme = 'light';
  }
  else {
    currentTheme = 'dark';
  }
  document.documentElement.setAttribute('data-theme', currentTheme);
  localStorage.setItem('theme', currentTheme);
}

SCSS

@mixin dark-scheme {
  --font-color: #e3e0d7;
  --bg-color: #242424;
  --heading-color: #fff;
  --link-color: #80a0ff;
  --link-color-visited: #d787ff;
}
@media (prefers-color-scheme: dark) {
  :root {
    @include dark-scheme;
  }
}
[data-theme="dark"]:root {
  @include dark-scheme;
}

HTML

<header>
  <nav class="theme-switch-wrapper">
    <h1>Theme Preview</h1>
    <label class="theme-switch" for="checkbox">
      <input type="checkbox" id="checkbox" />
      <div class="round slider"></div>
    </label>
  </nav>
</header>

base16-grayscale-dark

Raw CSS Preview | Download CSS | Download SCSS-Mixin

Python

def available_next(itrbl):
    """
    Splits an iterable into two streams
    i is the normal ordered iterable
    n is the next element from i
    """
    i, n = tee(itrbl, 2)
    n = chain(islice(n, 1, None), [None])
    return zip(i, n)

Javascript

function switchTheme(e) {
  if (e.target.checked) {
    currentTheme = 'light';
  }
  else {
    currentTheme = 'dark';
  }
  document.documentElement.setAttribute('data-theme', currentTheme);
  localStorage.setItem('theme', currentTheme);
}

SCSS

@mixin dark-scheme {
  --font-color: #e3e0d7;
  --bg-color: #242424;
  --heading-color: #fff;
  --link-color: #80a0ff;
  --link-color-visited: #d787ff;
}
@media (prefers-color-scheme: dark) {
  :root {
    @include dark-scheme;
  }
}
[data-theme="dark"]:root {
  @include dark-scheme;
}

HTML

<header>
  <nav class="theme-switch-wrapper">
    <h1>Theme Preview</h1>
    <label class="theme-switch" for="checkbox">
      <input type="checkbox" id="checkbox" />
      <div class="round slider"></div>
    </label>
  </nav>
</header>

base16-grayscale-light

Raw CSS Preview | Download CSS | Download SCSS-Mixin

Python

def available_next(itrbl):
    """
    Splits an iterable into two streams
    i is the normal ordered iterable
    n is the next element from i
    """
    i, n = tee(itrbl, 2)
    n = chain(islice(n, 1, None), [None])
    return zip(i, n)

Javascript

function switchTheme(e) {
  if (e.target.checked) {
    currentTheme = 'light';
  }
  else {
    currentTheme = 'dark';
  }
  document.documentElement.setAttribute('data-theme', currentTheme);
  localStorage.setItem('theme', currentTheme);
}

SCSS

@mixin dark-scheme {
  --font-color: #e3e0d7;
  --bg-color: #242424;
  --heading-color: #fff;
  --link-color: #80a0ff;
  --link-color-visited: #d787ff;
}
@media (prefers-color-scheme: dark) {
  :root {
    @include dark-scheme;
  }
}
[data-theme="dark"]:root {
  @include dark-scheme;
}

HTML

<header>
  <nav class="theme-switch-wrapper">
    <h1>Theme Preview</h1>
    <label class="theme-switch" for="checkbox">
      <input type="checkbox" id="checkbox" />
      <div class="round slider"></div>
    </label>
  </nav>
</header>

base16-greenscreen

Raw CSS Preview | Download CSS | Download SCSS-Mixin

Python

def available_next(itrbl):
    """
    Splits an iterable into two streams
    i is the normal ordered iterable
    n is the next element from i
    """
    i, n = tee(itrbl, 2)
    n = chain(islice(n, 1, None), [None])
    return zip(i, n)

Javascript

function switchTheme(e) {
  if (e.target.checked) {
    currentTheme = 'light';
  }
  else {
    currentTheme = 'dark';
  }
  document.documentElement.setAttribute('data-theme', currentTheme);
  localStorage.setItem('theme', currentTheme);
}

SCSS

@mixin dark-scheme {
  --font-color: #e3e0d7;
  --bg-color: #242424;
  --heading-color: #fff;
  --link-color: #80a0ff;
  --link-color-visited: #d787ff;
}
@media (prefers-color-scheme: dark) {
  :root {
    @include dark-scheme;
  }
}
[data-theme="dark"]:root {
  @include dark-scheme;
}

HTML

<header>
  <nav class="theme-switch-wrapper">
    <h1>Theme Preview</h1>
    <label class="theme-switch" for="checkbox">
      <input type="checkbox" id="checkbox" />
      <div class="round slider"></div>
    </label>
  </nav>
</header>

base16-gruvbox-dark-hard

Raw CSS Preview | Download CSS | Download SCSS-Mixin

Python

def available_next(itrbl):
    """
    Splits an iterable into two streams
    i is the normal ordered iterable
    n is the next element from i
    """
    i, n = tee(itrbl, 2)
    n = chain(islice(n, 1, None), [None])
    return zip(i, n)

Javascript

function switchTheme(e) {
  if (e.target.checked) {
    currentTheme = 'light';
  }
  else {
    currentTheme = 'dark';
  }
  document.documentElement.setAttribute('data-theme', currentTheme);
  localStorage.setItem('theme', currentTheme);
}

SCSS

@mixin dark-scheme {
  --font-color: #e3e0d7;
  --bg-color: #242424;
  --heading-color: #fff;
  --link-color: #80a0ff;
  --link-color-visited: #d787ff;
}
@media (prefers-color-scheme: dark) {
  :root {
    @include dark-scheme;
  }
}
[data-theme="dark"]:root {
  @include dark-scheme;
}

HTML

<header>
  <nav class="theme-switch-wrapper">
    <h1>Theme Preview</h1>
    <label class="theme-switch" for="checkbox">
      <input type="checkbox" id="checkbox" />
      <div class="round slider"></div>
    </label>
  </nav>
</header>

base16-gruvbox-dark-medium

Raw CSS Preview | Download CSS | Download SCSS-Mixin

Python

def available_next(itrbl):
    """
    Splits an iterable into two streams
    i is the normal ordered iterable
    n is the next element from i
    """
    i, n = tee(itrbl, 2)
    n = chain(islice(n, 1, None), [None])
    return zip(i, n)

Javascript

function switchTheme(e) {
  if (e.target.checked) {
    currentTheme = 'light';
  }
  else {
    currentTheme = 'dark';
  }
  document.documentElement.setAttribute('data-theme', currentTheme);
  localStorage.setItem('theme', currentTheme);
}

SCSS

@mixin dark-scheme {
  --font-color: #e3e0d7;
  --bg-color: #242424;
  --heading-color: #fff;
  --link-color: #80a0ff;
  --link-color-visited: #d787ff;
}
@media (prefers-color-scheme: dark) {
  :root {
    @include dark-scheme;
  }
}
[data-theme="dark"]:root {
  @include dark-scheme;
}

HTML

<header>
  <nav class="theme-switch-wrapper">
    <h1>Theme Preview</h1>
    <label class="theme-switch" for="checkbox">
      <input type="checkbox" id="checkbox" />
      <div class="round slider"></div>
    </label>
  </nav>
</header>

base16-gruvbox-dark-pale

Raw CSS Preview | Download CSS | Download SCSS-Mixin

Python

def available_next(itrbl):
    """
    Splits an iterable into two streams
    i is the normal ordered iterable
    n is the next element from i
    """
    i, n = tee(itrbl, 2)
    n = chain(islice(n, 1, None), [None])
    return zip(i, n)

Javascript

function switchTheme(e) {
  if (e.target.checked) {
    currentTheme = 'light';
  }
  else {
    currentTheme = 'dark';
  }
  document.documentElement.setAttribute('data-theme', currentTheme);
  localStorage.setItem('theme', currentTheme);
}

SCSS

@mixin dark-scheme {
  --font-color: #e3e0d7;
  --bg-color: #242424;
  --heading-color: #fff;
  --link-color: #80a0ff;
  --link-color-visited: #d787ff;
}
@media (prefers-color-scheme: dark) {
  :root {
    @include dark-scheme;
  }
}
[data-theme="dark"]:root {
  @include dark-scheme;
}

HTML

<header>
  <nav class="theme-switch-wrapper">
    <h1>Theme Preview</h1>
    <label class="theme-switch" for="checkbox">
      <input type="checkbox" id="checkbox" />
      <div class="round slider"></div>
    </label>
  </nav>
</header>

base16-gruvbox-dark-soft

Raw CSS Preview | Download CSS | Download SCSS-Mixin

Python

def available_next(itrbl):
    """
    Splits an iterable into two streams
    i is the normal ordered iterable
    n is the next element from i
    """
    i, n = tee(itrbl, 2)
    n = chain(islice(n, 1, None), [None])
    return zip(i, n)

Javascript

function switchTheme(e) {
  if (e.target.checked) {
    currentTheme = 'light';
  }
  else {
    currentTheme = 'dark';
  }
  document.documentElement.setAttribute('data-theme', currentTheme);
  localStorage.setItem('theme', currentTheme);
}

SCSS

@mixin dark-scheme {
  --font-color: #e3e0d7;
  --bg-color: #242424;
  --heading-color: #fff;
  --link-color: #80a0ff;
  --link-color-visited: #d787ff;
}
@media (prefers-color-scheme: dark) {
  :root {
    @include dark-scheme;
  }
}
[data-theme="dark"]:root {
  @include dark-scheme;
}

HTML

<header>
  <nav class="theme-switch-wrapper">
    <h1>Theme Preview</h1>
    <label class="theme-switch" for="checkbox">
      <input type="checkbox" id="checkbox" />
      <div class="round slider"></div>
    </label>
  </nav>
</header>

base16-gruvbox-light-hard

Raw CSS Preview | Download CSS | Download SCSS-Mixin

Python

def available_next(itrbl):
    """
    Splits an iterable into two streams
    i is the normal ordered iterable
    n is the next element from i
    """
    i, n = tee(itrbl, 2)
    n = chain(islice(n, 1, None), [None])
    return zip(i, n)

Javascript

function switchTheme(e) {
  if (e.target.checked) {
    currentTheme = 'light';
  }
  else {
    currentTheme = 'dark';
  }
  document.documentElement.setAttribute('data-theme', currentTheme);
  localStorage.setItem('theme', currentTheme);
}

SCSS

@mixin dark-scheme {
  --font-color: #e3e0d7;
  --bg-color: #242424;
  --heading-color: #fff;
  --link-color: #80a0ff;
  --link-color-visited: #d787ff;
}
@media (prefers-color-scheme: dark) {
  :root {
    @include dark-scheme;
  }
}
[data-theme="dark"]:root {
  @include dark-scheme;
}

HTML

<header>
  <nav class="theme-switch-wrapper">
    <h1>Theme Preview</h1>
    <label class="theme-switch" for="checkbox">
      <input type="checkbox" id="checkbox" />
      <div class="round slider"></div>
    </label>
  </nav>
</header>

base16-gruvbox-light-medium

Raw CSS Preview | Download CSS | Download SCSS-Mixin

Python

def available_next(itrbl):
    """
    Splits an iterable into two streams
    i is the normal ordered iterable
    n is the next element from i
    """
    i, n = tee(itrbl, 2)
    n = chain(islice(n, 1, None), [None])
    return zip(i, n)

Javascript

function switchTheme(e) {
  if (e.target.checked) {
    currentTheme = 'light';
  }
  else {
    currentTheme = 'dark';
  }
  document.documentElement.setAttribute('data-theme', currentTheme);
  localStorage.setItem('theme', currentTheme);
}

SCSS

@mixin dark-scheme {
  --font-color: #e3e0d7;
  --bg-color: #242424;
  --heading-color: #fff;
  --link-color: #80a0ff;
  --link-color-visited: #d787ff;
}
@media (prefers-color-scheme: dark) {
  :root {
    @include dark-scheme;
  }
}
[data-theme="dark"]:root {
  @include dark-scheme;
}

HTML

<header>
  <nav class="theme-switch-wrapper">
    <h1>Theme Preview</h1>
    <label class="theme-switch" for="checkbox">
      <input type="checkbox" id="checkbox" />
      <div class="round slider"></div>
    </label>
  </nav>
</header>

base16-gruvbox-light-soft

Raw CSS Preview | Download CSS | Download SCSS-Mixin

Python

def available_next(itrbl):
    """
    Splits an iterable into two streams
    i is the normal ordered iterable
    n is the next element from i
    """
    i, n = tee(itrbl, 2)
    n = chain(islice(n, 1, None), [None])
    return zip(i, n)

Javascript

function switchTheme(e) {
  if (e.target.checked) {
    currentTheme = 'light';
  }
  else {
    currentTheme = 'dark';
  }
  document.documentElement.setAttribute('data-theme', currentTheme);
  localStorage.setItem('theme', currentTheme);
}

SCSS

@mixin dark-scheme {
  --font-color: #e3e0d7;
  --bg-color: #242424;
  --heading-color: #fff;
  --link-color: #80a0ff;
  --link-color-visited: #d787ff;
}
@media (prefers-color-scheme: dark) {
  :root {
    @include dark-scheme;
  }
}
[data-theme="dark"]:root {
  @include dark-scheme;
}

HTML

<header>
  <nav class="theme-switch-wrapper">
    <h1>Theme Preview</h1>
    <label class="theme-switch" for="checkbox">
      <input type="checkbox" id="checkbox" />
      <div class="round slider"></div>
    </label>
  </nav>
</header>

base16-harmonic-dark

Raw CSS Preview | Download CSS | Download SCSS-Mixin

Python

def available_next(itrbl):
    """
    Splits an iterable into two streams
    i is the normal ordered iterable
    n is the next element from i
    """
    i, n = tee(itrbl, 2)
    n = chain(islice(n, 1, None), [None])
    return zip(i, n)

Javascript

function switchTheme(e) {
  if (e.target.checked) {
    currentTheme = 'light';
  }
  else {
    currentTheme = 'dark';
  }
  document.documentElement.setAttribute('data-theme', currentTheme);
  localStorage.setItem('theme', currentTheme);
}

SCSS

@mixin dark-scheme {
  --font-color: #e3e0d7;
  --bg-color: #242424;
  --heading-color: #fff;
  --link-color: #80a0ff;
  --link-color-visited: #d787ff;
}
@media (prefers-color-scheme: dark) {
  :root {
    @include dark-scheme;
  }
}
[data-theme="dark"]:root {
  @include dark-scheme;
}

HTML

<header>
  <nav class="theme-switch-wrapper">
    <h1>Theme Preview</h1>
    <label class="theme-switch" for="checkbox">
      <input type="checkbox" id="checkbox" />
      <div class="round slider"></div>
    </label>
  </nav>
</header>

base16-harmonic-light

Raw CSS Preview | Download CSS | Download SCSS-Mixin

Python

def available_next(itrbl):
    """
    Splits an iterable into two streams
    i is the normal ordered iterable
    n is the next element from i
    """
    i, n = tee(itrbl, 2)
    n = chain(islice(n, 1, None), [None])
    return zip(i, n)

Javascript

function switchTheme(e) {
  if (e.target.checked) {
    currentTheme = 'light';
  }
  else {
    currentTheme = 'dark';
  }
  document.documentElement.setAttribute('data-theme', currentTheme);
  localStorage.setItem('theme', currentTheme);
}

SCSS

@mixin dark-scheme {
  --font-color: #e3e0d7;
  --bg-color: #242424;
  --heading-color: #fff;
  --link-color: #80a0ff;
  --link-color-visited: #d787ff;
}
@media (prefers-color-scheme: dark) {
  :root {
    @include dark-scheme;
  }
}
[data-theme="dark"]:root {
  @include dark-scheme;
}

HTML

<header>
  <nav class="theme-switch-wrapper">
    <h1>Theme Preview</h1>
    <label class="theme-switch" for="checkbox">
      <input type="checkbox" id="checkbox" />
      <div class="round slider"></div>
    </label>
  </nav>
</header>

base16-hopscotch

Raw CSS Preview | Download CSS | Download SCSS-Mixin

Python

def available_next(itrbl):
    """
    Splits an iterable into two streams
    i is the normal ordered iterable
    n is the next element from i
    """
    i, n = tee(itrbl, 2)
    n = chain(islice(n, 1, None), [None])
    return zip(i, n)

Javascript

function switchTheme(e) {
  if (e.target.checked) {
    currentTheme = 'light';
  }
  else {
    currentTheme = 'dark';
  }
  document.documentElement.setAttribute('data-theme', currentTheme);
  localStorage.setItem('theme', currentTheme);
}

SCSS

@mixin dark-scheme {
  --font-color: #e3e0d7;
  --bg-color: #242424;
  --heading-color: #fff;
  --link-color: #80a0ff;
  --link-color-visited: #d787ff;
}
@media (prefers-color-scheme: dark) {
  :root {
    @include dark-scheme;
  }
}
[data-theme="dark"]:root {
  @include dark-scheme;
}

HTML

<header>
  <nav class="theme-switch-wrapper">
    <h1>Theme Preview</h1>
    <label class="theme-switch" for="checkbox">
      <input type="checkbox" id="checkbox" />
      <div class="round slider"></div>
    </label>
  </nav>
</header>

base16-icy

Raw CSS Preview | Download CSS | Download SCSS-Mixin

Python

def available_next(itrbl):
    """
    Splits an iterable into two streams
    i is the normal ordered iterable
    n is the next element from i
    """
    i, n = tee(itrbl, 2)
    n = chain(islice(n, 1, None), [None])
    return zip(i, n)

Javascript

function switchTheme(e) {
  if (e.target.checked) {
    currentTheme = 'light';
  }
  else {
    currentTheme = 'dark';
  }
  document.documentElement.setAttribute('data-theme', currentTheme);
  localStorage.setItem('theme', currentTheme);
}

SCSS

@mixin dark-scheme {
  --font-color: #e3e0d7;
  --bg-color: #242424;
  --heading-color: #fff;
  --link-color: #80a0ff;
  --link-color-visited: #d787ff;
}
@media (prefers-color-scheme: dark) {
  :root {
    @include dark-scheme;
  }
}
[data-theme="dark"]:root {
  @include dark-scheme;
}

HTML

<header>
  <nav class="theme-switch-wrapper">
    <h1>Theme Preview</h1>
    <label class="theme-switch" for="checkbox">
      <input type="checkbox" id="checkbox" />
      <div class="round slider"></div>
    </label>
  </nav>
</header>

base16-irblack

Raw CSS Preview | Download CSS | Download SCSS-Mixin

Python

def available_next(itrbl):
    """
    Splits an iterable into two streams
    i is the normal ordered iterable
    n is the next element from i
    """
    i, n = tee(itrbl, 2)
    n = chain(islice(n, 1, None), [None])
    return zip(i, n)

Javascript

function switchTheme(e) {
  if (e.target.checked) {
    currentTheme = 'light';
  }
  else {
    currentTheme = 'dark';
  }
  document.documentElement.setAttribute('data-theme', currentTheme);
  localStorage.setItem('theme', currentTheme);
}

SCSS

@mixin dark-scheme {
  --font-color: #e3e0d7;
  --bg-color: #242424;
  --heading-color: #fff;
  --link-color: #80a0ff;
  --link-color-visited: #d787ff;
}
@media (prefers-color-scheme: dark) {
  :root {
    @include dark-scheme;
  }
}
[data-theme="dark"]:root {
  @include dark-scheme;
}

HTML

<header>
  <nav class="theme-switch-wrapper">
    <h1>Theme Preview</h1>
    <label class="theme-switch" for="checkbox">
      <input type="checkbox" id="checkbox" />
      <div class="round slider"></div>
    </label>
  </nav>
</header>

base16-isotope

Raw CSS Preview | Download CSS | Download SCSS-Mixin

Python

def available_next(itrbl):
    """
    Splits an iterable into two streams
    i is the normal ordered iterable
    n is the next element from i
    """
    i, n = tee(itrbl, 2)
    n = chain(islice(n, 1, None), [None])
    return zip(i, n)

Javascript

function switchTheme(e) {
  if (e.target.checked) {
    currentTheme = 'light';
  }
  else {
    currentTheme = 'dark';
  }
  document.documentElement.setAttribute('data-theme', currentTheme);
  localStorage.setItem('theme', currentTheme);
}

SCSS

@mixin dark-scheme {
  --font-color: #e3e0d7;
  --bg-color: #242424;
  --heading-color: #fff;
  --link-color: #80a0ff;
  --link-color-visited: #d787ff;
}
@media (prefers-color-scheme: dark) {
  :root {
    @include dark-scheme;
  }
}
[data-theme="dark"]:root {
  @include dark-scheme;
}

HTML

<header>
  <nav class="theme-switch-wrapper">
    <h1>Theme Preview</h1>
    <label class="theme-switch" for="checkbox">
      <input type="checkbox" id="checkbox" />
      <div class="round slider"></div>
    </label>
  </nav>
</header>

base16-macintosh

Raw CSS Preview | Download CSS | Download SCSS-Mixin

Python

def available_next(itrbl):
    """
    Splits an iterable into two streams
    i is the normal ordered iterable
    n is the next element from i
    """
    i, n = tee(itrbl, 2)
    n = chain(islice(n, 1, None), [None])
    return zip(i, n)

Javascript

function switchTheme(e) {
  if (e.target.checked) {
    currentTheme = 'light';
  }
  else {
    currentTheme = 'dark';
  }
  document.documentElement.setAttribute('data-theme', currentTheme);
  localStorage.setItem('theme', currentTheme);
}

SCSS

@mixin dark-scheme {
  --font-color: #e3e0d7;
  --bg-color: #242424;
  --heading-color: #fff;
  --link-color: #80a0ff;
  --link-color-visited: #d787ff;
}
@media (prefers-color-scheme: dark) {
  :root {
    @include dark-scheme;
  }
}
[data-theme="dark"]:root {
  @include dark-scheme;
}

HTML

<header>
  <nav class="theme-switch-wrapper">
    <h1>Theme Preview</h1>
    <label class="theme-switch" for="checkbox">
      <input type="checkbox" id="checkbox" />
      <div class="round slider"></div>
    </label>
  </nav>
</header>

base16-marrakesh

Raw CSS Preview | Download CSS | Download SCSS-Mixin

Python

def available_next(itrbl):
    """
    Splits an iterable into two streams
    i is the normal ordered iterable
    n is the next element from i
    """
    i, n = tee(itrbl, 2)
    n = chain(islice(n, 1, None), [None])
    return zip(i, n)

Javascript

function switchTheme(e) {
  if (e.target.checked) {
    currentTheme = 'light';
  }
  else {
    currentTheme = 'dark';
  }
  document.documentElement.setAttribute('data-theme', currentTheme);
  localStorage.setItem('theme', currentTheme);
}

SCSS

@mixin dark-scheme {
  --font-color: #e3e0d7;
  --bg-color: #242424;
  --heading-color: #fff;
  --link-color: #80a0ff;
  --link-color-visited: #d787ff;
}
@media (prefers-color-scheme: dark) {
  :root {
    @include dark-scheme;
  }
}
[data-theme="dark"]:root {
  @include dark-scheme;
}

HTML

<header>
  <nav class="theme-switch-wrapper">
    <h1>Theme Preview</h1>
    <label class="theme-switch" for="checkbox">
      <input type="checkbox" id="checkbox" />
      <div class="round slider"></div>
    </label>
  </nav>
</header>

base16-materia

Raw CSS Preview | Download CSS | Download SCSS-Mixin

Python

def available_next(itrbl):
    """
    Splits an iterable into two streams
    i is the normal ordered iterable
    n is the next element from i
    """
    i, n = tee(itrbl, 2)
    n = chain(islice(n, 1, None), [None])
    return zip(i, n)

Javascript

function switchTheme(e) {
  if (e.target.checked) {
    currentTheme = 'light';
  }
  else {
    currentTheme = 'dark';
  }
  document.documentElement.setAttribute('data-theme', currentTheme);
  localStorage.setItem('theme', currentTheme);
}

SCSS

@mixin dark-scheme {
  --font-color: #e3e0d7;
  --bg-color: #242424;
  --heading-color: #fff;
  --link-color: #80a0ff;
  --link-color-visited: #d787ff;
}
@media (prefers-color-scheme: dark) {
  :root {
    @include dark-scheme;
  }
}
[data-theme="dark"]:root {
  @include dark-scheme;
}

HTML

<header>
  <nav class="theme-switch-wrapper">
    <h1>Theme Preview</h1>
    <label class="theme-switch" for="checkbox">
      <input type="checkbox" id="checkbox" />
      <div class="round slider"></div>
    </label>
  </nav>
</header>

base16-material-darker

Raw CSS Preview | Download CSS | Download SCSS-Mixin

Python

def available_next(itrbl):
    """
    Splits an iterable into two streams
    i is the normal ordered iterable
    n is the next element from i
    """
    i, n = tee(itrbl, 2)
    n = chain(islice(n, 1, None), [None])
    return zip(i, n)

Javascript

function switchTheme(e) {
  if (e.target.checked) {
    currentTheme = 'light';
  }
  else {
    currentTheme = 'dark';
  }
  document.documentElement.setAttribute('data-theme', currentTheme);
  localStorage.setItem('theme', currentTheme);
}

SCSS

@mixin dark-scheme {
  --font-color: #e3e0d7;
  --bg-color: #242424;
  --heading-color: #fff;
  --link-color: #80a0ff;
  --link-color-visited: #d787ff;
}
@media (prefers-color-scheme: dark) {
  :root {
    @include dark-scheme;
  }
}
[data-theme="dark"]:root {
  @include dark-scheme;
}

HTML

<header>
  <nav class="theme-switch-wrapper">
    <h1>Theme Preview</h1>
    <label class="theme-switch" for="checkbox">
      <input type="checkbox" id="checkbox" />
      <div class="round slider"></div>
    </label>
  </nav>
</header>

base16-material-lighter

Raw CSS Preview | Download CSS | Download SCSS-Mixin

Python

def available_next(itrbl):
    """
    Splits an iterable into two streams
    i is the normal ordered iterable
    n is the next element from i
    """
    i, n = tee(itrbl, 2)
    n = chain(islice(n, 1, None), [None])
    return zip(i, n)

Javascript

function switchTheme(e) {
  if (e.target.checked) {
    currentTheme = 'light';
  }
  else {
    currentTheme = 'dark';
  }
  document.documentElement.setAttribute('data-theme', currentTheme);
  localStorage.setItem('theme', currentTheme);
}

SCSS

@mixin dark-scheme {
  --font-color: #e3e0d7;
  --bg-color: #242424;
  --heading-color: #fff;
  --link-color: #80a0ff;
  --link-color-visited: #d787ff;
}
@media (prefers-color-scheme: dark) {
  :root {
    @include dark-scheme;
  }
}
[data-theme="dark"]:root {
  @include dark-scheme;
}

HTML

<header>
  <nav class="theme-switch-wrapper">
    <h1>Theme Preview</h1>
    <label class="theme-switch" for="checkbox">
      <input type="checkbox" id="checkbox" />
      <div class="round slider"></div>
    </label>
  </nav>
</header>

base16-material-palenight

Raw CSS Preview | Download CSS | Download SCSS-Mixin

Python

def available_next(itrbl):
    """
    Splits an iterable into two streams
    i is the normal ordered iterable
    n is the next element from i
    """
    i, n = tee(itrbl, 2)
    n = chain(islice(n, 1, None), [None])
    return zip(i, n)

Javascript

function switchTheme(e) {
  if (e.target.checked) {
    currentTheme = 'light';
  }
  else {
    currentTheme = 'dark';
  }
  document.documentElement.setAttribute('data-theme', currentTheme);
  localStorage.setItem('theme', currentTheme);
}

SCSS

@mixin dark-scheme {
  --font-color: #e3e0d7;
  --bg-color: #242424;
  --heading-color: #fff;
  --link-color: #80a0ff;
  --link-color-visited: #d787ff;
}
@media (prefers-color-scheme: dark) {
  :root {
    @include dark-scheme;
  }
}
[data-theme="dark"]:root {
  @include dark-scheme;
}

HTML

<header>
  <nav class="theme-switch-wrapper">
    <h1>Theme Preview</h1>
    <label class="theme-switch" for="checkbox">
      <input type="checkbox" id="checkbox" />
      <div class="round slider"></div>
    </label>
  </nav>
</header>

base16-material

Raw CSS Preview | Download CSS | Download SCSS-Mixin

Python

def available_next(itrbl):
    """
    Splits an iterable into two streams
    i is the normal ordered iterable
    n is the next element from i
    """
    i, n = tee(itrbl, 2)
    n = chain(islice(n, 1, None), [None])
    return zip(i, n)

Javascript

function switchTheme(e) {
  if (e.target.checked) {
    currentTheme = 'light';
  }
  else {
    currentTheme = 'dark';
  }
  document.documentElement.setAttribute('data-theme', currentTheme);
  localStorage.setItem('theme', currentTheme);
}

SCSS

@mixin dark-scheme {
  --font-color: #e3e0d7;
  --bg-color: #242424;
  --heading-color: #fff;
  --link-color: #80a0ff;
  --link-color-visited: #d787ff;
}
@media (prefers-color-scheme: dark) {
  :root {
    @include dark-scheme;
  }
}
[data-theme="dark"]:root {
  @include dark-scheme;
}

HTML

<header>
  <nav class="theme-switch-wrapper">
    <h1>Theme Preview</h1>
    <label class="theme-switch" for="checkbox">
      <input type="checkbox" id="checkbox" />
      <div class="round slider"></div>
    </label>
  </nav>
</header>

base16-mellow-purple

Raw CSS Preview | Download CSS | Download SCSS-Mixin

Python

def available_next(itrbl):
    """
    Splits an iterable into two streams
    i is the normal ordered iterable
    n is the next element from i
    """
    i, n = tee(itrbl, 2)
    n = chain(islice(n, 1, None), [None])
    return zip(i, n)

Javascript

function switchTheme(e) {
  if (e.target.checked) {
    currentTheme = 'light';
  }
  else {
    currentTheme = 'dark';
  }
  document.documentElement.setAttribute('data-theme', currentTheme);
  localStorage.setItem('theme', currentTheme);
}

SCSS

@mixin dark-scheme {
  --font-color: #e3e0d7;
  --bg-color: #242424;
  --heading-color: #fff;
  --link-color: #80a0ff;
  --link-color-visited: #d787ff;
}
@media (prefers-color-scheme: dark) {
  :root {
    @include dark-scheme;
  }
}
[data-theme="dark"]:root {
  @include dark-scheme;
}

HTML

<header>
  <nav class="theme-switch-wrapper">
    <h1>Theme Preview</h1>
    <label class="theme-switch" for="checkbox">
      <input type="checkbox" id="checkbox" />
      <div class="round slider"></div>
    </label>
  </nav>
</header>

base16-mexico-light

Raw CSS Preview | Download CSS | Download SCSS-Mixin

Python

def available_next(itrbl):
    """
    Splits an iterable into two streams
    i is the normal ordered iterable
    n is the next element from i
    """
    i, n = tee(itrbl, 2)
    n = chain(islice(n, 1, None), [None])
    return zip(i, n)

Javascript

function switchTheme(e) {
  if (e.target.checked) {
    currentTheme = 'light';
  }
  else {
    currentTheme = 'dark';
  }
  document.documentElement.setAttribute('data-theme', currentTheme);
  localStorage.setItem('theme', currentTheme);
}

SCSS

@mixin dark-scheme {
  --font-color: #e3e0d7;
  --bg-color: #242424;
  --heading-color: #fff;
  --link-color: #80a0ff;
  --link-color-visited: #d787ff;
}
@media (prefers-color-scheme: dark) {
  :root {
    @include dark-scheme;
  }
}
[data-theme="dark"]:root {
  @include dark-scheme;
}

HTML

<header>
  <nav class="theme-switch-wrapper">
    <h1>Theme Preview</h1>
    <label class="theme-switch" for="checkbox">
      <input type="checkbox" id="checkbox" />
      <div class="round slider"></div>
    </label>
  </nav>
</header>

base16-mocha

Raw CSS Preview | Download CSS | Download SCSS-Mixin

Python

def available_next(itrbl):
    """
    Splits an iterable into two streams
    i is the normal ordered iterable
    n is the next element from i
    """
    i, n = tee(itrbl, 2)
    n = chain(islice(n, 1, None), [None])
    return zip(i, n)

Javascript

function switchTheme(e) {
  if (e.target.checked) {
    currentTheme = 'light';
  }
  else {
    currentTheme = 'dark';
  }
  document.documentElement.setAttribute('data-theme', currentTheme);
  localStorage.setItem('theme', currentTheme);
}

SCSS

@mixin dark-scheme {
  --font-color: #e3e0d7;
  --bg-color: #242424;
  --heading-color: #fff;
  --link-color: #80a0ff;
  --link-color-visited: #d787ff;
}
@media (prefers-color-scheme: dark) {
  :root {
    @include dark-scheme;
  }
}
[data-theme="dark"]:root {
  @include dark-scheme;
}

HTML

<header>
  <nav class="theme-switch-wrapper">
    <h1>Theme Preview</h1>
    <label class="theme-switch" for="checkbox">
      <input type="checkbox" id="checkbox" />
      <div class="round slider"></div>
    </label>
  </nav>
</header>

base16-monokai

Raw CSS Preview | Download CSS | Download SCSS-Mixin

Python

def available_next(itrbl):
    """
    Splits an iterable into two streams
    i is the normal ordered iterable
    n is the next element from i
    """
    i, n = tee(itrbl, 2)
    n = chain(islice(n, 1, None), [None])
    return zip(i, n)

Javascript

function switchTheme(e) {
  if (e.target.checked) {
    currentTheme = 'light';
  }
  else {
    currentTheme = 'dark';
  }
  document.documentElement.setAttribute('data-theme', currentTheme);
  localStorage.setItem('theme', currentTheme);
}

SCSS

@mixin dark-scheme {
  --font-color: #e3e0d7;
  --bg-color: #242424;
  --heading-color: #fff;
  --link-color: #80a0ff;
  --link-color-visited: #d787ff;
}
@media (prefers-color-scheme: dark) {
  :root {
    @include dark-scheme;
  }
}
[data-theme="dark"]:root {
  @include dark-scheme;
}

HTML

<header>
  <nav class="theme-switch-wrapper">
    <h1>Theme Preview</h1>
    <label class="theme-switch" for="checkbox">
      <input type="checkbox" id="checkbox" />
      <div class="round slider"></div>
    </label>
  </nav>
</header>

base16-nord

Raw CSS Preview | Download CSS | Download SCSS-Mixin

Python

def available_next(itrbl):
    """
    Splits an iterable into two streams
    i is the normal ordered iterable
    n is the next element from i
    """
    i, n = tee(itrbl, 2)
    n = chain(islice(n, 1, None), [None])
    return zip(i, n)

Javascript

function switchTheme(e) {
  if (e.target.checked) {
    currentTheme = 'light';
  }
  else {
    currentTheme = 'dark';
  }
  document.documentElement.setAttribute('data-theme', currentTheme);
  localStorage.setItem('theme', currentTheme);
}

SCSS

@mixin dark-scheme {
  --font-color: #e3e0d7;
  --bg-color: #242424;
  --heading-color: #fff;
  --link-color: #80a0ff;
  --link-color-visited: #d787ff;
}
@media (prefers-color-scheme: dark) {
  :root {
    @include dark-scheme;
  }
}
[data-theme="dark"]:root {
  @include dark-scheme;
}

HTML

<header>
  <nav class="theme-switch-wrapper">
    <h1>Theme Preview</h1>
    <label class="theme-switch" for="checkbox">
      <input type="checkbox" id="checkbox" />
      <div class="round slider"></div>
    </label>
  </nav>
</header>

base16-ocean

Raw CSS Preview | Download CSS | Download SCSS-Mixin

Python

def available_next(itrbl):
    """
    Splits an iterable into two streams
    i is the normal ordered iterable
    n is the next element from i
    """
    i, n = tee(itrbl, 2)
    n = chain(islice(n, 1, None), [None])
    return zip(i, n)

Javascript

function switchTheme(e) {
  if (e.target.checked) {
    currentTheme = 'light';
  }
  else {
    currentTheme = 'dark';
  }
  document.documentElement.setAttribute('data-theme', currentTheme);
  localStorage.setItem('theme', currentTheme);
}

SCSS

@mixin dark-scheme {
  --font-color: #e3e0d7;
  --bg-color: #242424;
  --heading-color: #fff;
  --link-color: #80a0ff;
  --link-color-visited: #d787ff;
}
@media (prefers-color-scheme: dark) {
  :root {
    @include dark-scheme;
  }
}
[data-theme="dark"]:root {
  @include dark-scheme;
}

HTML

<header>
  <nav class="theme-switch-wrapper">
    <h1>Theme Preview</h1>
    <label class="theme-switch" for="checkbox">
      <input type="checkbox" id="checkbox" />
      <div class="round slider"></div>
    </label>
  </nav>
</header>

base16-oceanicnext

Raw CSS Preview | Download CSS | Download SCSS-Mixin

Python

def available_next(itrbl):
    """
    Splits an iterable into two streams
    i is the normal ordered iterable
    n is the next element from i
    """
    i, n = tee(itrbl, 2)
    n = chain(islice(n, 1, None), [None])
    return zip(i, n)

Javascript

function switchTheme(e) {
  if (e.target.checked) {
    currentTheme = 'light';
  }
  else {
    currentTheme = 'dark';
  }
  document.documentElement.setAttribute('data-theme', currentTheme);
  localStorage.setItem('theme', currentTheme);
}

SCSS

@mixin dark-scheme {
  --font-color: #e3e0d7;
  --bg-color: #242424;
  --heading-color: #fff;
  --link-color: #80a0ff;
  --link-color-visited: #d787ff;
}
@media (prefers-color-scheme: dark) {
  :root {
    @include dark-scheme;
  }
}
[data-theme="dark"]:root {
  @include dark-scheme;
}

HTML

<header>
  <nav class="theme-switch-wrapper">
    <h1>Theme Preview</h1>
    <label class="theme-switch" for="checkbox">
      <input type="checkbox" id="checkbox" />
      <div class="round slider"></div>
    </label>
  </nav>
</header>

base16-one-light

Raw CSS Preview | Download CSS | Download SCSS-Mixin

Python

def available_next(itrbl):
    """
    Splits an iterable into two streams
    i is the normal ordered iterable
    n is the next element from i
    """
    i, n = tee(itrbl, 2)
    n = chain(islice(n, 1, None), [None])
    return zip(i, n)

Javascript

function switchTheme(e) {
  if (e.target.checked) {
    currentTheme = 'light';
  }
  else {
    currentTheme = 'dark';
  }
  document.documentElement.setAttribute('data-theme', currentTheme);
  localStorage.setItem('theme', currentTheme);
}

SCSS

@mixin dark-scheme {
  --font-color: #e3e0d7;
  --bg-color: #242424;
  --heading-color: #fff;
  --link-color: #80a0ff;
  --link-color-visited: #d787ff;
}
@media (prefers-color-scheme: dark) {
  :root {
    @include dark-scheme;
  }
}
[data-theme="dark"]:root {
  @include dark-scheme;
}

HTML

<header>
  <nav class="theme-switch-wrapper">
    <h1>Theme Preview</h1>
    <label class="theme-switch" for="checkbox">
      <input type="checkbox" id="checkbox" />
      <div class="round slider"></div>
    </label>
  </nav>
</header>

base16-onedark

Raw CSS Preview | Download CSS | Download SCSS-Mixin

Python

def available_next(itrbl):
    """
    Splits an iterable into two streams
    i is the normal ordered iterable
    n is the next element from i
    """
    i, n = tee(itrbl, 2)
    n = chain(islice(n, 1, None), [None])
    return zip(i, n)

Javascript

function switchTheme(e) {
  if (e.target.checked) {
    currentTheme = 'light';
  }
  else {
    currentTheme = 'dark';
  }
  document.documentElement.setAttribute('data-theme', currentTheme);
  localStorage.setItem('theme', currentTheme);
}

SCSS

@mixin dark-scheme {
  --font-color: #e3e0d7;
  --bg-color: #242424;
  --heading-color: #fff;
  --link-color: #80a0ff;
  --link-color-visited: #d787ff;
}
@media (prefers-color-scheme: dark) {
  :root {
    @include dark-scheme;
  }
}
[data-theme="dark"]:root {
  @include dark-scheme;
}

HTML

<header>
  <nav class="theme-switch-wrapper">
    <h1>Theme Preview</h1>
    <label class="theme-switch" for="checkbox">
      <input type="checkbox" id="checkbox" />
      <div class="round slider"></div>
    </label>
  </nav>
</header>

base16-outrun-dark

Raw CSS Preview | Download CSS | Download SCSS-Mixin

Python

def available_next(itrbl):
    """
    Splits an iterable into two streams
    i is the normal ordered iterable
    n is the next element from i
    """
    i, n = tee(itrbl, 2)
    n = chain(islice(n, 1, None), [None])
    return zip(i, n)

Javascript

function switchTheme(e) {
  if (e.target.checked) {
    currentTheme = 'light';
  }
  else {
    currentTheme = 'dark';
  }
  document.documentElement.setAttribute('data-theme', currentTheme);
  localStorage.setItem('theme', currentTheme);
}

SCSS

@mixin dark-scheme {
  --font-color: #e3e0d7;
  --bg-color: #242424;
  --heading-color: #fff;
  --link-color: #80a0ff;
  --link-color-visited: #d787ff;
}
@media (prefers-color-scheme: dark) {
  :root {
    @include dark-scheme;
  }
}
[data-theme="dark"]:root {
  @include dark-scheme;
}

HTML

<header>
  <nav class="theme-switch-wrapper">
    <h1>Theme Preview</h1>
    <label class="theme-switch" for="checkbox">
      <input type="checkbox" id="checkbox" />
      <div class="round slider"></div>
    </label>
  </nav>
</header>

base16-paraiso

Raw CSS Preview | Download CSS | Download SCSS-Mixin

Python

def available_next(itrbl):
    """
    Splits an iterable into two streams
    i is the normal ordered iterable
    n is the next element from i
    """
    i, n = tee(itrbl, 2)
    n = chain(islice(n, 1, None), [None])
    return zip(i, n)

Javascript

function switchTheme(e) {
  if (e.target.checked) {
    currentTheme = 'light';
  }
  else {
    currentTheme = 'dark';
  }
  document.documentElement.setAttribute('data-theme', currentTheme);
  localStorage.setItem('theme', currentTheme);
}

SCSS

@mixin dark-scheme {
  --font-color: #e3e0d7;
  --bg-color: #242424;
  --heading-color: #fff;
  --link-color: #80a0ff;
  --link-color-visited: #d787ff;
}
@media (prefers-color-scheme: dark) {
  :root {
    @include dark-scheme;
  }
}
[data-theme="dark"]:root {
  @include dark-scheme;
}

HTML

<header>
  <nav class="theme-switch-wrapper">
    <h1>Theme Preview</h1>
    <label class="theme-switch" for="checkbox">
      <input type="checkbox" id="checkbox" />
      <div class="round slider"></div>
    </label>
  </nav>
</header>

base16-phd

Raw CSS Preview | Download CSS | Download SCSS-Mixin

Python

def available_next(itrbl):
    """
    Splits an iterable into two streams
    i is the normal ordered iterable
    n is the next element from i
    """
    i, n = tee(itrbl, 2)
    n = chain(islice(n, 1, None), [None])
    return zip(i, n)

Javascript

function switchTheme(e) {
  if (e.target.checked) {
    currentTheme = 'light';
  }
  else {
    currentTheme = 'dark';
  }
  document.documentElement.setAttribute('data-theme', currentTheme);
  localStorage.setItem('theme', currentTheme);
}

SCSS

@mixin dark-scheme {
  --font-color: #e3e0d7;
  --bg-color: #242424;
  --heading-color: #fff;
  --link-color: #80a0ff;
  --link-color-visited: #d787ff;
}
@media (prefers-color-scheme: dark) {
  :root {
    @include dark-scheme;
  }
}
[data-theme="dark"]:root {
  @include dark-scheme;
}

HTML

<header>
  <nav class="theme-switch-wrapper">
    <h1>Theme Preview</h1>
    <label class="theme-switch" for="checkbox">
      <input type="checkbox" id="checkbox" />
      <div class="round slider"></div>
    </label>
  </nav>
</header>

base16-pico

Raw CSS Preview | Download CSS | Download SCSS-Mixin

Python

def available_next(itrbl):
    """
    Splits an iterable into two streams
    i is the normal ordered iterable
    n is the next element from i
    """
    i, n = tee(itrbl, 2)
    n = chain(islice(n, 1, None), [None])
    return zip(i, n)

Javascript

function switchTheme(e) {
  if (e.target.checked) {
    currentTheme = 'light';
  }
  else {
    currentTheme = 'dark';
  }
  document.documentElement.setAttribute('data-theme', currentTheme);
  localStorage.setItem('theme', currentTheme);
}

SCSS

@mixin dark-scheme {
  --font-color: #e3e0d7;
  --bg-color: #242424;
  --heading-color: #fff;
  --link-color: #80a0ff;
  --link-color-visited: #d787ff;
}
@media (prefers-color-scheme: dark) {
  :root {
    @include dark-scheme;
  }
}
[data-theme="dark"]:root {
  @include dark-scheme;
}

HTML

<header>
  <nav class="theme-switch-wrapper">
    <h1>Theme Preview</h1>
    <label class="theme-switch" for="checkbox">
      <input type="checkbox" id="checkbox" />
      <div class="round slider"></div>
    </label>
  </nav>
</header>

base16-pop

Raw CSS Preview | Download CSS | Download SCSS-Mixin

Python

def available_next(itrbl):
    """
    Splits an iterable into two streams
    i is the normal ordered iterable
    n is the next element from i
    """
    i, n = tee(itrbl, 2)
    n = chain(islice(n, 1, None), [None])
    return zip(i, n)

Javascript

function switchTheme(e) {
  if (e.target.checked) {
    currentTheme = 'light';
  }
  else {
    currentTheme = 'dark';
  }
  document.documentElement.setAttribute('data-theme', currentTheme);
  localStorage.setItem('theme', currentTheme);
}

SCSS

@mixin dark-scheme {
  --font-color: #e3e0d7;
  --bg-color: #242424;
  --heading-color: #fff;
  --link-color: #80a0ff;
  --link-color-visited: #d787ff;
}
@media (prefers-color-scheme: dark) {
  :root {
    @include dark-scheme;
  }
}
[data-theme="dark"]:root {
  @include dark-scheme;
}

HTML

<header>
  <nav class="theme-switch-wrapper">
    <h1>Theme Preview</h1>
    <label class="theme-switch" for="checkbox">
      <input type="checkbox" id="checkbox" />
      <div class="round slider"></div>
    </label>
  </nav>
</header>

base16-porple

Raw CSS Preview | Download CSS | Download SCSS-Mixin

Python

def available_next(itrbl):
    """
    Splits an iterable into two streams
    i is the normal ordered iterable
    n is the next element from i
    """
    i, n = tee(itrbl, 2)
    n = chain(islice(n, 1, None), [None])
    return zip(i, n)

Javascript

function switchTheme(e) {
  if (e.target.checked) {
    currentTheme = 'light';
  }
  else {
    currentTheme = 'dark';
  }
  document.documentElement.setAttribute('data-theme', currentTheme);
  localStorage.setItem('theme', currentTheme);
}

SCSS

@mixin dark-scheme {
  --font-color: #e3e0d7;
  --bg-color: #242424;
  --heading-color: #fff;
  --link-color: #80a0ff;
  --link-color-visited: #d787ff;
}
@media (prefers-color-scheme: dark) {
  :root {
    @include dark-scheme;
  }
}
[data-theme="dark"]:root {
  @include dark-scheme;
}

HTML

<header>
  <nav class="theme-switch-wrapper">
    <h1>Theme Preview</h1>
    <label class="theme-switch" for="checkbox">
      <input type="checkbox" id="checkbox" />
      <div class="round slider"></div>
    </label>
  </nav>
</header>

base16-railscasts

Raw CSS Preview | Download CSS | Download SCSS-Mixin

Python

def available_next(itrbl):
    """
    Splits an iterable into two streams
    i is the normal ordered iterable
    n is the next element from i
    """
    i, n = tee(itrbl, 2)
    n = chain(islice(n, 1, None), [None])
    return zip(i, n)

Javascript

function switchTheme(e) {
  if (e.target.checked) {
    currentTheme = 'light';
  }
  else {
    currentTheme = 'dark';
  }
  document.documentElement.setAttribute('data-theme', currentTheme);
  localStorage.setItem('theme', currentTheme);
}

SCSS

@mixin dark-scheme {
  --font-color: #e3e0d7;
  --bg-color: #242424;
  --heading-color: #fff;
  --link-color: #80a0ff;
  --link-color-visited: #d787ff;
}
@media (prefers-color-scheme: dark) {
  :root {
    @include dark-scheme;
  }
}
[data-theme="dark"]:root {
  @include dark-scheme;
}

HTML

<header>
  <nav class="theme-switch-wrapper">
    <h1>Theme Preview</h1>
    <label class="theme-switch" for="checkbox">
      <input type="checkbox" id="checkbox" />
      <div class="round slider"></div>
    </label>
  </nav>
</header>

base16-rebecca

Raw CSS Preview | Download CSS | Download SCSS-Mixin

Python

def available_next(itrbl):
    """
    Splits an iterable into two streams
    i is the normal ordered iterable
    n is the next element from i
    """
    i, n = tee(itrbl, 2)
    n = chain(islice(n, 1, None), [None])
    return zip(i, n)

Javascript

function switchTheme(e) {
  if (e.target.checked) {
    currentTheme = 'light';
  }
  else {
    currentTheme = 'dark';
  }
  document.documentElement.setAttribute('data-theme', currentTheme);
  localStorage.setItem('theme', currentTheme);
}

SCSS

@mixin dark-scheme {
  --font-color: #e3e0d7;
  --bg-color: #242424;
  --heading-color: #fff;
  --link-color: #80a0ff;
  --link-color-visited: #d787ff;
}
@media (prefers-color-scheme: dark) {
  :root {
    @include dark-scheme;
  }
}
[data-theme="dark"]:root {
  @include dark-scheme;
}

HTML

<header>
  <nav class="theme-switch-wrapper">
    <h1>Theme Preview</h1>
    <label class="theme-switch" for="checkbox">
      <input type="checkbox" id="checkbox" />
      <div class="round slider"></div>
    </label>
  </nav>
</header>

base16-seti

Raw CSS Preview | Download CSS | Download SCSS-Mixin

Python

def available_next(itrbl):
    """
    Splits an iterable into two streams
    i is the normal ordered iterable
    n is the next element from i
    """
    i, n = tee(itrbl, 2)
    n = chain(islice(n, 1, None), [None])
    return zip(i, n)

Javascript

function switchTheme(e) {
  if (e.target.checked) {
    currentTheme = 'light';
  }
  else {
    currentTheme = 'dark';
  }
  document.documentElement.setAttribute('data-theme', currentTheme);
  localStorage.setItem('theme', currentTheme);
}

SCSS

@mixin dark-scheme {
  --font-color: #e3e0d7;
  --bg-color: #242424;
  --heading-color: #fff;
  --link-color: #80a0ff;
  --link-color-visited: #d787ff;
}
@media (prefers-color-scheme: dark) {
  :root {
    @include dark-scheme;
  }
}
[data-theme="dark"]:root {
  @include dark-scheme;
}

HTML

<header>
  <nav class="theme-switch-wrapper">
    <h1>Theme Preview</h1>
    <label class="theme-switch" for="checkbox">
      <input type="checkbox" id="checkbox" />
      <div class="round slider"></div>
    </label>
  </nav>
</header>

base16-shapeshifter

Raw CSS Preview | Download CSS | Download SCSS-Mixin

Python

def available_next(itrbl):
    """
    Splits an iterable into two streams
    i is the normal ordered iterable
    n is the next element from i
    """
    i, n = tee(itrbl, 2)
    n = chain(islice(n, 1, None), [None])
    return zip(i, n)

Javascript

function switchTheme(e) {
  if (e.target.checked) {
    currentTheme = 'light';
  }
  else {
    currentTheme = 'dark';
  }
  document.documentElement.setAttribute('data-theme', currentTheme);
  localStorage.setItem('theme', currentTheme);
}

SCSS

@mixin dark-scheme {
  --font-color: #e3e0d7;
  --bg-color: #242424;
  --heading-color: #fff;
  --link-color: #80a0ff;
  --link-color-visited: #d787ff;
}
@media (prefers-color-scheme: dark) {
  :root {
    @include dark-scheme;
  }
}
[data-theme="dark"]:root {
  @include dark-scheme;
}

HTML

<header>
  <nav class="theme-switch-wrapper">
    <h1>Theme Preview</h1>
    <label class="theme-switch" for="checkbox">
      <input type="checkbox" id="checkbox" />
      <div class="round slider"></div>
    </label>
  </nav>
</header>

base16-solarflare

Raw CSS Preview | Download CSS | Download SCSS-Mixin

Python

def available_next(itrbl):
    """
    Splits an iterable into two streams
    i is the normal ordered iterable
    n is the next element from i
    """
    i, n = tee(itrbl, 2)
    n = chain(islice(n, 1, None), [None])
    return zip(i, n)

Javascript

function switchTheme(e) {
  if (e.target.checked) {
    currentTheme = 'light';
  }
  else {
    currentTheme = 'dark';
  }
  document.documentElement.setAttribute('data-theme', currentTheme);
  localStorage.setItem('theme', currentTheme);
}

SCSS

@mixin dark-scheme {
  --font-color: #e3e0d7;
  --bg-color: #242424;
  --heading-color: #fff;
  --link-color: #80a0ff;
  --link-color-visited: #d787ff;
}
@media (prefers-color-scheme: dark) {
  :root {
    @include dark-scheme;
  }
}
[data-theme="dark"]:root {
  @include dark-scheme;
}

HTML

<header>
  <nav class="theme-switch-wrapper">
    <h1>Theme Preview</h1>
    <label class="theme-switch" for="checkbox">
      <input type="checkbox" id="checkbox" />
      <div class="round slider"></div>
    </label>
  </nav>
</header>

base16-solarized-dark

Raw CSS Preview | Download CSS | Download SCSS-Mixin

Python

def available_next(itrbl):
    """
    Splits an iterable into two streams
    i is the normal ordered iterable
    n is the next element from i
    """
    i, n = tee(itrbl, 2)
    n = chain(islice(n, 1, None), [None])
    return zip(i, n)

Javascript

function switchTheme(e) {
  if (e.target.checked) {
    currentTheme = 'light';
  }
  else {
    currentTheme = 'dark';
  }
  document.documentElement.setAttribute('data-theme', currentTheme);
  localStorage.setItem('theme', currentTheme);
}

SCSS

@mixin dark-scheme {
  --font-color: #e3e0d7;
  --bg-color: #242424;
  --heading-color: #fff;
  --link-color: #80a0ff;
  --link-color-visited: #d787ff;
}
@media (prefers-color-scheme: dark) {
  :root {
    @include dark-scheme;
  }
}
[data-theme="dark"]:root {
  @include dark-scheme;
}

HTML

<header>
  <nav class="theme-switch-wrapper">
    <h1>Theme Preview</h1>
    <label class="theme-switch" for="checkbox">
      <input type="checkbox" id="checkbox" />
      <div class="round slider"></div>
    </label>
  </nav>
</header>

base16-solarized-light

Raw CSS Preview | Download CSS | Download SCSS-Mixin

Python

def available_next(itrbl):
    """
    Splits an iterable into two streams
    i is the normal ordered iterable
    n is the next element from i
    """
    i, n = tee(itrbl, 2)
    n = chain(islice(n, 1, None), [None])
    return zip(i, n)

Javascript

function switchTheme(e) {
  if (e.target.checked) {
    currentTheme = 'light';
  }
  else {
    currentTheme = 'dark';
  }
  document.documentElement.setAttribute('data-theme', currentTheme);
  localStorage.setItem('theme', currentTheme);
}

SCSS

@mixin dark-scheme {
  --font-color: #e3e0d7;
  --bg-color: #242424;
  --heading-color: #fff;
  --link-color: #80a0ff;
  --link-color-visited: #d787ff;
}
@media (prefers-color-scheme: dark) {
  :root {
    @include dark-scheme;
  }
}
[data-theme="dark"]:root {
  @include dark-scheme;
}

HTML

<header>
  <nav class="theme-switch-wrapper">
    <h1>Theme Preview</h1>
    <label class="theme-switch" for="checkbox">
      <input type="checkbox" id="checkbox" />
      <div class="round slider"></div>
    </label>
  </nav>
</header>

base16-spacemacs

Raw CSS Preview | Download CSS | Download SCSS-Mixin

Python

def available_next(itrbl):
    """
    Splits an iterable into two streams
    i is the normal ordered iterable
    n is the next element from i
    """
    i, n = tee(itrbl, 2)
    n = chain(islice(n, 1, None), [None])
    return zip(i, n)

Javascript

function switchTheme(e) {
  if (e.target.checked) {
    currentTheme = 'light';
  }
  else {
    currentTheme = 'dark';
  }
  document.documentElement.setAttribute('data-theme', currentTheme);
  localStorage.setItem('theme', currentTheme);
}

SCSS

@mixin dark-scheme {
  --font-color: #e3e0d7;
  --bg-color: #242424;
  --heading-color: #fff;
  --link-color: #80a0ff;
  --link-color-visited: #d787ff;
}
@media (prefers-color-scheme: dark) {
  :root {
    @include dark-scheme;
  }
}
[data-theme="dark"]:root {
  @include dark-scheme;
}

HTML

<header>
  <nav class="theme-switch-wrapper">
    <h1>Theme Preview</h1>
    <label class="theme-switch" for="checkbox">
      <input type="checkbox" id="checkbox" />
      <div class="round slider"></div>
    </label>
  </nav>
</header>

base16-summerfruit-dark

Raw CSS Preview | Download CSS | Download SCSS-Mixin

Python

def available_next(itrbl):
    """
    Splits an iterable into two streams
    i is the normal ordered iterable
    n is the next element from i
    """
    i, n = tee(itrbl, 2)
    n = chain(islice(n, 1, None), [None])
    return zip(i, n)

Javascript

function switchTheme(e) {
  if (e.target.checked) {
    currentTheme = 'light';
  }
  else {
    currentTheme = 'dark';
  }
  document.documentElement.setAttribute('data-theme', currentTheme);
  localStorage.setItem('theme', currentTheme);
}

SCSS

@mixin dark-scheme {
  --font-color: #e3e0d7;
  --bg-color: #242424;
  --heading-color: #fff;
  --link-color: #80a0ff;
  --link-color-visited: #d787ff;
}
@media (prefers-color-scheme: dark) {
  :root {
    @include dark-scheme;
  }
}
[data-theme="dark"]:root {
  @include dark-scheme;
}

HTML

<header>
  <nav class="theme-switch-wrapper">
    <h1>Theme Preview</h1>
    <label class="theme-switch" for="checkbox">
      <input type="checkbox" id="checkbox" />
      <div class="round slider"></div>
    </label>
  </nav>
</header>

base16-summerfruit-light

Raw CSS Preview | Download CSS | Download SCSS-Mixin

Python

def available_next(itrbl):
    """
    Splits an iterable into two streams
    i is the normal ordered iterable
    n is the next element from i
    """
    i, n = tee(itrbl, 2)
    n = chain(islice(n, 1, None), [None])
    return zip(i, n)

Javascript

function switchTheme(e) {
  if (e.target.checked) {
    currentTheme = 'light';
  }
  else {
    currentTheme = 'dark';
  }
  document.documentElement.setAttribute('data-theme', currentTheme);
  localStorage.setItem('theme', currentTheme);
}

SCSS

@mixin dark-scheme {
  --font-color: #e3e0d7;
  --bg-color: #242424;
  --heading-color: #fff;
  --link-color: #80a0ff;
  --link-color-visited: #d787ff;
}
@media (prefers-color-scheme: dark) {
  :root {
    @include dark-scheme;
  }
}
[data-theme="dark"]:root {
  @include dark-scheme;
}

HTML

<header>
  <nav class="theme-switch-wrapper">
    <h1>Theme Preview</h1>
    <label class="theme-switch" for="checkbox">
      <input type="checkbox" id="checkbox" />
      <div class="round slider"></div>
    </label>
  </nav>
</header>

base16-tomorrow-night

Raw CSS Preview | Download CSS | Download SCSS-Mixin

Python

def available_next(itrbl):
    """
    Splits an iterable into two streams
    i is the normal ordered iterable
    n is the next element from i
    """
    i, n = tee(itrbl, 2)
    n = chain(islice(n, 1, None), [None])
    return zip(i, n)

Javascript

function switchTheme(e) {
  if (e.target.checked) {
    currentTheme = 'light';
  }
  else {
    currentTheme = 'dark';
  }
  document.documentElement.setAttribute('data-theme', currentTheme);
  localStorage.setItem('theme', currentTheme);
}

SCSS

@mixin dark-scheme {
  --font-color: #e3e0d7;
  --bg-color: #242424;
  --heading-color: #fff;
  --link-color: #80a0ff;
  --link-color-visited: #d787ff;
}
@media (prefers-color-scheme: dark) {
  :root {
    @include dark-scheme;
  }
}
[data-theme="dark"]:root {
  @include dark-scheme;
}

HTML

<header>
  <nav class="theme-switch-wrapper">
    <h1>Theme Preview</h1>
    <label class="theme-switch" for="checkbox">
      <input type="checkbox" id="checkbox" />
      <div class="round slider"></div>
    </label>
  </nav>
</header>

base16-tomorrow

Raw CSS Preview | Download CSS | Download SCSS-Mixin

Python

def available_next(itrbl):
    """
    Splits an iterable into two streams
    i is the normal ordered iterable
    n is the next element from i
    """
    i, n = tee(itrbl, 2)
    n = chain(islice(n, 1, None), [None])
    return zip(i, n)

Javascript

function switchTheme(e) {
  if (e.target.checked) {
    currentTheme = 'light';
  }
  else {
    currentTheme = 'dark';
  }
  document.documentElement.setAttribute('data-theme', currentTheme);
  localStorage.setItem('theme', currentTheme);
}

SCSS

@mixin dark-scheme {
  --font-color: #e3e0d7;
  --bg-color: #242424;
  --heading-color: #fff;
  --link-color: #80a0ff;
  --link-color-visited: #d787ff;
}
@media (prefers-color-scheme: dark) {
  :root {
    @include dark-scheme;
  }
}
[data-theme="dark"]:root {
  @include dark-scheme;
}

HTML

<header>
  <nav class="theme-switch-wrapper">
    <h1>Theme Preview</h1>
    <label class="theme-switch" for="checkbox">
      <input type="checkbox" id="checkbox" />
      <div class="round slider"></div>
    </label>
  </nav>
</header>

base16-tube

Raw CSS Preview | Download CSS | Download SCSS-Mixin

Python

def available_next(itrbl):
    """
    Splits an iterable into two streams
    i is the normal ordered iterable
    n is the next element from i
    """
    i, n = tee(itrbl, 2)
    n = chain(islice(n, 1, None), [None])
    return zip(i, n)

Javascript

function switchTheme(e) {
  if (e.target.checked) {
    currentTheme = 'light';
  }
  else {
    currentTheme = 'dark';
  }
  document.documentElement.setAttribute('data-theme', currentTheme);
  localStorage.setItem('theme', currentTheme);
}

SCSS

@mixin dark-scheme {
  --font-color: #e3e0d7;
  --bg-color: #242424;
  --heading-color: #fff;
  --link-color: #80a0ff;
  --link-color-visited: #d787ff;
}
@media (prefers-color-scheme: dark) {
  :root {
    @include dark-scheme;
  }
}
[data-theme="dark"]:root {
  @include dark-scheme;
}

HTML

<header>
  <nav class="theme-switch-wrapper">
    <h1>Theme Preview</h1>
    <label class="theme-switch" for="checkbox">
      <input type="checkbox" id="checkbox" />
      <div class="round slider"></div>
    </label>
  </nav>
</header>

base16-twilight

Raw CSS Preview | Download CSS | Download SCSS-Mixin

Python

def available_next(itrbl):
    """
    Splits an iterable into two streams
    i is the normal ordered iterable
    n is the next element from i
    """
    i, n = tee(itrbl, 2)
    n = chain(islice(n, 1, None), [None])
    return zip(i, n)

Javascript

function switchTheme(e) {
  if (e.target.checked) {
    currentTheme = 'light';
  }
  else {
    currentTheme = 'dark';
  }
  document.documentElement.setAttribute('data-theme', currentTheme);
  localStorage.setItem('theme', currentTheme);
}

SCSS

@mixin dark-scheme {
  --font-color: #e3e0d7;
  --bg-color: #242424;
  --heading-color: #fff;
  --link-color: #80a0ff;
  --link-color-visited: #d787ff;
}
@media (prefers-color-scheme: dark) {
  :root {
    @include dark-scheme;
  }
}
[data-theme="dark"]:root {
  @include dark-scheme;
}

HTML

<header>
  <nav class="theme-switch-wrapper">
    <h1>Theme Preview</h1>
    <label class="theme-switch" for="checkbox">
      <input type="checkbox" id="checkbox" />
      <div class="round slider"></div>
    </label>
  </nav>
</header>

base16-unikitty-dark

Raw CSS Preview | Download CSS | Download SCSS-Mixin

Python

def available_next(itrbl):
    """
    Splits an iterable into two streams
    i is the normal ordered iterable
    n is the next element from i
    """
    i, n = tee(itrbl, 2)
    n = chain(islice(n, 1, None), [None])
    return zip(i, n)

Javascript

function switchTheme(e) {
  if (e.target.checked) {
    currentTheme = 'light';
  }
  else {
    currentTheme = 'dark';
  }
  document.documentElement.setAttribute('data-theme', currentTheme);
  localStorage.setItem('theme', currentTheme);
}

SCSS

@mixin dark-scheme {
  --font-color: #e3e0d7;
  --bg-color: #242424;
  --heading-color: #fff;
  --link-color: #80a0ff;
  --link-color-visited: #d787ff;
}
@media (prefers-color-scheme: dark) {
  :root {
    @include dark-scheme;
  }
}
[data-theme="dark"]:root {
  @include dark-scheme;
}

HTML

<header>
  <nav class="theme-switch-wrapper">
    <h1>Theme Preview</h1>
    <label class="theme-switch" for="checkbox">
      <input type="checkbox" id="checkbox" />
      <div class="round slider"></div>
    </label>
  </nav>
</header>

base16-unikitty-light

Raw CSS Preview | Download CSS | Download SCSS-Mixin

Python

def available_next(itrbl):
    """
    Splits an iterable into two streams
    i is the normal ordered iterable
    n is the next element from i
    """
    i, n = tee(itrbl, 2)
    n = chain(islice(n, 1, None), [None])
    return zip(i, n)

Javascript

function switchTheme(e) {
  if (e.target.checked) {
    currentTheme = 'light';
  }
  else {
    currentTheme = 'dark';
  }
  document.documentElement.setAttribute('data-theme', currentTheme);
  localStorage.setItem('theme', currentTheme);
}

SCSS

@mixin dark-scheme {
  --font-color: #e3e0d7;
  --bg-color: #242424;
  --heading-color: #fff;
  --link-color: #80a0ff;
  --link-color-visited: #d787ff;
}
@media (prefers-color-scheme: dark) {
  :root {
    @include dark-scheme;
  }
}
[data-theme="dark"]:root {
  @include dark-scheme;
}

HTML

<header>
  <nav class="theme-switch-wrapper">
    <h1>Theme Preview</h1>
    <label class="theme-switch" for="checkbox">
      <input type="checkbox" id="checkbox" />
      <div class="round slider"></div>
    </label>
  </nav>
</header>

base16-woodland

Raw CSS Preview | Download CSS | Download SCSS-Mixin

Python

def available_next(itrbl):
    """
    Splits an iterable into two streams
    i is the normal ordered iterable
    n is the next element from i
    """
    i, n = tee(itrbl, 2)
    n = chain(islice(n, 1, None), [None])
    return zip(i, n)

Javascript

function switchTheme(e) {
  if (e.target.checked) {
    currentTheme = 'light';
  }
  else {
    currentTheme = 'dark';
  }
  document.documentElement.setAttribute('data-theme', currentTheme);
  localStorage.setItem('theme', currentTheme);
}

SCSS

@mixin dark-scheme {
  --font-color: #e3e0d7;
  --bg-color: #242424;
  --heading-color: #fff;
  --link-color: #80a0ff;
  --link-color-visited: #d787ff;
}
@media (prefers-color-scheme: dark) {
  :root {
    @include dark-scheme;
  }
}
[data-theme="dark"]:root {
  @include dark-scheme;
}

HTML

<header>
  <nav class="theme-switch-wrapper">
    <h1>Theme Preview</h1>
    <label class="theme-switch" for="checkbox">
      <input type="checkbox" id="checkbox" />
      <div class="round slider"></div>
    </label>
  </nav>
</header>

base16-xcode-dusk

Raw CSS Preview | Download CSS | Download SCSS-Mixin

Python

def available_next(itrbl):
    """
    Splits an iterable into two streams
    i is the normal ordered iterable
    n is the next element from i
    """
    i, n = tee(itrbl, 2)
    n = chain(islice(n, 1, None), [None])
    return zip(i, n)

Javascript

function switchTheme(e) {
  if (e.target.checked) {
    currentTheme = 'light';
  }
  else {
    currentTheme = 'dark';
  }
  document.documentElement.setAttribute('data-theme', currentTheme);
  localStorage.setItem('theme', currentTheme);
}

SCSS

@mixin dark-scheme {
  --font-color: #e3e0d7;
  --bg-color: #242424;
  --heading-color: #fff;
  --link-color: #80a0ff;
  --link-color-visited: #d787ff;
}
@media (prefers-color-scheme: dark) {
  :root {
    @include dark-scheme;
  }
}
[data-theme="dark"]:root {
  @include dark-scheme;
}

HTML

<header>
  <nav class="theme-switch-wrapper">
    <h1>Theme Preview</h1>
    <label class="theme-switch" for="checkbox">
      <input type="checkbox" id="checkbox" />
      <div class="round slider"></div>
    </label>
  </nav>
</header>

base16-zenburn

Raw CSS Preview | Download CSS | Download SCSS-Mixin

Python

def available_next(itrbl):
    """
    Splits an iterable into two streams
    i is the normal ordered iterable
    n is the next element from i
    """
    i, n = tee(itrbl, 2)
    n = chain(islice(n, 1, None), [None])
    return zip(i, n)

Javascript

function switchTheme(e) {
  if (e.target.checked) {
    currentTheme = 'light';
  }
  else {
    currentTheme = 'dark';
  }
  document.documentElement.setAttribute('data-theme', currentTheme);
  localStorage.setItem('theme', currentTheme);
}

SCSS

@mixin dark-scheme {
  --font-color: #e3e0d7;
  --bg-color: #242424;
  --heading-color: #fff;
  --link-color: #80a0ff;
  --link-color-visited: #d787ff;
}
@media (prefers-color-scheme: dark) {
  :root {
    @include dark-scheme;
  }
}
[data-theme="dark"]:root {
  @include dark-scheme;
}

HTML

<header>
  <nav class="theme-switch-wrapper">
    <h1>Theme Preview</h1>
    <label class="theme-switch" for="checkbox">
      <input type="checkbox" id="checkbox" />
      <div class="round slider"></div>
    </label>
  </nav>
</header>

borland

Raw CSS Preview | Download CSS | Download SCSS-Mixin

Python

def available_next(itrbl):
    """
    Splits an iterable into two streams
    i is the normal ordered iterable
    n is the next element from i
    """
    i, n = tee(itrbl, 2)
    n = chain(islice(n, 1, None), [None])
    return zip(i, n)

Javascript

function switchTheme(e) {
  if (e.target.checked) {
    currentTheme = 'light';
  }
  else {
    currentTheme = 'dark';
  }
  document.documentElement.setAttribute('data-theme', currentTheme);
  localStorage.setItem('theme', currentTheme);
}

SCSS

@mixin dark-scheme {
  --font-color: #e3e0d7;
  --bg-color: #242424;
  --heading-color: #fff;
  --link-color: #80a0ff;
  --link-color-visited: #d787ff;
}
@media (prefers-color-scheme: dark) {
  :root {
    @include dark-scheme;
  }
}
[data-theme="dark"]:root {
  @include dark-scheme;
}

HTML

<header>
  <nav class="theme-switch-wrapper">
    <h1>Theme Preview</h1>
    <label class="theme-switch" for="checkbox">
      <input type="checkbox" id="checkbox" />
      <div class="round slider"></div>
    </label>
  </nav>
</header>

bw

Raw CSS Preview | Download CSS | Download SCSS-Mixin

Python

def available_next(itrbl):
    """
    Splits an iterable into two streams
    i is the normal ordered iterable
    n is the next element from i
    """
    i, n = tee(itrbl, 2)
    n = chain(islice(n, 1, None), [None])
    return zip(i, n)

Javascript

function switchTheme(e) {
  if (e.target.checked) {
    currentTheme = 'light';
  }
  else {
    currentTheme = 'dark';
  }
  document.documentElement.setAttribute('data-theme', currentTheme);
  localStorage.setItem('theme', currentTheme);
}

SCSS

@mixin dark-scheme {
  --font-color: #e3e0d7;
  --bg-color: #242424;
  --heading-color: #fff;
  --link-color: #80a0ff;
  --link-color-visited: #d787ff;
}
@media (prefers-color-scheme: dark) {
  :root {
    @include dark-scheme;
  }
}
[data-theme="dark"]:root {
  @include dark-scheme;
}

HTML

<header>
  <nav class="theme-switch-wrapper">
    <h1>Theme Preview</h1>
    <label class="theme-switch" for="checkbox">
      <input type="checkbox" id="checkbox" />
      <div class="round slider"></div>
    </label>
  </nav>
</header>

cheerfully_dark

Raw CSS Preview | Download CSS | Download SCSS-Mixin

Python

def available_next(itrbl):
    """
    Splits an iterable into two streams
    i is the normal ordered iterable
    n is the next element from i
    """
    i, n = tee(itrbl, 2)
    n = chain(islice(n, 1, None), [None])
    return zip(i, n)

Javascript

function switchTheme(e) {
  if (e.target.checked) {
    currentTheme = 'light';
  }
  else {
    currentTheme = 'dark';
  }
  document.documentElement.setAttribute('data-theme', currentTheme);
  localStorage.setItem('theme', currentTheme);
}

SCSS

@mixin dark-scheme {
  --font-color: #e3e0d7;
  --bg-color: #242424;
  --heading-color: #fff;
  --link-color: #80a0ff;
  --link-color-visited: #d787ff;
}
@media (prefers-color-scheme: dark) {
  :root {
    @include dark-scheme;
  }
}
[data-theme="dark"]:root {
  @include dark-scheme;
}

HTML

<header>
  <nav class="theme-switch-wrapper">
    <h1>Theme Preview</h1>
    <label class="theme-switch" for="checkbox">
      <input type="checkbox" id="checkbox" />
      <div class="round slider"></div>
    </label>
  </nav>
</header>

colorful

Raw CSS Preview | Download CSS | Download SCSS-Mixin

Python

def available_next(itrbl):
    """
    Splits an iterable into two streams
    i is the normal ordered iterable
    n is the next element from i
    """
    i, n = tee(itrbl, 2)
    n = chain(islice(n, 1, None), [None])
    return zip(i, n)

Javascript

function switchTheme(e) {
  if (e.target.checked) {
    currentTheme = 'light';
  }
  else {
    currentTheme = 'dark';
  }
  document.documentElement.setAttribute('data-theme', currentTheme);
  localStorage.setItem('theme', currentTheme);
}

SCSS

@mixin dark-scheme {
  --font-color: #e3e0d7;
  --bg-color: #242424;
  --heading-color: #fff;
  --link-color: #80a0ff;
  --link-color-visited: #d787ff;
}
@media (prefers-color-scheme: dark) {
  :root {
    @include dark-scheme;
  }
}
[data-theme="dark"]:root {
  @include dark-scheme;
}

HTML

<header>
  <nav class="theme-switch-wrapper">
    <h1>Theme Preview</h1>
    <label class="theme-switch" for="checkbox">
      <input type="checkbox" id="checkbox" />
      <div class="round slider"></div>
    </label>
  </nav>
</header>

default

Raw CSS Preview | Download CSS | Download SCSS-Mixin

Python

def available_next(itrbl):
    """
    Splits an iterable into two streams
    i is the normal ordered iterable
    n is the next element from i
    """
    i, n = tee(itrbl, 2)
    n = chain(islice(n, 1, None), [None])
    return zip(i, n)

Javascript

function switchTheme(e) {
  if (e.target.checked) {
    currentTheme = 'light';
  }
  else {
    currentTheme = 'dark';
  }
  document.documentElement.setAttribute('data-theme', currentTheme);
  localStorage.setItem('theme', currentTheme);
}

SCSS

@mixin dark-scheme {
  --font-color: #e3e0d7;
  --bg-color: #242424;
  --heading-color: #fff;
  --link-color: #80a0ff;
  --link-color-visited: #d787ff;
}
@media (prefers-color-scheme: dark) {
  :root {
    @include dark-scheme;
  }
}
[data-theme="dark"]:root {
  @include dark-scheme;
}

HTML

<header>
  <nav class="theme-switch-wrapper">
    <h1>Theme Preview</h1>
    <label class="theme-switch" for="checkbox">
      <input type="checkbox" id="checkbox" />
      <div class="round slider"></div>
    </label>
  </nav>
</header>

dracula

Raw CSS Preview | Download CSS | Download SCSS-Mixin

Python

def available_next(itrbl):
    """
    Splits an iterable into two streams
    i is the normal ordered iterable
    n is the next element from i
    """
    i, n = tee(itrbl, 2)
    n = chain(islice(n, 1, None), [None])
    return zip(i, n)

Javascript

function switchTheme(e) {
  if (e.target.checked) {
    currentTheme = 'light';
  }
  else {
    currentTheme = 'dark';
  }
  document.documentElement.setAttribute('data-theme', currentTheme);
  localStorage.setItem('theme', currentTheme);
}

SCSS

@mixin dark-scheme {
  --font-color: #e3e0d7;
  --bg-color: #242424;
  --heading-color: #fff;
  --link-color: #80a0ff;
  --link-color-visited: #d787ff;
}
@media (prefers-color-scheme: dark) {
  :root {
    @include dark-scheme;
  }
}
[data-theme="dark"]:root {
  @include dark-scheme;
}

HTML

<header>
  <nav class="theme-switch-wrapper">
    <h1>Theme Preview</h1>
    <label class="theme-switch" for="checkbox">
      <input type="checkbox" id="checkbox" />
      <div class="round slider"></div>
    </label>
  </nav>
</header>

emacs

Raw CSS Preview | Download CSS | Download SCSS-Mixin

Python

def available_next(itrbl):
    """
    Splits an iterable into two streams
    i is the normal ordered iterable
    n is the next element from i
    """
    i, n = tee(itrbl, 2)
    n = chain(islice(n, 1, None), [None])
    return zip(i, n)

Javascript

function switchTheme(e) {
  if (e.target.checked) {
    currentTheme = 'light';
  }
  else {
    currentTheme = 'dark';
  }
  document.documentElement.setAttribute('data-theme', currentTheme);
  localStorage.setItem('theme', currentTheme);
}

SCSS

@mixin dark-scheme {
  --font-color: #e3e0d7;
  --bg-color: #242424;
  --heading-color: #fff;
  --link-color: #80a0ff;
  --link-color-visited: #d787ff;
}
@media (prefers-color-scheme: dark) {
  :root {
    @include dark-scheme;
  }
}
[data-theme="dark"]:root {
  @include dark-scheme;
}

HTML

<header>
  <nav class="theme-switch-wrapper">
    <h1>Theme Preview</h1>
    <label class="theme-switch" for="checkbox">
      <input type="checkbox" id="checkbox" />
      <div class="round slider"></div>
    </label>
  </nav>
</header>

exponent

Raw CSS Preview | Download CSS | Download SCSS-Mixin

Python

def available_next(itrbl):
    """
    Splits an iterable into two streams
    i is the normal ordered iterable
    n is the next element from i
    """
    i, n = tee(itrbl, 2)
    n = chain(islice(n, 1, None), [None])
    return zip(i, n)

Javascript

function switchTheme(e) {
  if (e.target.checked) {
    currentTheme = 'light';
  }
  else {
    currentTheme = 'dark';
  }
  document.documentElement.setAttribute('data-theme', currentTheme);
  localStorage.setItem('theme', currentTheme);
}

SCSS

@mixin dark-scheme {
  --font-color: #e3e0d7;
  --bg-color: #242424;
  --heading-color: #fff;
  --link-color: #80a0ff;
  --link-color-visited: #d787ff;
}
@media (prefers-color-scheme: dark) {
  :root {
    @include dark-scheme;
  }
}
[data-theme="dark"]:root {
  @include dark-scheme;
}

HTML

<header>
  <nav class="theme-switch-wrapper">
    <h1>Theme Preview</h1>
    <label class="theme-switch" for="checkbox">
      <input type="checkbox" id="checkbox" />
      <div class="round slider"></div>
    </label>
  </nav>
</header>

friendly

Raw CSS Preview | Download CSS | Download SCSS-Mixin

Python

def available_next(itrbl):
    """
    Splits an iterable into two streams
    i is the normal ordered iterable
    n is the next element from i
    """
    i, n = tee(itrbl, 2)
    n = chain(islice(n, 1, None), [None])
    return zip(i, n)

Javascript

function switchTheme(e) {
  if (e.target.checked) {
    currentTheme = 'light';
  }
  else {
    currentTheme = 'dark';
  }
  document.documentElement.setAttribute('data-theme', currentTheme);
  localStorage.setItem('theme', currentTheme);
}

SCSS

@mixin dark-scheme {
  --font-color: #e3e0d7;
  --bg-color: #242424;
  --heading-color: #fff;
  --link-color: #80a0ff;
  --link-color-visited: #d787ff;
}
@media (prefers-color-scheme: dark) {
  :root {
    @include dark-scheme;
  }
}
[data-theme="dark"]:root {
  @include dark-scheme;
}

HTML

<header>
  <nav class="theme-switch-wrapper">
    <h1>Theme Preview</h1>
    <label class="theme-switch" for="checkbox">
      <input type="checkbox" id="checkbox" />
      <div class="round slider"></div>
    </label>
  </nav>
</header>

friendly_dark

Raw CSS Preview | Download CSS | Download SCSS-Mixin

Python

def available_next(itrbl):
    """
    Splits an iterable into two streams
    i is the normal ordered iterable
    n is the next element from i
    """
    i, n = tee(itrbl, 2)
    n = chain(islice(n, 1, None), [None])
    return zip(i, n)

Javascript

function switchTheme(e) {
  if (e.target.checked) {
    currentTheme = 'light';
  }
  else {
    currentTheme = 'dark';
  }
  document.documentElement.setAttribute('data-theme', currentTheme);
  localStorage.setItem('theme', currentTheme);
}

SCSS

@mixin dark-scheme {
  --font-color: #e3e0d7;
  --bg-color: #242424;
  --heading-color: #fff;
  --link-color: #80a0ff;
  --link-color-visited: #d787ff;
}
@media (prefers-color-scheme: dark) {
  :root {
    @include dark-scheme;
  }
}
[data-theme="dark"]:root {
  @include dark-scheme;
}

HTML

<header>
  <nav class="theme-switch-wrapper">
    <h1>Theme Preview</h1>
    <label class="theme-switch" for="checkbox">
      <input type="checkbox" id="checkbox" />
      <div class="round slider"></div>
    </label>
  </nav>
</header>

friendly_grayscale

Raw CSS Preview | Download CSS | Download SCSS-Mixin

Python

def available_next(itrbl):
    """
    Splits an iterable into two streams
    i is the normal ordered iterable
    n is the next element from i
    """
    i, n = tee(itrbl, 2)
    n = chain(islice(n, 1, None), [None])
    return zip(i, n)

Javascript

function switchTheme(e) {
  if (e.target.checked) {
    currentTheme = 'light';
  }
  else {
    currentTheme = 'dark';
  }
  document.documentElement.setAttribute('data-theme', currentTheme);
  localStorage.setItem('theme', currentTheme);
}

SCSS

@mixin dark-scheme {
  --font-color: #e3e0d7;
  --bg-color: #242424;
  --heading-color: #fff;
  --link-color: #80a0ff;
  --link-color-visited: #d787ff;
}
@media (prefers-color-scheme: dark) {
  :root {
    @include dark-scheme;
  }
}
[data-theme="dark"]:root {
  @include dark-scheme;
}

HTML

<header>
  <nav class="theme-switch-wrapper">
    <h1>Theme Preview</h1>
    <label class="theme-switch" for="checkbox">
      <input type="checkbox" id="checkbox" />
      <div class="round slider"></div>
    </label>
  </nav>
</header>

friendly_light

Raw CSS Preview | Download CSS | Download SCSS-Mixin

Python

def available_next(itrbl):
    """
    Splits an iterable into two streams
    i is the normal ordered iterable
    n is the next element from i
    """
    i, n = tee(itrbl, 2)
    n = chain(islice(n, 1, None), [None])
    return zip(i, n)

Javascript

function switchTheme(e) {
  if (e.target.checked) {
    currentTheme = 'light';
  }
  else {
    currentTheme = 'dark';
  }
  document.documentElement.setAttribute('data-theme', currentTheme);
  localStorage.setItem('theme', currentTheme);
}

SCSS

@mixin dark-scheme {
  --font-color: #e3e0d7;
  --bg-color: #242424;
  --heading-color: #fff;
  --link-color: #80a0ff;
  --link-color-visited: #d787ff;
}
@media (prefers-color-scheme: dark) {
  :root {
    @include dark-scheme;
  }
}
[data-theme="dark"]:root {
  @include dark-scheme;
}

HTML

<header>
  <nav class="theme-switch-wrapper">
    <h1>Theme Preview</h1>
    <label class="theme-switch" for="checkbox">
      <input type="checkbox" id="checkbox" />
      <div class="round slider"></div>
    </label>
  </nav>
</header>

fruity

Raw CSS Preview | Download CSS | Download SCSS-Mixin

Python

def available_next(itrbl):
    """
    Splits an iterable into two streams
    i is the normal ordered iterable
    n is the next element from i
    """
    i, n = tee(itrbl, 2)
    n = chain(islice(n, 1, None), [None])
    return zip(i, n)

Javascript

function switchTheme(e) {
  if (e.target.checked) {
    currentTheme = 'light';
  }
  else {
    currentTheme = 'dark';
  }
  document.documentElement.setAttribute('data-theme', currentTheme);
  localStorage.setItem('theme', currentTheme);
}

SCSS

@mixin dark-scheme {
  --font-color: #e3e0d7;
  --bg-color: #242424;
  --heading-color: #fff;
  --link-color: #80a0ff;
  --link-color-visited: #d787ff;
}
@media (prefers-color-scheme: dark) {
  :root {
    @include dark-scheme;
  }
}
[data-theme="dark"]:root {
  @include dark-scheme;
}

HTML

<header>
  <nav class="theme-switch-wrapper">
    <h1>Theme Preview</h1>
    <label class="theme-switch" for="checkbox">
      <input type="checkbox" id="checkbox" />
      <div class="round slider"></div>
    </label>
  </nav>
</header>

github-dark

Raw CSS Preview | Download CSS | Download SCSS-Mixin

Python

def available_next(itrbl):
    """
    Splits an iterable into two streams
    i is the normal ordered iterable
    n is the next element from i
    """
    i, n = tee(itrbl, 2)
    n = chain(islice(n, 1, None), [None])
    return zip(i, n)

Javascript

function switchTheme(e) {
  if (e.target.checked) {
    currentTheme = 'light';
  }
  else {
    currentTheme = 'dark';
  }
  document.documentElement.setAttribute('data-theme', currentTheme);
  localStorage.setItem('theme', currentTheme);
}

SCSS

@mixin dark-scheme {
  --font-color: #e3e0d7;
  --bg-color: #242424;
  --heading-color: #fff;
  --link-color: #80a0ff;
  --link-color-visited: #d787ff;
}
@media (prefers-color-scheme: dark) {
  :root {
    @include dark-scheme;
  }
}
[data-theme="dark"]:root {
  @include dark-scheme;
}

HTML

<header>
  <nav class="theme-switch-wrapper">
    <h1>Theme Preview</h1>
    <label class="theme-switch" for="checkbox">
      <input type="checkbox" id="checkbox" />
      <div class="round slider"></div>
    </label>
  </nav>
</header>

gruvbox-dark

Raw CSS Preview | Download CSS | Download SCSS-Mixin

Python

def available_next(itrbl):
    """
    Splits an iterable into two streams
    i is the normal ordered iterable
    n is the next element from i
    """
    i, n = tee(itrbl, 2)
    n = chain(islice(n, 1, None), [None])
    return zip(i, n)

Javascript

function switchTheme(e) {
  if (e.target.checked) {
    currentTheme = 'light';
  }
  else {
    currentTheme = 'dark';
  }
  document.documentElement.setAttribute('data-theme', currentTheme);
  localStorage.setItem('theme', currentTheme);
}

SCSS

@mixin dark-scheme {
  --font-color: #e3e0d7;
  --bg-color: #242424;
  --heading-color: #fff;
  --link-color: #80a0ff;
  --link-color-visited: #d787ff;
}
@media (prefers-color-scheme: dark) {
  :root {
    @include dark-scheme;
  }
}
[data-theme="dark"]:root {
  @include dark-scheme;
}

HTML

<header>
  <nav class="theme-switch-wrapper">
    <h1>Theme Preview</h1>
    <label class="theme-switch" for="checkbox">
      <input type="checkbox" id="checkbox" />
      <div class="round slider"></div>
    </label>
  </nav>
</header>

gruvbox-light

Raw CSS Preview | Download CSS | Download SCSS-Mixin

Python

def available_next(itrbl):
    """
    Splits an iterable into two streams
    i is the normal ordered iterable
    n is the next element from i
    """
    i, n = tee(itrbl, 2)
    n = chain(islice(n, 1, None), [None])
    return zip(i, n)

Javascript

function switchTheme(e) {
  if (e.target.checked) {
    currentTheme = 'light';
  }
  else {
    currentTheme = 'dark';
  }
  document.documentElement.setAttribute('data-theme', currentTheme);
  localStorage.setItem('theme', currentTheme);
}

SCSS

@mixin dark-scheme {
  --font-color: #e3e0d7;
  --bg-color: #242424;
  --heading-color: #fff;
  --link-color: #80a0ff;
  --link-color-visited: #d787ff;
}
@media (prefers-color-scheme: dark) {
  :root {
    @include dark-scheme;
  }
}
[data-theme="dark"]:root {
  @include dark-scheme;
}

HTML

<header>
  <nav class="theme-switch-wrapper">
    <h1>Theme Preview</h1>
    <label class="theme-switch" for="checkbox">
      <input type="checkbox" id="checkbox" />
      <div class="round slider"></div>
    </label>
  </nav>
</header>

heringer

Raw CSS Preview | Download CSS | Download SCSS-Mixin

Python

def available_next(itrbl):
    """
    Splits an iterable into two streams
    i is the normal ordered iterable
    n is the next element from i
    """
    i, n = tee(itrbl, 2)
    n = chain(islice(n, 1, None), [None])
    return zip(i, n)

Javascript

function switchTheme(e) {
  if (e.target.checked) {
    currentTheme = 'light';
  }
  else {
    currentTheme = 'dark';
  }
  document.documentElement.setAttribute('data-theme', currentTheme);
  localStorage.setItem('theme', currentTheme);
}

SCSS

@mixin dark-scheme {
  --font-color: #e3e0d7;
  --bg-color: #242424;
  --heading-color: #fff;
  --link-color: #80a0ff;
  --link-color-visited: #d787ff;
}
@media (prefers-color-scheme: dark) {
  :root {
    @include dark-scheme;
  }
}
[data-theme="dark"]:root {
  @include dark-scheme;
}

HTML

<header>
  <nav class="theme-switch-wrapper">
    <h1>Theme Preview</h1>
    <label class="theme-switch" for="checkbox">
      <input type="checkbox" id="checkbox" />
      <div class="round slider"></div>
    </label>
  </nav>
</header>

igor

Raw CSS Preview | Download CSS | Download SCSS-Mixin

Python

def available_next(itrbl):
    """
    Splits an iterable into two streams
    i is the normal ordered iterable
    n is the next element from i
    """
    i, n = tee(itrbl, 2)
    n = chain(islice(n, 1, None), [None])
    return zip(i, n)

Javascript

function switchTheme(e) {
  if (e.target.checked) {
    currentTheme = 'light';
  }
  else {
    currentTheme = 'dark';
  }
  document.documentElement.setAttribute('data-theme', currentTheme);
  localStorage.setItem('theme', currentTheme);
}

SCSS

@mixin dark-scheme {
  --font-color: #e3e0d7;
  --bg-color: #242424;
  --heading-color: #fff;
  --link-color: #80a0ff;
  --link-color-visited: #d787ff;
}
@media (prefers-color-scheme: dark) {
  :root {
    @include dark-scheme;
  }
}
[data-theme="dark"]:root {
  @include dark-scheme;
}

HTML

<header>
  <nav class="theme-switch-wrapper">
    <h1>Theme Preview</h1>
    <label class="theme-switch" for="checkbox">
      <input type="checkbox" id="checkbox" />
      <div class="round slider"></div>
    </label>
  </nav>
</header>

inkpot

Raw CSS Preview | Download CSS | Download SCSS-Mixin

Python

def available_next(itrbl):
    """
    Splits an iterable into two streams
    i is the normal ordered iterable
    n is the next element from i
    """
    i, n = tee(itrbl, 2)
    n = chain(islice(n, 1, None), [None])
    return zip(i, n)

Javascript

function switchTheme(e) {
  if (e.target.checked) {
    currentTheme = 'light';
  }
  else {
    currentTheme = 'dark';
  }
  document.documentElement.setAttribute('data-theme', currentTheme);
  localStorage.setItem('theme', currentTheme);
}

SCSS

@mixin dark-scheme {
  --font-color: #e3e0d7;
  --bg-color: #242424;
  --heading-color: #fff;
  --link-color: #80a0ff;
  --link-color-visited: #d787ff;
}
@media (prefers-color-scheme: dark) {
  :root {
    @include dark-scheme;
  }
}
[data-theme="dark"]:root {
  @include dark-scheme;
}

HTML

<header>
  <nav class="theme-switch-wrapper">
    <h1>Theme Preview</h1>
    <label class="theme-switch" for="checkbox">
      <input type="checkbox" id="checkbox" />
      <div class="round slider"></div>
    </label>
  </nav>
</header>

lilypond

Raw CSS Preview | Download CSS | Download SCSS-Mixin

Python

def available_next(itrbl):
    """
    Splits an iterable into two streams
    i is the normal ordered iterable
    n is the next element from i
    """
    i, n = tee(itrbl, 2)
    n = chain(islice(n, 1, None), [None])
    return zip(i, n)

Javascript

function switchTheme(e) {
  if (e.target.checked) {
    currentTheme = 'light';
  }
  else {
    currentTheme = 'dark';
  }
  document.documentElement.setAttribute('data-theme', currentTheme);
  localStorage.setItem('theme', currentTheme);
}

SCSS

@mixin dark-scheme {
  --font-color: #e3e0d7;
  --bg-color: #242424;
  --heading-color: #fff;
  --link-color: #80a0ff;
  --link-color-visited: #d787ff;
}
@media (prefers-color-scheme: dark) {
  :root {
    @include dark-scheme;
  }
}
[data-theme="dark"]:root {
  @include dark-scheme;
}

HTML

<header>
  <nav class="theme-switch-wrapper">
    <h1>Theme Preview</h1>
    <label class="theme-switch" for="checkbox">
      <input type="checkbox" id="checkbox" />
      <div class="round slider"></div>
    </label>
  </nav>
</header>

lovelace

Raw CSS Preview | Download CSS | Download SCSS-Mixin

Python

def available_next(itrbl):
    """
    Splits an iterable into two streams
    i is the normal ordered iterable
    n is the next element from i
    """
    i, n = tee(itrbl, 2)
    n = chain(islice(n, 1, None), [None])
    return zip(i, n)

Javascript

function switchTheme(e) {
  if (e.target.checked) {
    currentTheme = 'light';
  }
  else {
    currentTheme = 'dark';
  }
  document.documentElement.setAttribute('data-theme', currentTheme);
  localStorage.setItem('theme', currentTheme);
}

SCSS

@mixin dark-scheme {
  --font-color: #e3e0d7;
  --bg-color: #242424;
  --heading-color: #fff;
  --link-color: #80a0ff;
  --link-color-visited: #d787ff;
}
@media (prefers-color-scheme: dark) {
  :root {
    @include dark-scheme;
  }
}
[data-theme="dark"]:root {
  @include dark-scheme;
}

HTML

<header>
  <nav class="theme-switch-wrapper">
    <h1>Theme Preview</h1>
    <label class="theme-switch" for="checkbox">
      <input type="checkbox" id="checkbox" />
      <div class="round slider"></div>
    </label>
  </nav>
</header>

manni

Raw CSS Preview | Download CSS | Download SCSS-Mixin

Python

def available_next(itrbl):
    """
    Splits an iterable into two streams
    i is the normal ordered iterable
    n is the next element from i
    """
    i, n = tee(itrbl, 2)
    n = chain(islice(n, 1, None), [None])
    return zip(i, n)

Javascript

function switchTheme(e) {
  if (e.target.checked) {
    currentTheme = 'light';
  }
  else {
    currentTheme = 'dark';
  }
  document.documentElement.setAttribute('data-theme', currentTheme);
  localStorage.setItem('theme', currentTheme);
}

SCSS

@mixin dark-scheme {
  --font-color: #e3e0d7;
  --bg-color: #242424;
  --heading-color: #fff;
  --link-color: #80a0ff;
  --link-color-visited: #d787ff;
}
@media (prefers-color-scheme: dark) {
  :root {
    @include dark-scheme;
  }
}
[data-theme="dark"]:root {
  @include dark-scheme;
}

HTML

<header>
  <nav class="theme-switch-wrapper">
    <h1>Theme Preview</h1>
    <label class="theme-switch" for="checkbox">
      <input type="checkbox" id="checkbox" />
      <div class="round slider"></div>
    </label>
  </nav>
</header>

material

Raw CSS Preview | Download CSS | Download SCSS-Mixin

Python

def available_next(itrbl):
    """
    Splits an iterable into two streams
    i is the normal ordered iterable
    n is the next element from i
    """
    i, n = tee(itrbl, 2)
    n = chain(islice(n, 1, None), [None])
    return zip(i, n)

Javascript

function switchTheme(e) {
  if (e.target.checked) {
    currentTheme = 'light';
  }
  else {
    currentTheme = 'dark';
  }
  document.documentElement.setAttribute('data-theme', currentTheme);
  localStorage.setItem('theme', currentTheme);
}

SCSS

@mixin dark-scheme {
  --font-color: #e3e0d7;
  --bg-color: #242424;
  --heading-color: #fff;
  --link-color: #80a0ff;
  --link-color-visited: #d787ff;
}
@media (prefers-color-scheme: dark) {
  :root {
    @include dark-scheme;
  }
}
[data-theme="dark"]:root {
  @include dark-scheme;
}

HTML

<header>
  <nav class="theme-switch-wrapper">
    <h1>Theme Preview</h1>
    <label class="theme-switch" for="checkbox">
      <input type="checkbox" id="checkbox" />
      <div class="round slider"></div>
    </label>
  </nav>
</header>

monokai

Raw CSS Preview | Download CSS | Download SCSS-Mixin

Python

def available_next(itrbl):
    """
    Splits an iterable into two streams
    i is the normal ordered iterable
    n is the next element from i
    """
    i, n = tee(itrbl, 2)
    n = chain(islice(n, 1, None), [None])
    return zip(i, n)

Javascript

function switchTheme(e) {
  if (e.target.checked) {
    currentTheme = 'light';
  }
  else {
    currentTheme = 'dark';
  }
  document.documentElement.setAttribute('data-theme', currentTheme);
  localStorage.setItem('theme', currentTheme);
}

SCSS

@mixin dark-scheme {
  --font-color: #e3e0d7;
  --bg-color: #242424;
  --heading-color: #fff;
  --link-color: #80a0ff;
  --link-color-visited: #d787ff;
}
@media (prefers-color-scheme: dark) {
  :root {
    @include dark-scheme;
  }
}
[data-theme="dark"]:root {
  @include dark-scheme;
}

HTML

<header>
  <nav class="theme-switch-wrapper">
    <h1>Theme Preview</h1>
    <label class="theme-switch" for="checkbox">
      <input type="checkbox" id="checkbox" />
      <div class="round slider"></div>
    </label>
  </nav>
</header>

monokailight

Raw CSS Preview | Download CSS | Download SCSS-Mixin

Python

def available_next(itrbl):
    """
    Splits an iterable into two streams
    i is the normal ordered iterable
    n is the next element from i
    """
    i, n = tee(itrbl, 2)
    n = chain(islice(n, 1, None), [None])
    return zip(i, n)

Javascript

function switchTheme(e) {
  if (e.target.checked) {
    currentTheme = 'light';
  }
  else {
    currentTheme = 'dark';
  }
  document.documentElement.setAttribute('data-theme', currentTheme);
  localStorage.setItem('theme', currentTheme);
}

SCSS

@mixin dark-scheme {
  --font-color: #e3e0d7;
  --bg-color: #242424;
  --heading-color: #fff;
  --link-color: #80a0ff;
  --link-color-visited: #d787ff;
}
@media (prefers-color-scheme: dark) {
  :root {
    @include dark-scheme;
  }
}
[data-theme="dark"]:root {
  @include dark-scheme;
}

HTML

<header>
  <nav class="theme-switch-wrapper">
    <h1>Theme Preview</h1>
    <label class="theme-switch" for="checkbox">
      <input type="checkbox" id="checkbox" />
      <div class="round slider"></div>
    </label>
  </nav>
</header>

murphy

Raw CSS Preview | Download CSS | Download SCSS-Mixin

Python

def available_next(itrbl):
    """
    Splits an iterable into two streams
    i is the normal ordered iterable
    n is the next element from i
    """
    i, n = tee(itrbl, 2)
    n = chain(islice(n, 1, None), [None])
    return zip(i, n)

Javascript

function switchTheme(e) {
  if (e.target.checked) {
    currentTheme = 'light';
  }
  else {
    currentTheme = 'dark';
  }
  document.documentElement.setAttribute('data-theme', currentTheme);
  localStorage.setItem('theme', currentTheme);
}

SCSS

@mixin dark-scheme {
  --font-color: #e3e0d7;
  --bg-color: #242424;
  --heading-color: #fff;
  --link-color: #80a0ff;
  --link-color-visited: #d787ff;
}
@media (prefers-color-scheme: dark) {
  :root {
    @include dark-scheme;
  }
}
[data-theme="dark"]:root {
  @include dark-scheme;
}

HTML

<header>
  <nav class="theme-switch-wrapper">
    <h1>Theme Preview</h1>
    <label class="theme-switch" for="checkbox">
      <input type="checkbox" id="checkbox" />
      <div class="round slider"></div>
    </label>
  </nav>
</header>

native

Raw CSS Preview | Download CSS | Download SCSS-Mixin

Python

def available_next(itrbl):
    """
    Splits an iterable into two streams
    i is the normal ordered iterable
    n is the next element from i
    """
    i, n = tee(itrbl, 2)
    n = chain(islice(n, 1, None), [None])
    return zip(i, n)

Javascript

function switchTheme(e) {
  if (e.target.checked) {
    currentTheme = 'light';
  }
  else {
    currentTheme = 'dark';
  }
  document.documentElement.setAttribute('data-theme', currentTheme);
  localStorage.setItem('theme', currentTheme);
}

SCSS

@mixin dark-scheme {
  --font-color: #e3e0d7;
  --bg-color: #242424;
  --heading-color: #fff;
  --link-color: #80a0ff;
  --link-color-visited: #d787ff;
}
@media (prefers-color-scheme: dark) {
  :root {
    @include dark-scheme;
  }
}
[data-theme="dark"]:root {
  @include dark-scheme;
}

HTML

<header>
  <nav class="theme-switch-wrapper">
    <h1>Theme Preview</h1>
    <label class="theme-switch" for="checkbox">
      <input type="checkbox" id="checkbox" />
      <div class="round slider"></div>
    </label>
  </nav>
</header>

nord-darker

Raw CSS Preview | Download CSS | Download SCSS-Mixin

Python

def available_next(itrbl):
    """
    Splits an iterable into two streams
    i is the normal ordered iterable
    n is the next element from i
    """
    i, n = tee(itrbl, 2)
    n = chain(islice(n, 1, None), [None])
    return zip(i, n)

Javascript

function switchTheme(e) {
  if (e.target.checked) {
    currentTheme = 'light';
  }
  else {
    currentTheme = 'dark';
  }
  document.documentElement.setAttribute('data-theme', currentTheme);
  localStorage.setItem('theme', currentTheme);
}

SCSS

@mixin dark-scheme {
  --font-color: #e3e0d7;
  --bg-color: #242424;
  --heading-color: #fff;
  --link-color: #80a0ff;
  --link-color-visited: #d787ff;
}
@media (prefers-color-scheme: dark) {
  :root {
    @include dark-scheme;
  }
}
[data-theme="dark"]:root {
  @include dark-scheme;
}

HTML

<header>
  <nav class="theme-switch-wrapper">
    <h1>Theme Preview</h1>
    <label class="theme-switch" for="checkbox">
      <input type="checkbox" id="checkbox" />
      <div class="round slider"></div>
    </label>
  </nav>
</header>

nord

Raw CSS Preview | Download CSS | Download SCSS-Mixin

Python

def available_next(itrbl):
    """
    Splits an iterable into two streams
    i is the normal ordered iterable
    n is the next element from i
    """
    i, n = tee(itrbl, 2)
    n = chain(islice(n, 1, None), [None])
    return zip(i, n)

Javascript

function switchTheme(e) {
  if (e.target.checked) {
    currentTheme = 'light';
  }
  else {
    currentTheme = 'dark';
  }
  document.documentElement.setAttribute('data-theme', currentTheme);
  localStorage.setItem('theme', currentTheme);
}

SCSS

@mixin dark-scheme {
  --font-color: #e3e0d7;
  --bg-color: #242424;
  --heading-color: #fff;
  --link-color: #80a0ff;
  --link-color-visited: #d787ff;
}
@media (prefers-color-scheme: dark) {
  :root {
    @include dark-scheme;
  }
}
[data-theme="dark"]:root {
  @include dark-scheme;
}

HTML

<header>
  <nav class="theme-switch-wrapper">
    <h1>Theme Preview</h1>
    <label class="theme-switch" for="checkbox">
      <input type="checkbox" id="checkbox" />
      <div class="round slider"></div>
    </label>
  </nav>
</header>

one-dark

Raw CSS Preview | Download CSS | Download SCSS-Mixin

Python

def available_next(itrbl):
    """
    Splits an iterable into two streams
    i is the normal ordered iterable
    n is the next element from i
    """
    i, n = tee(itrbl, 2)
    n = chain(islice(n, 1, None), [None])
    return zip(i, n)

Javascript

function switchTheme(e) {
  if (e.target.checked) {
    currentTheme = 'light';
  }
  else {
    currentTheme = 'dark';
  }
  document.documentElement.setAttribute('data-theme', currentTheme);
  localStorage.setItem('theme', currentTheme);
}

SCSS

@mixin dark-scheme {
  --font-color: #e3e0d7;
  --bg-color: #242424;
  --heading-color: #fff;
  --link-color: #80a0ff;
  --link-color-visited: #d787ff;
}
@media (prefers-color-scheme: dark) {
  :root {
    @include dark-scheme;
  }
}
[data-theme="dark"]:root {
  @include dark-scheme;
}

HTML

<header>
  <nav class="theme-switch-wrapper">
    <h1>Theme Preview</h1>
    <label class="theme-switch" for="checkbox">
      <input type="checkbox" id="checkbox" />
      <div class="round slider"></div>
    </label>
  </nav>
</header>

onehalf-dark

Raw CSS Preview | Download CSS | Download SCSS-Mixin

Python

def available_next(itrbl):
    """
    Splits an iterable into two streams
    i is the normal ordered iterable
    n is the next element from i
    """
    i, n = tee(itrbl, 2)
    n = chain(islice(n, 1, None), [None])
    return zip(i, n)

Javascript

function switchTheme(e) {
  if (e.target.checked) {
    currentTheme = 'light';
  }
  else {
    currentTheme = 'dark';
  }
  document.documentElement.setAttribute('data-theme', currentTheme);
  localStorage.setItem('theme', currentTheme);
}

SCSS

@mixin dark-scheme {
  --font-color: #e3e0d7;
  --bg-color: #242424;
  --heading-color: #fff;
  --link-color: #80a0ff;
  --link-color-visited: #d787ff;
}
@media (prefers-color-scheme: dark) {
  :root {
    @include dark-scheme;
  }
}
[data-theme="dark"]:root {
  @include dark-scheme;
}

HTML

<header>
  <nav class="theme-switch-wrapper">
    <h1>Theme Preview</h1>
    <label class="theme-switch" for="checkbox">
      <input type="checkbox" id="checkbox" />
      <div class="round slider"></div>
    </label>
  </nav>
</header>

onehalf-light

Raw CSS Preview | Download CSS | Download SCSS-Mixin

Python

def available_next(itrbl):
    """
    Splits an iterable into two streams
    i is the normal ordered iterable
    n is the next element from i
    """
    i, n = tee(itrbl, 2)
    n = chain(islice(n, 1, None), [None])
    return zip(i, n)

Javascript

function switchTheme(e) {
  if (e.target.checked) {
    currentTheme = 'light';
  }
  else {
    currentTheme = 'dark';
  }
  document.documentElement.setAttribute('data-theme', currentTheme);
  localStorage.setItem('theme', currentTheme);
}

SCSS

@mixin dark-scheme {
  --font-color: #e3e0d7;
  --bg-color: #242424;
  --heading-color: #fff;
  --link-color: #80a0ff;
  --link-color-visited: #d787ff;
}
@media (prefers-color-scheme: dark) {
  :root {
    @include dark-scheme;
  }
}
[data-theme="dark"]:root {
  @include dark-scheme;
}

HTML

<header>
  <nav class="theme-switch-wrapper">
    <h1>Theme Preview</h1>
    <label class="theme-switch" for="checkbox">
      <input type="checkbox" id="checkbox" />
      <div class="round slider"></div>
    </label>
  </nav>
</header>

paraiso-dark

Raw CSS Preview | Download CSS | Download SCSS-Mixin

Python

def available_next(itrbl):
    """
    Splits an iterable into two streams
    i is the normal ordered iterable
    n is the next element from i
    """
    i, n = tee(itrbl, 2)
    n = chain(islice(n, 1, None), [None])
    return zip(i, n)

Javascript

function switchTheme(e) {
  if (e.target.checked) {
    currentTheme = 'light';
  }
  else {
    currentTheme = 'dark';
  }
  document.documentElement.setAttribute('data-theme', currentTheme);
  localStorage.setItem('theme', currentTheme);
}

SCSS

@mixin dark-scheme {
  --font-color: #e3e0d7;
  --bg-color: #242424;
  --heading-color: #fff;
  --link-color: #80a0ff;
  --link-color-visited: #d787ff;
}
@media (prefers-color-scheme: dark) {
  :root {
    @include dark-scheme;
  }
}
[data-theme="dark"]:root {
  @include dark-scheme;
}

HTML

<header>
  <nav class="theme-switch-wrapper">
    <h1>Theme Preview</h1>
    <label class="theme-switch" for="checkbox">
      <input type="checkbox" id="checkbox" />
      <div class="round slider"></div>
    </label>
  </nav>
</header>

paraiso-light

Raw CSS Preview | Download CSS | Download SCSS-Mixin

Python

def available_next(itrbl):
    """
    Splits an iterable into two streams
    i is the normal ordered iterable
    n is the next element from i
    """
    i, n = tee(itrbl, 2)
    n = chain(islice(n, 1, None), [None])
    return zip(i, n)

Javascript

function switchTheme(e) {
  if (e.target.checked) {
    currentTheme = 'light';
  }
  else {
    currentTheme = 'dark';
  }
  document.documentElement.setAttribute('data-theme', currentTheme);
  localStorage.setItem('theme', currentTheme);
}

SCSS

@mixin dark-scheme {
  --font-color: #e3e0d7;
  --bg-color: #242424;
  --heading-color: #fff;
  --link-color: #80a0ff;
  --link-color-visited: #d787ff;
}
@media (prefers-color-scheme: dark) {
  :root {
    @include dark-scheme;
  }
}
[data-theme="dark"]:root {
  @include dark-scheme;
}

HTML

<header>
  <nav class="theme-switch-wrapper">
    <h1>Theme Preview</h1>
    <label class="theme-switch" for="checkbox">
      <input type="checkbox" id="checkbox" />
      <div class="round slider"></div>
    </label>
  </nav>
</header>

pastie

Raw CSS Preview | Download CSS | Download SCSS-Mixin

Python

def available_next(itrbl):
    """
    Splits an iterable into two streams
    i is the normal ordered iterable
    n is the next element from i
    """
    i, n = tee(itrbl, 2)
    n = chain(islice(n, 1, None), [None])
    return zip(i, n)

Javascript

function switchTheme(e) {
  if (e.target.checked) {
    currentTheme = 'light';
  }
  else {
    currentTheme = 'dark';
  }
  document.documentElement.setAttribute('data-theme', currentTheme);
  localStorage.setItem('theme', currentTheme);
}

SCSS

@mixin dark-scheme {
  --font-color: #e3e0d7;
  --bg-color: #242424;
  --heading-color: #fff;
  --link-color: #80a0ff;
  --link-color-visited: #d787ff;
}
@media (prefers-color-scheme: dark) {
  :root {
    @include dark-scheme;
  }
}
[data-theme="dark"]:root {
  @include dark-scheme;
}

HTML

<header>
  <nav class="theme-switch-wrapper">
    <h1>Theme Preview</h1>
    <label class="theme-switch" for="checkbox">
      <input type="checkbox" id="checkbox" />
      <div class="round slider"></div>
    </label>
  </nav>
</header>

perldoc

Raw CSS Preview | Download CSS | Download SCSS-Mixin

Python

def available_next(itrbl):
    """
    Splits an iterable into two streams
    i is the normal ordered iterable
    n is the next element from i
    """
    i, n = tee(itrbl, 2)
    n = chain(islice(n, 1, None), [None])
    return zip(i, n)

Javascript

function switchTheme(e) {
  if (e.target.checked) {
    currentTheme = 'light';
  }
  else {
    currentTheme = 'dark';
  }
  document.documentElement.setAttribute('data-theme', currentTheme);
  localStorage.setItem('theme', currentTheme);
}

SCSS

@mixin dark-scheme {
  --font-color: #e3e0d7;
  --bg-color: #242424;
  --heading-color: #fff;
  --link-color: #80a0ff;
  --link-color-visited: #d787ff;
}
@media (prefers-color-scheme: dark) {
  :root {
    @include dark-scheme;
  }
}
[data-theme="dark"]:root {
  @include dark-scheme;
}

HTML

<header>
  <nav class="theme-switch-wrapper">
    <h1>Theme Preview</h1>
    <label class="theme-switch" for="checkbox">
      <input type="checkbox" id="checkbox" />
      <div class="round slider"></div>
    </label>
  </nav>
</header>

rainbow_dash

Raw CSS Preview | Download CSS | Download SCSS-Mixin

Python

def available_next(itrbl):
    """
    Splits an iterable into two streams
    i is the normal ordered iterable
    n is the next element from i
    """
    i, n = tee(itrbl, 2)
    n = chain(islice(n, 1, None), [None])
    return zip(i, n)

Javascript

function switchTheme(e) {
  if (e.target.checked) {
    currentTheme = 'light';
  }
  else {
    currentTheme = 'dark';
  }
  document.documentElement.setAttribute('data-theme', currentTheme);
  localStorage.setItem('theme', currentTheme);
}

SCSS

@mixin dark-scheme {
  --font-color: #e3e0d7;
  --bg-color: #242424;
  --heading-color: #fff;
  --link-color: #80a0ff;
  --link-color-visited: #d787ff;
}
@media (prefers-color-scheme: dark) {
  :root {
    @include dark-scheme;
  }
}
[data-theme="dark"]:root {
  @include dark-scheme;
}

HTML

<header>
  <nav class="theme-switch-wrapper">
    <h1>Theme Preview</h1>
    <label class="theme-switch" for="checkbox">
      <input type="checkbox" id="checkbox" />
      <div class="round slider"></div>
    </label>
  </nav>
</header>

rrt

Raw CSS Preview | Download CSS | Download SCSS-Mixin

Python

def available_next(itrbl):
    """
    Splits an iterable into two streams
    i is the normal ordered iterable
    n is the next element from i
    """
    i, n = tee(itrbl, 2)
    n = chain(islice(n, 1, None), [None])
    return zip(i, n)

Javascript

function switchTheme(e) {
  if (e.target.checked) {
    currentTheme = 'light';
  }
  else {
    currentTheme = 'dark';
  }
  document.documentElement.setAttribute('data-theme', currentTheme);
  localStorage.setItem('theme', currentTheme);
}

SCSS

@mixin dark-scheme {
  --font-color: #e3e0d7;
  --bg-color: #242424;
  --heading-color: #fff;
  --link-color: #80a0ff;
  --link-color-visited: #d787ff;
}
@media (prefers-color-scheme: dark) {
  :root {
    @include dark-scheme;
  }
}
[data-theme="dark"]:root {
  @include dark-scheme;
}

HTML

<header>
  <nav class="theme-switch-wrapper">
    <h1>Theme Preview</h1>
    <label class="theme-switch" for="checkbox">
      <input type="checkbox" id="checkbox" />
      <div class="round slider"></div>
    </label>
  </nav>
</header>

rub

Raw CSS Preview | Download CSS | Download SCSS-Mixin

Python

def available_next(itrbl):
    """
    Splits an iterable into two streams
    i is the normal ordered iterable
    n is the next element from i
    """
    i, n = tee(itrbl, 2)
    n = chain(islice(n, 1, None), [None])
    return zip(i, n)

Javascript

function switchTheme(e) {
  if (e.target.checked) {
    currentTheme = 'light';
  }
  else {
    currentTheme = 'dark';
  }
  document.documentElement.setAttribute('data-theme', currentTheme);
  localStorage.setItem('theme', currentTheme);
}

SCSS

@mixin dark-scheme {
  --font-color: #e3e0d7;
  --bg-color: #242424;
  --heading-color: #fff;
  --link-color: #80a0ff;
  --link-color-visited: #d787ff;
}
@media (prefers-color-scheme: dark) {
  :root {
    @include dark-scheme;
  }
}
[data-theme="dark"]:root {
  @include dark-scheme;
}

HTML

<header>
  <nav class="theme-switch-wrapper">
    <h1>Theme Preview</h1>
    <label class="theme-switch" for="checkbox">
      <input type="checkbox" id="checkbox" />
      <div class="round slider"></div>
    </label>
  </nav>
</header>

sas

Raw CSS Preview | Download CSS | Download SCSS-Mixin

Python

def available_next(itrbl):
    """
    Splits an iterable into two streams
    i is the normal ordered iterable
    n is the next element from i
    """
    i, n = tee(itrbl, 2)
    n = chain(islice(n, 1, None), [None])
    return zip(i, n)

Javascript

function switchTheme(e) {
  if (e.target.checked) {
    currentTheme = 'light';
  }
  else {
    currentTheme = 'dark';
  }
  document.documentElement.setAttribute('data-theme', currentTheme);
  localStorage.setItem('theme', currentTheme);
}

SCSS

@mixin dark-scheme {
  --font-color: #e3e0d7;
  --bg-color: #242424;
  --heading-color: #fff;
  --link-color: #80a0ff;
  --link-color-visited: #d787ff;
}
@media (prefers-color-scheme: dark) {
  :root {
    @include dark-scheme;
  }
}
[data-theme="dark"]:root {
  @include dark-scheme;
}

HTML

<header>
  <nav class="theme-switch-wrapper">
    <h1>Theme Preview</h1>
    <label class="theme-switch" for="checkbox">
      <input type="checkbox" id="checkbox" />
      <div class="round slider"></div>
    </label>
  </nav>
</header>

solarized-dark

Raw CSS Preview | Download CSS | Download SCSS-Mixin

Python

def available_next(itrbl):
    """
    Splits an iterable into two streams
    i is the normal ordered iterable
    n is the next element from i
    """
    i, n = tee(itrbl, 2)
    n = chain(islice(n, 1, None), [None])
    return zip(i, n)

Javascript

function switchTheme(e) {
  if (e.target.checked) {
    currentTheme = 'light';
  }
  else {
    currentTheme = 'dark';
  }
  document.documentElement.setAttribute('data-theme', currentTheme);
  localStorage.setItem('theme', currentTheme);
}

SCSS

@mixin dark-scheme {
  --font-color: #e3e0d7;
  --bg-color: #242424;
  --heading-color: #fff;
  --link-color: #80a0ff;
  --link-color-visited: #d787ff;
}
@media (prefers-color-scheme: dark) {
  :root {
    @include dark-scheme;
  }
}
[data-theme="dark"]:root {
  @include dark-scheme;
}

HTML

<header>
  <nav class="theme-switch-wrapper">
    <h1>Theme Preview</h1>
    <label class="theme-switch" for="checkbox">
      <input type="checkbox" id="checkbox" />
      <div class="round slider"></div>
    </label>
  </nav>
</header>

solarized-light

Raw CSS Preview | Download CSS | Download SCSS-Mixin

Python

def available_next(itrbl):
    """
    Splits an iterable into two streams
    i is the normal ordered iterable
    n is the next element from i
    """
    i, n = tee(itrbl, 2)
    n = chain(islice(n, 1, None), [None])
    return zip(i, n)

Javascript

function switchTheme(e) {
  if (e.target.checked) {
    currentTheme = 'light';
  }
  else {
    currentTheme = 'dark';
  }
  document.documentElement.setAttribute('data-theme', currentTheme);
  localStorage.setItem('theme', currentTheme);
}

SCSS

@mixin dark-scheme {
  --font-color: #e3e0d7;
  --bg-color: #242424;
  --heading-color: #fff;
  --link-color: #80a0ff;
  --link-color-visited: #d787ff;
}
@media (prefers-color-scheme: dark) {
  :root {
    @include dark-scheme;
  }
}
[data-theme="dark"]:root {
  @include dark-scheme;
}

HTML

<header>
  <nav class="theme-switch-wrapper">
    <h1>Theme Preview</h1>
    <label class="theme-switch" for="checkbox">
      <input type="checkbox" id="checkbox" />
      <div class="round slider"></div>
    </label>
  </nav>
</header>

solarizeddark

Raw CSS Preview | Download CSS | Download SCSS-Mixin

Python

def available_next(itrbl):
    """
    Splits an iterable into two streams
    i is the normal ordered iterable
    n is the next element from i
    """
    i, n = tee(itrbl, 2)
    n = chain(islice(n, 1, None), [None])
    return zip(i, n)

Javascript

function switchTheme(e) {
  if (e.target.checked) {
    currentTheme = 'light';
  }
  else {
    currentTheme = 'dark';
  }
  document.documentElement.setAttribute('data-theme', currentTheme);
  localStorage.setItem('theme', currentTheme);
}

SCSS

@mixin dark-scheme {
  --font-color: #e3e0d7;
  --bg-color: #242424;
  --heading-color: #fff;
  --link-color: #80a0ff;
  --link-color-visited: #d787ff;
}
@media (prefers-color-scheme: dark) {
  :root {
    @include dark-scheme;
  }
}
[data-theme="dark"]:root {
  @include dark-scheme;
}

HTML

<header>
  <nav class="theme-switch-wrapper">
    <h1>Theme Preview</h1>
    <label class="theme-switch" for="checkbox">
      <input type="checkbox" id="checkbox" />
      <div class="round slider"></div>
    </label>
  </nav>
</header>

solarizedlight

Raw CSS Preview | Download CSS | Download SCSS-Mixin

Python

def available_next(itrbl):
    """
    Splits an iterable into two streams
    i is the normal ordered iterable
    n is the next element from i
    """
    i, n = tee(itrbl, 2)
    n = chain(islice(n, 1, None), [None])
    return zip(i, n)

Javascript

function switchTheme(e) {
  if (e.target.checked) {
    currentTheme = 'light';
  }
  else {
    currentTheme = 'dark';
  }
  document.documentElement.setAttribute('data-theme', currentTheme);
  localStorage.setItem('theme', currentTheme);
}

SCSS

@mixin dark-scheme {
  --font-color: #e3e0d7;
  --bg-color: #242424;
  --heading-color: #fff;
  --link-color: #80a0ff;
  --link-color-visited: #d787ff;
}
@media (prefers-color-scheme: dark) {
  :root {
    @include dark-scheme;
  }
}
[data-theme="dark"]:root {
  @include dark-scheme;
}

HTML

<header>
  <nav class="theme-switch-wrapper">
    <h1>Theme Preview</h1>
    <label class="theme-switch" for="checkbox">
      <input type="checkbox" id="checkbox" />
      <div class="round slider"></div>
    </label>
  </nav>
</header>

spacemacs-dark

Raw CSS Preview | Download CSS | Download SCSS-Mixin

Python

def available_next(itrbl):
    """
    Splits an iterable into two streams
    i is the normal ordered iterable
    n is the next element from i
    """
    i, n = tee(itrbl, 2)
    n = chain(islice(n, 1, None), [None])
    return zip(i, n)

Javascript

function switchTheme(e) {
  if (e.target.checked) {
    currentTheme = 'light';
  }
  else {
    currentTheme = 'dark';
  }
  document.documentElement.setAttribute('data-theme', currentTheme);
  localStorage.setItem('theme', currentTheme);
}

SCSS

@mixin dark-scheme {
  --font-color: #e3e0d7;
  --bg-color: #242424;
  --heading-color: #fff;
  --link-color: #80a0ff;
  --link-color-visited: #d787ff;
}
@media (prefers-color-scheme: dark) {
  :root {
    @include dark-scheme;
  }
}
[data-theme="dark"]:root {
  @include dark-scheme;
}

HTML

<header>
  <nav class="theme-switch-wrapper">
    <h1>Theme Preview</h1>
    <label class="theme-switch" for="checkbox">
      <input type="checkbox" id="checkbox" />
      <div class="round slider"></div>
    </label>
  </nav>
</header>

spacemacs-light

Raw CSS Preview | Download CSS | Download SCSS-Mixin

Python

def available_next(itrbl):
    """
    Splits an iterable into two streams
    i is the normal ordered iterable
    n is the next element from i
    """
    i, n = tee(itrbl, 2)
    n = chain(islice(n, 1, None), [None])
    return zip(i, n)

Javascript

function switchTheme(e) {
  if (e.target.checked) {
    currentTheme = 'light';
  }
  else {
    currentTheme = 'dark';
  }
  document.documentElement.setAttribute('data-theme', currentTheme);
  localStorage.setItem('theme', currentTheme);
}

SCSS

@mixin dark-scheme {
  --font-color: #e3e0d7;
  --bg-color: #242424;
  --heading-color: #fff;
  --link-color: #80a0ff;
  --link-color-visited: #d787ff;
}
@media (prefers-color-scheme: dark) {
  :root {
    @include dark-scheme;
  }
}
[data-theme="dark"]:root {
  @include dark-scheme;
}

HTML

<header>
  <nav class="theme-switch-wrapper">
    <h1>Theme Preview</h1>
    <label class="theme-switch" for="checkbox">
      <input type="checkbox" id="checkbox" />
      <div class="round slider"></div>
    </label>
  </nav>
</header>

ssms

Raw CSS Preview | Download CSS | Download SCSS-Mixin

Python

def available_next(itrbl):
    """
    Splits an iterable into two streams
    i is the normal ordered iterable
    n is the next element from i
    """
    i, n = tee(itrbl, 2)
    n = chain(islice(n, 1, None), [None])
    return zip(i, n)

Javascript

function switchTheme(e) {
  if (e.target.checked) {
    currentTheme = 'light';
  }
  else {
    currentTheme = 'dark';
  }
  document.documentElement.setAttribute('data-theme', currentTheme);
  localStorage.setItem('theme', currentTheme);
}

SCSS

@mixin dark-scheme {
  --font-color: #e3e0d7;
  --bg-color: #242424;
  --heading-color: #fff;
  --link-color: #80a0ff;
  --link-color-visited: #d787ff;
}
@media (prefers-color-scheme: dark) {
  :root {
    @include dark-scheme;
  }
}
[data-theme="dark"]:root {
  @include dark-scheme;
}

HTML

<header>
  <nav class="theme-switch-wrapper">
    <h1>Theme Preview</h1>
    <label class="theme-switch" for="checkbox">
      <input type="checkbox" id="checkbox" />
      <div class="round slider"></div>
    </label>
  </nav>
</header>

staroffice

Raw CSS Preview | Download CSS | Download SCSS-Mixin

Python

def available_next(itrbl):
    """
    Splits an iterable into two streams
    i is the normal ordered iterable
    n is the next element from i
    """
    i, n = tee(itrbl, 2)
    n = chain(islice(n, 1, None), [None])
    return zip(i, n)

Javascript

function switchTheme(e) {
  if (e.target.checked) {
    currentTheme = 'light';
  }
  else {
    currentTheme = 'dark';
  }
  document.documentElement.setAttribute('data-theme', currentTheme);
  localStorage.setItem('theme', currentTheme);
}

SCSS

@mixin dark-scheme {
  --font-color: #e3e0d7;
  --bg-color: #242424;
  --heading-color: #fff;
  --link-color: #80a0ff;
  --link-color-visited: #d787ff;
}
@media (prefers-color-scheme: dark) {
  :root {
    @include dark-scheme;
  }
}
[data-theme="dark"]:root {
  @include dark-scheme;
}

HTML

<header>
  <nav class="theme-switch-wrapper">
    <h1>Theme Preview</h1>
    <label class="theme-switch" for="checkbox">
      <input type="checkbox" id="checkbox" />
      <div class="round slider"></div>
    </label>
  </nav>
</header>

stata-dark

Raw CSS Preview | Download CSS | Download SCSS-Mixin

Python

def available_next(itrbl):
    """
    Splits an iterable into two streams
    i is the normal ordered iterable
    n is the next element from i
    """
    i, n = tee(itrbl, 2)
    n = chain(islice(n, 1, None), [None])
    return zip(i, n)

Javascript

function switchTheme(e) {
  if (e.target.checked) {
    currentTheme = 'light';
  }
  else {
    currentTheme = 'dark';
  }
  document.documentElement.setAttribute('data-theme', currentTheme);
  localStorage.setItem('theme', currentTheme);
}

SCSS

@mixin dark-scheme {
  --font-color: #e3e0d7;
  --bg-color: #242424;
  --heading-color: #fff;
  --link-color: #80a0ff;
  --link-color-visited: #d787ff;
}
@media (prefers-color-scheme: dark) {
  :root {
    @include dark-scheme;
  }
}
[data-theme="dark"]:root {
  @include dark-scheme;
}

HTML

<header>
  <nav class="theme-switch-wrapper">
    <h1>Theme Preview</h1>
    <label class="theme-switch" for="checkbox">
      <input type="checkbox" id="checkbox" />
      <div class="round slider"></div>
    </label>
  </nav>
</header>

stata-light

Raw CSS Preview | Download CSS | Download SCSS-Mixin

Python

def available_next(itrbl):
    """
    Splits an iterable into two streams
    i is the normal ordered iterable
    n is the next element from i
    """
    i, n = tee(itrbl, 2)
    n = chain(islice(n, 1, None), [None])
    return zip(i, n)

Javascript

function switchTheme(e) {
  if (e.target.checked) {
    currentTheme = 'light';
  }
  else {
    currentTheme = 'dark';
  }
  document.documentElement.setAttribute('data-theme', currentTheme);
  localStorage.setItem('theme', currentTheme);
}

SCSS

@mixin dark-scheme {
  --font-color: #e3e0d7;
  --bg-color: #242424;
  --heading-color: #fff;
  --link-color: #80a0ff;
  --link-color-visited: #d787ff;
}
@media (prefers-color-scheme: dark) {
  :root {
    @include dark-scheme;
  }
}
[data-theme="dark"]:root {
  @include dark-scheme;
}

HTML

<header>
  <nav class="theme-switch-wrapper">
    <h1>Theme Preview</h1>
    <label class="theme-switch" for="checkbox">
      <input type="checkbox" id="checkbox" />
      <div class="round slider"></div>
    </label>
  </nav>
</header>

stata

Raw CSS Preview | Download CSS | Download SCSS-Mixin

Python

def available_next(itrbl):
    """
    Splits an iterable into two streams
    i is the normal ordered iterable
    n is the next element from i
    """
    i, n = tee(itrbl, 2)
    n = chain(islice(n, 1, None), [None])
    return zip(i, n)

Javascript

function switchTheme(e) {
  if (e.target.checked) {
    currentTheme = 'light';
  }
  else {
    currentTheme = 'dark';
  }
  document.documentElement.setAttribute('data-theme', currentTheme);
  localStorage.setItem('theme', currentTheme);
}

SCSS

@mixin dark-scheme {
  --font-color: #e3e0d7;
  --bg-color: #242424;
  --heading-color: #fff;
  --link-color: #80a0ff;
  --link-color-visited: #d787ff;
}
@media (prefers-color-scheme: dark) {
  :root {
    @include dark-scheme;
  }
}
[data-theme="dark"]:root {
  @include dark-scheme;
}

HTML

<header>
  <nav class="theme-switch-wrapper">
    <h1>Theme Preview</h1>
    <label class="theme-switch" for="checkbox">
      <input type="checkbox" id="checkbox" />
      <div class="round slider"></div>
    </label>
  </nav>
</header>

tango

Raw CSS Preview | Download CSS | Download SCSS-Mixin

Python

def available_next(itrbl):
    """
    Splits an iterable into two streams
    i is the normal ordered iterable
    n is the next element from i
    """
    i, n = tee(itrbl, 2)
    n = chain(islice(n, 1, None), [None])
    return zip(i, n)

Javascript

function switchTheme(e) {
  if (e.target.checked) {
    currentTheme = 'light';
  }
  else {
    currentTheme = 'dark';
  }
  document.documentElement.setAttribute('data-theme', currentTheme);
  localStorage.setItem('theme', currentTheme);
}

SCSS

@mixin dark-scheme {
  --font-color: #e3e0d7;
  --bg-color: #242424;
  --heading-color: #fff;
  --link-color: #80a0ff;
  --link-color-visited: #d787ff;
}
@media (prefers-color-scheme: dark) {
  :root {
    @include dark-scheme;
  }
}
[data-theme="dark"]:root {
  @include dark-scheme;
}

HTML

<header>
  <nav class="theme-switch-wrapper">
    <h1>Theme Preview</h1>
    <label class="theme-switch" for="checkbox">
      <input type="checkbox" id="checkbox" />
      <div class="round slider"></div>
    </label>
  </nav>
</header>

tomorrow-day

Raw CSS Preview | Download CSS | Download SCSS-Mixin

Python

def available_next(itrbl):
    """
    Splits an iterable into two streams
    i is the normal ordered iterable
    n is the next element from i
    """
    i, n = tee(itrbl, 2)
    n = chain(islice(n, 1, None), [None])
    return zip(i, n)

Javascript

function switchTheme(e) {
  if (e.target.checked) {
    currentTheme = 'light';
  }
  else {
    currentTheme = 'dark';
  }
  document.documentElement.setAttribute('data-theme', currentTheme);
  localStorage.setItem('theme', currentTheme);
}

SCSS

@mixin dark-scheme {
  --font-color: #e3e0d7;
  --bg-color: #242424;
  --heading-color: #fff;
  --link-color: #80a0ff;
  --link-color-visited: #d787ff;
}
@media (prefers-color-scheme: dark) {
  :root {
    @include dark-scheme;
  }
}
[data-theme="dark"]:root {
  @include dark-scheme;
}

HTML

<header>
  <nav class="theme-switch-wrapper">
    <h1>Theme Preview</h1>
    <label class="theme-switch" for="checkbox">
      <input type="checkbox" id="checkbox" />
      <div class="round slider"></div>
    </label>
  </nav>
</header>

tomorrow-night-blue

Raw CSS Preview | Download CSS | Download SCSS-Mixin

Python

def available_next(itrbl):
    """
    Splits an iterable into two streams
    i is the normal ordered iterable
    n is the next element from i
    """
    i, n = tee(itrbl, 2)
    n = chain(islice(n, 1, None), [None])
    return zip(i, n)

Javascript

function switchTheme(e) {
  if (e.target.checked) {
    currentTheme = 'light';
  }
  else {
    currentTheme = 'dark';
  }
  document.documentElement.setAttribute('data-theme', currentTheme);
  localStorage.setItem('theme', currentTheme);
}

SCSS

@mixin dark-scheme {
  --font-color: #e3e0d7;
  --bg-color: #242424;
  --heading-color: #fff;
  --link-color: #80a0ff;
  --link-color-visited: #d787ff;
}
@media (prefers-color-scheme: dark) {
  :root {
    @include dark-scheme;
  }
}
[data-theme="dark"]:root {
  @include dark-scheme;
}

HTML

<header>
  <nav class="theme-switch-wrapper">
    <h1>Theme Preview</h1>
    <label class="theme-switch" for="checkbox">
      <input type="checkbox" id="checkbox" />
      <div class="round slider"></div>
    </label>
  </nav>
</header>

tomorrow-night-bright

Raw CSS Preview | Download CSS | Download SCSS-Mixin

Python

def available_next(itrbl):
    """
    Splits an iterable into two streams
    i is the normal ordered iterable
    n is the next element from i
    """
    i, n = tee(itrbl, 2)
    n = chain(islice(n, 1, None), [None])
    return zip(i, n)

Javascript

function switchTheme(e) {
  if (e.target.checked) {
    currentTheme = 'light';
  }
  else {
    currentTheme = 'dark';
  }
  document.documentElement.setAttribute('data-theme', currentTheme);
  localStorage.setItem('theme', currentTheme);
}

SCSS

@mixin dark-scheme {
  --font-color: #e3e0d7;
  --bg-color: #242424;
  --heading-color: #fff;
  --link-color: #80a0ff;
  --link-color-visited: #d787ff;
}
@media (prefers-color-scheme: dark) {
  :root {
    @include dark-scheme;
  }
}
[data-theme="dark"]:root {
  @include dark-scheme;
}

HTML

<header>
  <nav class="theme-switch-wrapper">
    <h1>Theme Preview</h1>
    <label class="theme-switch" for="checkbox">
      <input type="checkbox" id="checkbox" />
      <div class="round slider"></div>
    </label>
  </nav>
</header>

tomorrow-night-eighties

Raw CSS Preview | Download CSS | Download SCSS-Mixin

Python

def available_next(itrbl):
    """
    Splits an iterable into two streams
    i is the normal ordered iterable
    n is the next element from i
    """
    i, n = tee(itrbl, 2)
    n = chain(islice(n, 1, None), [None])
    return zip(i, n)

Javascript

function switchTheme(e) {
  if (e.target.checked) {
    currentTheme = 'light';
  }
  else {
    currentTheme = 'dark';
  }
  document.documentElement.setAttribute('data-theme', currentTheme);
  localStorage.setItem('theme', currentTheme);
}

SCSS

@mixin dark-scheme {
  --font-color: #e3e0d7;
  --bg-color: #242424;
  --heading-color: #fff;
  --link-color: #80a0ff;
  --link-color-visited: #d787ff;
}
@media (prefers-color-scheme: dark) {
  :root {
    @include dark-scheme;
  }
}
[data-theme="dark"]:root {
  @include dark-scheme;
}

HTML

<header>
  <nav class="theme-switch-wrapper">
    <h1>Theme Preview</h1>
    <label class="theme-switch" for="checkbox">
      <input type="checkbox" id="checkbox" />
      <div class="round slider"></div>
    </label>
  </nav>
</header>

tomorrow-night

Raw CSS Preview | Download CSS | Download SCSS-Mixin

Python

def available_next(itrbl):
    """
    Splits an iterable into two streams
    i is the normal ordered iterable
    n is the next element from i
    """
    i, n = tee(itrbl, 2)
    n = chain(islice(n, 1, None), [None])
    return zip(i, n)

Javascript

function switchTheme(e) {
  if (e.target.checked) {
    currentTheme = 'light';
  }
  else {
    currentTheme = 'dark';
  }
  document.documentElement.setAttribute('data-theme', currentTheme);
  localStorage.setItem('theme', currentTheme);
}

SCSS

@mixin dark-scheme {
  --font-color: #e3e0d7;
  --bg-color: #242424;
  --heading-color: #fff;
  --link-color: #80a0ff;
  --link-color-visited: #d787ff;
}
@media (prefers-color-scheme: dark) {
  :root {
    @include dark-scheme;
  }
}
[data-theme="dark"]:root {
  @include dark-scheme;
}

HTML

<header>
  <nav class="theme-switch-wrapper">
    <h1>Theme Preview</h1>
    <label class="theme-switch" for="checkbox">
      <input type="checkbox" id="checkbox" />
      <div class="round slider"></div>
    </label>
  </nav>
</header>

tomorrownightbright

Raw CSS Preview | Download CSS | Download SCSS-Mixin

Python

def available_next(itrbl):
    """
    Splits an iterable into two streams
    i is the normal ordered iterable
    n is the next element from i
    """
    i, n = tee(itrbl, 2)
    n = chain(islice(n, 1, None), [None])
    return zip(i, n)

Javascript

function switchTheme(e) {
  if (e.target.checked) {
    currentTheme = 'light';
  }
  else {
    currentTheme = 'dark';
  }
  document.documentElement.setAttribute('data-theme', currentTheme);
  localStorage.setItem('theme', currentTheme);
}

SCSS

@mixin dark-scheme {
  --font-color: #e3e0d7;
  --bg-color: #242424;
  --heading-color: #fff;
  --link-color: #80a0ff;
  --link-color-visited: #d787ff;
}
@media (prefers-color-scheme: dark) {
  :root {
    @include dark-scheme;
  }
}
[data-theme="dark"]:root {
  @include dark-scheme;
}

HTML

<header>
  <nav class="theme-switch-wrapper">
    <h1>Theme Preview</h1>
    <label class="theme-switch" for="checkbox">
      <input type="checkbox" id="checkbox" />
      <div class="round slider"></div>
    </label>
  </nav>
</header>

trac

Raw CSS Preview | Download CSS | Download SCSS-Mixin

Python

def available_next(itrbl):
    """
    Splits an iterable into two streams
    i is the normal ordered iterable
    n is the next element from i
    """
    i, n = tee(itrbl, 2)
    n = chain(islice(n, 1, None), [None])
    return zip(i, n)

Javascript

function switchTheme(e) {
  if (e.target.checked) {
    currentTheme = 'light';
  }
  else {
    currentTheme = 'dark';
  }
  document.documentElement.setAttribute('data-theme', currentTheme);
  localStorage.setItem('theme', currentTheme);
}

SCSS

@mixin dark-scheme {
  --font-color: #e3e0d7;
  --bg-color: #242424;
  --heading-color: #fff;
  --link-color: #80a0ff;
  --link-color-visited: #d787ff;
}
@media (prefers-color-scheme: dark) {
  :root {
    @include dark-scheme;
  }
}
[data-theme="dark"]:root {
  @include dark-scheme;
}

HTML

<header>
  <nav class="theme-switch-wrapper">
    <h1>Theme Preview</h1>
    <label class="theme-switch" for="checkbox">
      <input type="checkbox" id="checkbox" />
      <div class="round slider"></div>
    </label>
  </nav>
</header>

vice

Raw CSS Preview | Download CSS | Download SCSS-Mixin

Python

def available_next(itrbl):
    """
    Splits an iterable into two streams
    i is the normal ordered iterable
    n is the next element from i
    """
    i, n = tee(itrbl, 2)
    n = chain(islice(n, 1, None), [None])
    return zip(i, n)

Javascript

function switchTheme(e) {
  if (e.target.checked) {
    currentTheme = 'light';
  }
  else {
    currentTheme = 'dark';
  }
  document.documentElement.setAttribute('data-theme', currentTheme);
  localStorage.setItem('theme', currentTheme);
}

SCSS

@mixin dark-scheme {
  --font-color: #e3e0d7;
  --bg-color: #242424;
  --heading-color: #fff;
  --link-color: #80a0ff;
  --link-color-visited: #d787ff;
}
@media (prefers-color-scheme: dark) {
  :root {
    @include dark-scheme;
  }
}
[data-theme="dark"]:root {
  @include dark-scheme;
}

HTML

<header>
  <nav class="theme-switch-wrapper">
    <h1>Theme Preview</h1>
    <label class="theme-switch" for="checkbox">
      <input type="checkbox" id="checkbox" />
      <div class="round slider"></div>
    </label>
  </nav>
</header>

vim

Raw CSS Preview | Download CSS | Download SCSS-Mixin

Python

def available_next(itrbl):
    """
    Splits an iterable into two streams
    i is the normal ordered iterable
    n is the next element from i
    """
    i, n = tee(itrbl, 2)
    n = chain(islice(n, 1, None), [None])
    return zip(i, n)

Javascript

function switchTheme(e) {
  if (e.target.checked) {
    currentTheme = 'light';
  }
  else {
    currentTheme = 'dark';
  }
  document.documentElement.setAttribute('data-theme', currentTheme);
  localStorage.setItem('theme', currentTheme);
}

SCSS

@mixin dark-scheme {
  --font-color: #e3e0d7;
  --bg-color: #242424;
  --heading-color: #fff;
  --link-color: #80a0ff;
  --link-color-visited: #d787ff;
}
@media (prefers-color-scheme: dark) {
  :root {
    @include dark-scheme;
  }
}
[data-theme="dark"]:root {
  @include dark-scheme;
}

HTML

<header>
  <nav class="theme-switch-wrapper">
    <h1>Theme Preview</h1>
    <label class="theme-switch" for="checkbox">
      <input type="checkbox" id="checkbox" />
      <div class="round slider"></div>
    </label>
  </nav>
</header>

vs

Raw CSS Preview | Download CSS | Download SCSS-Mixin

Python

def available_next(itrbl):
    """
    Splits an iterable into two streams
    i is the normal ordered iterable
    n is the next element from i
    """
    i, n = tee(itrbl, 2)
    n = chain(islice(n, 1, None), [None])
    return zip(i, n)

Javascript

function switchTheme(e) {
  if (e.target.checked) {
    currentTheme = 'light';
  }
  else {
    currentTheme = 'dark';
  }
  document.documentElement.setAttribute('data-theme', currentTheme);
  localStorage.setItem('theme', currentTheme);
}

SCSS

@mixin dark-scheme {
  --font-color: #e3e0d7;
  --bg-color: #242424;
  --heading-color: #fff;
  --link-color: #80a0ff;
  --link-color-visited: #d787ff;
}
@media (prefers-color-scheme: dark) {
  :root {
    @include dark-scheme;
  }
}
[data-theme="dark"]:root {
  @include dark-scheme;
}

HTML

<header>
  <nav class="theme-switch-wrapper">
    <h1>Theme Preview</h1>
    <label class="theme-switch" for="checkbox">
      <input type="checkbox" id="checkbox" />
      <div class="round slider"></div>
    </label>
  </nav>
</header>

vsc

Raw CSS Preview | Download CSS | Download SCSS-Mixin

Python

def available_next(itrbl):
    """
    Splits an iterable into two streams
    i is the normal ordered iterable
    n is the next element from i
    """
    i, n = tee(itrbl, 2)
    n = chain(islice(n, 1, None), [None])
    return zip(i, n)

Javascript

function switchTheme(e) {
  if (e.target.checked) {
    currentTheme = 'light';
  }
  else {
    currentTheme = 'dark';
  }
  document.documentElement.setAttribute('data-theme', currentTheme);
  localStorage.setItem('theme', currentTheme);
}

SCSS

@mixin dark-scheme {
  --font-color: #e3e0d7;
  --bg-color: #242424;
  --heading-color: #fff;
  --link-color: #80a0ff;
  --link-color-visited: #d787ff;
}
@media (prefers-color-scheme: dark) {
  :root {
    @include dark-scheme;
  }
}
[data-theme="dark"]:root {
  @include dark-scheme;
}

HTML

<header>
  <nav class="theme-switch-wrapper">
    <h1>Theme Preview</h1>
    <label class="theme-switch" for="checkbox">
      <input type="checkbox" id="checkbox" />
      <div class="round slider"></div>
    </label>
  </nav>
</header>

xcode

Raw CSS Preview | Download CSS | Download SCSS-Mixin

Python

def available_next(itrbl):
    """
    Splits an iterable into two streams
    i is the normal ordered iterable
    n is the next element from i
    """
    i, n = tee(itrbl, 2)
    n = chain(islice(n, 1, None), [None])
    return zip(i, n)

Javascript

function switchTheme(e) {
  if (e.target.checked) {
    currentTheme = 'light';
  }
  else {
    currentTheme = 'dark';
  }
  document.documentElement.setAttribute('data-theme', currentTheme);
  localStorage.setItem('theme', currentTheme);
}

SCSS

@mixin dark-scheme {
  --font-color: #e3e0d7;
  --bg-color: #242424;
  --heading-color: #fff;
  --link-color: #80a0ff;
  --link-color-visited: #d787ff;
}
@media (prefers-color-scheme: dark) {
  :root {
    @include dark-scheme;
  }
}
[data-theme="dark"]:root {
  @include dark-scheme;
}

HTML

<header>
  <nav class="theme-switch-wrapper">
    <h1>Theme Preview</h1>
    <label class="theme-switch" for="checkbox">
      <input type="checkbox" id="checkbox" />
      <div class="round slider"></div>
    </label>
  </nav>
</header>

zenburn

Raw CSS Preview | Download CSS | Download SCSS-Mixin

Python

def available_next(itrbl):
    """
    Splits an iterable into two streams
    i is the normal ordered iterable
    n is the next element from i
    """
    i, n = tee(itrbl, 2)
    n = chain(islice(n, 1, None), [None])
    return zip(i, n)

Javascript

function switchTheme(e) {
  if (e.target.checked) {
    currentTheme = 'light';
  }
  else {
    currentTheme = 'dark';
  }
  document.documentElement.setAttribute('data-theme', currentTheme);
  localStorage.setItem('theme', currentTheme);
}

SCSS

@mixin dark-scheme {
  --font-color: #e3e0d7;
  --bg-color: #242424;
  --heading-color: #fff;
  --link-color: #80a0ff;
  --link-color-visited: #d787ff;
}
@media (prefers-color-scheme: dark) {
  :root {
    @include dark-scheme;
  }
}
[data-theme="dark"]:root {
  @include dark-scheme;
}

HTML

<header>
  <nav class="theme-switch-wrapper">
    <h1>Theme Preview</h1>
    <label class="theme-switch" for="checkbox">
      <input type="checkbox" id="checkbox" />
      <div class="round slider"></div>
    </label>
  </nav>
</header>