diff --git a/src/components/color_input/color_input.vue b/src/components/color_input/color_input.vue
index a09325a80..31dfa23ef 100644
--- a/src/components/color_input/color_input.vue
+++ b/src/components/color_input/color_input.vue
@@ -130,7 +130,7 @@ export default {
       return this.modelValue === 'transparent'
     },
     computedColor () {
-      return this.modelValue && (this.modelValue.startsWith('--') || this.modelValue.startsWith('$'))
+      return this.modelValue && this.modelValue.startsWith('--')
     }
   },
   methods: {
diff --git a/src/components/component_preview/component_preview.vue b/src/components/component_preview/component_preview.vue
index 3643703a6..e34a6f3cb 100644
--- a/src/components/component_preview/component_preview.vue
+++ b/src/components/component_preview/component_preview.vue
@@ -39,7 +39,7 @@
         :class="previewClass"
         :style="previewStyle"
       >
-        {{ $t('settings.style.themes3.editor.test_string') }}
+        TEST
       </div>
     </div>
     <input
diff --git a/src/components/palette_editor/palette_editor.vue b/src/components/palette_editor/palette_editor.vue
index 502f0ac8a..16148262c 100644
--- a/src/components/palette_editor/palette_editor.vue
+++ b/src/components/palette_editor/palette_editor.vue
@@ -28,7 +28,7 @@
 <script setup>
 import ColorInput from 'src/components/color_input/color_input.vue'
 import {
-  newImporter,
+  // newImporter,
   newExporter
 } from 'src/services/export_import/export_import.js'
 
@@ -46,23 +46,23 @@ library.add(
 const props = defineProps(['modelValue'])
 const emit = defineEmits(['update:modelValue'])
 const paletteExporter = newExporter({
-  filename: 'pleroma_palette',
-  extension: 'json',
+  filename: 'pleroma.palette.json',
   getExportedObject: () => props.modelValue
 })
-const paletteImporter = newImporter({
-  accept: '.json',
-  onImport (parsed, filename) {
-    emit('update:modelValue', parsed)
-  }
-})
+/*
+   const themeImporter = newImporter({
+     validator: importValidator,
+     onImport,
+     onImportFailure,
+   })
+*/
 
 const exportPalette = () => {
   paletteExporter.exportData()
 }
 
 const importPalette = () => {
-  paletteImporter.importData()
+  // TODO
 }
 
 const paletteKeys = [
diff --git a/src/components/select/select.vue b/src/components/select/select.vue
index 2214959f6..0fb6fcc0e 100644
--- a/src/components/select/select.vue
+++ b/src/components/select/select.vue
@@ -49,7 +49,6 @@ label.Select {
       option {
         background-color: transparent;
 
-        &:checked,
         &.-active {
           color: var(--selectionText);
           background-color: var(--selectionBackground);
diff --git a/src/components/settings_modal/helpers/setting.js b/src/components/settings_modal/helpers/setting.js
index 2dc9653ea..6c5dd76e3 100644
--- a/src/components/settings_modal/helpers/setting.js
+++ b/src/components/settings_modal/helpers/setting.js
@@ -170,7 +170,7 @@ export default {
     },
     configSink () {
       if (this.path == null) {
-        return (k, v) => this.$emit('update:modelValue', v)
+        return (k, v) => this.$emit('modelValue:update', v)
       }
       switch (this.realSource) {
         case 'profile':
diff --git a/src/components/settings_modal/helpers/string_setting.vue b/src/components/settings_modal/helpers/string_setting.vue
index d0c70b150..fbea0b508 100644
--- a/src/components/settings_modal/helpers/string_setting.vue
+++ b/src/components/settings_modal/helpers/string_setting.vue
@@ -5,7 +5,6 @@
   >
     <label
       :for="path"
-      class="setting-label"
       :class="{ 'faint': shouldBeDisabled }"
     >
       <template v-if="backendDescriptionLabel">
diff --git a/src/components/settings_modal/tabs/style_tab/style_tab.js b/src/components/settings_modal/tabs/style_tab/style_tab.js
index b82e72677..c75e6b6b4 100644
--- a/src/components/settings_modal/tabs/style_tab/style_tab.js
+++ b/src/components/settings_modal/tabs/style_tab/style_tab.js
@@ -13,33 +13,23 @@ import OpacityInput from 'src/components/opacity_input/opacity_input.vue'
 import TabSwitcher from 'src/components/tab_switcher/tab_switcher.jsx'
 import Tooltip from 'src/components/tooltip/tooltip.vue'
 import ContrastRatio from 'src/components/contrast_ratio/contrast_ratio.vue'
-import Preview from '../theme_tab/theme_preview.vue'
 
-import { init, findColor } from 'src/services/theme_data/theme_data_3.service.js'
+import { init } from 'src/services/theme_data/theme_data_3.service.js'
+import { getCssRules } from 'src/services/theme_data/css_utils.js'
+import { serialize } from 'src/services/theme_data/iss_serializer.js'
+import { parseShadow /* , deserialize */ } from 'src/services/theme_data/iss_deserializer.js'
 import {
-  getCssRules,
-  getScopedVersion
-} from 'src/services/theme_data/css_utils.js'
-import { serializeShadow, serialize } from 'src/services/theme_data/iss_serializer.js'
-import { parseShadow, deserialize } from 'src/services/theme_data/iss_deserializer.js'
-import {
-  rgb2hex,
+  // rgb2hex,
   hex2rgb,
   getContrastRatio
 } from 'src/services/color_convert/color_convert.js'
 import {
-  newImporter,
+  // newImporter,
   newExporter
 } from 'src/services/export_import/export_import.js'
 
 import { library } from '@fortawesome/fontawesome-svg-core'
-import {
-  faFloppyDisk,
-  faFolderOpen,
-  faFile,
-  faArrowsRotate,
-  faCheck
-} from '@fortawesome/free-solid-svg-icons'
+import { faFloppyDisk, faFolderOpen, faFile } from '@fortawesome/free-solid-svg-icons'
 
 // helper for debugging
 // eslint-disable-next-line no-unused-vars
@@ -51,9 +41,7 @@ const normalizeStates = (states) => ['normal', ...(states?.filter(x => x !== 'no
 library.add(
   faFile,
   faFloppyDisk,
-  faFolderOpen,
-  faArrowsRotate,
-  faCheck
+  faFolderOpen
 )
 
 export default {
@@ -69,27 +57,25 @@ export default {
     ColorInput,
     PaletteEditor,
     OpacityInput,
-    ContrastRatio,
-    Preview
+    ContrastRatio
   },
   setup () {
-    const exports = {}
     // All rules that are made by editor
     const allEditedRules = reactive({})
 
     // ## Meta stuff
-    exports.name = ref('')
-    exports.author = ref('')
-    exports.license = ref('')
-    exports.website = ref('')
+    const name = ref('')
+    const author = ref('')
+    const license = ref('')
+    const website = ref('')
 
     const metaOut = computed(() => {
       return [
         '@meta {',
-        `  name: ${exports.name.value};`,
-        `  author: ${exports.author.value};`,
-        `  license: ${exports.license.value};`,
-        `  website: ${exports.website.value};`,
+        `  name: ${name.value};`,
+        `  author: ${author.value};`,
+        `  license: ${license.value};`,
+        `  website: ${website.value};`,
         '}'
       ].join('\n')
     })
@@ -122,20 +108,6 @@ export default {
         border: '#d8e6f9'
       }
     ])
-    exports.palettes = palettes
-
-    // This is kinda dumb but you cannot "replace" reactive() object
-    // and so v-model simply fails when you try to chage (increase only?)
-    // length of the array. Since linter complains about mutating modelValue
-    // inside SelectMotion, the next best thing is to just wipe existing array
-    // and replace it with new one.
-
-    const onPalettesUpdate = (e) => {
-      palettes.splice(0, palettes.length)
-      palettes.push(...e)
-    }
-    exports.onPalettesUpdate = onPalettesUpdate
-
     const selectedPaletteId = ref(0)
     const selectedPalette = computed({
       get () {
@@ -145,10 +117,7 @@ export default {
         palettes[selectedPaletteId.value] = newPalette
       }
     })
-    exports.selectedPaletteId = selectedPaletteId
-    exports.selectedPalette = selectedPalette
-
-    exports.getNewPalette = () => ({
+    const getNewPalette = () => ({
       name: 'new palette',
       bg: '#121a24',
       fg: '#182230',
@@ -182,31 +151,26 @@ export default {
           key => [key, componentsContext(key).default]
         ).filter(([key, component]) => !component.virtual && !component.notEditable)
     )
-    exports.componentsMap = componentsMap
     const componentKeys = [...componentsMap.keys()]
-    exports.componentKeys = componentKeys
 
     // selection basis
     const selectedComponentKey = ref(componentsMap.keys().next().value)
-    exports.selectedComponentKey = selectedComponentKey
     const selectedComponent = computed(() => componentsMap.get(selectedComponentKey.value))
     const selectedComponentName = computed(() => selectedComponent.value.name)
-    exports.selectedComponentVariants = computed(() => {
+    const selectedComponentVariants = computed(() => {
       return Object.keys({ normal: null, ...(selectedComponent.value.variants || {}) })
     })
     const selectedComponentStatesAll = computed(() => {
       return Object.keys({ normal: null, ...(selectedComponent.value.states || {}) })
     })
-    exports.selectedComponentStates = computed(() => {
+    const selectedComponentStates = computed(() => {
       return selectedComponentStatesAll.value.filter(x => x !== 'normal')
     })
 
     // selection
     const selectedVariant = ref('normal')
-    exports.selectedVariant = selectedVariant
     const selectedState = reactive(new Set())
-    exports.selectedState = selectedState
-    exports.updateSelectedStates = (state, v) => {
+    const updateSelectedStates = (state, v) => {
       if (v) {
         selectedState.add(state)
       } else {
@@ -218,53 +182,47 @@ export default {
     // The native structure of separate rules and the child -> parent
     // relation isn't very convenient for editor, we replace the array
     // and child -> parent structure with map and parent -> child structure
-    const rulesToEditorFriendly = (rules, root = {}) => rules.reduce((acc, rule) => {
-      const { parent: rParent, component: rComponent } = rule
-      const parent = rParent ?? rule
-      const hasChildren = !!rParent
-      const child = hasChildren ? rule : null
-
-      const {
-        component: pComponent,
-        variant: pVariant = 'normal',
-        state: pState = [] // no relation to Intel CPUs whatsoever
-      } = parent
-
-      const pPath = `${hasChildren ? pComponent : rComponent}.${pVariant}.${normalizeStates(pState)}`
-
-      let output = get(acc, pPath)
-      if (!output) {
-        set(acc, pPath, {})
-        output = get(acc, pPath)
-      }
-
-      if (hasChildren) {
-        acc._children = acc._children ?? {}
-        const {
-          component: cComponent,
-          variant: cVariant = 'normal',
-          state: cState = [],
-          directives
-        } = child
-
-        const cPath = `${cComponent}.${cVariant}.${normalizeStates(cState)}`
-        set(output._children, cPath, directives)
-      } else {
-        output.directives = parent.directives
-      }
-      return acc
-    }, root)
-
     const editorFriendlyFallbackStructure = computed(() => {
       const root = {}
 
       componentKeys.forEach((componentKey) => {
         const componentValue = componentsMap.get(componentKey)
-        const { defaultRules, name } = componentValue
-        rulesToEditorFriendly(
-          defaultRules.map((rule) => ({ ...rule, component: name })),
-          root
-        )
+        const { defaultRules } = componentValue
+        defaultRules.forEach((rule) => {
+          const { parent: rParent } = rule
+          const parent = rParent ?? rule
+          const hasChildren = !!rParent
+          const child = hasChildren ? rule : null
+
+          const {
+            component: pComponent,
+            variant: pVariant = 'normal',
+            state: pState = [] // no relation to Intel CPUs whatsoever
+          } = parent
+
+          const pPath = `${hasChildren ? pComponent : componentValue.name}.${pVariant}.${normalizeStates(pState)}`
+
+          let output = get(root, pPath)
+          if (!output) {
+            set(root, pPath, {})
+            output = get(root, pPath)
+          }
+
+          if (hasChildren) {
+            output._children = output._children ?? {}
+            const {
+              component: cComponent,
+              variant: cVariant = 'normal',
+              state: cState = [],
+              directives
+            } = child
+
+            const cPath = `${cComponent}.${cVariant}.${normalizeStates(cState)}`
+            set(output._children, cPath, directives)
+          } else {
+            output.directives = parent.directives
+          }
+        })
       })
 
       return root
@@ -272,7 +230,7 @@ export default {
 
     // Checkging whether component can support some "directives" which
     // are actually virtual subcomponents, i.e. Text, Link etc
-    exports.componentHas = (subComponent) => {
+    const componentHas = (subComponent) => {
       return !!selectedComponent.value.validInnerComponents?.find(x => x === subComponent)
     }
 
@@ -325,24 +283,21 @@ export default {
     })
 
     // All the editable stuff for the component
-    exports.editedBackgroundColor = getEditedElement(null, 'background')
-    exports.isBackgroundColorPresent = isElementPresent(null, 'background', '#FFFFFF')
-    exports.editedOpacity = getEditedElement(null, 'opacity')
-    exports.isOpacityPresent = isElementPresent(null, 'opacity', 1)
-    exports.editedTextColor = getEditedElement('Text', 'textColor')
-    exports.isTextColorPresent = isElementPresent('Text', 'textColor', '#000000')
-    exports.editedTextAuto = getEditedElement('Text', 'textAuto')
-    exports.isTextAutoPresent = isElementPresent('Text', 'textAuto', '#000000')
-    exports.editedLinkColor = getEditedElement('Link', 'textColor')
-    exports.isLinkColorPresent = isElementPresent('Link', 'textColor', '#000080')
-    exports.editedIconColor = getEditedElement('Icon', 'textColor')
-    exports.isIconColorPresent = isElementPresent('Icon', 'textColor', '#909090')
-    exports.editedBorderColor = getEditedElement('Border', 'textColor')
-    exports.isBorderColorPresent = isElementPresent('Border', 'textColor', '#909090')
-
+    const editedBackgroundColor = getEditedElement(null, 'background')
+    const isBackgroundColorPresent = isElementPresent(null, 'background', '#FFFFFF')
+    const editedOpacity = getEditedElement(null, 'opacity')
+    const isOpacityPresent = isElementPresent(null, 'opacity', 1)
+    const editedTextColor = getEditedElement('Text', 'textColor')
+    const isTextColorPresent = isElementPresent('Text', 'textColor', '#000000')
+    const editedTextAuto = getEditedElement('Text', 'textAuto')
+    const isTextAutoPresent = isElementPresent('Text', 'textAuto', '#000000')
+    const editedLinkColor = getEditedElement('Link', 'textColor')
+    const isLinkColorPresent = isElementPresent('Link', 'textColor', '#000080')
+    const editedIconColor = getEditedElement('Icon', 'textColor')
+    const isIconColorPresent = isElementPresent('Icon', 'textColor', '#909090')
     // TODO this is VERY primitive right now, need to make it
     // support variables, fallbacks etc.
-    exports.getContrast = (bg, text) => {
+    const getContrast = (bg, text) => {
       try {
         const bgRgb = hex2rgb(bg)
         const textRgb = hex2rgb(text)
@@ -366,6 +321,7 @@ export default {
     }
 
     const normalizeShadows = (shadows) => {
+      console.log('NORMALIZE')
       return shadows?.map(shadow => {
         if (typeof shadow === 'object') {
           return shadow
@@ -380,23 +336,20 @@ export default {
     // Shadow is partially edited outside the ShadowControl
     // for better space utilization
     const editedShadow = getEditedElement(null, 'shadow', normalizeShadows)
-    exports.editedShadow = editedShadow
     const editedSubShadowId = ref(null)
-    exports.editedSubShadowId = editedSubShadowId
     const editedSubShadow = computed(() => {
       if (editedShadow.value == null || editedSubShadowId.value == null) return null
       return editedShadow.value[editedSubShadowId.value]
     })
-    exports.editedSubShadow = editedSubShadow
-    exports.isShadowPresent = isElementPresent(null, 'shadow', [])
-    exports.onSubShadow = (id) => {
+    const isShadowPresent = isElementPresent(null, 'shadow', [])
+    const onSubShadow = (id) => {
       if (id != null) {
         editedSubShadowId.value = id
       } else {
         editedSubShadow.value = null
       }
     }
-    exports.updateSubShadow = (axis, value) => {
+    const updateSubShadow = (axis, value) => {
       if (!editedSubShadow.value || editedSubShadowId.value == null) return
       const newEditedShadow = [...editedShadow.value]
 
@@ -407,13 +360,13 @@ export default {
 
       editedShadow.value = newEditedShadow
     }
-    exports.isShadowTabOpen = ref(false)
-    exports.onTabSwitch = (tab) => {
-      exports.isShadowTabOpen.value = tab === 'shadow'
+    const isShadowTabOpen = ref(false)
+    const onTabSwitch = (tab) => {
+      isShadowTabOpen.value = tab === 'shadow'
     }
 
     // component preview
-    exports.editorHintStyle = computed(() => {
+    const editorHintStyle = computed(() => {
       const editorHint = selectedComponent.value.editor
       const styles = []
       if (editorHint && Object.keys(editorHint).length > 0) {
@@ -436,7 +389,7 @@ export default {
       .replace(':focus', '.preview-focus')
       .replace(':focus-within', '.preview-focus-within')
       .replace(':disabled', '.preview-disabled')
-    exports.previewClass = computed(() => {
+    const previewClass = computed(() => {
       const selectors = []
       if (!!selectedComponent.value.variants?.normal || selectedVariant.value !== 'normal') {
         selectors.push(selectedComponent.value.variants[selectedVariant.value])
@@ -450,8 +403,7 @@ export default {
       return selectors.map(x => x.substring(1)).join('')
     })
     const previewRules = reactive([])
-    exports.previewRules = previewRules
-    exports.previewCss = computed(() => {
+    const previewCss = computed(() => {
       try {
         const scoped = getCssRules(previewRules).map(simulatePseudoSelectors)
         return scoped.join('\n')
@@ -571,43 +523,9 @@ export default {
         }
       })
     const virtualDirectives = reactive(allCustomVirtualDirectives)
-    exports.virtualDirectives = virtualDirectives
-
-    exports.onVirtualDirectivesUpdate = (e) => {
-      virtualDirectives.splice(0, virtualDirectives.length)
-      virtualDirectives.push(...e)
-    }
-
     const selectedVirtualDirectiveId = ref(0)
-    exports.selectedVirtualDirectiveId = selectedVirtualDirectiveId
-    const selectedVirtualDirective = computed({
-      get () {
-        return virtualDirectives[selectedVirtualDirectiveId.value]
-      },
-      set (value) {
-        virtualDirectives[selectedVirtualDirectiveId.value].value = value
-      }
-    })
-    exports.selectedVirtualDirective = selectedVirtualDirective
-    exports.selectedVirtualDirectiveValType = computed({
-      get () {
-        return virtualDirectives[selectedVirtualDirectiveId.value].valType
-      },
-      set (value) {
-        virtualDirectives[selectedVirtualDirectiveId.value].valType = value
-        switch (value) {
-          case 'shadow':
-            virtualDirectives[selectedVirtualDirectiveId.value].value = '0 0 0 #000000'
-            break
-          case 'color':
-            virtualDirectives[selectedVirtualDirectiveId.value].value = '#000000'
-            break
-          default:
-            virtualDirectives[selectedVirtualDirectiveId.value].value = 'none'
-        }
-      }
-    })
-    exports.selectedVirtualDirectiveParsed = computed({
+    const selectedVirtualDirective = computed(() => virtualDirectives[selectedVirtualDirectiveId.value])
+    const selectedVirtualDirectiveParsed = computed({
       get () {
         switch (selectedVirtualDirective.value.valType) {
           case 'shadow': {
@@ -619,109 +537,25 @@ export default {
               return normalizeShadows(splitShadow)
             }
           }
-          case 'color':
-            return selectedVirtualDirective.value.value
           default:
-            return selectedVirtualDirective.value.value
-        }
-      },
-      set (value) {
-        switch (selectedVirtualDirective.value.valType) {
-          case 'shadow': {
-            virtualDirectives[selectedVirtualDirectiveId.value].value = value.map(x => serializeShadow(x)).join(', ')
-            break
-          }
-          default:
-            virtualDirectives[selectedVirtualDirectiveId.value].value = value
+            return null
         }
       }
     })
 
-    exports.getNewVirtualDirective = () => ({
+    const getNewDirective = () => ({
       name: 'newDirective',
       valType: 'generic',
       value: 'foobar'
     })
 
-    exports.computeColor = (color) => {
-      const computedColor = findColor(color, { dynamicVars: {}, staticVars: selectedPalette.value })
-      if (computedColor) {
-        return rgb2hex(computedColor)
-      }
-      return null
-    }
-
-    const overallPreviewRules = ref()
-    exports.overallPreviewRules = overallPreviewRules
-    exports.updateOverallPreview = () => {
-      try {
-        // This normally would be handled by Root but since we pass something
-        // else we have to make do ourselves
-
-        const { name, ...rest } = selectedPalette.value
-        const paletteRule = {
-          component: 'Root',
-          directives: Object
-            .entries(rest)
-            .map(([k, v]) => ['--' + k, v])
-            .reduce((acc, [k, v]) => ({ ...acc, [k]: `color | ${v}` }), {})
-        }
-
-        const rules = init({
-          inputRuleset: [
-            ...editorFriendlyToOriginal.value,
-            paletteRule
-          ],
-          ultimateBackgroundColor: '#000000',
-          liteMode: true,
-          debug: true
-        }).eager
-
-        overallPreviewRules.value = getScopedVersion(
-          getCssRules(rules),
-          '#edited-style-preview'
-        ).join('\n')
-      } catch (e) {
-        console.error('Could not compile preview theme', e)
-      }
-    }
-
     // ## Export and Import
     const styleExporter = newExporter({
-      filename: () => exports.name.value ?? 'pleroma_theme',
+      filename: name.value || 'pleroma_theme',
       mime: 'text/plain',
       extension: 'piss',
       getExportedObject: () => exportStyleData.value
     })
-
-    const styleImporter = newImporter({
-      accept: '.piss',
-      parser: (string) => deserialize(string),
-      onImport (parsed, filename) {
-        const editorComponents = parsed.filter(x => x.component.startsWith('@'))
-        const rules = parsed.filter(x => !x.component.startsWith('@'))
-        const metaIn = editorComponents.find(x => x.component === '@meta').directives
-        const palettesIn = editorComponents.filter(x => x.component === '@palette')
-
-        exports.name.value = metaIn.name
-        exports.license.value = metaIn.license
-        exports.author.value = metaIn.author
-        exports.website.value = metaIn.website
-
-        onPalettesUpdate(palettesIn.map(x => ({ name: x.variant, ...x.directives })))
-        console.log('PALETTES', palettesIn)
-
-        Object.keys(allEditedRules).forEach((k) => delete allEditedRules[k])
-
-        rules.forEach(rule => {
-          rulesToEditorFriendly(
-            [rule],
-            allEditedRules
-          )
-        })
-      }
-    })
-
     const exportStyleData = computed(() => {
       return [
         metaOut.value,
@@ -729,15 +563,80 @@ export default {
         serialize(editorFriendlyToOriginal.value)
       ].join('\n\n')
     })
-
-    exports.exportStyle = () => {
+    const exportStyle = () => {
       styleExporter.exportData()
     }
 
-    exports.importStyle = () => {
-      styleImporter.importData()
-    }
+    return {
+      // ## Meta
+      name,
+      author,
+      license,
+      website,
 
-    return exports
+      // ## Palette
+      palettes,
+      selectedPalette,
+      selectedPaletteId,
+      getNewPalette,
+
+      // ## Components
+      componentKeys,
+      componentsMap,
+
+      // selection basis
+      selectedComponent,
+      selectedComponentName,
+      selectedComponentKey,
+      selectedComponentVariants,
+      selectedComponentStates,
+
+      // selection
+      selectedVariant,
+      selectedState,
+      updateSelectedStates,
+
+      // component directives
+      componentHas,
+
+      // component colors
+      editedBackgroundColor,
+      isBackgroundColorPresent,
+      editedOpacity,
+      isOpacityPresent,
+      editedTextColor,
+      isTextColorPresent,
+      editedTextAuto,
+      isTextAutoPresent,
+      editedLinkColor,
+      isLinkColorPresent,
+      editedIconColor,
+      isIconColorPresent,
+      getContrast,
+
+      // component shadow
+      editedShadow,
+      editedSubShadow,
+      isShadowPresent,
+      onSubShadow,
+      updateSubShadow,
+      isShadowTabOpen,
+      onTabSwitch,
+
+      // component preview
+      editorHintStyle,
+      previewCss,
+      previewClass,
+
+      // ## Variables
+      virtualDirectives,
+      selectedVirtualDirective,
+      selectedVirtualDirectiveId,
+      selectedVirtualDirectiveParsed,
+      getNewDirective,
+
+      // ## Export and Import
+      exportStyle
+    }
   }
 }
diff --git a/src/components/settings_modal/tabs/style_tab/style_tab.scss b/src/components/settings_modal/tabs/style_tab/style_tab.scss
index 1f63e9c6b..51d4a1a75 100644
--- a/src/components/settings_modal/tabs/style_tab/style_tab.scss
+++ b/src/components/settings_modal/tabs/style_tab/style_tab.scss
@@ -65,60 +65,24 @@
 
     &.heading {
       display: grid;
-      grid-template:
-        "meta meta preview preview"
-        "meta meta preview preview"
-        "meta meta preview preview"
-        "meta meta preview preview"
-        "new  new  preview preview"
-        "load save refresh apply";
+      align-items: baseline;
+      grid-template-columns: 1fr auto auto auto;
       grid-gap: 0.5em;
-      grid-template-columns: min-content min-content 6fr max-content;
-      grid-template-rows: repeat(4, min-content) repeat(2, 2em);
 
-      ul.setting-list {
-        padding: 0;
-        margin: 0;
-        display: grid;
-        grid-template-rows: subgrid;
-        grid-area: meta;
+      h2 {
+        flex: 1 0 auto;
+      }
+    }
 
-        > li {
-          margin: 0;
-        }
+    &.metadata {
+      display: flex;
 
-        .meta-field {
-          margin: 0;
-
-          .setting-label {
-            display: inline-block;
-            margin-bottom: 0.5em;
-          }
-        }
+      .setting-item {
+        flex: 2 0 auto;
       }
 
-      #edited-style-preview {
-        grid-area: preview;
-      }
-
-      .button-save {
-        grid-area: save;
-      }
-
-      .button-load {
-        grid-area: load;
-      }
-
-      .button-new {
-        grid-area: new;
-      }
-
-      .button-refresh {
-        grid-area: refresh;
-      }
-
-      .button-apply {
-        grid-area: apply;
+      li {
+        text-align: right;
       }
     }
   }
@@ -155,18 +119,9 @@
     }
   }
 
-  .palette-editor {
-    width: min-content;
-
+  .palettes-editor {
     .list-edit-area {
-      display: grid;
       align-self: baseline;
-      grid-template-rows: subgrid;
-      grid-template-columns: 1fr;
-    }
-
-    .palette-editor-single {
-      grid-row: 2 / span 2;
     }
   }
 
diff --git a/src/components/settings_modal/tabs/style_tab/style_tab.vue b/src/components/settings_modal/tabs/style_tab/style_tab.vue
index 4d0663370..1ccd7ab8b 100644
--- a/src/components/settings_modal/tabs/style_tab/style_tab.vue
+++ b/src/components/settings_modal/tabs/style_tab/style_tab.vue
@@ -4,66 +4,49 @@
 <template>
   <div class="StyleTab">
     <div class="setting-item heading">
-      <!-- eslint-disable vue/no-v-text-v-html-on-component -->
-      <component
-        :is="'style'"
-        v-html="overallPreviewRules"
-      />
-      <!-- eslint-enable vue/no-v-text-v-html-on-component -->
-      <Preview id="edited-style-preview" />
+      <!-- TODO: This needs to go -->
+      <h2>{{ $t('settings.style.themes3.editor.title') }}</h2>
       <button
-        class="btn button-default button-new"
+        class="btn button-default"
         @click="clearTheme"
       >
         <FAIcon icon="file" />
         {{ $t('settings.style.themes3.editor.new_style') }}
       </button>
       <button
-        class="btn button-default button-load"
+        class="btn button-default"
         @click="importStyle"
       >
         <FAIcon icon="folder-open" />
         {{ $t('settings.style.themes3.editor.load_style') }}
       </button>
       <button
-        class="btn button-default button-save"
+        class="btn button-default"
         @click="exportStyle"
       >
         <FAIcon icon="floppy-disk" />
         {{ $t('settings.style.themes3.editor.save_style') }}
       </button>
-      <button
-        class="btn button-default button-refresh"
-        @click="updateOverallPreview"
-      >
-        <FAIcon icon="arrows-rotate" />
-        {{ $t('settings.style.themes3.editor.refresh_preview') }}
-      </button>
-      <button
-        class="btn button-default button-apply"
-        @click="applyTheme"
-      >
-        <FAIcon icon="check" />
-        {{ $t('settings.style.themes3.editor.apply_preview') }}
-      </button>
-      <ul class="setting-list style-metadata">
+    </div>
+    <div class="setting-item metadata">
+      <ul class="setting-list">
         <li>
-          <StringSetting class="meta-field" v-model="name">
+          <StringSetting v-model="name">
             {{ $t('settings.style.themes3.editor.style_name') }}
           </StringSetting>
         </li>
         <li>
-          <StringSetting class="meta-field" v-model="author">
+          <StringSetting v-model="author">
             {{ $t('settings.style.themes3.editor.style_author') }}
           </StringSetting>
         </li>
         <li>
-          <StringSetting class="meta-field" v-model="license">
+          <StringSetting v-model="license">
             {{ $t('settings.style.themes3.editor.style_license') }}
           </StringSetting>
         </li>
         <li>
-          <StringSetting class="meta-field" v-model="website">
+          <StringSetting v-model="website">
             {{ $t('settings.style.themes3.editor.style_website') }}
           </StringSetting>
         </li>
@@ -165,7 +148,6 @@
           >
             <ColorInput
               v-model="editedBackgroundColor"
-              :fallback="computeColor(editedBackgroundColor)"
               :disabled="!isBackgroundColorPresent"
               :label="$t('settings.style.themes3.editor.background')"
             />
@@ -183,7 +165,6 @@
             <ColorInput
               v-if="componentHas('Text')"
               v-model="editedTextColor"
-              :fallback="computeColor(editedTextColor)"
               :label="$t('settings.style.themes3.editor.text_color')"
               :disabled="!isTextColorPresent"
             />
@@ -232,7 +213,6 @@
             <ColorInput
               v-if="componentHas('Link')"
               v-model="editedLinkColor"
-              :fallback="computeColor(editedLinkColor)"
               :label="$t('settings.style.themes3.editor.link_color')"
               :disabled="!isLinkColorPresent"
             />
@@ -245,7 +225,6 @@
             <ColorInput
               v-if="componentHas('Icon')"
               v-model="editedIconColor"
-              :fallback="computeColor(editedIconColor)"
               :label="$t('settings.style.themes3.editor.icon_color')"
               :disabled="!isIconColorPresent"
             />
@@ -255,19 +234,6 @@
             >
               <Checkbox v-model="isIconColorPresent" />
             </Tooltip>
-            <ColorInput
-              v-if="componentHas('Border')"
-              v-model="editedBorderColor"
-              :fallback="computeColor(editedBorderColor)"
-              :label="$t('settings.style.themes3.editor.Border_color')"
-              :disabled="!isBorderColorPresent"
-            />
-            <Tooltip
-              v-if="componentHas('Border')"
-              :text="$t('settings.style.themes3.editor.include_in_rule')"
-            >
-              <Checkbox v-model="isBorderColorPresent" />
-            </Tooltip>
           </div>
           <div
             key="shadow"
@@ -296,47 +262,38 @@
         :label="$t('settings.style.themes3.editor.palette_tab')"
         class="setting-item list-editor palette-editor"
       >
-        <label
-          class="list-select-label"
-          for="palette-selector"
-        >
-          {{ $t('settings.style.themes3.palette.label') }}
-          {{ ' ' }}
-        </label>
-        <Select
-          id="palette-selector"
-          v-model="selectedPaletteId"
-          class="list-select"
-          size="4"
-        >
-          <option
-            v-for="(p, index) in palettes"
-            :key="p.name"
-            :value="index"
+          <label
+            class="list-select-label"
+            for="palette-selector"
           >
-            {{ p.name }}
-          </option>
-        </Select>
-        <SelectMotion
-          class="list-select-movement"
-          :modelValue="palettes"
-          @update:modelValue="onPalettesUpdate"
-          :selected-id="selectedPaletteId"
-          :get-add-value="getNewPalette"
-          @update:selectedId="e => selectedPaletteId = e"
-        />
-        <div class="list-edit-area">
-          <StringSetting
-            class="palette-name-input"
-            v-model="selectedPalette.name"
+            {{ $t('settings.style.themes3.palette.label') }}
+            {{ ' ' }}
+          </label>
+          <Select
+            id="palette-selector"
+            v-model="selectedPaletteId"
+            class="list-select"
+            size="4"
           >
-            {{ $t('settings.style.themes3.palette.name_label') }}
-          </StringSetting>
-          <PaletteEditor
-            class="palette-editor-single"
-            v-model="selectedPalette"
+            <option
+              v-for="(p, index) in palettes"
+              :key="p.name"
+              :value="index"
+            >
+              {{ p.name }}
+            </option>
+          </Select>
+          <SelectMotion
+            class="list-select-movement"
+            v-model="palettes"
+            :get-add-value="getNewPalette"
+            :selected-id="selectedPaletteId"
+            @update:selectedId="e => selectedPaletteId = e"
           />
-        </div>
+        <PaletteEditor
+          class="list-edit-area"
+          v-model="selectedPalette"
+        />
       </div>
       <div
         key="variables"
@@ -347,14 +304,14 @@
           class="list-select-label"
           for="variables-selector"
         >
-          {{ $t('settings.style.themes3.editor.variables.label') }}
+          {{ $t('settings.style.themes3.variables.label') }}
           {{ ' ' }}
         </label>
         <Select
           id="variables-selector"
           v-model="selectedVirtualDirectiveId"
           class="list-select"
-          size="20"
+          size="9"
         >
           <option
             v-for="(p, index) in virtualDirectives"
@@ -366,8 +323,7 @@
         </Select>
         <SelectMotion
           class="list-select-movement"
-          :modelValue="virtualDirectives"
-          @update:modelValue="onVirtualDirectivesUpdate"
+          v-model="virtualDirectives"
           :selected-id="selectedVirtualDirectiveId"
           :get-add-value="getNewVirtualDirective"
           @update:selectedId="e => selectedVirtualDirectiveId = e"
@@ -378,7 +334,7 @@
               class="variable-name-label"
               for="variables-selector"
             >
-              {{ $t('settings.style.themes3.editor.variables.name_label') }}
+              {{ $t('settings.style.themes3.variables.name_label') }}
               {{ ' ' }}
             </label>
             <input
@@ -389,36 +345,25 @@
               class="variable-type-label"
               for="variables-selector"
             >
-              {{ $t('settings.style.themes3.editor.variables.type_label') }}
+              {{ $t('settings.style.themes3.variables.type_label') }}
               {{ ' ' }}
             </label>
             <Select
-              v-model="selectedVirtualDirectiveValType"
+              v-model="selectedVirtualDirective.valType"
             >
               <option value='shadow'>
-                {{ $t('settings.style.themes3.editor.variables.type_shadow') }}
-              </option>
-              <option value='color'>
-                {{ $t('settings.style.themes3.editor.variables.type_color') }}
-              </option>
-              <option value='generic'>
-                {{ $t('settings.style.themes3.editor.variables.type_generic') }}
-              </option>
+              {{ $t('settings.style.themes3.variables.type_label') }}
+                shadow</option>
+              <option value='shadow'>color</option>
+              <option value='shadow'>generic</option>
             </Select>
           </div>
           <ShadowControl
-            v-if="selectedVirtualDirectiveValType === 'shadow'"
+            v-if="selectedVirtualDirective.valType === 'shadow'"
             v-model="selectedVirtualDirectiveParsed"
-            :computeColor="computeColor"
             :compact="true"
           />
-          <ColorInput
-            v-if="selectedVirtualDirectiveValType === 'color'"
-            v-model="selectedVirtualDirectiveParsed"
-            :fallback="computeColor(selectedVirtualDirectiveParsed)"
-            :label="$t('settings.style.themes3.editor.variables.virtual_color')"
-          />
-        </div>
+          </div>
       </div>
     </tab-switcher>
   </div>
diff --git a/src/components/shadow_control/shadow_control.js b/src/components/shadow_control/shadow_control.js
index 0ffba1834..03797fc53 100644
--- a/src/components/shadow_control/shadow_control.js
+++ b/src/components/shadow_control/shadow_control.js
@@ -46,7 +46,6 @@ export default {
     'separateInset',
     'noPreview',
     'disabled',
-    'computeColor',
     'compact'
   ],
   emits: ['update:modelValue', 'subShadowSelected'],
@@ -108,13 +107,6 @@ export default {
     usingFallback () {
       return this.modelValue == null
     },
-    getFallback () {
-      if (typeof this.computeColor === 'function' && this.selected?.color) {
-        return this.computeColor(this.selected.color)
-      } else {
-        return this.currentFallback?.color
-      }
-    },
     style () {
       try {
         if (this.separateInset) {
diff --git a/src/components/shadow_control/shadow_control.scss b/src/components/shadow_control/shadow_control.scss
index 7e998cdf7..06381b1b3 100644
--- a/src/components/shadow_control/shadow_control.scss
+++ b/src/components/shadow_control/shadow_control.scss
@@ -5,6 +5,8 @@
   grid-template-areas: "selector preview tweak";
   grid-gap: 0.5em;
   justify-content: stretch;
+  margin-bottom: 1em;
+  width: 100%;
 
   &.-compact {
     grid-template-columns: 10em 1fr;
@@ -110,7 +112,7 @@
 
   .shadow-preview {
     grid-area: preview;
-    min-width: 25em;
+    min-width: 10em;
     margin-left: 0.125em;
     align-self: start;
     justify-self: center;
diff --git a/src/components/shadow_control/shadow_control.vue b/src/components/shadow_control/shadow_control.vue
index 1bbdbe2f7..4f0906c70 100644
--- a/src/components/shadow_control/shadow_control.vue
+++ b/src/components/shadow_control/shadow_control.vue
@@ -165,7 +165,7 @@
           :model-value="selected?.color"
           :disabled="disabled || !present"
           :label="$t('settings.style.common.color')"
-          :fallback="getFallback"
+          :fallback="currentFallback?.color"
           :show-optional-tickbox="false"
           name="shadow"
           @update:modelValue="e => updateProperty('color', e)"
diff --git a/src/i18n/en.json b/src/i18n/en.json
index d993b5495..0f2a47812 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -757,8 +757,7 @@
       "themes3": {
         "define": "Override",
         "palette": {
-          "label": "Color schemes",
-          "name_label": "Color scheme name",
+          "label": "Palettes",
           "import": "Import",
           "export": "Export",
           "bg": "Panel background",
@@ -775,6 +774,11 @@
           "extra3": "Extra 3",
           "v2_unsupported": "Older v2 themes don't support palettes. Switch to v3 theme to make use of palettes"
         },
+        "variables": {
+          "label": "Variables",
+          "name_label": "Name:",
+          "type_label": "Type:"
+        },
         "editor": {
           "title": "Style",
           "new_style": "New",
@@ -794,9 +798,6 @@
           "icon_color": "Icon color",
           "link_color": "Link color",
           "include_in_rule": "Add to rule",
-          "test_string": "TEST",
-          "refresh_preview": "Refresh preview",
-          "apply_preview": "Apply",
           "text_auto": {
             "label": "Auto-contrast",
             "no-preserve": "Black or White",
@@ -804,17 +805,8 @@
             "no-auto": "Disabled"
           },
           "component_tab": "Components style",
-          "palette_tab": "Color schemes",
-          "variables_tab": "Variables (Advanced)",
-          "variables": {
-            "label": "Variables",
-            "name_label": "Name:",
-            "type_label": "Type:",
-            "type_shadow": "Shadow",
-            "type_color": "Color",
-            "type_generic": "Generic",
-            "virtual_color": "Variable color value"
-          },
+          "palette_tab": "Color presets",
+          "variables_tab": "Variables (Advanced)"
         },
         "hacks": {
           "underlay_overrides": "Change underlay",
diff --git a/src/services/export_import/export_import.js b/src/services/export_import/export_import.js
index 8865061fc..b8f84351b 100644
--- a/src/services/export_import/export_import.js
+++ b/src/services/export_import/export_import.js
@@ -16,8 +16,7 @@ export const newExporter = ({
 
     // Create an invisible link with a data url and simulate a click
     const e = document.createElement('a')
-    const realFilename = typeof filename === 'function' ? filename() : filename
-    e.setAttribute('download', `${realFilename}.${extension}`)
+    e.setAttribute('download', `${filename}.${extension}`)
     e.setAttribute('href', `data:${mime};base64, ${window.btoa(stringified)}`)
     e.style.display = 'none'
 
@@ -29,7 +28,6 @@ export const newExporter = ({
 
 export const newImporter = ({
   accept = '.json',
-  parser = (string) => JSON.parse(string),
   onImport,
   onImportFailure,
   validator = () => true
@@ -46,7 +44,7 @@ export const newImporter = ({
         const reader = new FileReader()
         reader.onload = ({ target }) => {
           try {
-            const parsed = parser(target.result)
+            const parsed = JSON.parse(target.result)
             const validationResult = validator(parsed, filename)
             if (validationResult === true) {
               onImport(parsed, filename)
diff --git a/src/services/theme_data/iss_deserializer.js b/src/services/theme_data/iss_deserializer.js
index cdde6b14b..3ac8826f2 100644
--- a/src/services/theme_data/iss_deserializer.js
+++ b/src/services/theme_data/iss_deserializer.js
@@ -21,11 +21,7 @@ export const parseShadow = string => {
   const regex = new RegExp(regexPrep, 'gis') // global, (stable) indices, single-string
   const result = regex.exec(string)
   if (result == null) {
-    if (string.startsWith('$') || string.startsWith('--')) {
-      return string
-    } else {
-      throw new Error(`Invalid shadow definition: ${string}`)
-    }
+    return string
   } else {
     const numeric = new Set(['x', 'y', 'blur', 'spread', 'alpha'])
     const { x, y, blur, spread, alpha, inset, color } = Object.fromEntries(modes.map((mode, i) => {
diff --git a/src/services/theme_data/iss_serializer.js b/src/services/theme_data/iss_serializer.js
index e4df416e9..8b7cf5d88 100644
--- a/src/services/theme_data/iss_serializer.js
+++ b/src/services/theme_data/iss_serializer.js
@@ -1,6 +1,6 @@
 import { unroll } from './iss_utils.js'
 
-export const serializeShadow = (s, throwOnInvalid) => {
+const serializeShadow = s => {
   if (typeof s === 'object') {
     return `${s.inset ? 'inset ' : ''}${s.x} ${s.y} ${s.blur} ${s.spread} ${s.color} / ${s.alpha}`
   } else {
diff --git a/src/services/theme_data/theme_data_3.service.js b/src/services/theme_data/theme_data_3.service.js
index aaa253283..e45d2cefd 100644
--- a/src/services/theme_data/theme_data_3.service.js
+++ b/src/services/theme_data/theme_data_3.service.js
@@ -62,7 +62,7 @@ const findShadow = (shadows, { dynamicVars, staticVars }) => {
   })
 }
 
-export const findColor = (color, { dynamicVars, staticVars }) => {
+const findColor = (color, { dynamicVars, staticVars }) => {
   if (typeof color !== 'string' || (!color.startsWith('--') && !color.startsWith('$'))) return color
   let targetColor = null
   if (color.startsWith('--')) {