-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #1 from ibrataha8/main
add localStorage In Dark Mode
- Loading branch information
Showing
2 changed files
with
106 additions
and
96 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,108 +1,108 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="UTF-8" /> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | ||
| <meta | ||
| name="description" | ||
| content="Draw with html and css [ desktop, pc, red cube, lamp, desk, cabinets ] " | ||
| /> | ||
| <meta name="author" content="Moamal Alaa" /> | ||
| <title>Draw desktop with CSS</title> | ||
| <link rel="stylesheet" href="styles.css" /> | ||
| <!-- Font awesome kit --> | ||
| <script | ||
| src="https://kit.fontawesome.com/5a1527845b.js" | ||
| crossorigin="anonymous" | ||
| ></script> | ||
| </head> | ||
|
|
||
| <body> | ||
| <div id="dark-mode-icon"> | ||
| <i id="mon" class="fa-solid fa-sun show"></i> | ||
| <i id="show" class="fa-solid fa-moon hide"></i> | ||
| </div> | ||
|
|
||
| <head> | ||
| <meta charset="UTF-8"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
| <meta name="description" content="Draw with html and css [ desktop, pc, red cube, lamp, desk, cabinets ] "> | ||
| <meta name="author" content="Moamal Alaa"> | ||
| <title>Draw desktop with CSS</title> | ||
| <link rel="stylesheet" href="styles.css"> | ||
| <!-- Font awesome kit --> | ||
| <script src="https://kit.fontawesome.com/5a1527845b.js" crossorigin="anonymous"></script> | ||
| </head> | ||
|
|
||
| <body> | ||
| <div id="dark-mode-icon"> | ||
| <i class="fa-solid fa-moon show"></i> | ||
| <i class="fa-solid fa-sun hide"></i> | ||
| </div> | ||
|
|
||
| <div class="container"> | ||
| <div class="frame"> | ||
|
|
||
|
|
||
| <div class="desktop"> | ||
| <div class="mouse"></div> | ||
|
|
||
| <div class="screen"> | ||
| <div class="screen-case"> | ||
| <div class="the-screen"> | ||
| <div class="text">Welcome</div> | ||
| <div class="container"> | ||
| <div class="frame"> | ||
| <div class="desktop"> | ||
| <div class="mouse"></div> | ||
|
|
||
| <div class="screen"> | ||
| <div class="screen-case"> | ||
| <div class="the-screen"> | ||
| <div class="text">Welcome</div> | ||
| </div> | ||
| <div class="bottom"></div> | ||
| </div> | ||
| <div class="bottom"></div> | ||
| <div class="stander"></div> | ||
| <div class="stander-bottom"></div> | ||
| <div class="line-effect"></div> | ||
| </div> | ||
| <div class="stander"></div> | ||
| <div class="stander-bottom"></div> | ||
| <div class="line-effect"></div> | ||
| </div> | ||
|
|
||
| <div class="red-cube"> | ||
| <div class="shadow-effect"></div> | ||
| </div> | ||
| <div class="red-cube"> | ||
| <div class="shadow-effect"></div> | ||
| </div> | ||
|
|
||
| <div class="desk-lamp"> | ||
| <div class="lamp-base"></div> | ||
| <div class="desk-lamp"> | ||
| <div class="lamp-base"></div> | ||
|
|
||
| <div class="circle-base"></div> | ||
| <div class="circle-base"></div> | ||
|
|
||
| <div class="stand"> | ||
| <div class="inner-circle"></div> | ||
| </div> | ||
| <div class="stand"> | ||
| <div class="inner-circle"></div> | ||
| </div> | ||
|
|
||
| <div class="light-holder-container"> | ||
| <div class="light-holder"> | ||
| <div class="lines"></div> | ||
| <div class="light-effect"></div> | ||
| <div class="light-holder-container"> | ||
| <div class="light-holder"> | ||
| <div class="lines"></div> | ||
| <div class="light-effect"></div> | ||
| </div> | ||
| <div class="light-holder-back"></div> | ||
| <div class="lamp-light"></div> | ||
| </div> | ||
| <div class="light-holder-back"></div> | ||
| <div class="lamp-light"></div> | ||
| </div> | ||
|
|
||
| <div class="wires-structure"> | ||
| <div class="top"></div> | ||
| <div class="left-bottom"></div> | ||
| <div class="right-bottom"></div> | ||
| <div class="wires-structure"> | ||
| <div class="top"></div> | ||
| <div class="left-bottom"></div> | ||
| <div class="right-bottom"></div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
|
|
||
|
|
||
| <div class="desk"> | ||
| <div class="right-wood"></div> | ||
| <div class="desktop-wood"></div> | ||
| <div class="desk"> | ||
| <div class="right-wood"></div> | ||
| <div class="desktop-wood"></div> | ||
|
|
||
| <div class="brown-wood"> | ||
| <div class="lines"></div> | ||
| <div class="shadow-effect"></div> | ||
| </div> | ||
| <div class="brown-wood"> | ||
| <div class="lines"></div> | ||
| <div class="shadow-effect"></div> | ||
| </div> | ||
|
|
||
| <div class="cabinet top"> | ||
| <div class="shadow-effect"></div> | ||
| <div class="cabinet-door"> | ||
| <div class="the-handle"></div> | ||
| <div class="cabinet top"> | ||
| <div class="shadow-effect"></div> | ||
| <div class="shadow-effect-two"></div> | ||
| <div class="cabinet-door"> | ||
| <div class="the-handle"></div> | ||
| <div class="shadow-effect"></div> | ||
| <div class="shadow-effect-two"></div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div class="cabinet bottom"> | ||
| <div class="shadow-effect"></div> | ||
| <div class="shadow-effect-two"></div> | ||
| <div class="cabinet-door"> | ||
| <div class="the-handle"></div> | ||
| <div class="cabinet bottom"> | ||
| <div class="shadow-effect"></div> | ||
| <div class="shadow-effect-two"></div> | ||
| <div class="cabinet-door"> | ||
| <div class="the-handle"></div> | ||
| <div class="shadow-effect"></div> | ||
| <div class="shadow-effect-two"></div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
|
|
||
|
|
||
| <div class="underline"></div> | ||
| <div class="underline"></div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
|
|
||
| <script src="script.js"></script> | ||
| </body> | ||
|
|
||
| </html> | ||
| <script src="script.js"></script> | ||
| </body> | ||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,22 +1,32 @@ | ||
| "use strict"; | ||
|
|
||
| const darkModeIcon = document.getElementById('dark-mode-icon') | ||
| const darkModeMoon = document.querySelector('#dark-mode-icon i:first-child') | ||
| const darkModeSun = document.querySelector('#dark-mode-icon i:last-child') | ||
| const darkModeIcon = document.getElementById('dark-mode-icon'); | ||
| const darkModeMoon = document.querySelector('#dark-mode-icon i:first-child'); | ||
| const darkModeSun = document.querySelector('#dark-mode-icon i:last-child'); | ||
| let darkMode = JSON.parse(localStorage.getItem("dark-mode")); | ||
|
|
||
|
|
||
| function applyDarkModeStyles() { | ||
| if (darkMode) { | ||
| document.documentElement.style.setProperty("--page-background", "#252525"); | ||
| document.documentElement.style.setProperty("--dark-white-color", "#fff"); | ||
| } else { | ||
| document.documentElement.style.setProperty("--page-background", "#fff"); | ||
| document.documentElement.style.setProperty("--dark-white-color", "#252525"); | ||
| } | ||
| } | ||
|
|
||
| applyDarkModeStyles(); // Apply styles on page load | ||
|
|
||
| darkModeIcon.addEventListener('click', () => { | ||
| darkModeMoon.classList.toggle('show') | ||
| darkModeSun.classList.toggle('show') | ||
| darkMode = !darkMode; // Toggle the darkMode value | ||
|
|
||
| darkModeMoon.classList.toggle('hide') | ||
| darkModeSun.classList.toggle('hide') | ||
| localStorage.setItem("dark-mode", JSON.stringify(darkMode)); // Update localStorage | ||
|
|
||
| if (darkModeMoon.classList.contains("show")) { | ||
| document.documentElement.style.setProperty("--page-background", "#fff") | ||
| document.documentElement.style.setProperty("--dark-white-color", "#252525") | ||
| } else { | ||
| document.documentElement.style.setProperty("--page-background", "#252525") | ||
| document.documentElement.style.setProperty("--dark-white-color", "#fff") | ||
| } | ||
| }) | ||
| darkModeMoon.classList.toggle('hide'); | ||
| darkModeSun.classList.toggle('show'); | ||
| darkModeSun.classList.toggle('hide'); | ||
| darkModeMoon.classList.toggle('show'); | ||
|
|
||
| applyDarkModeStyles(); // Apply styles after the mode is toggled | ||
| }); |