new theme selector, RC

3 files changed, 32 insertions, 10 deletions

diff --git a/src/components/settings_modal/tabs/appearance_tab.js b/src/components/settings_modal/tabs/appearance_tab.js
index ef367e41..7ec22641 100644
--- a/src/components/settings_modal/tabs/appearance_tab.js
+++ b/src/components/settings_modal/tabs/appearance_tab.js
@@ -95,7 +95,7 @@ const AppearanceTab = {
           if (!isIntersecting) return
           const theme = this.availableStyles.find(x => x.key === target.dataset.themeKey)
           this.$nextTick(() => {
-            theme.ready = true
+            if (theme) theme.ready = true
           })
           observer.unobserve(target)
         })
@@ -144,13 +144,20 @@ const AppearanceTab = {
         this.$store.dispatch('setOption', { name: 'interfaceLanguage', value: val })
       }
     },
+    isCustomThemeUsed () {
+      const { theme } = this.mergedConfig
+      return theme === 'custom' || theme === null
+    },
     ...SharedComputedObject()
   },
   methods: {
-    isThemeActive (key, name) {
-      console.log(this.$store.getters.mergedConfig)
-      const { customTheme, themeName, customThemeSource } = this.$store.getters.mergedConfig
-      console.log(customTheme, customThemeSource, themeName)
+    isThemeActive (key) {
+      const { theme } = this.mergedConfig
+      console.log(key, theme)
+      return key === theme
+    },
+    setTheme (name) {
+      this.$store.dispatch('setTheme', { themeName: name, saveData: true, recompile: true })
     },
     previewTheme (key, input) {
       const style = normalizeThemeData(input)
diff --git a/src/components/settings_modal/tabs/appearance_tab.vue b/src/components/settings_modal/tabs/appearance_tab.vue
index 0954d3a7..748a69ce 100644
--- a/src/components/settings_modal/tabs/appearance_tab.vue
+++ b/src/components/settings_modal/tabs/appearance_tab.vue
@@ -3,14 +3,24 @@
     <div class="setting-item">
       <h2>{{ $t('settings.theme') }}</h2>
       <ul
-        class="input theme-list"
+        class="theme-list"
         ref="themeList"
       >
         <button
+          v-if="isCustomThemeUsed"
+          disabled
+          class="button-default theme-preview"
+        >
+          <preview />
+          <h4 class="theme-name">{{ $t('settings.style.custom_theme_used') }}</h4>
+        </button>
+        <button
           v-for="style in availableStyles"
           :data-theme-key="style.key"
           :key="style.key"
           class="button-default theme-preview"
+          :class="{ toggled: isThemeActive(style.key) }"
+          @click="setTheme(style.key)"
         >
           <!-- eslint-disable vue/no-v-text-v-html-on-component -->
           <component
@@ -260,14 +270,17 @@
   list-style: none;
   display: flex;
   flex-wrap: wrap;
-  margin: 0 -0.5em;
-  height: 15em;
+  margin: -0.5em 0;
+  height: 25em;
   overflow-x: hidden;
   overflow-y: auto;
   scrollbar-gutter: stable;
+  border-radius: var(--roundness);
+  border: 1px solid var(--border);
+  padding: 0;
 
   .theme-preview {
-    width: 21rem;
+    width: 19rem;
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -278,9 +291,11 @@
     }
 
     .preview-container {
+      pointer-events: none;
       zoom: 0.5;
       border: none;
       border-radius: var(--roundness);
+      text-align: left;
     }
   }
 }
diff --git a/src/components/settings_modal/tabs/theme_tab/theme_tab.js b/src/components/settings_modal/tabs/theme_tab/theme_tab.js
index a19550d1..39dc372e 100644
--- a/src/components/settings_modal/tabs/theme_tab/theme_tab.js
+++ b/src/components/settings_modal/tabs/theme_tab/theme_tab.js
@@ -606,7 +606,7 @@ export default {
     normalizeLocalState (theme, version = 0, source, forceSource = false) {
       let input
       if (typeof source !== 'undefined') {
-        if (forceSource || source.themeEngineVersion === CURRENT_VERSION) {
+        if (forceSource || source?.themeEngineVersion === CURRENT_VERSION) {
           input = source
           version = source.themeEngineVersion
         } else {