Merge pull request #284 from leepeuker/add-dark-mode

Add dark mode

public/css/bootstrap-icons-1.10.2.css

@@ -26,11 +26,13 @@ url("../fonts/bootstrap-icons.woff?24e3eb84d0bcaf83d77f904c78ac1f47") format("wo
 .bi-check-circle-fill::before { content: "\f26a"; }
 .bi-chevron-down::before { content: "\f282"; }
 .bi-chevron-up::before { content: "\f286"; }
+.bi-moon-fill::before { content: "\f494"; }
 .bi-pencil-square::before { content: "\f4ca"; }
 .bi-search::before { content: "\f52a"; }
 .bi-star::before { content: "\f588"; }
 .bi-star-fill::before { content: "\f586"; }
 .bi-star-half::before { content: "\f587"; }
+.bi-sun::before { content: "\f5a2"; }
 .bi-trash-fill::before { content: "\f5dd"; }
 .bi-three-dots-vertical::before { content: "\f5d3"; }
 .bi-x-circle-fill::before { content: "\f622"; }

public/css/dashboard.css

@@ -13,12 +13,14 @@
 
 .activeItemButton {
     cursor: pointer;
-    background-color: #e9ecef;
+}
+
+.activeItemButtonActiveLight {
+    background-color: #ebeef1;
 }
 
 .inactiveItemButton {
     cursor: pointer;
-    background-color: #fff;
 }
 
 .activeItem {

public/js/app.js

@@ -348,3 +348,67 @@ new Datepicker(document.getElementById('logPlayModalWatchDateInput'), {
     format: document.getElementById('dateFormatJavascript').value,
     title: 'Watch date',
 })
+
+function toggleThemeSwitch() {
+    if (document.getElementById('darkModeInput').checked === true) {
+        setTheme('dark')
+
+        return
+    }
+
+    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');
+            }
+        });
+    }
+}

public/js/dashboard.js

@@ -1,18 +1,22 @@
 function toggleButton (element) {
 	if (element.nextElementSibling.classList.contains("inactiveItem") == true) {
-		// element.classList.remove("active");
 		element.nextElementSibling.classList.remove("inactiveItem");
 		element.nextElementSibling.classList.add("activeItem");
 		element.classList.remove("inactiveItemButton");
 		element.classList.add("activeItemButton");
 
+		if (document.getElementById('html').dataset.bsTheme === 'dark') {
+			element.classList.add("text-white");
+		} else {
+			element.classList.add("activeItemButtonActiveLight");
+		}
+
 		element.getElementsByClassName("bi")[0].classList.remove("bi-chevron-down");
 		element.getElementsByClassName("bi")[0].classList.add("bi-chevron-up");
 	} else {
-		// element.classList.add("active");
 		element.nextElementSibling.classList.remove("activeItem");
 		element.nextElementSibling.classList.add("inactiveItem");
-		element.classList.remove("activeItemButton");
+		element.classList.remove("activeItemButton", "text-white", "activeItemButtonActiveLight");
 		element.classList.add("inactiveItemButton");
 
 		element.getElementsByClassName("bi")[0].classList.remove("bi-chevron-up");

templates/base.html.twig

@@ -1,9 +1,9 @@
 <!DOCTYPE html>
-<html>
+<html id="html" data-bs-theme="light">
 <head>
     <meta charset="UTF-8">
     <title>{% block title %}{% endblock %}</title>
-    <link href="/css/bootstrap-5.2.3.min.css" rel="stylesheet">
+    <link href="/css/bootstrap.min.css" rel="stylesheet">
     <link rel="shortcut icon" href="/images/favicon.ico" type="image/x-icon">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="manifest" href="/manifest.json">
@@ -22,7 +22,7 @@
 {% block body %}{% endblock %}
 
 <script src="/js/jquery-3.3.1.js"></script>
-<script src="/js/bootstrap-5.2.3.bundle.min.js"></script>
+<script src="/js/bootstrap.bundle.min.js"></script>
 <script src="/js/datepicker-full-1.2.0.min.js"></script>
 <script src="/js/app.js"></script>
 

templates/component/navbar.html.twig

@@ -48,6 +48,13 @@
                 {% else %}
                     <li><a class="dropdown-item" href="/login">Login</a></li>
                 {% endif %}
+                <li>
+                    <hr class="dropdown-divider">
+                </li>
+                <div class="form-check form-switch" style="margin-left: 1rem">
+                    <input class="form-check-input" type="checkbox" onclick="toggleThemeSwitch()" role="switch" id="darkModeInput">
+                    <label class="form-check-label" for="darkModeInput">Dark Mode</label>
+                </div>
             </ul>
             {% if loggedIn == true %}</div>{% endif %}
     </div>

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">
+            <div class="row justify-content-md-center" 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">
+            <div class="row justify-content-md-center" id="playStatsDiv2">
                 <div class="col ">
                     <span class="stat-value">{{ averagePlaysPerDay }}</span><br><span class="stat-description">PLAYS PER DAY</span>
                 </div>
@@ -47,7 +47,7 @@
             <hr>
 
             <div class="list-group">
-                <li class="list-group-item list-group-item-action user-select-none activeItemButton clearfix" onclick="toggleButton(this)">
+                <li class="list-group-item list-group-item-action user-select-none activeItemButton" onclick="toggleButton(this)">
                     Last Plays
                     <i class="bi bi-chevron-up float-end"></i>
                 </li>
@@ -78,7 +78,7 @@
                     <a class="btn btn-outline-secondary btn-sm" href="/users/{{ routeUsername }}/history" style="margin-bottom: 1rem;width: 100%;border-color: lightgrey">more</a>
                 </li>
 
-                <li class="list-group-item list-group-item-action user-select-none inactiveItemButton clearfix" onclick="toggleButton(this)">
+                <li class="list-group-item list-group-item-action user-select-none inactiveItemButton" onclick="toggleButton(this)">
                     Most watched Actors
                     <i class="bi bi-chevron-down float-end"></i>
                 </li>
@@ -105,7 +105,7 @@
                 </li>
 
 
-                <li class="list-group-item list-group-item-action user-select-none inactiveItemButton clearfix" onclick="toggleButton(this)">
+                <li class="list-group-item list-group-item-action user-select-none inactiveItemButton" onclick="toggleButton(this)">
                     Most watched Actresses
                     <i class="bi bi-chevron-down float-end"></i>
                 </li>
@@ -131,7 +131,7 @@
                        style="margin-bottom: 1rem;width: 100%;border-color: lightgrey">more</a>
                 </li>
 
-                <li class="list-group-item list-group-item-action user-select-none inactiveItemButton clearfix" onclick="toggleButton(this)">
+                <li class="list-group-item list-group-item-action user-select-none inactiveItemButton" onclick="toggleButton(this)">
                     Most watched Directors
                     <i class="bi bi-chevron-down float-end"></i>
                 </li>
@@ -157,7 +157,7 @@
                     </div>
                 </li>
 
-                <li class="list-group-item list-group-item-action user-select-none inactiveItemButton clearfix" onclick="toggleButton(this)">
+                <li class="list-group-item list-group-item-action user-select-none inactiveItemButton" onclick="toggleButton(this)">
                     Most watched Genres
                     <i class="bi bi-chevron-down float-end"></i>
                 </li>
@@ -182,7 +182,7 @@
                     </div>
                 </li>
 
-                <li class="list-group-item list-group-item-action user-select-none inactiveItemButton clearfix" onclick="toggleButton(this)">
+                <li class="list-group-item list-group-item-action user-select-none inactiveItemButton" onclick="toggleButton(this)">
                     Most watched Languages
                     <i class="bi bi-chevron-down float-end"></i>
                 </li>
@@ -207,7 +207,7 @@
                     </div>
                 </li>
 
-                <li class="list-group-item list-group-item-action user-select-none inactiveItemButton clearfix" onclick="toggleButton(this)">
+                <li class="list-group-item list-group-item-action user-select-none inactiveItemButton" onclick="toggleButton(this)">
                     Most watched Production Companies
                     <i class="bi bi-chevron-down float-end"></i>
                 </li>
@@ -230,7 +230,7 @@
                     </div>
                 </li>
 
-                <li class="list-group-item list-group-item-action user-select-none inactiveItemButton clearfix" onclick="toggleButton(this)">
+                <li class="list-group-item list-group-item-action user-select-none inactiveItemButton" onclick="toggleButton(this)">
                     Most watched Release Years
                     <i class="bi bi-chevron-down float-end"></i>
                 </li>

templates/page/job-queue.html.twig

@@ -54,7 +54,7 @@
 
         {% if jobs|length == 0 %}<p>No jobs in history</p>{% endif %}
         <div class="d-grid gap-2">
-            <a class="btn btn-warning" type="button" href="/job-queue/purge-processed"
+            <a class="btn btn-outline-warning" type="button" href="/job-queue/purge-processed"
                 onclick="return confirm('Are you sure you want to purge all jobs with status `done` and `waiting`?')"> Purge processed jobs</a>
             <a class="btn btn-outline-danger" type="button" href="/job-queue/purge-all"
                onclick="return confirm('Are you sure you want to purge all jobs? This will not stop currently running jobs, it will just delete their queue entries.')">Purge all jobs</a>

templates/page/movie.html.twig

@@ -121,7 +121,7 @@
 
         <div class="container text-center" style="display: none;" id="watchDatesListDiv">
             <div class="row">
-                <ul class="list-group col-lg-5 col-xl-4 col-xxl-3 " style="padding-right: 0">
+                <ul class="list-group col-lg-5 col-xl-4 col-xxl-3" style="padding-right: 0">
                     {% for watchDate in watchDates|reverse %}
                         <li class="list-group-item {% if currentUsername == routeUsername %}list-group-item-action{% endif %}"
                             style="text-align: center;{% if currentUsername == routeUsername %}cursor: pointer;{% endif %}position:relative;"
@@ -140,14 +140,22 @@
         {% if currentUsername == routeUsername %}
             <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"
+                    <button type="button"
+                            class="col-lg-5 col-xl-4 col-xxl-3 btn btn-outline-dark"
+                            id="logSpecificMovieButton"
                             onclick="showLogPlayModalWithSpecificMovie({{ movie.tmdbId }}, '{{ movie.title }}')">Log play
                     </button>
                 </div>
             </div>
             <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-sm btn-outline-dark" data-bs-toggle="modal" data-bs-target="#moreModal">More</button>
+                    <button type="button"
+                            id="moreSpecificMovieButton"
+                            class="col-lg-5 col-xl-4 col-xxl-3 btn btn-sm btn-outline-dark"
+                            data-bs-toggle="modal"
+                            data-bs-target="#moreModal">
+                        More
+                    </button>
                 </div>
             </div>
 

templates/page/settings-account.html.twig

@@ -78,7 +78,7 @@
 
             <hr style="margin: 0;padding: 0">
 
-            <div style="background-color: #F8F8F8;padding-top: 1rem;padding-bottom: 1rem">
+            <div style="padding-top: 1rem;padding-bottom: 1rem">
                 <h5>Change password</h5>
                 <p class="text-muted">Must be at least 8 characters long.</p>
                 <form action="/settings/account/password" method="post">
@@ -183,7 +183,7 @@
 
             <hr style="margin: 0;padding: 0">
 
-            <div style="background-color: #F8F8F8;padding-top: 1rem;padding-bottom: 0.1rem">
+            <div style="padding-top: 1rem;padding-bottom: 0.1rem">
 
                 <h5>Delete your data</h5>