From 7d70ad834c86379f4c54ab99ca7658c2b00cd4b7 Mon Sep 17 00:00:00 2001 From: Jeremy Watt Date: Fri, 13 Dec 2024 07:00:46 -0700 Subject: [PATCH 1/2] cleanup --- index.html | 2 +- src/js/theme.js | 10 +++++++--- src/partials/nav.html | 43 +++++++++++++++++++------------------------ tailwind.config.js | 6 ++++++ 4 files changed, 33 insertions(+), 28 deletions(-) diff --git a/index.html b/index.html index 788b509..c420f7d 100644 --- a/index.html +++ b/index.html @@ -22,7 +22,7 @@ /> Meme Search - + diff --git a/src/js/theme.js b/src/js/theme.js index 22a087e..c7ccf1f 100644 --- a/src/js/theme.js +++ b/src/js/theme.js @@ -1,12 +1,14 @@ +document.documentElement.classList.add("dark"); + // set icon visibility function iconVisibility(toggle, label) { const toggleLabelClasses = label.classList; if (toggle.checked) { - toggleLabelClasses.remove("fa-sun"); - toggleLabelClasses.add("fa-moon"); - } else { toggleLabelClasses.remove("fa-moon"); toggleLabelClasses.add("fa-sun"); + } else { + toggleLabelClasses.remove("fa-sun"); + toggleLabelClasses.add("fa-moon"); } } @@ -18,6 +20,8 @@ document.addEventListener("DOMContentLoaded", () => { // initial setting iconVisibility(themeToggle, toggleLabel); + themeToggle.checked = true; + document.documentElement.classList.toggle("dark", themeToggle.checked); // form event handler themeToggle.addEventListener("change", () => { diff --git a/src/partials/nav.html b/src/partials/nav.html index 5b04aa8..6da2e56 100644 --- a/src/partials/nav.html +++ b/src/partials/nav.html @@ -62,52 +62,46 @@ class="flex flex-1 items-center justify-center sm:items-stretch sm:justify-start" id="menu-div" > -
- Meme Search emoji +
+ + +
- -
@@ -118,6 +112,7 @@ name="toggle" id="theme-toggle" class="toggle-checkbox absolute block w-6 h-6 rounded-full bg-white border-4 appearance-none cursor-pointer" + checked="true" />