Add theme import feature

src/components/style_switcher/style_switcher.js

@@ -52,6 +52,28 @@ export default {
       document.body.removeChild(e)
     },
 
+    importTheme () {
+      const filePicker = document.createElement('input')
+      filePicker.setAttribute('type', 'file')
+      filePicker.setAttribute('accept', '.json')
+
+      filePicker.addEventListener('change', event => {
+        if (event.target.files[0]) {
+          // eslint-disable-next-line no-undef
+          const reader = new FileReader()
+          reader.onload = ({target}) => {
+            const parsed = JSON.parse(target.result)
+            this.normalizeLocalState(parsed.colors, parsed.radii)
+          }
+          reader.readAsText(event.target.files[0])
+        }
+      })
+
+      document.body.appendChild(filePicker)
+      filePicker.click()
+      document.body.removeChild(filePicker)
+    },
+
     setCustomTheme () {
       if (!this.bgColorLocal && !this.btnColorLocal && !this.linkColorLocal) {
         // reset to picked themes

src/components/style_switcher/style_switcher.vue

@@ -10,6 +10,7 @@
     </div>
     <div>
       <button class="btn" @click="exportCurrentTheme">{{ $t('settings.export_theme') }}</button>
+      <button class="btn" @click="importTheme">{{ $t('settings.import_theme') }}</button>
     </div>
     <div class="color-container">
       <p>{{$t('settings.theme_help')}}</p>

src/i18n/messages.js

@@ -289,6 +289,7 @@ const en = {
     theme: 'Theme',
     presets: 'Presets',
     export_theme: 'Export current theme',
+    import_theme: 'Load saved theme',
     theme_help: 'Use hex color codes (#rrggbb) to customize your color theme.',
     radii_help: 'Set up interface edge rounding (in pixels)',
     background: 'Background',