From 16f13263d693aec433b55548eb367deb463b6786 Mon Sep 17 00:00:00 2001
From: eggy <eggyrules@gmail.com>
Date: Sun, 7 Aug 2022 21:45:53 -0400
Subject: [PATCH] fix: images in dark mode

---
 components/HamburgerMenu.vue | 15 +++++++++++++++
 components/Navbar.vue        |  7 ++++++-
 2 files changed, 21 insertions(+), 1 deletion(-)

diff --git a/components/HamburgerMenu.vue b/components/HamburgerMenu.vue
index 23a78b4..4769be5 100644
--- a/components/HamburgerMenu.vue
+++ b/components/HamburgerMenu.vue
@@ -136,9 +136,24 @@ html.dark .drawer {
 .drawer li a {
   /* overwrite tailwind */
   text-decoration: none;
+  border-radius: 0.5rem;
   width: 100%;
 }
 
+.drawer li a:hover,
+.drawer li a:active {
+  --drawer-active-color: lightgray;
+  background: var(--drawer-active-color);
+}
+
+html.dark .drawer li a {
+  --drawer-active-color: darkslategray;
+}
+
+html.dark .drawer img {
+  filter: invert(1); /* brightness didn't work */
+}
+
 /* hamburger animation */
 
 .ham {
diff --git a/components/Navbar.vue b/components/Navbar.vue
index eef44e9..323fdb1 100644
--- a/components/Navbar.vue
+++ b/components/Navbar.vue
@@ -38,6 +38,10 @@ html.dark nav {
   --nav-drop-color: black;
 }
 
+html.dark nav img {
+  filter: invert(1);
+}
+
 ul {
   display: flex;
   align-items: center;
@@ -61,7 +65,8 @@ li.home-text {
   --trans: 0.2s ease;
   --box-trans-time: 0.4s;
   transition: opacity var(--trans), transform var(--trans), gap var(--trans),
-    width var(--trans), box-shadow var(--box-trans-time) ease;
+    width var(--trans), box-shadow var(--box-trans-time) ease,
+    filter var(--trans);
 }
 
 @media screen and (max-width: 600px) {