Código fuente del ejercicio
Código HTML
<header class="header">
<strong>EDteam</strong>
<nav class="nav">
<ul class="menu">
<li><a href="#">Inicio</a></li>
<li><a href="#">Nosotros</a></li>
<li><a href="#">Servicios</a></li>
<li><a href="#">Contacto</a></li>
</ul>
</nav>
</header>
<aside class="sidebar">
<h3>Slecciona un tema</h3>
<div class="themes">
<div class="theme">
<input type="radio" name="theme" id="light" checked>
<label for="light">Claro</label>
</div>
<div class="theme">
<input type="radio" name="theme" id="dark">
<label for="dark">Oscuro</label>
</div>
</div>
</aside>
<main>
<div class="hero">
<img src="https://edteam-media.s3.amazonaws.com/courses/big/5692921c-f5f1-419e-bd29-11e61bcafdf5.png">
<h1>Bienvenido a EDteam</h1>
</div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolores, modi temporibus?
Ea animi quae ut reiciendis vitae itaque officia, maiores, quasi tempore quibusdam
quos tempora voluptatem modi, ipsa eaque molestiae? Lorem ipsum dolor sit amet
consectetur adipisicing elit. Dolores, modi temporibus? Ea animi quae ut reiciendis
vitae itaque officia, maiores, quasi tempore quibusdam quos tempora voluptatem modi,
ipsa eaque molestiae?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolores, modi temporibus?
Ea animi quae ut reiciendis vitae itaque officia, maiores, quasi tempore quibusdam
quos tempora voluptatem modi, ipsa eaque molestiae? Lorem ipsum dolor sit amet
consectetur adipisicing elit. Dolores, modi temporibus? Ea animi quae ut reiciendis
vitae itaque officia, maiores, quasi tempore quibusdam quos tempora voluptatem modi,
ipsa eaque molestiae?</p>
</main>
<footer class="footer">
EDteam | 2021 - 2022
</footer>
<script src="scripts.js"></script>
Código CSS
:root {
--bg-color: <a href="/comunidad/publicaciones?q=%23eee" data-community-hashtag="true">#eee</a>;
--bg-color-2: <a href="/comunidad/publicaciones?q=%23fff" data-community-hashtag="true">#fff</a>;
--text-color: <a href="/comunidad/publicaciones?q=%2353575A" data-community-hashtag="true">#53575A</a>;
--accent-color: <a href="/comunidad/publicaciones?q=%23007BDF" data-community-hashtag="true">#007BDF</a>;
--font: 'Open Sans', sans-serif;
}
*,*::before,*::after {
box-sizing: border-box;
}
body {
display: grid;
min-height: calc(100vh - 2rem);
grid-template-columns: repeat(4, 1fr);
grid-template-rows: 4rem 1fr 4rem;
grid-gap: 1rem;
margin: 1rem;
font-family: var(--font);
}
img {
width: 100%;
}
main {
grid-column: span 3;
}
.header,
.footer {
grid-column: span 4;
}
.header,
.sidebar,
.main,
.footer {
padding-left: 1rem;
padding-right: 1rem;
}
.theme {
padding: .2rem 0;
}
.header,
.footer {
display: flex;
align-items: center;
}
.nav {
margin-left: auto;
}
.menu {
list-style: none;
display: flex;
}
.menu li {
margin-left: 1rem;
}
.menu a {
text-decoration: none;
}
.footer {
justify-content: center;
}
.hero {
position: relative;
margin-bottom: 2rem;
}
.hero::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: .9;
}
.hero h1 {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 100%;
text-align: center;
}
/* Theme */
body {
background-color: var(--bg-color);
color: var(--text-color);
}
a {
color: var(--accent-color);
}
.header,
.footer,
.sidebar {
background-color: var(--bg-color-2);
}
.hero::before {
background-color: var(--accent-color);
}
.hero h1 {
color: var(--bg-color-2);
}
Código JS
const changeThemeButtons = document.querySelectorAll('[name=theme]')
const rootStyles = document.documentElement.style
const lightTheme = {
'--bg-color': "#EEE",
'--bg-color-2': "#FFF",
'--text-color': "#53575A",
'--accent-color': "#007BDF",
'--font': "'Open Sans', sans-serif"
}
const darkTheme = {
'--bg-color': "#53575A",
'--bg-color-2': "#282D31",
'--text-color': "#EEE",
'--accent-color': "#FF3C32",
'--font': "'Open Sans', sans-serif"
}
for(let button of changeThemeButtons) {
button.addEventListener('change', e => {
if (e.target.id === 'dark') {
changeTheme(darkTheme)
} else if (e.target.id === 'light') {
changeTheme(lightTheme)
}
})
}
const changeTheme = theme => {
let cssVars = Object.keys(theme)
for (let cssVar of cssVars) {
rootStyles.setProperty(cssVar, theme[cssVar])
}
}