diff --git a/README.md b/README.md index e7b03e6..9127a44 100644 --- a/README.md +++ b/README.md @@ -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 ``````. +* 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. diff --git a/public/app.js b/public/app.js index b3352ed..aca5675 100644 --- a/public/app.js +++ b/public/app.js @@ -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 diff --git a/public/index.html b/public/index.html index 9027bb0..a5bc4c3 100644 --- a/public/index.html +++ b/public/index.html @@ -15,7 +15,7 @@ - +