diff --git a/public/js/theme.js b/public/js/theme.js index f47f321..1ac121b 100644 --- a/public/js/theme.js +++ b/public/js/theme.js @@ -15,48 +15,20 @@ const toggleTheme = () => { saveTheme(newTheme); }; -// https://stackoverflow.com/a/28344281 -const hasClass = (ele,cls) => { - return !!ele.className.match(new RegExp('(\\s|^)'+cls+'(\\s|$)')); -}; -const addClass = (ele,cls) => { - if (!hasClass(ele,cls)) ele.className += " "+cls; -}; -const removeClass = (ele,cls) => { - if (hasClass(ele,cls)) { - var reg = new RegExp('(\\s|^)'+cls+'(\\s|$)'); - ele.className=ele.className.replace(reg,' '); - } -}; - -const addClassToClass = (targetCls, newCls) => { - const elements = document.getElementsByClassName(targetCls); - for (let i = 0; i < elements.length; i++) { - addClass(elements[i], newCls); - } -}; - -const removeClassFromClass = (targetCls, newCls) => { - const elements = document.getElementsByClassName(targetCls); - for (let i = 0; i < elements.length; i++) { - removeClass(elements[i], newCls); - } -}; - const setTheme = themeStr => { if (themeStr === 'dark') { - document.getElementsByTagName('html')[0].style.background = 'rgb(20, 20, 20)'; - addClass(document.getElementsByTagName('body')[0], 'uk-light'); - addClassToClass('uk-card', 'uk-card-secondary'); - removeClassFromClass('uk-card', 'uk-card-default'); - addClassToClass('ui-widget-content', 'dark'); + $('html').css('background', 'rgb(20, 20, 20)'); + $('body').addClass('uk-light'); + $('.uk-card').addClass('uk-card-secondary'); + $('.uk-card').removeClass('uk-card-default'); + $('.ui-widget-content').addClass('dark'); } else { - document.getElementsByTagName('html')[0].style.background = ''; - removeClass(document.getElementsByTagName('body')[0], 'uk-light'); - removeClassFromClass('uk-card', 'uk-card-secondary'); - addClassToClass('uk-card', 'uk-card-default'); - removeClassFromClass('ui-widget-content', 'dark'); + $('html').css('background', ''); + $('body').removeClass('uk-light'); + $('.uk-card').removeClass('uk-card-secondary'); + $('.uk-card').addClass('uk-card-default'); + $('.ui-widget-content').removeClass('dark'); } }; @@ -69,10 +41,3 @@ const styleModal = () => { // do it before document is ready to prevent the initial flash of white setTheme(getTheme()); - -document.addEventListener('DOMContentLoaded', () => { - // because this script is attached at the top of HTML, the style on uk-card - // won't be applied because the elements are not available yet. We have to - // apply the theme again for it to take effect - setTheme(getTheme()); -}, false); diff --git a/src/views/layout.ecr b/src/views/layout.ecr index cf1853b..68d0498 100644 --- a/src/views/layout.ecr +++ b/src/views/layout.ecr @@ -10,10 +10,11 @@ + + -
@@ -59,7 +60,9 @@ <%= content %>
- +