From 36e2b2bfaf5bfacaee97c7413ce5420392676718 Mon Sep 17 00:00:00 2001 From: Alex Ling Date: Sat, 7 Mar 2020 02:51:08 +0000 Subject: [PATCH] Add dark mode support --- public/js/reader.js | 1 + public/js/theme.js | 76 ++++++++++++++++++++++++++++++++++++++++++++ public/js/title.js | 1 + src/views/layout.ecr | 9 +++--- src/views/login.ecr | 3 +- src/views/reader.ecr | 1 + 6 files changed, 86 insertions(+), 5 deletions(-) create mode 100644 public/js/theme.js diff --git a/public/js/reader.js b/public/js/reader.js index 11c0364..b681e26 100644 --- a/public/js/reader.js +++ b/public/js/reader.js @@ -60,6 +60,7 @@ $('#page-select').change(function(){ function showControl(idx) { $('#page-select').val(idx); UIkit.modal($('#modal-sections')).show(); + styleModal(); } function jumpTo(page) { var ary = window.location.pathname.split('/'); diff --git a/public/js/theme.js b/public/js/theme.js new file mode 100644 index 0000000..b23dff1 --- /dev/null +++ b/public/js/theme.js @@ -0,0 +1,76 @@ +const getTheme = () => { + var theme = localStorage.getItem('theme'); + if (!theme) theme = 'light'; + return theme; +}; + +const saveTheme = theme => { + localStorage.setItem('theme', theme); +}; + +const toggleTheme = () => { + const theme = getTheme(); + const newTheme = theme === 'dark' ? 'light' : 'dark'; + setTheme(newTheme); + 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'); + } + 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'); + } +}; + +const styleModal = () => { + const color = getTheme() === 'dark' ? '#222' : ''; + $('.uk-modal-header').css('background', color); + $('.uk-modal-body').css('background', color); + $('.uk-modal-footer').css('background', color); +}; + +// 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/public/js/title.js b/public/js/title.js index d309c1e..a9af970 100644 --- a/public/js/title.js +++ b/public/js/title.js @@ -30,6 +30,7 @@ function showModal(encodedPath, pages, percentage, encodedeTitle, encodedEntryTi }); UIkit.modal($('#modal')).show(); + styleModal(); } function updateProgress(titleID, entryID, page) { $.post('/api/progress/' + titleID + '/' + entryID + '/' + page, function(data) { diff --git a/src/views/layout.ecr b/src/views/layout.ecr index fc015d8..cf1853b 100644 --- a/src/views/layout.ecr +++ b/src/views/layout.ecr @@ -13,6 +13,7 @@ +
@@ -22,7 +23,7 @@
  • Admin
  • Download
    • -
    • +
  • Logout
    • @@ -44,15 +45,15 @@
    -
    +
    -
    +
    <%= content %> diff --git a/src/views/login.ecr b/src/views/login.ecr index 558fe94..ff56165 100644 --- a/src/views/login.ecr +++ b/src/views/login.ecr @@ -10,7 +10,8 @@ -
    + +
    diff --git a/src/views/reader.ecr b/src/views/reader.ecr index ae62192..aa0e884 100644 --- a/src/views/reader.ecr +++ b/src/views/reader.ecr @@ -11,6 +11,7 @@ +
    <%- urls.each_with_index do |url, i| -%>