diff --git a/packages/hoppscotch-app/components/app/GitHubStarButton.vue b/packages/hoppscotch-app/components/app/GitHubStarButton.vue
index 671144be..a844ba41 100644
--- a/packages/hoppscotch-app/components/app/GitHubStarButton.vue
+++ b/packages/hoppscotch-app/components/app/GitHubStarButton.vue
@@ -4,8 +4,8 @@
       title="Star Hoppscotch"
       href="https://github.com/hoppscotch/hoppscotch"
       :data-color-scheme="
-        $colorMode.value != 'light'
-          ? $colorMode.value == 'black'
+        colorMode.value != 'light'
+          ? colorMode.value == 'black'
             ? 'dark'
             : 'dark_dimmed'
           : 'light'
@@ -20,6 +20,9 @@
 
 <script setup lang="ts">
 import GithubButton from "vue-github-button"
+import { useColorMode } from "~/helpers/utils/composables"
+
+const colorMode = useColorMode()
 
 defineProps({
   size: {
diff --git a/packages/hoppscotch-app/layouts/default.vue b/packages/hoppscotch-app/layouts/default.vue
index 0be71976..e7b5d0d6 100644
--- a/packages/hoppscotch-app/layouts/default.vue
+++ b/packages/hoppscotch-app/layouts/default.vue
@@ -57,7 +57,11 @@ import { logPageView } from "~/helpers/fb/analytics"
 import { hookKeybindingsListener } from "~/helpers/keybindings"
 import { defineActionHandler } from "~/helpers/actions"
 import useWindowSize from "~/helpers/utils/useWindowSize"
+<<<<<<< HEAD
 import { useSentry } from "~/helpers/sentry"
+=======
+import { useColorMode } from "~/helpers/utils/composables"
+>>>>>>> refactor: update color-mode usage to new composable
 
 function appLayout() {
   const rightSidebar = useSetting("SIDEBAR")
@@ -99,7 +103,7 @@ function setupSentry() {
 }
 
 function updateThemes() {
-  const { $colorMode } = useContext() as any
+  const $colorMode = useColorMode()
 
   // Apply theme updates
   const themeColor = useSetting("THEME_COLOR")
diff --git a/packages/hoppscotch-app/layouts/empty.vue b/packages/hoppscotch-app/layouts/empty.vue
index 2d7fe532..8445866e 100644
--- a/packages/hoppscotch-app/layouts/empty.vue
+++ b/packages/hoppscotch-app/layouts/empty.vue
@@ -3,17 +3,13 @@
 </template>
 
 <script lang="ts">
-import {
-  useContext,
-  onBeforeMount,
-  watch,
-  defineComponent,
-} from "@nuxtjs/composition-api"
+import { onBeforeMount, watch, defineComponent } from "@nuxtjs/composition-api"
+import { useColorMode } from "~/helpers/utils/composables"
 import { setupLocalPersistence } from "~/newstore/localpersistence"
 import { useSetting } from "~/newstore/settings"
 
 function updateThemes() {
-  const { $colorMode } = useContext() as any
+  const $colorMode = useColorMode()
 
   // Apply theme updates
   const themeColor = useSetting("THEME_COLOR")