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"

src/modules/interface.js

@@ -347,33 +347,24 @@ const interfaceMod = {
       let majorVersionUsed
 
       console.log(
-        'USER V3',
-        userPaletteName,
-        userStyleName
+        `USER V3 palette: ${userPaletteName}, style: ${userStyleName} `
       )
       console.log(
-        'USER V2',
-        userThemeV2Name,
-        userThemeV2Source,
-        userThemeV2Snapshot
+        `USER V2 name: ${userThemeV2Name}, source: ${userThemeV2Source}, snapshot: ${userThemeV2Snapshot}`
       )
 
-      console.log(
-        'INST V3',
-        instancePaletteName,
-        instanceStyleName
-      )
-      console.log(
-        'INST V2',
-        instanceThemeV2Name
-      )
+      console.log(`INST V3 palette: ${instancePaletteName}, style: ${instanceStyleName}`)
+      console.log('INST V2 theme: ' + instanceThemeV2Name)
 
       if (userPaletteName || userPaletteCustomData ||
           userStyleName || userStyleCustomData ||
-          instancePaletteName ||
-          instanceStyleName ||
-          (instanceThemeV2Name == null &&
-           userThemeV2Name == null)
+          (
+            // User V2 overrides instance V3
+            (instancePaletteName ||
+             instanceStyleName) &&
+              instanceThemeV2Name == null &&
+              userThemeV2Name == null
+          )
       ) {
         // Palette and/or style overrides V2 themes
         instanceThemeV2Name = null

src/services/export_import/export_import.js

@@ -20,6 +20,7 @@ export const newExporter = ({
 })
 
 export const newImporter = ({
+  accept = '.json',
   onImport,
   onImportFailure,
   validator = () => true
@@ -27,18 +28,19 @@ export const newImporter = ({
   importData () {
     const filePicker = document.createElement('input')
     filePicker.setAttribute('type', 'file')
-    filePicker.setAttribute('accept', '.json')
+    filePicker.setAttribute('accept', accept)
 
     filePicker.addEventListener('change', event => {
       if (event.target.files[0]) {
+        const filename = event.target.files[0].name
         // eslint-disable-next-line no-undef
         const reader = new FileReader()
         reader.onload = ({ target }) => {
           try {
             const parsed = JSON.parse(target.result)
-            const validationResult = validator(parsed)
+            const validationResult = validator(parsed, filename)
             if (validationResult === true) {
-              onImport(parsed)
+              onImport(parsed, filename)
             } else {
               onImportFailure({ validationResult })
             }