diff --git a/src/components/icons/MailIcon.vue b/src/components/icons/MailIcon.vue
index 116497c..d616634 100644
--- a/src/components/icons/MailIcon.vue
+++ b/src/components/icons/MailIcon.vue
@@ -2,25 +2,13 @@
   <svg class="inline" width="1.5em" height="1.5em" viewBox="0 0 24 24" focusable="false">
     <path
       d="M22 6c0-1.1-.9-2-2-2H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6m-2 0l-8 5l-8-5h16m0 12H4V8l8 5l8-5v10z"
-      :fill="isDarkMode ? 'white' : 'black'"
+      fill="currentColor"
     />
   </svg>
 </template>
 
-<script lang="ts">
-import {computed, defineComponent, useContext} from "@nuxtjs/composition-api";
-
-export default defineComponent({
-  name: "GithubIcon",
-  setup() {
-    const {$colorMode} = useContext()
-    const isDarkMode = computed(() => {
-      return $colorMode.preference === 'dark'
-    })
-
-    return {
-      isDarkMode
-    }
-  }
-})
+<script>
+export default {
+  name: "MailIcon",
+}
 </script>
diff --git a/src/components/icons/TwitchIcon.vue b/src/components/icons/TwitchIcon.vue
index 44937a0..0998a71 100644
--- a/src/components/icons/TwitchIcon.vue
+++ b/src/components/icons/TwitchIcon.vue
@@ -2,33 +2,21 @@
   <svg class="inline" width="1.5em" height="1.5em" viewBox="0 0 256 256" focusable="false">
     <path
       d="M71.998 252A12 12 0 0 1 60 240v-28H48a20.022 20.022 0 0 1-20-20V48a20.022 20.022 0 0 1 20-20h160a20.022 20.022 0 0 1 20 20v108.253a19.946 19.946 0 0 1-7.197 15.365l-42.896 35.746A20.036 20.036 0 0 1 165.104 212h-40.759l-44.663 37.219A11.994 11.994 0 0 1 71.998 252zM52 188h20a12 12 0 0 1 12 12v14.38l26.093-21.744A20.036 20.036 0 0 1 122.896 188h40.759L204 154.379V52H52z"
-      :fill="isDarkMode ? 'white' : 'black'"
+      fill="currentColor"
     />
     <path
       d="M168 148a12 12 0 0 1-12-12V88a12 12 0 0 1 24 0v48a12 12 0 0 1-12 12z"
-      :fill="isDarkMode ? 'white' : 'black'"
+      fill="currentColor"
     />
     <path
       d="M120 148a12 12 0 0 1-12-12V88a12 12 0 0 1 24 0v48a12 12 0 0 1-12 12z"
-      :fill="isDarkMode ? 'white' : 'black'"
+      fill="currentColor"
     />
   </svg>
 </template>
 
-<script lang="ts">
-import {computed, defineComponent, useContext} from "@nuxtjs/composition-api";
-
-export default defineComponent({
-  name: "TwitterIcon",
-  setup() {
-    const {$colorMode} = useContext()
-    const isDarkMode = computed(() => {
-      return $colorMode.preference === 'dark'
-    })
-
-    return {
-      isDarkMode
-    }
-  }
-})
+<script>
+export default {
+  name: 'TwitchIcon'
+}
 </script>
diff --git a/src/components/icons/TwitterIcon.vue b/src/components/icons/TwitterIcon.vue
index 6864bad..1cec24c 100644
--- a/src/components/icons/TwitterIcon.vue
+++ b/src/components/icons/TwitterIcon.vue
@@ -2,25 +2,13 @@
   <svg class="inline" width="1.5em" height="1.5em" viewBox="0 0 24 24" focusable="false">
     <path
       d="M15.3 5.55a2.9 2.9 0 0 0-2.9 2.847l-.028 1.575a.6.6 0 0 1-.68.583l-1.561-.212c-2.054-.28-4.022-1.226-5.91-2.799c-.598 3.31.57 5.603 3.383 7.372l1.747 1.098a.6.6 0 0 1 .034.993L7.793 18.17c.947.059 1.846.017 2.592-.131c4.718-.942 7.855-4.492 7.855-10.348c0-.478-1.012-2.141-2.94-2.141zm-4.9 2.81a4.9 4.9 0 0 1 8.385-3.355c.711-.005 1.316.175 2.669-.645c-.335 1.64-.5 2.352-1.214 3.331c0 7.642-4.697 11.358-9.463 12.309c-3.268.652-8.02-.419-9.382-1.841c.694-.054 3.514-.357 5.144-1.55C5.16 15.7-.329 12.47 3.278 3.786c1.693 1.977 3.41 3.323 5.15 4.037c1.158.475 1.442.465 1.973.538z"
-      :fill="isDarkMode ? 'white' : 'black'"
+      fill="currentColor"
     />
   </svg>
 </template>
 
 <script lang="ts">
-import {computed, defineComponent, useContext} from "@nuxtjs/composition-api";
-
-export default defineComponent({
-  name: "TwitterIcon",
-  setup() {
-    const {$colorMode} = useContext()
-    const isDarkMode = computed(() => {
-      return $colorMode.preference === 'dark'
-    })
-
-    return {
-      isDarkMode
-    }
-  }
-})
+export default {
+  name: 'TwitterIcon'
+}
 </script>