it works, now to clean it up

src/App.scss

@@ -313,6 +313,7 @@ main-router {
   border-radius: $fallback--panelRadius;
   border-radius: var(--panelRadius, $fallback--panelRadius);
   box-shadow: 1px 1px 4px rgba(0,0,0,.6);
+  box-shadow: var(--panel-shadow);
 }
 
 .panel-body:empty::before {

src/components/shadow_control/shadow_control.js

@@ -9,6 +9,8 @@ export default {
     'value', 'fallback'
   ],
   data () {
+    console.log('sdsa')
+    console.log(this.value, this.fallback)
     return {
       selectedId: 0,
       cValue: this.value || this.fallback
@@ -36,6 +38,9 @@ export default {
       const movable = this.cValue.splice(this.selectedId, 1)[0]
       this.cValue.splice(this.selectedId + 1, 0, movable)
       this.selectedId += 1
+    },
+    update () {
+      this.$emit('input', this.cValue)
     }
   },
   computed: {
@@ -67,7 +72,6 @@ export default {
       return hex2rgb(this.selected.color)
     },
     style () {
-      console.log(StyleSetter.generateShadow(this.cValue))
       return {
         boxShadow: StyleSetter.generateShadow(this.cValue)
       }

src/components/shadow_control/shadow_control.vue

@@ -5,6 +5,7 @@
       <input
         v-model="selected.y"
         :disabled="!present"
+        @input="update"
         class="input-number"
         type="number">
       <div class="wrap">
@@ -182,15 +183,15 @@
     }
     .preview-window {
       flex: 1;
-      background-color: white;
+      background-color: #999999;
       display: flex;
       align-items: center;
       justify-content: center;
       background-image:
-      linear-gradient(45deg, #808080 25%, transparent 25%),
+      linear-gradient(45deg, #666666 25%, transparent 25%),
-      linear-gradient(-45deg, #808080 25%, transparent 25%),
+      linear-gradient(-45deg, #666666 25%, transparent 25%),
-      linear-gradient(45deg, transparent 75%, #808080 75%),
+      linear-gradient(45deg, transparent 75%, #666666 75%),
-      linear-gradient(-45deg, transparent 75%, #808080 75%);
+      linear-gradient(-45deg, transparent 75%, #666666 75%);
       background-size: 20px 20px;
       background-position:0 0, 0 10px, 10px -10px, -10px 0;
 

src/components/style_switcher/style_switcher.js

@@ -1,4 +1,5 @@
 import { rgb2hex, hex2rgb, getContrastRatio, alphaBlend } from '../../services/color_convert/color_convert.js'
+import { set, delete as del } from 'vue'
 import ColorInput from '../color_input/color_input.vue'
 import ShadowControl from '../shadow_control/shadow_control.vue'
 import ContrastRatio from '../contrast_ratio/contrast_ratio.vue'
@@ -155,7 +156,7 @@ export default {
       }
     },
     previewTheme () {
-      if (!this.preview.theme) return { colors: {}, opacity: {}, radii: {} }
+      if (!this.preview.theme) return { colors: {}, opacity: {}, radii: {}, shadows: {} }
       return this.preview.theme
     },
     previewContrast () {
@@ -231,14 +232,30 @@ export default {
       return [this.preview.colorRules, this.preview.radiiRules, 'color: var(--text)'].join(';')
     },
     shadowsAvailable () {
-      return Object.keys(this.preview.theme.shadows)
+      return Object.keys(this.previewTheme.shadows)
     },
-    currentShadow () {
+    currentShadowOverriden: {
-      const fallback = this.preview.theme.shadows[this.shadowSelected];
+      get () {
-      return fallback ? {
+        return this.currentShadow
-        fallback,
+      },
-        value: this.shadowsLocal[this.shadowSelected]
+      set (val) {
-      } : undefined
+        if (val) {
+          set(this.shadowsLocal, this.shadowSelected, Object.assign({}, this.currentShadowFallback))
+        } else {
+          del(this.shadowsLocal, this.shadowSelected)
+        }
+      }
+    },
+    currentShadowFallback () {
+      return this.previewTheme.shadows[this.shadowSelected]
+    },
+    currentShadow: {
+      get () {
+        return this.shadowsLocal[this.shadowSelected]
+      },
+      set (v) {
+        set(this.shadowsLocal, this.shadowSelected, v)
+      }
     }
   },
   components: {
@@ -305,7 +322,10 @@ export default {
     setCustomTheme () {
       this.$store.dispatch('setOption', {
         name: 'customTheme',
-        value: this.currentTheme
+        value: {
+          ...this.currentTheme,
+          shadows: this.shadowsLocal
+        }
       })
     },
 

src/components/style_switcher/style_switcher.vue

@@ -1,5 +1,5 @@
 <template>
-<div>
+  <div>
     <div class="presets-container">
       <div>
         {{$t('settings.presets')}}
@@ -171,15 +171,29 @@
         </div>
       </div>
       <div label="Shadow Realm" class="shadow-container">
-        <div class="shadow-selector">
+        <div>
-          <select id="style-switcher" v-model="shadowSelected" class="style-switcher">
+          Shadow
+          <label for="shadow-switcher" class="shadow-selector select">
+            <select id="shadow-switcher" v-model="shadowSelected" class="shadow-switcher">
               <option v-for="shadow in shadowsAvailable"
                       :value="shadow">
                 {{shadow}}
               </option>
             </select>
+            <i class="icon-down-open"/>
+          </label>
+          <label for="override" class="label">
+            Override
+          </label>
+          <input
+            v-model="currentShadowOverriden"
+            name="override"
+            id="override"
+            class="input-override"
+            type="checkbox">
+          <label class="checkbox-label" for="override"></label>
         </div>
-        <shadow-control v-if="currentShadow" :value="currentShadow.value" :fallback="currentShadow.fallback"/>
+        <shadow-control v-if="currentShadowFallback" :fallback="currentShadowFallback" v-model="currentShadow"/>
       </div>
     </tab-switcher>
 

src/services/style_setter/style_setter.js

@@ -72,7 +72,7 @@ const getTextColor = function (bg, text, preserve) {
 }
 
 const setColors = (input, commit) => {
-  const { colorRules, radiiRules, theme } = generatePreset(input)
+  const { colorRules, radiiRules, shadowRules, theme } = generatePreset(input)
   const head = document.head
   const body = document.body
   body.style.display = 'none'
@@ -84,6 +84,7 @@ const setColors = (input, commit) => {
   styleSheet.toString()
   styleSheet.insertRule(`body { ${colorRules} }`, 'index-max')
   styleSheet.insertRule(`body { ${radiiRules} }`, 'index-max')
+  styleSheet.insertRule(`body { ${shadowRules} }`, 'index-max')
   body.style.display = 'initial'
 
   // commit('setOption', { name: 'colors', value: htmlColors })