show warning about palettes being unsupported when using v2 theme

src/components/settings_modal/tabs/appearance_tab.js

@@ -34,7 +34,7 @@ const AppearanceTab = {
     return {
       availableStyles: [],
       availablePalettes: [],
-      themeImporter: newImporter({
+      fileImporter: newImporter({
         accept: '.json, .piss',
         validator: this.importValidator,
         onImport: this.onImport,
@@ -179,6 +179,10 @@ const AppearanceTab = {
         this.$store.dispatch('setOption', { name: 'interfaceLanguage', value: val })
       }
     },
+    customThemeVersion () {
+      const { themeVersion } = this.$store.state.interface
+      return themeVersion
+    },
     isCustomThemeUsed () {
       const { theme } = this.mergedConfig
       return theme === 'custom'
@@ -202,8 +206,8 @@ const AppearanceTab = {
         }
       })
     },
-    importTheme () {
-      this.themeImporter.importData()
+    importFile () {
+      this.fileImporter.importData()
     },
     onImport (parsed, filename) {
       if (filename.endsWith('.json')) {
@@ -234,14 +238,18 @@ const AppearanceTab = {
       const { palette } = this.mergedConfig
       return key === palette
     },
-    importStyle () {
-
+    setStyle (name) {
+      this.$store.dispatch('resetThemeV2')
+      this.$store.dispatch('setTheme', name)
+      this.$store.dispatch('applyTheme')
     },
     setTheme (name) {
+      this.$store.dispatch('resetThemeV3')
       this.$store.dispatch('setTheme', name)
       this.$store.dispatch('applyTheme')
     },
     setPalette (name) {
+      this.$store.dispatch('resetThemeV2')
       this.$store.dispatch('setPalette', name)
       this.$store.dispatch('applyTheme')
     },

src/components/settings_modal/tabs/appearance_tab.scss

@@ -24,6 +24,10 @@
     display: grid;
     grid-template-columns: 1fr 1fr;
     grid-gap: 0.5em;
+
+    .unsupported-theme-v2 {
+      grid-column: 1 / span 2;
+    }
   }
 
   .palette-entry {

src/components/settings_modal/tabs/appearance_tab.vue

@@ -7,7 +7,7 @@
       <h2>{{ $t('settings.theme') }}</h2>
       <button
         class="btn button-default"
-        @click="importTheme"
+        @click="importFile"
       >
         <FAIcon icon="folder-open" />
         {{ $t('settings.style.themes3.editor.load_style') }}
@@ -30,7 +30,7 @@
             v-html="previewTheme('stock')"
           />
           <!-- eslint-enable vue/no-v-text-v-html-on-component -->
-          <preview />
+          <preview id="theme-preview-stock" />
           <h4 class="theme-name">
             {{ $t('settings.style.stock_theme_used') }}
             <span class="alert neutral version">v3</span>
@@ -71,23 +71,30 @@
       </ul>
       <h3>{{ $t('settings.style.themes3.palette.label') }}</h3>
       <div class="palettes">
-        <button
-          v-for="p in availablePalettes"
-          :key="p.name"
-          class="btn button-default palette-entry"
-          :class="{ toggled: isPaletteActive(p.key) }"
-          @click="() => setPalette(p.key)"
-        >
-          <label>
-            {{ p.name }}
-          </label>
-          <span
-            v-for="c in palettesKeys"
-            :key="c"
-            class="palette-square"
-            :style="{ backgroundColor: p[c], border: '1px solid ' + (p[c] ?? 'var(--text)') }"
-          />
-        </button>
+        <template v-if="customThemeVersion === 'v3'">
+          <button
+            v-for="p in availablePalettes"
+            :key="p.name"
+            class="btn button-default palette-entry"
+            :class="{ toggled: isPaletteActive(p.key) }"
+            @click="() => setPalette(p.key)"
+          >
+            <label>
+              {{ p.name }}
+            </label>
+            <span
+              v-for="c in palettesKeys"
+              :key="c"
+              class="palette-square"
+              :style="{ backgroundColor: p[c], border: '1px solid ' + (p[c] ?? 'var(--text)') }"
+            />
+          </button>
+        </template>
+        <template v-else-if="customThemeVersion === 'v2'">
+          <div class="alert neutral theme-notice unsupported-theme-v2">
+            {{$t('settings.style.themes3.palette.v2_unsupported')}}
+          </div>
+        </template>
       </div>
     </div>
     <div class="alert neutral theme-notice">

src/i18n/en.json

@@ -771,7 +771,8 @@
           "cOrange": "Orange color",
           "extra1": "Extra 1",
           "extra2": "Extra 2",
-          "extra3": "Extra 3"
+          "extra3": "Extra 3",
+          "v2_unsupported": "Older v2 themes don't support palettes. Switch to v3 theme to make use of palettes",
         },
         "editor": {
           "title": "Style",

src/modules/interface.js

@@ -5,6 +5,7 @@ import { convertTheme2To3 } from 'src/services/theme_data/theme2_to_theme3.js'
 const defaultState = {
   localFonts: null,
   themeApplied: false,
+  themeVersion: 'v3',
   temporaryChangesTimeoutId: null, // used for temporary options that revert after a timeout
   temporaryChangesConfirm: () => {}, // used for applying temporary options
   temporaryChangesRevert: () => {}, // used for reverting temporary options
@@ -307,7 +308,7 @@ const interfaceMod = {
       commit('setOption', { name: 'customThemeSource', value: null })
     },
     async applyTheme (
-      { dispatch, commit, rootState },
+      { dispatch, commit, rootState, state },
       { recompile = true } = {}
     ) {
       // If we're not not forced to recompile try using
@@ -398,6 +399,8 @@ const interfaceMod = {
         majorVersionUsed = 'v3'
       }
 
+      state.themeVersion = majorVersionUsed
+
       let styleDataUsed = null
       let styleNameUsed = null
       let paletteDataUsed = null