diff --git a/css/reset.css b/css/reset.css
index 32bb85e..48a29c8 100644
--- a/css/reset.css
+++ b/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;
diff --git a/index.html b/index.html
index e250ed3..f99b172 100644
--- a/index.html
+++ b/index.html
@@ -15,6 +15,7 @@
+
diff --git a/js/header.js b/js/header.js
index fa6cfd5..45455f7 100644
--- a/js/header.js
+++ b/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();
diff --git a/js/theme.js b/js/theme.js
new file mode 100644
index 0000000..af3bdfa
--- /dev/null
+++ b/js/theme.js
@@ -0,0 +1,5 @@
+const themeMode = localStorage.getItem('theme-mode');
+
+if (themeMode === 'light-mode') {
+ document.querySelector(':root').dataset.theme = 'light-mode';
+}
\ No newline at end of file
diff --git a/page/detail.html b/page/detail.html
index 5f9e99a..0508c18 100644
--- a/page/detail.html
+++ b/page/detail.html
@@ -10,6 +10,7 @@
+
diff --git a/page/nowplaying.html b/page/nowplaying.html
index 54cf0e8..b526cad 100644
--- a/page/nowplaying.html
+++ b/page/nowplaying.html
@@ -9,6 +9,7 @@
+
diff --git a/page/popular.html b/page/popular.html
index 2669d94..148c269 100644
--- a/page/popular.html
+++ b/page/popular.html
@@ -9,6 +9,7 @@
+
diff --git a/page/profile.html b/page/profile.html
index 0cb0e53..b848530 100644
--- a/page/profile.html
+++ b/page/profile.html
@@ -11,6 +11,7 @@
+
diff --git a/page/search-result.html b/page/search-result.html
index a6ca970..53e3656 100644
--- a/page/search-result.html
+++ b/page/search-result.html
@@ -10,6 +10,7 @@
+
diff --git a/page/search.html b/page/search.html
index a6e19ba..c05083e 100644
--- a/page/search.html
+++ b/page/search.html
@@ -11,6 +11,7 @@
+
diff --git a/page/top20.html b/page/top20.html
index 200d47c..86888fc 100644
--- a/page/top20.html
+++ b/page/top20.html
@@ -9,6 +9,7 @@
+
diff --git a/page/upcoming.html b/page/upcoming.html
index d05b978..a5eba49 100644
--- a/page/upcoming.html
+++ b/page/upcoming.html
@@ -9,6 +9,7 @@
+