Make color theme switch more flexible

src/features/nav/components/Navbar.vue

@@ -15,12 +15,9 @@ limitations under the License.
 -->
 
 <script setup>
-import DarkModeToggleButton from '@/features/colorTheme/components/DarkModeToggleButton.vue';
+import ColorThemeButton from '@/features/colorTheme/components/ColorThemeButton.vue';
 
-import { inject } from 'vue';
 import logo from '@/assets/logo.svg';
-
-const isDark = inject('isDark');
 </script>
 <template>
     <nav class="global-nav">
@@ -29,7 +26,7 @@ const isDark = inject('isDark');
         </RouterLink>
     <ul class="right-links">
         <li>
-            <DarkModeToggleButton />
+            <ColorThemeButton />
         </li>
     </ul>
     </nav>
@@ -59,22 +56,7 @@ const isDark = inject('isDark');
 .global-nav .right-links a:hover{
     text-decoration: underline;
 }
-.dark-mode-toggle {
-    background: none;
-    border: 1.5px solid var(--light-d-3);
-    border-radius: 50%;
-    width: 36px;
-    height: 36px;
-    cursor: pointer;
-    font-size: 1rem;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
 
-.dark-mode-toggle:hover {
-    background: var(--light-d-2);
-}
 .nav-logo {
     height: 24px;
     width: auto;