From 2588ef972908773ce9b0849c4180b787652f05b7 Mon Sep 17 00:00:00 2001 From: Musselman Date: Thu, 30 Nov 2023 01:32:08 -0600 Subject: [PATCH] Add dark mode --- static/build/darkmode.js | 33 +++++++++++++++++++++++++ templates/edit.html | 52 ++++++++++++++++++---------------------- templates/index.html | 16 +++++++++---- templates/list.html | 3 ++- templates/newuser.html | 4 +++- 5 files changed, 72 insertions(+), 36 deletions(-) create mode 100644 static/build/darkmode.js diff --git a/static/build/darkmode.js b/static/build/darkmode.js new file mode 100644 index 0000000..d8b9d93 --- /dev/null +++ b/static/build/darkmode.js @@ -0,0 +1,33 @@ +// Check if user preference for dark mode is stored in a cookie +let darkModeEnabled = (document.cookie.indexOf('darkModeEnabled=true') !== -1); + +// Apply dark mode based on the user's preference +function applyDarkMode() { + const theme = darkModeEnabled ? "dark" : "light"; + document.documentElement.setAttribute("data-bs-theme", theme); + + // Change the icon based on the theme + const icon = darkModeEnabled ? "fa-sun" : "fa-moon"; + const iconElement = document.getElementById("darkModeIcon"); + iconElement.classList.remove(darkModeEnabled ? "fa-moon" : "fa-sun"); + iconElement.classList.add(icon); +} + +// Toggle dark mode and store the preference in a cookie +function toggleDarkMode() { + darkModeEnabled = !darkModeEnabled; + const expirationDate = new Date(); + expirationDate.setFullYear(expirationDate.getFullYear() + 1); + const cookieValue = `darkModeEnabled=${darkModeEnabled}; expires=${expirationDate.toUTCString()}`; + document.cookie = cookieValue; + applyDarkMode(); +} + +// Add event listener to the toggle button if it exists +const darkModeButton = document.getElementById("darkModeButton"); +if (darkModeButton) { + darkModeButton.addEventListener("click", toggleDarkMode); +} + +// Apply dark mode on page load +applyDarkMode(); diff --git a/templates/edit.html b/templates/edit.html index 2fc65f9..01d65a3 100644 --- a/templates/edit.html +++ b/templates/edit.html @@ -1,15 +1,12 @@ - + Edit File - - + href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"> @@ -65,49 +62,45 @@ onclick="formatText('heading', 'h6')">Heading 6 - - - - - - - + + - - - + + - - - + - - + - +
- - - + +
@@ -203,6 +196,7 @@ }); } + diff --git a/templates/index.html b/templates/index.html index b6bc51a..173c88e 100644 --- a/templates/index.html +++ b/templates/index.html @@ -1,20 +1,21 @@ - + Notatio + - -