From 6de81a21576276c8c39a48ec1fe71ef1256298ed Mon Sep 17 00:00:00 2001 From: lasersPew <87552756+lasersPew@users.noreply.github.com> Date: Mon, 14 Oct 2024 06:21:46 +0800 Subject: [PATCH] Changed Navbar text to icons Changed theme toggle to button --- metatube/static/CSS/libraries/dark.css | 72 +++++++++- metatube/static/JS/dark.js | 30 ++++ metatube/templates/base.html | 53 +++++-- metatube/templates/settings.html | 184 +++++++++++++------------ 4 files changed, 238 insertions(+), 101 deletions(-) create mode 100644 metatube/static/JS/dark.js diff --git a/metatube/static/CSS/libraries/dark.css b/metatube/static/CSS/libraries/dark.css index 9faff371..26020d55 100644 --- a/metatube/static/CSS/libraries/dark.css +++ b/metatube/static/CSS/libraries/dark.css @@ -1,3 +1,45 @@ +.sun-and-moon { + pointer-events: none; +} +.icons { + width: 1.5rem; + height: 1.5rem; + fill: #454D54; +} + +[data-theme="dark"] .icons { + fill: #e8eaed; +} +[data-theme="dark"] .icons:hover { + fill: #251619; +} + +@import "https://unpkg.com/open-props/easings.min.css"; + +.sun-and-moon > :is(.moon, .sun, .sun-beams) { + transform-origin: center; +} + +.sun-and-moon > :is(.moon, .sun) { + fill: var(--icon-fill); +} + +.theme-toggle:is(:hover, :focus-visible) > .sun-and-moon > :is(.moon, .sun) { + fill: var(--icon-fill-hover); +} + +.sun-and-moon > .sun-beams { + stroke: var(--icon-fill); + stroke-width: 2px; +} + +.theme-toggle:is(:hover, :focus-visible) .sun-and-moon > .sun-beams { + stroke: var(--icon-fill-hover); +} + + + + [data-theme="dark"] { background-color: #111 !important; color: #eee; @@ -7,7 +49,7 @@ color: #8dc6ff; } -[data-theme="dark"] .darkanchor:hover { +[data-theme="dark"] svg:hover { color: #fff; } @@ -78,4 +120,32 @@ [data-theme="dark"] .modal-content, [data-theme="dark"] .modal-footer { border-color: #222; +} + +svg { + fill: rgba(0,0,0,.5) +} + +[data-theme="dark"] .svg { + fill: #ebe9fc; +} + +button { + background: none; + color: inherit; + border: none; + padding: 0; + font: inherit; + cursor: pointer; + outline: inherit; +} +svg[xmlns] { + width: 24px; + height: 24px; +} +.nav-link { + color: inherit; +} +.tab-content { + margin-top: 1rem; } \ No newline at end of file diff --git a/metatube/static/JS/dark.js b/metatube/static/JS/dark.js new file mode 100644 index 00000000..f13649b9 --- /dev/null +++ b/metatube/static/JS/dark.js @@ -0,0 +1,30 @@ +function dark() { + // Get the dark mode switch element by its ID + var isDarkModeEnabled, darkSwitch = document.getElementById("darkSwitch"); + // Check if the dark mode switch exists in the DOM + if (darkSwitch) { + // Determine if dark mode was previously enabled by checking localStorage + isDarkModeEnabled = localStorage.getItem("theme") === "dark"; + // Set the checkbox state based on whether dark mode was previously enabled + darkSwitch.checked = isDarkModeEnabled; + // Apply or remove the "dark" theme based on the checkbox state + if (isDarkModeEnabled) { + document.body.setAttribute("data-theme", "dark"); + } else { + document.body.removeAttribute("data-theme"); + } + // Add an event listener to the switch for handling user changes + darkSwitch.addEventListener("click", function () { + if (document.body.getAttribute("data-theme") === "dark") { + // If the switch is unchecked, disable dark mode + document.body.removeAttribute("data-theme"); + localStorage.removeItem("theme"); // Remove the preference from localStorage + } else { + // If the switch is checked, enable dark mode + document.body.setAttribute("data-theme", "dark"); + localStorage.setItem("theme", "dark"); // Save the preference in localStorage + } + }); + } +} +dark(); \ No newline at end of file diff --git a/metatube/templates/base.html b/metatube/templates/base.html index 390da7a9..210a6d95 100644 --- a/metatube/templates/base.html +++ b/metatube/templates/base.html @@ -15,22 +15,49 @@ -