Light – Dark Mode toggle Navigation Bar CSS

Light – Dark Mode toggle Navigation Bar / Menú con toggle cambia de color en fondo blanco y negro con CSS, HTML Y JS.

By: Sasha

HTML

<div class="theme-switch">
 <div class="switch"></div>
</div>
<div class="navigation">
 <ul>
 <a href="#" class="active" target="_blank">Home</a>
 <a href="#" target="_blank">About</a>
 <a href="#" target="_blank">Instagram</a>
 <a href="#" target="_blank">Twitter</a>
 </ul>
</div>
CSS

:root{--background:#000;--text:#fff;--highlight:#ff1ead}
body{background:var(--background);display:flex;align-items:center;justify-content:center;height:100vh;overflow:hidden;transition:.5s background ease}
.theme-switch{--background:#fff;--text:#000;color:var(--text);width:70px;height:30px;background:var(--highlight);border-radius:50px;position:relative}
.theme-switch .switch{width:24px;height:24px;background:var(--background);border-radius:100%;position:absolute;top:3px;left:4px;transition:.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;position:relative;color:var(--text);font-family:Oswald,sans-serif;font-size:20px;text-transform:uppercase;text-decoration:none}
ul a:before{position:absolute;bottom:-2px;content:"";width:100%;height:3px;background:var(--highlight);transform:translateX(-100%);opacity:0}
ul a:hover:before{opacity:1;transition:.5s transform ease,.8s opacity ease;transform:translateX(0)}
ul .active{color:var(--highlight)}
ul .active:hover:before{opacity:0}

JS

http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript">

JS

$(".theme-switch").on("click", () => {  $("body").toggleClass("light-theme");});
¿Te gusto el post?
¡Compártelo!

Adblock Detectado

Apoya este sitio desactivando el Adblock para seguir navegando. ¡Gracias!

¡Ya Desactive el Adblock!