No products in the cart.
Forum Replies Created
Viewing 1 post (of 1 total)
- Posts
-
I would use CSS variables (w3schools). You can create a few variables in the :root, like for a bright background or the text color, then you assign those to the different elements. If you want to change to dark mode, you only have to change the variables accordingly (the text to a bright color and the background to a dark color):
:root { --text: #1e2939; --bg: #F1F9fc; } body { font-family: 'Montserrat', sans-serif; background-color: #fff; } .yeaaaaaa { background-color: #111; } /* main styles */ .main { display: grid; background-color: #f5f7fa; grid-template-columns: 22.15em auto; grid-template-rows: auto auto; } .grid-item { background: #1e2939; } .photo-coverup { display: flex; align-items: flex-end; } .info-name { color: var(--text); margin-bottom: 5px; } .info-list { color: var(--text); margin-bottom: 25px; } .info-yee { color: var(--text); width: 400px; } /* about styles */ .about { background-color: var(--bg); padding: 15px 120px 10px 50px; } .info { color: var(--text); } .texx-alt { font-style: normal; color: black; } #delegar { position:fixed; right: 10px; top: 10px; width: 90px; height: 35px; border: none; outline: none; color: #87c9f5; background: var(--text); cursor: pointer; z-index: 0; border-radius: 15px 0 0 15px; -webkit-transition: ease-in 1s; transition: color 1s; } #delegar:hover { color: #1e2939; background-color: #87c9f5; font-weight: bold; }<!DOCTYPE html> <html lang="en"> <head> </head> <body> <!--Main--> <div class="main grid"> <div class="photo-coverup grid-item"> <img src="img/Profile pic.jpg" alt="Dude Pic" class="photo"> </div> <!--About User--> <span> <div class="about grid-item yeaaaaaa"> <p class="info"> <h2 class="info">Developer and Graphic Designer</h2> <h1 class="info-name">George Mos</h1> <p class="info-yee"> My name is George (GMos) Mos. I'm a graphic designer and programmer. I have: </p> <ul class="info-list"> <li class="info-section-list-component">4-year-experience in Adobe Photoshop and Adobe Illustrator</li> <li class="info-section-list-component">3-year-experience in programming (Python, HTML5, Bash and JavaScript)</li> </ul> <p class="info">I'm from Ukraine, Kyiv. I work as a freelancer and, usually, my work consists of creating logos, wallpapers, art and/ or making softwares, programs and websites. My life motto: "Optimistic and ambitious" </p> <p class="info">In my spare time I often lay back in Discord either texting or taking part in a voice channels. If you wanna join, don't hesitate yourself by following the "Discord" link in "Social Media" section! (or you can just <a href="https://discord.gg/PGkJgQtCwZ" class="texx-alt">click here</a> though) </p> </p> </div> </span> <div> <button id="delegar">Dark Mode</button> </div> <script> const button = document.getElementById('delegar'); button.addEventListener('click', (event) => { if (button.innerHTML === "Dark Mode") { document.documentElement.style.setProperty('--text', '#eee'); document.documentElement.style.setProperty('--bg', '#1e2939'); button.innerHTML = "Light Mode"; } else { document.documentElement.style.setProperty('--text', '#1e2939'); document.documentElement.style.setProperty('--bg', '#F1F9fc'); button.innerHTML = "Dark Mode"; } }); </script> </body> </html>
Viewing 1 post (of 1 total)