diff --git a/js/app.js b/js/app.js index 95fdeae..b85c7a3 100644 --- a/js/app.js +++ b/js/app.js @@ -9,7 +9,7 @@ import { pagination } from './pagination.js'; document.addEventListener('DOMContentLoaded', () => { audio.init(); - theme.check(); + theme.init(); pagination.init(); guest.init(); diff --git a/js/dashboard.js b/js/dashboard.js index c243cde..82fc368 100644 --- a/js/dashboard.js +++ b/js/dashboard.js @@ -9,8 +9,7 @@ import { pagination } from './pagination.js'; document.addEventListener('DOMContentLoaded', () => { admin.init(); - - theme.check(); + theme.init(); pagination.init(); window.like = like; diff --git a/js/guest.js b/js/guest.js index a728597..3e1f743 100644 --- a/js/guest.js +++ b/js/guest.js @@ -109,7 +109,6 @@ export const guest = (() => { }; const init = () => { - countDownDate(); if (session.isAdmin()) { storage('user').clear(); @@ -148,6 +147,7 @@ export const guest = (() => { } session.guest(); + countDownDate(); }; return { diff --git a/js/theme.js b/js/theme.js index 46822f3..a9534f5 100644 --- a/js/theme.js +++ b/js/theme.js @@ -1,14 +1,16 @@ import { storage } from './storage.js'; -export const THEME_DARK = 'dark'; -export const THEME_LIGHT = 'light'; -export const THEME_BS_DATA = 'data-bs-theme'; - export const theme = (() => { + const THEME_DARK = 'dark'; + const THEME_LIGHT = 'light'; + const theme = storage('theme'); const onLight = () => { + theme.set('active', THEME_LIGHT); + document.documentElement.setAttribute('data-bs-theme', THEME_LIGHT); + const elements = document.querySelectorAll('.text-light, .btn-theme-light, .bg-dark, .bg-black, .bg-theme-dark, .color-theme-black, .btn-outline-light, .bg-cover-black'); elements.forEach((element) => { if (element.classList.contains('text-light')) { @@ -54,6 +56,9 @@ export const theme = (() => { }; const onDark = () => { + theme.set('active', THEME_DARK); + document.documentElement.setAttribute('data-bs-theme', THEME_DARK); + const elements = document.querySelectorAll('.text-dark, .btn-theme-dark, .bg-light, .bg-white, .bg-theme-light, .color-theme-white, .btn-outline-dark, .bg-cover-white'); elements.forEach((element) => { if (element.classList.contains('text-dark')) { @@ -111,16 +116,16 @@ export const theme = (() => { const change = () => { if (isDarkMode()) { onLight(); - document.documentElement.setAttribute(THEME_BS_DATA, THEME_LIGHT); - theme.set('active', THEME_LIGHT); } else { onDark(); - document.documentElement.setAttribute(THEME_BS_DATA, THEME_DARK); - theme.set('active', THEME_DARK); } }; - const check = () => { + const showButtonChangeTheme = () => { + document.getElementById('button-theme').style.display = 'block'; + }; + + const init = () => { if (!theme.has('active')) { theme.set('active', THEME_LIGHT); @@ -129,32 +134,21 @@ export const theme = (() => { } } - const toggle = document.getElementById('darkMode'); - if (isDarkMode()) { onDark(); - document.documentElement.setAttribute(THEME_BS_DATA, THEME_DARK); - theme.set('active', THEME_DARK); - if (toggle) { - toggle.checked = true; - } } else { onLight(); - document.documentElement.setAttribute(THEME_BS_DATA, THEME_LIGHT); - theme.set('active', THEME_LIGHT); - if (toggle) { - toggle.checked = false; - } } - }; - const showButtonChangeTheme = () => { - document.getElementById('button-theme').style.display = 'block'; + const toggle = document.getElementById('darkMode'); + if (toggle) { + toggle.checked = isDarkMode(); + } }; return { change, - check, + init, isDarkMode, showButtonChangeTheme };