<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Navbar Toggle</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="container">
        <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>
    </div>
    <!-- Javascript -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="script.js"></script>
</body>

</html>
@import url('&#39;https://fonts.googleapis.com/css?family=Oswald');
 :root {
    --background: #000;
    --text: #fff;
    --highlight: #ff1ead;
}

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

.container {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

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

.theme-switch .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);
}

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

.light-theme .theme-switch .switch {
    transform: translateX(37px);
}

.light-theme a {
    color: var(--text);
}

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

ul {
    display: flex;
    list-style-type: none;
}

ul a {
    margin: 10px 30px;
    position: relative;
    color: var(--text);
    font-size: 20px;
    text-transform: uppercase;
    text-decoration: none;
}

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

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

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

ul .active:hover:before {
    opacity: 0;
}
$(".theme-switch").on("click", () => {
    $("body").toggleClass("light-theme");
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.