src/App.vue

@@ -18,17 +18,17 @@ limitations under the License.
 import Navbar from './features/nav/components/Navbar.vue';
 import Footer from './features/footer/components/Footer.vue';
 
-import { useColorTheme } from './features/colorTheme/composables/useColorTheme';
+import { useColorScheme } from './features/colorScheme/composables/useColorScheme';
 import { ref, provide, watch } from 'vue';
 
-const { getColorTheme, updateColorTheme } = useColorTheme();
-const colorTheme = ref(getColorTheme());
-provide('colorTheme', colorTheme);
-watch(colorTheme, val => updateColorTheme(val))
+const { getColorScheme, updateColorScheme } = useColorScheme();
+const colorScheme = ref(getColorScheme());
+provide('colorScheme', colorScheme);
+watch(colorScheme, val => updateColorScheme(val))
 </script>
 
 <template>
-    <div :class="{ dark: colorTheme === 'dark', 'color-scheme-auto': colorTheme === 'auto' }" id="app-wrapper">
+    <div :class="{ dark: colorScheme === 'dark', 'color-scheme-auto': colorScheme === 'auto' }" id="app-wrapper">
         <Navbar />
 
         <div class="main-content">

src/features/colorScheme/components/ColorSchemeButton.vue

@@ -17,21 +17,21 @@ limitations under the License.
 <script setup>
 import { inject } from 'vue';
 
-const colorTheme = inject('colorTheme');
+const colorScheme = inject('colorScheme');
 
-const colorThemeNextMapper = {
+const colorSchemeNextMapper = {
     'light': 'dark',
     'dark': 'auto',
     'auto': 'light'
 };
 
-const colorThemeTextMapper = {
+const colorSchemeTextMapper = {
     'light': 'Switch to light mode',
     'dark': 'Switch to dark mode',
-    'auto': 'Switch to the system theme'
+    'auto': 'Switch to the system scheme'
 }
 
-const colorThemeIconMapper = {
+const colorSchemeIconMapper = {
     'dark': '⏾',
     'light': '☀',
     'auto': '◐'
@@ -39,17 +39,17 @@ const colorThemeIconMapper = {
 </script>
 
 <template>
-    <button class="color-theme-button"
-        @click="colorTheme = colorThemeNextMapper[colorTheme]"
-        :aria-label="colorThemeTextMapper[colorThemeNextMapper[colorTheme]]"
-        :title="colorThemeTextMapper[colorThemeNextMapper[colorTheme]]"
+    <button class="color-scheme-button"
+        @click="colorScheme = colorSchemeNextMapper[colorScheme]"
+        :aria-label="colorSchemeTextMapper[colorSchemeNextMapper[colorScheme]]"
+        :title="colorSchemeTextMapper[colorSchemeNextMapper[colorScheme]]"
     >
-        {{ colorThemeIconMapper[colorThemeNextMapper[colorTheme]] }}
+        {{ colorSchemeIconMapper[colorSchemeNextMapper[colorScheme]] }}
     </button>
 </template>
 
 <style scoped>
-.color-theme-button {
+.color-scheme-button {
     background: none;
     border: 1.5px solid var(--light-d-3);
     border-radius: 50%;
@@ -63,7 +63,7 @@ const colorThemeIconMapper = {
     color: var(--dark);
 }
 
-.color-theme-button:hover {
+.color-scheme-button:hover {
     background: var(--light-d-2);
 }
 </style>

src/features/colorScheme/composables/useColorScheme.js

@@ -0,0 +1,39 @@
+/*
+Copyright 2026 Seekra
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+export const useColorScheme = function () {
+    const getColorScheme = function () {
+        let colorScheme = localStorage.getItem('colorScheme') || 'auto';
+        if (!(colorScheme === 'dark' || colorScheme === 'light' || colorScheme === 'auto')) {
+            colorScheme = 'auto';
+        };
+        return colorScheme;
+    };
+
+    const updateColorScheme = function (newScheme) {
+        let actualNewScheme = newScheme;
+        if (!(actualNewScheme === 'dark' || actualNewScheme === 'light' || actualNewScheme === 'auto')) {
+            actualNewScheme = 'auto';
+        };
+
+        localStorage.setItem('colorScheme', actualNewScheme);
+    };
+
+    return {
+        getColorScheme,
+        updateColorScheme
+    };
+};

src/features/colorTheme/composables/useColorTheme.js

@@ -1,39 +0,0 @@
-/*
-Copyright 2026 Seekra
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-export const useColorTheme = function () {
-    const getColorTheme = function () {
-        let colorTheme = localStorage.getItem('theme') || 'auto';
-        if (!(colorTheme === 'dark' || colorTheme === 'light' || colorTheme === 'auto')) {
-            colorTheme = 'auto';
-        };
-        return colorTheme;
-    };
-
-    const updateColorTheme = function (newTheme) {
-        let actualNewTheme = newTheme;
-        if (!(actualNewTheme === 'dark' || actualNewTheme === 'light' || actualNewTheme === 'auto')) {
-            actualNewTheme = 'auto';
-        };
-
-        localStorage.setItem('theme', actualNewTheme);
-    };
-
-    return {
-        getColorTheme,
-        updateColorTheme
-    };
-};

src/features/nav/components/Navbar.vue

@@ -15,7 +15,7 @@ limitations under the License.
 -->
 
 <script setup>
-import ColorThemeButton from '@/features/colorTheme/components/ColorThemeButton.vue';
+import ColorSchemeButton from '@/features/colorScheme/components/ColorSchemeButton.vue';
 
 import logo from '@/assets/logo.svg';
 </script>
@@ -26,7 +26,7 @@ import logo from '@/assets/logo.svg';
         </RouterLink>
     <ul class="right-links">
         <li>
-            <ColorThemeButton />
+            <ColorSchemeButton />
         </li>
     </ul>
     </nav>