diff --git a/components/Header/DesktopNav.module.css b/components/Header/DesktopNav.module.css
index 1a75d59eb..87a452953 100644
--- a/components/Header/DesktopNav.module.css
+++ b/components/Header/DesktopNav.module.css
@@ -1,12 +1,12 @@
-a.light[href],
-a.dark[href] {
+.light.light[class],
+.dark.dark[class] {
   @apply hover:text-primary focus:text-primary;
 }
 
-a.light[href] {
+.light.light[class] {
   @apply text-light;
 }
 
-a.dark[href] {
+.dark.dark[class] {
   @apply text-dark;
 }
diff --git a/components/Header/DesktopNav.tsx b/components/Header/DesktopNav.tsx
index 2686d2054..3100f1cbd 100644
--- a/components/Header/DesktopNav.tsx
+++ b/components/Header/DesktopNav.tsx
@@ -66,9 +66,9 @@ const DesktopNav = ({ fixed, posts }: Props): JSX.Element => (
         key: 'theme',
         label: (
           <ThemeSwitch
-            className={cx('dark:text-light', {
-              'text-light': !fixed,
-              'text-dark': fixed,
+            className={cx('dark-menu-link', {
+              [styles.light]: !fixed,
+              [styles.dark]: fixed,
             })}
           />
         ),
diff --git a/components/Header/__snapshots__/Header.test.tsx.snap b/components/Header/__snapshots__/Header.test.tsx.snap
index f19dbddd1..057c32658 100644
--- a/components/Header/__snapshots__/Header.test.tsx.snap
+++ b/components/Header/__snapshots__/Header.test.tsx.snap
@@ -330,7 +330,7 @@ exports[`Header should render correctly (snapshot) 1`] = `
             >
               <span
                 aria-label="sun"
-                class="anticon dark:text-light text-light"
+                class="anticon dark-menu-link light"
                 role="img"
               >
                 <svg
diff --git a/layouts/__snapshots__/Layout.test.tsx.snap b/layouts/__snapshots__/Layout.test.tsx.snap
index 7bc084251..352b1ed93 100644
--- a/layouts/__snapshots__/Layout.test.tsx.snap
+++ b/layouts/__snapshots__/Layout.test.tsx.snap
@@ -333,7 +333,7 @@ exports[`Layout should render correctly (snapshot) 1`] = `
               >
                 <span
                   aria-label="sun"
-                  class="anticon dark:text-light text-light"
+                  class="anticon dark-menu-link light"
                   role="img"
                 >
                   <svg
diff --git a/layouts/__snapshots__/PostLayout.test.tsx.snap b/layouts/__snapshots__/PostLayout.test.tsx.snap
index a0669cc7a..3ccd7c146 100644
--- a/layouts/__snapshots__/PostLayout.test.tsx.snap
+++ b/layouts/__snapshots__/PostLayout.test.tsx.snap
@@ -333,7 +333,7 @@ exports[`PostLayout should render correctly (snapshot) 1`] = `
               >
                 <span
                   aria-label="sun"
-                  class="anticon dark:text-light text-light"
+                  class="anticon dark-menu-link light"
                   role="img"
                 >
                   <svg
diff --git a/styles/globals.css b/styles/globals.css
index 063a1588e..5b52d76db 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -105,7 +105,7 @@
     @apply focus-visible:outline-dashed focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-secondary;
   }
 
-  a.dark-menu-link[href] {
+  .dark-menu-link.dark-menu-link[class] {
     @apply dark:text-light dark:hover:text-primary dark:focus:text-primary;
   }
 }