feat: move theme selector to main header

Author: VChet

src/assets/global.scss

@@ -31,6 +31,12 @@
     --base-dimmed: #33393e;
     --accent: #ff7b5d;
   }
+  &[data-theme="departure"] {
+    --base: #c0c0c0;
+    --background: #222;
+    --base-dimmed: #6c6c58;
+    --accent: #ffa133;
+  }
 }
 *,
 *::before,
@@ -303,3 +309,6 @@ dialog {
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+.capitalize {
+  text-transform: capitalize;
+}

src/components/header/main-header.vue

@@ -3,6 +3,10 @@
     <div>
       <header-summary />
       <settings-modal />
+      <button class="main-header__block-button" title="change color theme" type="button" @click="nextTheme">
+        <icon-palette />
+        <span class="capitalize">{{ theme }}</span>
+      </button>
       <about-modal />
       <button title="get rate limit" type="button" @click="fetchRateLimit">
         Rate Limit
@@ -22,8 +26,8 @@
   </header>
 </template>
 <script setup lang="ts">
-import { ref } from "vue";
-import { IconActivityHeartbeat, IconProgressAlert } from "@tabler/icons-vue";
+import { computed, ref } from "vue";
+import { IconActivityHeartbeat, IconPalette, IconProgressAlert } from "@tabler/icons-vue";
 import { fetchRateLimit, fetchRepositoryFiles, rateLimit } from "@/service/octokit";
 import { useEventsStore } from "@/store/events";
 import { useLatestVersionsStore } from "@/store/latest-versions";
@@ -38,8 +42,9 @@ import HeaderSummary from "./header-summary.vue";
 const { isEmpty, updateRepositories } = useRepositoriesStore();
 const { updateLatestVersions } = useLatestVersionsStore();
 const { updateEvents } = useEventsStore();
-const { needRefresh, updateServiceWorker } = useSettingsStore();
 
+const { settings, needRefresh, updateServiceWorker, nextTheme } = useSettingsStore();
+const theme = computed(() => settings.value.theme);
 const isUpdating = ref<boolean>(false);
 async function update(): Promise<void> {
   try {

src/components/modals/settings-modal.vue

@@ -23,7 +23,6 @@
             <input v-model="form.displayBadges" name="displayBadges" type="checkbox">
             Display badges
           </label>
-          <input-select v-model="form.theme" name="theme" :items="themes" label="theme:" />
         </fieldset>
         <fieldset>
           <legend>GitHub API</legend>
@@ -72,15 +71,6 @@ import { deepCopy } from "@/helpers/object";
 import { fetchCurrentUser, setAuthToken } from "@/service/octokit";
 import { useSettingsStore } from "@/store/settings";
 import ImportExport from "@/components/import-export.vue";
-import InputSelect from "@/components/input-select.vue";
-
-const themes = [
-  { name: "github", value: "github" },
-  { name: "beige", value: "beige" },
-  { name: "blue", value: "blue" },
-  { name: "green", value: "green" },
-  { name: "red", value: "red" }
-] as const;
 
 const { settings } = useSettingsStore();
 const dialogRef = useTemplateRef("dialogElement");

src/store/settings.ts

@@ -1,7 +1,7 @@
 import { createSharedComposable, useLocalStorage } from "@vueuse/core";
 import { useRegisterSW } from "virtual:pwa-register/vue";
 
-type Theme = "github" | "blue" | "beige" | "green" | "red";
+type Theme = "github" | "blue" | "beige" | "green" | "red" | "departure";
 export interface SettingsStore {
   authToken: string
   username: string
@@ -27,10 +27,18 @@ export const useSettingsStore = createSharedComposable(() => {
     Object.assign(settings.value, newSettings);
   }
 
+  function nextTheme(): void {
+    const themes: readonly Theme[] = ["github", "blue", "beige", "green", "red", "departure"];
+    const index = themes.indexOf(settings.value.theme);
+    const nextIndex = (index + 1) % themes.length;
+    settings.value.theme = themes[nextIndex];
+  }
+
   return {
     settings,
     needRefresh,
     updateServiceWorker,
-    importSettings
+    importSettings,
+    nextTheme
   };
 });