Add validation of the imported theme and the corresponding warning message

src/components/style_switcher/style_switcher.js

@@ -5,6 +5,7 @@ export default {
     return {
       availableStyles: [],
       selected: this.$store.state.config.theme,
+      invalidThemeImported: false,
       bgColorLocal: '',
       btnColorLocal: '',
       textColorLocal: '',
@@ -37,6 +38,8 @@ export default {
   methods: {
     exportCurrentTheme () {
       const stringified = JSON.stringify({
+        // To separate from other random JSON files and possible future theme formats
+        _pleroma_theme_version: 1,
         colors: this.$store.state.config.colors,
         radii: this.$store.state.config.radii
       }, null, 2) // Pretty-print and indent with 2 spaces
@@ -53,6 +56,7 @@ export default {
     },
 
     importTheme () {
+      this.invalidThemeImported = false
       const filePicker = document.createElement('input')
       filePicker.setAttribute('type', 'file')
       filePicker.setAttribute('accept', '.json')
@@ -62,8 +66,18 @@ export default {
           // eslint-disable-next-line no-undef
           const reader = new FileReader()
           reader.onload = ({target}) => {
+            try {
               const parsed = JSON.parse(target.result)
+              if (parsed._pleroma_theme_version === 1) {
                 this.normalizeLocalState(parsed.colors, parsed.radii)
+              } else {
+                // A theme from the future, spooky
+                this.invalidThemeImported = true
+              }
+            } catch (e) {
+              // This will happen both if there is a JSON syntax error or the theme is missing components
+              this.invalidThemeImported = true
+            }
           }
           reader.readAsText(event.target.files[0])
         }

src/components/style_switcher/style_switcher.vue

@@ -11,6 +11,7 @@
     <div>
       <button class="btn" @click="exportCurrentTheme">{{ $t('settings.export_theme') }}</button>
       <button class="btn" @click="importTheme">{{ $t('settings.import_theme') }}</button>
+      <p v-if="invalidThemeImported" class="import-warning">{{ $t('settings.invalid_theme_imported') }}</p>
     </div>
     <div class="color-container">
       <p>{{$t('settings.theme_help')}}</p>
@@ -135,6 +136,11 @@
   margin-right: 1em;
 }
 
+.import-warning {
+  color: $fallback--cRed;
+  color: var(--cRed, $fallback--cRed);
+}
+
 .radius-container,
 .color-container {
   display: flex;

src/i18n/messages.js

@@ -50,6 +50,7 @@ const de = {
     presets: 'Voreinstellungen',
     export_theme: 'Aktuelles Theme exportieren',
     import_theme: 'Gespeichertes Theme laden',
+    invalid_theme_imported: 'Die ausgewählte Datei ist kein unterstütztes Pleroma-Theme. Keine Änderungen wurden vorgenommen.',
     theme_help: 'Benutze HTML Farbcodes (#rrggbb) um dein Farbschema anzupassen',
     radii_help: 'Kantenrundung (in Pixel) der Oberfläche anpassen',
     background: 'Hintergrund',
@@ -293,6 +294,7 @@ const en = {
     export_theme: 'Export current theme',
     import_theme: 'Load saved theme',
     theme_help: 'Use hex color codes (#rrggbb) to customize your color theme.',
+    invalid_theme_imported: 'The selected file is not a supported Pleroma theme. No changes to your theme were made.',
     radii_help: 'Set up interface edge rounding (in pixels)',
     background: 'Background',
     foreground: 'Foreground',