Merge pull request #7 from Robertw8/dark-theme

Dark theme

src/index.scss

@@ -1,18 +1,19 @@
-@import "./scss/common/reset";
-@import "./scss/common/global";
-@import "./scss/common/typography";
-@import "./scss/utilities/mixins";
-@import "./scss/utilities/variables";
-@import "./scss/partials/header";
-@import "./scss/partials/hero";
-@import "./scss/partials/catalog/catalog";
-@import "./scss/partials/catalog/category-filter";
-@import "./scss/partials/catalog/popular-recipes";
-@import "./scss/partials/catalog/recipes-list";
-@import "./scss/partials/catalog/search-filter";
-@import "./scss/partials/favorites-page";
-@import "./scss/partials/mobile-menu";
-@import "./scss/partials/recipe-popup";
-@import "./scss/partials/order-popup";
-@import "./scss/partials/rating-popup";
-@import "./scss/partials/footer";
+@import './scss/common/reset';
+@import './scss/common/global';
+@import './scss/common/typography';
+@import './scss/utilities/mixins';
+@import './scss/utilities/variables';
+@import './scss/partials/header';
+@import './scss/partials/hero';
+@import './scss/partials/catalog/catalog';
+@import './scss/partials/catalog/category-filter';
+@import './scss/partials/catalog/popular-recipes';
+@import './scss/partials/catalog/recipes-list';
+@import './scss/partials/catalog/search-filter';
+@import './scss/partials/favorites-page';
+@import './scss/partials/mobile-menu';
+@import './scss/partials/recipe-popup';
+@import './scss/partials/order-popup';
+@import './scss/partials/rating-popup';
+@import './scss/partials/footer';
+@import './scss/partials/dark-theme';

src/js/dark-theme.js

@@ -0,0 +1,30 @@
+const STORAGE_KEY = 'dark-theme';
+const themeSwitcher = document.getElementById('theme-switcher');
+const isEnabledDarkTheme = localStorage.getItem(STORAGE_KEY) === 'true';
+
+setLocalStorageTheme();
+
+themeSwitcher.addEventListener('change', setThemeOnClick);
+
+// Функція для встановлення теми по кліку
+function setThemeOnClick(evt) {
+  const isEnabledDarkTheme = evt.target.checked;
+
+  if (isEnabledDarkTheme) {
+    document.body.classList.add('dark-theme');
+    localStorage.setItem(STORAGE_KEY, 'true');
+  } else {
+    document.body.classList.remove('dark-theme');
+    localStorage.removeItem(STORAGE_KEY);
+  }
+}
+
+// Функція для встановлення теми з localStorage
+function setLocalStorageTheme() {
+  if (isEnabledDarkTheme) {
+    document.body.classList.add('dark-theme');
+    themeSwitcher.querySelector('input').checked = true;
+  }
+}
+
+export { setLocalStorageTheme, setThemeOnClick };

src/main.js

@@ -1,5 +1,6 @@
 import { testFn } from './js/test';
-testFn();
+import { setLocalStorageTheme, setThemeOnClick } from './js/dark-theme';
+// testFn();
 
 import { filtersList, onFilterItemClick } from './js/search-filter';
 

src/partials/header.html

@@ -4,4 +4,9 @@ <h1 class="test-header">HEADER</h1>
   <svg width="70" height="70">
     <use href="images/sprite.svg#icon-star"></use>
   </svg>
+
+  <label id="theme-switcher">
+    <input type="checkbox" />
+    <span></span>
+  </label>
 </header>

src/scss/common/_global.scss

@@ -1,15 +1,19 @@
-@import "./typography";
-@import "../utilities/variables";
+@import './typography';
+@import '../utilities/variables';
 
 html {
   scroll-behavior: smooth;
 }
 
 body {
-  font-family: "Inter", sans-serif;
+  font-family: 'Inter', sans-serif;
   color: $color-black;
 }
 
+body.dark-theme {
+  background-color: $dark-theme;
+}
+
 .container {
   max-width: 375px;
   margin: 0 auto;

src/scss/partials/_dark-theme.scss

@@ -0,0 +1,51 @@
+#theme-switcher {
+  position: relative;
+  display: inline-block;
+  width: 47px;
+  height: 20px;
+  border-radius: 10px;
+  box-shadow: 7px 5px 15px 0px #a09ea066;
+}
+
+#theme-switcher input {
+  display: block;
+  width: 0;
+  height: 0;
+  position: absolute;
+  z-index: -1;
+  opacity: 0;
+}
+
+#theme-switcher span {
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: $color-theme-switch-disabled;
+  transition: 0.4s;
+  border-radius: 34px;
+  box-shadow: 4px 4px 15px rgba(243, 243, 243, 0.25);
+}
+#theme-switcher span:before {
+  content: '';
+  position: absolute;
+  height: 17px;
+  width: 17px;
+  left: 2px;
+  bottom: 2px;
+  background-color: $color-white;
+  transition: 0.2s;
+  border-radius: 50%;
+}
+
+#theme-switcher input:checked + span {
+  background: linear-gradient(#9bb537, #9bb537);
+  box-shadow: 4px 4px 15px rgba(243, 243, 243, 0.25);
+}
+
+#theme-switcher input:checked + span:before {
+  box-shadow: 4px 4px 15px rgba(243, 243, 243, 0.25);
+  transform: translateX(26px);
+}

src/scss/utilities/_variables.scss

@@ -1,18 +1,19 @@
 //? Colors
-$color-white: #F8F8F8;
-$color-white-50: #F8F8F880;
-$color-white-10: #F8F8F81A;
+$color-white: #f8f8f8;
+$color-white-50: #f8f8f880;
+$color-white-10: #f8f8f81a;
 $color-black: #050505;
-$color-black-80: #050505CC;
+$color-black-80: #050505cc;
 $color-black-50: #05050580;
-$color-black-30: #0505054D;
+$color-black-30: #0505054d;
 $color-black-20: #05050533;
-$color-black-10: #0505051A;
+$color-black-10: #0505051a;
 $color-black-shadow: #00000005;
-$color-green: #9BB537;
-$color-yellow: #EEA10C;
-$color-grey: #D9D9D9;
-$color-theme-switch-disabled: #CECDCD;
+$color-green: #9bb537;
+$color-yellow: #eea10c;
+$color-grey: #d9d9d9;
+$color-theme-switch-disabled: #cecdcd;
+$dark-theme: #1e1e1e;
 
 //? Breakpoints
 $mobile: 375px;