Merge pull request #287 from leepeuker/fix-dark-mode-flickering

Fix issue with dark mode flickering when changing pages
leepeuker · Feb 24, 2023 · dbb4042 · dbb4042
2 parents 283264b + 059c991
commit dbb4042
Show file tree

Hide file tree

Showing 5 changed files with 94 additions and 72 deletions.
diff --git a/public/js/app.js b/public/js/app.js
@@ -9,6 +9,89 @@ if ('serviceWorker' in navigator) {
 
 let ratingEditMode = false
 
+document.addEventListener('DOMContentLoaded', function () {
+    const theme = document.cookie.split('; ').find((row) => row.startsWith('theme='))?.split('=')[1] ?? 'light';
+    document.getElementById('darkModeInput').checked = theme !== 'light'
+
+    const logPlayModalSearchInput = document.getElementById('logPlayModalSearchInput');
+    if (logPlayModalSearchInput != null) {
+        logPlayModalSearchInput.addEventListener('change', updateLogPlayModalButtonState);
+        document.getElementById('logPlayModalSearchInput').addEventListener('input', updateLogPlayModalButtonState);
+        document.getElementById('logPlayModalSearchInput').addEventListener('keypress', loadLogModalSearchResultsOnEnterPress);
+
+        new Datepicker(document.getElementById('logPlayModalWatchDateInput'), {
+            format: document.getElementById('dateFormatJavascript').value,
+            title: 'Watch date',
+        })
+
+        document.getElementById('logPlayModal').addEventListener('show.bs.modal', function () {
+            document.getElementById('logPlayModalWatchDateInput').value = getCurrentDate()
+        })
+
+        document.getElementById('logPlayModal').addEventListener('hidden.bs.modal', function () {
+            document.getElementById('logPlayModalSearchInput').value = ''
+            resetLogModalLogInputs()
+            resetLogModalSearchResults()
+            backToLogModalSearchResults()
+        })
+    }
+});
+
+function setTheme(theme, force = false) {
+    const htmlTag = document.getElementById('html');
+
+    if (force === false && htmlTag.dataset.bsTheme === theme) {
+        return
+    }
+
+    let cookieDate = new Date;
+    cookieDate.setFullYear(cookieDate.getFullYear() + 1);
+    document.cookie = 'theme=' + theme + ';path=/;expires=' + cookieDate.toUTCString() + ';'
+
+    htmlTag.dataset.bsTheme = theme
+
+    if (theme === 'light') {
+        updateHtmlThemeColors('light', 'dark')
+
+        return;
+    }
+
+    updateHtmlThemeColors('dark', 'light')
+}
+
+function updateHtmlThemeColors(mainColor, secondaryColor) {
+    const logSpecificMovieButton = document.getElementById('logSpecificMovieButton');
+    const moreSpecificMovieButton = document.getElementById('moreSpecificMovieButton');
+    const toggleWatchDatesButton = document.getElementById('toggleWatchDatesButton');
+    if (logSpecificMovieButton != null && moreSpecificMovieButton != null && toggleWatchDatesButton != null) {
+        toggleWatchDatesButton.classList.add('btn-' + secondaryColor)
+        toggleWatchDatesButton.classList.remove('btn-' + mainColor)
+        logSpecificMovieButton.classList.add('btn-outline-' + secondaryColor)
+        logSpecificMovieButton.classList.remove('btn-outline-' + mainColor)
+        moreSpecificMovieButton.classList.add('btn-outline-' + secondaryColor)
+        moreSpecificMovieButton.classList.remove('btn-outline-' + mainColor)
+    }
+
+    const playStatsDiv1 = document.getElementById('playStatsDiv1');
+    const playStatsDiv2 = document.getElementById('playStatsDiv2');
+    if (playStatsDiv1 != null && playStatsDiv2 != null) {
+        playStatsDiv1.classList.add('text-' + secondaryColor)
+        playStatsDiv1.classList.remove('text-' + mainColor)
+        playStatsDiv2.classList.add('text-' + secondaryColor)
+        playStatsDiv2.classList.remove('text-' + mainColor)
+
+        document.querySelectorAll('.activeItemButton').forEach((element) => {
+            if (mainColor === 'dark') {
+                element.classList.add('text-white');
+                element.classList.remove('activeItemButtonActiveLight');
+            } else {
+                element.classList.remove('text-white');
+                element.classList.add('activeItemButtonActiveLight');
+            }
+        });
+    }
+}
+
 async function searchTmdbWithLogModalSearchInput() {
     resetLogModalSearchResults()
     document.getElementById('logPlayModalSearchSpinner').classList.remove('d-none')
@@ -147,17 +230,6 @@ function loadLogModalSearchResultsOnEnterPress(event) {
     }
 }
 
-document.getElementById('logPlayModal').addEventListener('show.bs.modal', function () {
-    document.getElementById('logPlayModalWatchDateInput').value = getCurrentDate()
-})
-
-document.getElementById('logPlayModal').addEventListener('hidden.bs.modal', function () {
-    document.getElementById('logPlayModalSearchInput').value = ''
-    resetLogModalLogInputs()
-    resetLogModalSearchResults()
-    backToLogModalSearchResults()
-})
-
 function resetLogModalLogInputs() {
     document.getElementById('logPlayModalTmdbIdInput').value = ''
     document.getElementById('logPlayModalWatchDateInput').value = getCurrentDate()
@@ -358,57 +430,3 @@ function toggleThemeSwitch() {
 
     setTheme('light')
 }
-
-setTheme(window.localStorage.getItem('theme') ?? 'light', true)
-
-function setTheme(theme, force = false) {
-    if (force === false && document.getElementById('html').dataset.bsTheme === theme) {
-        return
-    }
-
-    window.localStorage.setItem('theme', theme);
-    document.getElementById('html').dataset.bsTheme = theme
-
-    if (theme === 'light') {
-        updateHtmlThemeColors('light', 'dark')
-
-        return;
-    }
-
-    updateHtmlThemeColors('dark', 'light')
-}
-
-function updateHtmlThemeColors(mainColor, secondaryColor) {
-    document.getElementById('darkModeInput').checked = mainColor === "dark"
-
-    const logSpecificMovieButton = document.getElementById('logSpecificMovieButton');
-    const moreSpecificMovieButton = document.getElementById('moreSpecificMovieButton');
-    const toggleWatchDatesButton = document.getElementById('toggleWatchDatesButton');
-    if (logSpecificMovieButton != null && moreSpecificMovieButton != null && toggleWatchDatesButton != null) {
-        toggleWatchDatesButton.classList.add('btn-' + secondaryColor)
-        toggleWatchDatesButton.classList.remove('btn-' + mainColor)
-        logSpecificMovieButton.classList.add('btn-outline-' + secondaryColor)
-        logSpecificMovieButton.classList.remove('btn-outline-' + mainColor)
-        moreSpecificMovieButton.classList.add('btn-outline-' + secondaryColor)
-        moreSpecificMovieButton.classList.remove('btn-outline-' + mainColor)
-    }
-
-    const playStatsDiv1 = document.getElementById('playStatsDiv1');
-    const playStatsDiv2 = document.getElementById('playStatsDiv2');
-    if (playStatsDiv1 != null && playStatsDiv2 != null) {
-        playStatsDiv1.classList.add('text-' + secondaryColor)
-        playStatsDiv1.classList.remove('text-' + mainColor)
-        playStatsDiv2.classList.add('text-' + secondaryColor)
-        playStatsDiv2.classList.remove('text-' + mainColor)
-
-        document.querySelectorAll('.activeItemButton').forEach((element) => {
-            if (mainColor === 'dark') {
-                element.classList.add('text-white');
-                element.classList.remove('activeItemButtonActiveLight');
-            } else {
-                element.classList.remove('text-white');
-                element.classList.add('activeItemButtonActiveLight');
-            }
-        });
-    }
-}
diff --git a/src/Factory.php b/src/Factory.php
@@ -276,6 +276,7 @@ public static function createTwigEnvironment(ContainerInterface $container) : Tw
         $twig->addGlobal('dateFormatPhp', $dateFormatPhp);
         $twig->addGlobal('dateFormatJavascript', $dataFormatJavascript);
         $twig->addGlobal('requestUrlPath', self::createCurrentHttpRequest()->getPath());
+        $twig->addGlobal('theme', $_COOKIE['theme'] ?? 'light');
 
         return $twig;
     }

diff --git a/templates/base.html.twig b/templates/base.html.twig
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html id="html" data-bs-theme="light">
+<html id="html" data-bs-theme="{{ theme }}">
 <head>
     <meta charset="UTF-8">
     <title>{% block title %}{% endblock %}</title>

diff --git a/templates/page/dashboard.html.twig b/templates/page/dashboard.html.twig
@@ -20,7 +20,7 @@
             {{ include('component/user-select.html.twig') }}
 
             <h2 style="padding-bottom: 0.5rem">Overview</h2>
-            <div class="row justify-content-md-center" id="playStatsDiv1">
+            <div class="row justify-content-md-center {{ theme == 'dark' ? 'text-light' : 'text-dark' }}" id="playStatsDiv1">
                 <div class="col ">
                     <span class="stat-value">{{ totalPlayCount }}</span><br><span class="stat-description">TOTAL PLAYS</span>
                 </div>
@@ -32,7 +32,7 @@
                 </div>
             </div>
             <br>
-            <div class="row justify-content-md-center" id="playStatsDiv2">
+            <div class="row justify-content-md-center {{ theme == 'dark' ? 'text-light' : 'text-dark' }}" id="playStatsDiv2">
                 <div class="col ">
                     <span class="stat-value">{{ averagePlaysPerDay }}</span><br><span class="stat-description">PLAYS PER DAY</span>
                 </div>
@@ -47,7 +47,8 @@
             <hr>
 
             <div class="list-group">
-                <li class="list-group-item list-group-item-action user-select-none activeItemButton" onclick="toggleButton(this)">
+                <li class="list-group-item list-group-item-action user-select-none activeItemButton {{ theme == 'dark' ? 'text-white' : 'activeItemButtonActiveLight' }}"
+                    onclick="toggleButton(this)">
                     Last Plays
                     <i class="bi bi-chevron-up float-end"></i>
                 </li>

diff --git a/templates/page/movie.html.twig b/templates/page/movie.html.twig
@@ -112,7 +112,9 @@
 
         <div class="container text-center" id="toggleWatchDatesButtonDiv" style="margin-bottom: 0.5rem">
             <div class="row">
-                <button type="button" class="col-lg-5 col-xl-4 col-xxl-3 btn btn-dark" onclick="toggleWatchDates()" id="toggleWatchDatesButton"
+                <button type="button" class="col-lg-5 col-xl-4 col-xxl-3 btn {{ theme == 'dark' ? 'btn-light' : 'btn-dark' }}"
+                        onclick="toggleWatchDates()"
+                        id="toggleWatchDatesButton"
                         {% if totalPlays == 0 %}disabled{% endif %}>
                     {{ totalPlays }}x Play{% if totalPlays == 0 or totalPlays > 1 %}s{% endif %} <span style="font-size: 0.8rem">- View all</span>
                 </button>
@@ -141,7 +143,7 @@
             <div class="container" style="margin-bottom: 0.5rem">
                 <div class="row">
                     <button type="button"
-                            class="col-lg-5 col-xl-4 col-xxl-3 btn btn-outline-dark"
+                            class="col-lg-5 col-xl-4 col-xxl-3 btn {{ theme == 'dark' ? 'btn-outline-light' : 'btn-outline-dark' }}"
                             id="logSpecificMovieButton"
                             onclick="showLogPlayModalWithSpecificMovie({{ movie.tmdbId }}, '{{ movie.title }}')">Log play
                     </button>
@@ -151,7 +153,7 @@
                 <div class="row">
                     <button type="button"
                             id="moreSpecificMovieButton"
-                            class="col-lg-5 col-xl-4 col-xxl-3 btn btn-sm btn-outline-dark"
+                            class="col-lg-5 col-xl-4 col-xxl-3 btn btn-sm {{ theme == 'dark' ? 'btn-outline-light' : 'btn-outline-dark' }}"
                             data-bs-toggle="modal"
                             data-bs-target="#moreModal">
                         More