import of v2 on appearance tab works now

src/components/settings_modal/tabs/appearance_tab.js

@@ -8,6 +8,7 @@ import FontControl from 'src/components/font_control/font_control.vue'
 
 import { normalizeThemeData } from 'src/modules/interface'
 
+import { newImporter } from 'src/services/export_import/export_import.js'
 import { convertTheme2To3 } from 'src/services/theme_data/theme2_to_theme3.js'
 import { init } from 'src/services/theme_data/theme_data_3.service.js'
 import {
@@ -33,6 +34,12 @@ const AppearanceTab = {
     return {
       availableStyles: [],
       availablePalettes: [],
+      themeImporter: newImporter({
+        accept: '.json, .piss',
+        validator: this.importValidator,
+        onImport: this.onImport,
+        onImportFailure: this.onImportFailure
+      }),
       palettesKeys: [
         'background',
         'foreground',
@@ -184,7 +191,6 @@ const AppearanceTab = {
   },
   methods: {
     updateFont (key, value) {
-      console.log(key, value)
       this.$store.dispatch('setOption', {
         name: 'theme3hacks',
         value: {
@@ -196,6 +202,26 @@ const AppearanceTab = {
         }
       })
     },
+    importTheme () {
+      this.themeImporter.importData()
+    },
+    onImport (parsed, filename) {
+      if (filename.endsWith('.json')) {
+        this.$store.dispatch('setThemeCustom', parsed.source || parsed.theme)
+        this.$store.dispatch('applyTheme')
+      }
+
+      // this.loadTheme(parsed, 'file', forceSource)
+    },
+    onImportFailure (result) {
+      this.$store.dispatch('pushGlobalNotice', { messageKey: 'settings.invalid_theme_imported', level: 'error' })
+    },
+    importValidator (parsed, filename) {
+      if (filename.endsWith('.json')) {
+        const version = parsed._pleroma_theme_version
+        return version >= 1 || version <= 2
+      }
+    },
     isThemeActive (key) {
       const { theme } = this.mergedConfig
       return key === theme
@@ -207,6 +233,9 @@ const AppearanceTab = {
     isPaletteActive (key) {
       const { palette } = this.mergedConfig
       return key === palette
+    },
+    importStyle () {
+
     },
     setTheme (name) {
       this.$store.dispatch('setTheme', name)

src/components/settings_modal/tabs/appearance_tab.scss

@@ -5,6 +5,21 @@
     margin: 1em;
   }
 
+  .setting-item {
+    padding-bottom: 0;
+
+    &.heading {
+      display: grid;
+      align-items: baseline;
+      grid-template-columns: 1fr auto auto auto;
+      grid-gap: 0.5em;
+
+      h2 {
+        flex: 1 0 auto;
+      }
+    }
+  }
+
   .palettes {
     display: grid;
     grid-template-columns: 1fr 1fr;

src/components/settings_modal/tabs/appearance_tab.vue

@@ -3,8 +3,17 @@
     class="appearance-tab"
     :label="$t('settings.general')"
   >
-    <div class="setting-item">
+    <div class="setting-item heading">
       <h2>{{ $t('settings.theme') }}</h2>
+      <button
+        class="btn button-default"
+        @click="importTheme"
+      >
+        <FAIcon icon="folder-open" />
+        {{ $t('settings.style.themes3.editor.load_style') }}
+      </button>
+    </div>
+    <div class="setting-item">
       <ul
         ref="themeList"
         class="theme-list"