Merge pull request #75 from SpartaEnergizerTeam/develop

main into develop

css/reset.css

@@ -59,7 +59,7 @@ table {
     --main-rgba-color2: rgba(255, 255, 255, 0.15);
 }
 
-.light-mode {
+[data-theme='light-mode'] {
     --background-color: #ffffff; 
     --main-color0: #1b1b1b;
     --main-color1: #333333;

index.html

@@ -15,6 +15,7 @@
     <link rel="stylesheet" href="./css/popup.css" />
     <link rel="stylesheet" as="style" crossorigin href="https://cdn.jsdelivr.net/gh/orioncactus/[email protected]/dist/web/static/pretendard-dynamic-subset.min.css"/>
     <script src="./js/swiper-bundle.min.js"></script>
+    <script src="./js/theme.js"></script>
     <script defer src="./js/common.js" type="module"></script>
     <script defer src="./js/index.js" type="module"></script>
     <script defer src="./js/popup.js"></script>

js/header.js

@@ -31,20 +31,15 @@ const header = () => {
 
   const themeHandler = () => {
     const themeButton = document.querySelector('#themeBtn');
-    const bodyElement = document.body;
+    const rootElement = document.querySelector(':root');
 
     if (themeButton) {
       themeButton.addEventListener('click', () => {
-        bodyElement.classList.toggle('light-mode');
-        const lightMode = bodyElement.className;
-        setLocalStorage('theme-mode', lightMode === 'light-mode' ? 'light-mode' : '');
+        const lightMode = rootElement.dataset.theme;
+        rootElement.dataset.theme = lightMode ? '' : 'light-mode';
+        setLocalStorage('theme-mode', lightMode ? '' : 'light-mode');
       });
     }
-
-    const themeMode = getLocalStorage('theme-mode');
-    if (themeMode === 'light-mode') {
-      bodyElement.classList.add('light-mode');
-    }
   };
 
   handleSearch();

js/theme.js

@@ -0,0 +1,5 @@
+const themeMode = localStorage.getItem('theme-mode');
+
+if (themeMode === 'light-mode') {
+  document.querySelector(':root').dataset.theme = 'light-mode';
+}

page/detail.html

@@ -10,6 +10,7 @@
     <link rel="stylesheet" href="../css/page/detail.css"/>
     <link rel="stylesheet" href="../css/page/review.css"/>
     <link rel="stylesheet" as="style" crossorigin href="https://cdn.jsdelivr.net/gh/orioncactus/[email protected]/dist/web/static/pretendard-dynamic-subset.min.css" />
+    <script src="../js/theme.js"></script>
     <script defer src="../js/common.js" type="module"></script>
     <script defer src="../js/page/detail.js" type="module"></script>
     <script defer src="../js/page/review/index.js" type="module"></script>

page/nowplaying.html

@@ -9,6 +9,7 @@
     <link rel="stylesheet" href="../css/common.css" />
     <link rel="stylesheet" href="../css/page/subpage.css" />
     <link rel="stylesheet" as="style" crossorigin href="https://cdn.jsdelivr.net/gh/orioncactus/[email protected]/dist/web/static/pretendard-dynamic-subset.min.css"/>
+    <script src="../js/theme.js"></script>
     <script defer src="../js/common.js" type="module"></script>
     <script defer src="../js/page/subpage.js" type="module"></script>
   </head>

page/popular.html

@@ -9,6 +9,7 @@
     <link rel="stylesheet" href="../css/common.css" />
     <link rel="stylesheet" href="../css/page/subpage.css" />
     <link rel="stylesheet" as="style" crossorigin href="https://cdn.jsdelivr.net/gh/orioncactus/[email protected]/dist/web/static/pretendard-dynamic-subset.min.css"/>
+    <script src="../js/theme.js"></script>
     <script defer src="../js/common.js" type="module"></script>
     <script defer src="../js/page/subpage.js" type="module"></script>
   </head>

page/profile.html

@@ -11,6 +11,7 @@
     <link rel="stylesheet" href="../css/reset.css" />
     <link rel="stylesheet" href="../css/common.css" />
     <link rel="stylesheet" href="../css/page/profile.css" />
+    <script src="../js/theme.js"></script>
     <script defer src="../js/common.js" type="module"></script>
     <script defer src="../js/page/profile.js"></script>
   </head>

page/search-result.html

@@ -10,6 +10,7 @@
     <link rel="stylesheet" href="../css/page/search.css"/>
     <link rel="stylesheet" href="../css/page/search-result.css" />
     <link rel="stylesheet" as="style" crossorigin href="https://cdn.jsdelivr.net/gh/orioncactus/[email protected]/dist/web/static/pretendard-dynamic-subset.min.css"/>
+    <script src="../js/theme.js"></script>
     <script defer src="../js/common.js" type="module"></script>
     <script defer src="../js/page/searchList.js" type="module"></script>
 </head>

page/search.html

@@ -11,6 +11,7 @@
     <link rel="stylesheet" href="../css/page/search.css"/>
     <link rel="stylesheet" as="style" crossorigin href="https://cdn.jsdelivr.net/gh/orioncactus/[email protected]/dist/web/static/pretendard-dynamic-subset.min.css"/>
     <script src="../js/swiper-bundle.min.js"></script>
+    <script src="../js/theme.js"></script>
     <script defer src="../js/common.js" type="module"></script>
     <script defer src="../js/page/searchMain.js" type="module"></script>
   </head>

page/top20.html

@@ -9,6 +9,7 @@
     <link rel="stylesheet" href="../css/common.css" />
     <link rel="stylesheet" href="../css/page/subpage.css" />
     <link rel="stylesheet" as="style" crossorigin href="https://cdn.jsdelivr.net/gh/orioncactus/[email protected]/dist/web/static/pretendard-dynamic-subset.min.css"/>
+    <script src="../js/theme.js"></script>
     <script defer src="../js/common.js" type="module"></script>
     <script defer src="../js/page/subpage.js" type="module"></script>
   </head>

page/upcoming.html

@@ -9,6 +9,7 @@
     <link rel="stylesheet" href="../css/common.css" />
     <link rel="stylesheet" href="../css/page/subpage.css" />
     <link rel="stylesheet" as="style" crossorigin href="https://cdn.jsdelivr.net/gh/orioncactus/[email protected]/dist/web/static/pretendard-dynamic-subset.min.css"/>
+    <script src="../js/theme.js"></script>
     <script defer src="../js/common.js" type="module"></script>
     <script defer src="../js/page/subpage.js" type="module"></script>
   </head>