Inicio
Buscar
Ingresar
Registrarse
Starfield: el juego que revolucionará el espacio y la tecnología
Hack x Crack - Comunidad de Seguridad informática
»
Programación
»
Programación Web
»
Agregar modo dark a una web [HTML, CSS & JS]
Imprimir
Páginas: [
1
]
Ir Abajo
Autor
Tema: Agregar modo dark a una web [HTML, CSS & JS] (Leído 3785 veces)
R3LI4NT
{ L4 } Geek
Mensajes: 397
Cuanto más silencioso te vuelves, más puedes oir.
Agregar modo dark a una web [HTML, CSS & JS]
«
en:
Junio 23, 2021, 04:07:00 am »
DARK mode
NORMAL mode
Código HTML + JS:
Código: Text
<!DOCTYPE html>
<html lang="es">
<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">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
<title>Kali Linux</title>
<link rel="stylesheet" href="kali.css">
</head>
<body>
<div class="vista">
<nav>
<h3>KALI LINUX</h3>
<ul>
<li><a target="__blank" href="https://www.kali.org/blog/">Blog</a></li>
<li><a target="__blank" href="https://www.kali.org/docs/">Documentacion</a></li>
<li><a target="__blank" href="https://forums.kali.org/">Comunidad</a></li>
<li><a target="__blank" href="https://kali.training/courses/kali-linux-revealed/">Cursos</a></li>
<li><a target="__blank" href="https://gitlab.com/kalilinux">Desarrolladores</a></li>
<li>
<button class="DarkLight active" id="cambio">
<span><i class="fas fa-sun"></i></span>
<span><i class="fas fa-moon"></i></span>
</button>
</li>
</ul>
</nav>
<header>
<h1>Welcome <span class="shadow">HACKER!</span></h1>
<p>Kali Linux es una distribución basada en Debian GNU/Linux diseñada principalmente para la auditoría y seguridad informática en general. Fue fundada y es mantenida por Offensive Security Ltd.</p>
<button>Get Kali</button>
</header>
<img class="icon" src="img/kali.png" alt="">
</div>
<!-- JAVASCRIPT Section -->
<script type="text/javascript">
const DarkLight = document.getElementById('cambio');
DarkLight.addEventListener('click',()=>{
document.body.classList.toggle('oscuro');
DarkLight.classList.toggle('active')
})
</script>
</body>
</html>
Código CSS:
Código: CSS
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans&display=swap');
*
{
margin
:
0
;
padding
:
0
;
box-sizing
:
border-box
;
font-family
:
'Noto Sans'
,
sans-serif
;
}
/*LIGHT MODE*/
body
{
background
:
#F9F9F9
;
color
:
black
;
}
/*DARK MODE */
body
.oscuro
{
background
:
#121212
;
color
:
#fff
;
}
.vista
{
position
:
relative
;
width
:
100%
;
height
:
100vh
;
min-width
:
1300px
;
}
nav
{
display
:
flex
;
justify-content
:
space-between
;
align-items
:
center
;
padding
:
11px
0
;
box-shadow
:
2px
2px
6px
rgba
(
0
,
0
,
0
,
0.2
)
;
}
nav h3
{
font-size
:
15px
;
font-weight
:
500
;
font-size
:
33px
;
text-decoration
:
none
;
}
nav
>
h3
,
header
{
margin-left
:
40px
;
}
li
,
a
{
font-size
:
17px
;
display
:
inline-block
;
padding
:
0
12px
;
cursor
:
pointer
;
transition
:
0.3s ease 0s
;
font-weight
:
500
;
text-decoration
:
none
;
color
:
#0074FF
;
}
header
{
position
:
absolute
;
width
:
400px
;
top
:
35%
;
text-align
:
justify
;
}
header p
{
width
:
757px
;
height
:
70px
;
font-size
:
18px
;
line-height
:
21px
;
font-weight
:
500
;
margin-bottom
:
10px
;
}
h1
{
line-height
:
65px
;
font-weight
:
400
;
font-size
:
60px
;
}
.shadow
{
text-shadow
:
2px
0
3px
#52FF23
;
}
header button
{
background-color
:
#1E6EF9
;
width
:
150px
;
height
:
40px
;
border
:
0
;
font-weight
:
500
;
font-size
:
16px
;
line-height
:
28px
;
color
:
#fff
;
border-color
:
#1E6EF9
;
cursor
:
pointer
;
box-shadow
:
0
0
30px
30px
#1E6EF9
inset
;
transition
:
box-shadow 0.3s ease-in-out
;
}
header button
:hover
{
box-shadow
:
0
0
12px
0
rgba
(
0
,
0
,
0
,
.5
)
inset
,
0
0
12px
4px
rgba
(
0
,
0
,
0
,
.5
)
;
}
button
>
span
>
.fa-sun
{
color
:
black
;
}
button
>
span
>
.fa-moon
{
color
:
white
;
}
.icon
{
position
:
absolute
;
width
:
332px
;
height
:
auto
;
right
:
0
;
transform
:
translateY
(
56px
)
translateX
(
-60px
)
;
}
/* ESTILOS BOTONES DARK-LIGHT */
.DarkLight
{
background-color
:
#1B1E23
;
display
:
flex
;
position
:
relative
;
cursor
:
pointer
;
outline
:
none
;
border
:
none
;
border-radius
:
1rem
;
align-items
:
center
;
justify-content
:
space-between
;
}
.DarkLight
span
{
width
:
28px
;
height
:
28px
;
line-height
:
28px
;
display
:
block
;
background
:
none
;
}
.DarkLight
:
:after
{
display
:
block
;
background
:
#F1F1F1
;
width
:
1.8rem
;
height
:
1.8rem
;
content
:
""
;
position
:
absolute
;
top
:
0
;
left
:
0
;
right
:
unset
;
box-shadow
:
0
0
1.3px
1.3px
rgba
(
0
,
0
,
0
,
.4
)
;
border-radius
:
50%
;
transition
:
all .5 ease
;
}
.DarkLight
.active
:
:after
{
left
:
unset
;
right
:
0
;
}
.DarkLight
.active
{
background
:
#FBFB84
;
color
:
black
;
}
Comentario:
Recuerden que pueden cambiar el background del modo dark en body.oscuro {background: #XXXXXX;}.
#R3LI4NT
En línea
No contesto dudas por MP, si las tienes, las planteas en el foro.
Road To Hacking v3:
https://github.com/R3LI4NT/road-to-hacking
Imprimir
Páginas: [
1
]
Ir Arriba
Hack x Crack - Comunidad de Seguridad informática
»
Programación
»
Programación Web
»
Agregar modo dark a una web [HTML, CSS & JS]
Va un mudo y le dice a un sordo: Hack x Crack usa cookies. Pues eso...
OK
Learn more