Add theme export feature

src/components/style_switcher/style_switcher.js

@@ -51,6 +51,23 @@ export default {
     this.attachmentRadiusLocal = this.$store.state.config.radii.attachmentRadius || 5
   },
   methods: {
+    exportCurrentTheme () {
+      const stringified = JSON.stringify({
+        colors: this.$store.state.config.colors,
+        radii: this.$store.state.config.radii
+      }, null, 2) // Pretty-print and indent with 2 spaces
+
+      // Create an invisible link with a data url and simulate a click
+      const e = document.createElement('a')
+      e.setAttribute('download', 'pleroma_theme.json')
+      e.setAttribute('href', 'data:application/json;base64,' + window.btoa(stringified))
+      e.style.display = 'none'
+
+      document.body.appendChild(e)
+      e.click()
+      document.body.removeChild(e)
+    },
+
     setCustomTheme () {
       if (!this.bgColorLocal && !this.btnColorLocal && !this.linkColorLocal) {
         // reset to picked themes

src/components/style_switcher/style_switcher.vue

@@ -8,6 +8,9 @@
         <i class="icon-down-open"/>
       </label>
     </div>
+    <div>
+      <button class="btn" @click="exportCurrentTheme">{{ $t('settings.export_theme') }}</button>
+    </div>
     <div class="color-container">
       <p>{{$t('settings.theme_help')}}</p>
       <div class="color-item">

src/i18n/messages.js

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