Skip to content

Fixed most common issues related to the dropdown behaviour and caching in the local storage #5

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 5 commits into
base: master
Choose a base branch
from
Open

Fixed most common issues related to the dropdown behaviour and caching in the local storage #5

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
ab38a9e
adding initial class to body programmatically
kr4chinin Sep 2, 2022
4804013
normalize button text save after window reload
kr4chinin Sep 2, 2022
b9619b1
dropdown now unreachable when hidden
kr4chinin Sep 2, 2022
814708a
removed unnecessary pointer events property
kr4chinin Sep 2, 2022
2a3a24e
updated readme
kr4chinin Sep 2, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 6 additions & 4 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
# Light/Dark/Solar Mode Theme Toggler
# Light 🏙 - Dark 🌌 - Solar 🌇 Mode Theme Toggler

[Dynamic theme-toggler tutorial](https://youtu.be/rXuHGLzSmSE) with CSS Variables and JavaScript.
In this version of css theme toggler app I've resolved these problems:


All see [CSS Variables in 100 Seconds](https://youtu.be/NtRmIp4eMjs).
* Initial ```light``` class is now being added to the body **programmatically**. In the _Fireship's_ version after page reload you could notice that body deriving preffered theme from the local storage and adding it to the already exsisiting one which is **hardcoded** light theme (so, if preferred theme was **dark** then after the page reload you will see ```<body class="light dark">```.
* In initial version of this app if you choose **solarized** theme — ```solarizeButton``` acquires _normalize_ ```innerText``` property. But when page is reloaded it **loses** its value although the theme is still **solarized**. Now it will keep it.
* Dropdown was accessible via page inspector and **dev tools** even when it was hidden. I've changed its ```z-index``` property so now it is truly **unreachable** when hidden.
* Removed unnecessary ```pointer-events: auto;``` property because its **implicitly** has necessary value.
7 changes: 7 additions & 0 deletions public/app.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,13 @@ const isSolar = localStorage.getItem('isSolar');
if (theme) {
body.classList.add(theme);
isSolar && body.classList.add('solar');
if (isSolar) {
solarButton.innerText = "normalize";
solarButton.style.cssText = `--bg-solar: white;`;
}
} else {
body.classList.add('light');
localStorage.setItem('theme', 'light');
}

// Button Event Handlers
Expand Down
2 changes: 1 addition & 1 deletion public/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@
<script defer src="app.js"></script>
</head>

<body class="light">
<body>
<!-- Navbar -->

<nav class="navbar">
Expand Down
4 changes: 2 additions & 2 deletions public/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,7 +59,7 @@ img {
position: absolute;
width: 500px;
opacity: 0;
z-index: 2;
z-index: -1;
background: var(--bg-dropdown);
border-top: 2px solid var(--border-color);

Expand All @@ -82,7 +82,7 @@ img {

.has-dropdown:focus-within .dropdown {
opacity: 1;
pointer-events: auto;
z-index: 1;
}


Expand Down