Light/Dark Mode toggle Navigation Bar

index.html

<div class="theme-switch">
  <div class="switch"></div>
</div>
<div class="navigation">
  <ul>
    <a href="http://www.sashatran.com/" class="active" target="_blank">Home</a>
    <a href="https://codepen.io/sashatran/" target="_blank">About</a>
    <a href="https://instagram.com/sasha.codes/" target="_blank">Instagram</a>
    <a href="https://twitter.com/sa_sha26" target="_blank">Twitter</a>
  </ul>
</div>

light-dark-mode-toggle-navigation-bar.markdown

Light/Dark Mode toggle Navigation Bar

Switch between Light/Dark mode with the toggle.

A Pen by Sasha on CodePen.

License.

script.js

$(".theme-switch").on("click", () => {
  $("body").toggleClass("light-theme");
});

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

style.scss

:root {
  --background: #000;
  --text: #FFF;
  --highlight: #FF1EAD;
}

@import url('https://fonts.googleapis.com/css?family=Oswald');

body {
  background: var(--background);
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  overflow: hidden;
  transition: 0.5s background ease;
}

.theme-switch {
  --background: #FFF;
  --text: #000;
  color: var(--text);
  width: 70px;
  height: 30px;
  background: var(--highlight);
  border-radius: 50px;
  position: relative;

  .switch {
    background: white;
    width: 24px;
    height: 24px;
    background: var(--background);
    border-radius: 100%;
    position: absolute;
    top: 3px;
    left: 4px;
    transition: 0.5s all ease;
  }
}

.light-theme {
  --background: #FFF;
  --text: #000;
  background: var(--background);

  .theme-switch {
    background: var(--text);

    .switch {
      transform: translateX(37px);
    }
  }
  a {
    color: var(--text); 
  }
}

.navigation {
  display: flex;
  justify-content: center;
}

ul {
  display: flex;
  list-style-type: none;
  a {
    margin: 10px;
    position: relative;
    color: var(--text);
    font-family: 'Oswald', sans-serif;
    font-size: 20px;
    text-transform: uppercase;
    text-decoration: none;

    &:before {
      position: absolute;
      bottom: -2px;
      content: '';
      width: 100%;
      height: 3px;
      background: var(--highlight);
      transform: translateX(-100%);
      opacity: 0;
    }

    &:hover {
      &:before {
        opacity: 1;
        transition: 0.5s transform ease, 0.8s opacity ease;
        transform: translateX(0);
      }
    }
  }

  .active {
    color: var(--highlight);

    &:hover {
      &:before {
        opacity: 0;
      }
    }
  }
}