Theme switcher for more themes

packages/web-runtime/src/components/Topbar/ThemeSwitcher.vue

@@ -1,5 +1,6 @@
 <template>
   <oc-button
+    v-if="!moreThemes"
     v-oc-tooltip="buttonLabel"
     class="themeswitcher-btn"
     :aria-label="buttonLabel"
@@ -10,6 +11,50 @@
     <span class="oc-visible@s" :aria-label="switchLabel" />
     <oc-icon :name="switchIcon" fill-type="line" variation="inherit" />
   </oc-button>
+  <div v-else class="oc-flex oc-flex-middle">
+    <oc-button
+      id="theme-switcher-button"
+      class="oc-mr-s"
+      appearance="raw"
+      variation="inverse"
+      :aria-label="buttonLabel"
+    >
+      <oc-icon name="paint" accessible-label="Select theme" class="oc-pr-xs" />
+    </oc-button>
+
+    <oc-drop
+      drop-id="oc-drop"
+      toggle="#theme-switcher-button"
+      mode="click"
+      padding-size="small"
+      class="themes-drop"
+      close-on-click
+    >
+      <h3 v-translate class="oc-pl-xs">Themes</h3>
+
+      <oc-list class="themes-drop-list" :aria-label="themesListAriaLabel">
+        <li v-for="(themeName, themeId) in themeOptions" :key="themeId">
+          <oc-button
+            :id="`themes-drop-btn-${themeId}`"
+            appearance="raw"
+            justify-content="space-between"
+            class="themes-drop-btn oc-p-s"
+            :class="{
+              'oc-background-primary-gradient': isSelectedTheme(themeId),
+              selected: isSelectedTheme(themeId)
+            }"
+            :variation="isSelectedTheme(themeId) ? 'inverse' : 'passive'"
+            @click="selectTheme(themeId)"
+          >
+            <span
+              class="oc-flex oc-flex-middle"
+              v-text="themeName ? $gettext(themeName) : $gettext(themeId)"
+            />
+          </oc-button>
+        </li>
+      </oc-list>
+    </oc-drop>
+  </div>
 </template>
 <script lang="ts">
 import { computed, unref, watch, defineComponent } from 'vue'
@@ -36,7 +81,7 @@ export default defineComponent({
       applyTheme(unref(currentTheme))
     })
 
-    return { currentThemeName, currentTheme }
+    return { currentThemeName, currentTheme, store }
   },
   computed: {
     ...mapGetters(['configuration']),
@@ -51,12 +96,66 @@ export default defineComponent({
     },
     switchLabel() {
       return this.$gettext('Currently used theme')
+    },
+    moreThemes() {
+      return Object.keys(this.store.getters.configuration.themes).length > 2
+    },
+    themeOptions() {
+      return Object.entries(this.store.getters.configuration.themes).reduce(
+        (mapping, [key, value]) => {
+          mapping[key] = value['theme-name']
+          return mapping
+        },
+        {}
+      )
+    },
+    themesListAriaLabel() {
+      return this.$gettext('Select theme for the interface')
     }
   },
   methods: {
     toggleTheme() {
       this.currentThemeName = this.isLightTheme ? themeNameDark : themeNameLight
+    },
+    selectTheme(themeOption) {
+      this.currentThemeName = themeOption
+    },
+    isSelectedTheme(themeOption) {
+      return this.currentThemeName === themeOption
     }
   }
 })
 </script>
+
+<style lang="scss" scoped>
+.themes {
+  &-drop {
+    &-list {
+      &:hover .themes-drop-btn.selected:not(:hover),
+      &:focus .themes-drop-btn.selected:not(:focus) {
+        color: var(--oc-color-swatch-passive-default);
+      }
+
+      li {
+        margin: var(--oc-space-xsmall) 0;
+      }
+    }
+
+    &-btn {
+      width: 100%;
+      gap: var(--oc-space-medium);
+
+      &:hover,
+      &:focus {
+        background-color: var(--oc-color-background-hover) !important;
+        color: var(--oc-color-swatch-passive-default);
+        text-decoration: none;
+      }
+
+      &.selected {
+        color: var(--oc-color-swatch-inverse-default) !important;
+      }
+    }
+  }
+}
+</style>