diff --git a/client/web/admin/src/components/Settings/UI/CUIBrandingEditor.vue b/client/web/admin/src/components/Settings/UI/CUIBrandingEditor.vue
index 8b9e25308..bcdb8bf57 100644
--- a/client/web/admin/src/components/Settings/UI/CUIBrandingEditor.vue
+++ b/client/web/admin/src/components/Settings/UI/CUIBrandingEditor.vue
@@ -51,9 +51,7 @@
                   cancelBtnLabel: $t('general:label.cancel'),
                   saveBtnLabel: $t('general:label.saveAndClose')
                 }"
-                :color-tooltips="colorSchemeTooltips"
-                :swatchers="themeColors"
-                :swatcher-labels="themeVariables"
+                :theme-settings="settings['ui.studio.themes']"
               />
             </b-form-group>
           </b-col>
@@ -225,12 +223,6 @@ export default {
       const [year, month] = VERSION.split('.')
       return `https://docs.cortezaproject.org/corteza-docs/${year}.${month}/integrator-guide/corteza-studio/index.html`
     },
-    colorSchemeTooltips () {
-      return this.themeVariables.reduce((acc, label) => {
-        acc[label] = this.$t(`theme.variables.${label}`)
-        return acc
-      }, {})
-    },
   },
 
   watch: {
@@ -240,16 +232,11 @@ export default {
         const themes = settings['ui.studio.themes'] || []
         const customCSS = settings['ui.studio.custom-css'] || []
 
-        this.themeColors = themes.map(theme => {
-          theme.values = JSON.parse(theme.values)
-          return theme
-        })
-
         this.themes = this.themeTabs.map((id) => {
           const { title, values = '' } = themes.find(t => t.id === id) || {}
           const defaultCustomCSS = customCSS.find(t => t.id === id) || {}
 
-          let variables = values
+          let variables = JSON.parse(values || '{}')
           let defaultVariables
 
           if (['light', 'dark'].includes(id)) {
diff --git a/client/web/admin/src/components/User/CUserEditorAvatar.vue b/client/web/admin/src/components/User/CUserEditorAvatar.vue
index 605444050..45f8acad7 100644
--- a/client/web/admin/src/components/User/CUserEditorAvatar.vue
+++ b/client/web/admin/src/components/User/CUserEditorAvatar.vue
@@ -62,9 +62,7 @@
                 cancelBtnLabel: $t('general:label.cancel'),
                 saveBtnLabel: $t('general:label.saveAndClose')
               }"
-              :color-tooltips="colorSchemeTooltips"
-              :swatchers="themeColors"
-              :swatcher-labels="swatcherLabels"
+              :theme-settings="themeSettings"
             />
           </b-form-group>
         </b-col>
@@ -87,9 +85,7 @@
                 cancelBtnLabel: $t('general:label.cancel'),
                 saveBtnLabel: $t('general:label.saveAndClose')
               }"
-              :color-tooltips="colorSchemeTooltips"
-              :swatchers="themeColors"
-              :swatcher-labels="swatcherLabels"
+              :theme-settings="themeSettings"
             />
           </b-form-group>
         </b-col>
@@ -145,48 +141,13 @@ export default {
     },
   },
 
-  data () {
-    return {
-      swatcherLabels: [
-        'black',
-        'white',
-        'primary',
-        'secondary',
-        'success',
-        'warning',
-        'danger',
-        'light',
-        'extra-light',
-        'body-bg',
-        'sidebar-bg',
-        'topbar-bg',
-      ],
-    }
-  },
-
   computed: {
     isKindAvatar () {
       return this.user.meta.avatarKind === 'avatar'
     },
 
-    colorSchemeTooltips () {
-      return this.swatcherLabels.reduce((acc, label) => {
-        acc[label] = this.$t(`ui.settings:editor.corteza-studio.theme.variables.${label}`)
-        return acc
-      }, {})
-    },
-
-    themeColors () {
-      const theme = this.$Settings.get('ui.studio.themes', [])
-      if (!theme.length) {
-        return theme
-      }
-
-      return theme.map(theme => {
-        console.log(theme.values)
-        theme.values = JSON.parse(theme.values)
-        return theme
-      })
+    themeSettings () {
+      return this.$Settings.get('ui.studio.themes', [])
     },
   },
 
diff --git a/client/web/compose/src/components/ModuleFields/Configurator/File.vue b/client/web/compose/src/components/ModuleFields/Configurator/File.vue
index 31618d379..69c5fab90 100644
--- a/client/web/compose/src/components/ModuleFields/Configurator/File.vue
+++ b/client/web/compose/src/components/ModuleFields/Configurator/File.vue
@@ -169,14 +169,12 @@
               v-model="f.options.backgroundColor"
               :translations="{
                 modalTitle: $t('kind.file.view.colorPicker'),
-                light: $t('general:swatchers.labels.light'),
-                dark: $t('general:swatchers.labels.dark'),
+                light: $t('general:themes.labels.light'),
+                dark: $t('general:themes.labels.dark'),
                 cancelBtnLabel: $t('general:label.cancel'),
                 saveBtnLabel: $t('general:label.saveAndClose')
               }"
-              :color-tooltips="colorSchemeTooltips"
-              :swatchers="themeColors"
-              :swatcher-labels="swatcherLabels"
+              :theme-settings="themeSettings"
             />
           </b-form-group>
         </b-col>
@@ -201,25 +199,6 @@ export default {
 
   extends: base,
 
-  data () {
-    return {
-      swatcherLabels: [
-        'black',
-        'white',
-        'primary',
-        'secondary',
-        'success',
-        'warning',
-        'danger',
-        'light',
-        'extra-light',
-        'body-bg',
-        'sidebar-bg',
-        'topbar-bg',
-      ],
-    }
-  },
-
   computed: {
     modes () {
       return [
@@ -233,23 +212,8 @@ export default {
       return mode === 'gallery'
     },
 
-    colorSchemeTooltips () {
-      return this.swatcherLabels.reduce((acc, label) => {
-        acc[label] = this.$t(`general:swatchers.tooltips.${label}`)
-        return acc
-      }, {})
-    },
-
-    themeColors () {
-      const theme = this.$Settings.get('ui.studio.themes', [])
-      if (!theme.length) {
-        return theme
-      }
-
-      return theme.map(theme => {
-        theme.values = JSON.parse(theme.values)
-        return theme
-      })
+    themeSettings () {
+      return this.$Settings.get('ui.studio.themes', [])
     },
   },
 }
diff --git a/client/web/compose/src/components/PageBlocks/CalendarConfigurator/FeedSource/configs/Record.vue b/client/web/compose/src/components/PageBlocks/CalendarConfigurator/FeedSource/configs/Record.vue
index 3c0d6c2ff..4526bba73 100644
--- a/client/web/compose/src/components/PageBlocks/CalendarConfigurator/FeedSource/configs/Record.vue
+++ b/client/web/compose/src/components/PageBlocks/CalendarConfigurator/FeedSource/configs/Record.vue
@@ -32,14 +32,12 @@
             v-model="feed.options.color"
             :translations="{
               modalTitle: $t('calendar.recordFeed.colorPicker'),
-              light: $t('general:swatchers.labels.light'),
-              dark: $t('general:swatchers.labels.dark'),
+              light: $t('general:themes.labels.light'),
+              dark: $t('general:themes.labels.dark'),
               cancelBtnLabel: $t('general:label.cancel'),
               saveBtnLabel: $t('general:label.saveAndClose')
             }"
-            :color-tooltips="colorSchemeTooltips"
-            :swatchers="themeColors"
-            :swatcher-labels="swatcherLabels"
+            :theme-settings="themeSettings"
           />
         </b-form-group>
 
@@ -159,25 +157,6 @@ export default {
 
   extends: base,
 
-  data () {
-    return {
-      swatcherLabels: [
-        'black',
-        'white',
-        'primary',
-        'secondary',
-        'success',
-        'warning',
-        'danger',
-        'light',
-        'extra-light',
-        'body-bg',
-        'sidebar-bg',
-        'topbar-bg',
-      ],
-    }
-  },
-
   computed: {
     /**
      * Finds the module, this feed configurator should use
@@ -242,23 +221,8 @@ export default {
       ].filter(f => f.kind === 'DateTime' && !f.isMulti)
     },
 
-    colorSchemeTooltips () {
-      return this.swatcherLabels.reduce((acc, label) => {
-        acc[label] = this.$t(`general:swatchers.tooltips.${label}`)
-        return acc
-      }, {})
-    },
-
-    themeColors () {
-      const theme = this.$Settings.get('ui.studio.themes', [])
-      if (!theme.length) {
-        return theme
-      }
-
-      return theme.map(theme => {
-        theme.values = JSON.parse(theme.values)
-        return theme
-      })
+    themeSettings () {
+      return this.$Settings.get('ui.studio.themes', [])
     },
   },
 }
diff --git a/client/web/compose/src/components/PageBlocks/CalendarConfigurator/FeedSource/configs/Reminder.vue b/client/web/compose/src/components/PageBlocks/CalendarConfigurator/FeedSource/configs/Reminder.vue
index 327281848..febeadb76 100644
--- a/client/web/compose/src/components/PageBlocks/CalendarConfigurator/FeedSource/configs/Reminder.vue
+++ b/client/web/compose/src/components/PageBlocks/CalendarConfigurator/FeedSource/configs/Reminder.vue
@@ -11,14 +11,12 @@
         v-model="feed.options.color"
         :translations="{
           modalTitle: $t('calendar.recordFeed.colorPicker'),
-          light: $t('general:swatchers.labels.light'),
-          dark: $t('general:swatchers.labels.dark'),
+          light: $t('general:themes.labels.light'),
+          dark: $t('general:themes.labels.dark'),
           cancelBtnLabel: $t('general:label.cancel'),
           saveBtnLabel: $t('general:label.saveAndClose')
         }"
-        :color-tooltips="colorSchemeTooltips"
-        :swatchers="themeColors"
-        :swatcher-labels="swatcherLabels"
+        :theme-settings="themeSettings"
       />
     </b-form-group>
   </div>
@@ -40,43 +38,9 @@ export default {
 
   extends: base,
 
-  data () {
-    return {
-      swatcherLabels: [
-        'black',
-        'white',
-        'primary',
-        'secondary',
-        'success',
-        'warning',
-        'danger',
-        'light',
-        'extra-light',
-        'body-bg',
-        'sidebar-bg',
-        'topbar-bg',
-      ],
-    }
-  },
-
   computed: {
-    colorSchemeTooltips () {
-      return this.swatcherLabels.reduce((acc, label) => {
-        acc[label] = this.$t(`general:swatchers.tooltips.${label}`)
-        return acc
-      }, {})
-    },
-
-    themeColors () {
-      const theme = this.$Settings.get('ui.studio.themes', [])
-      if (!theme.length) {
-        return theme
-      }
-
-      return theme.map(theme => {
-        theme.values = JSON.parse(theme.values)
-        return theme
-      })
+    themeSettings () {
+      return this.$Settings.get('ui.studio.themes', [])
     },
   },
 }
diff --git a/client/web/compose/src/components/PageBlocks/FileConfigurator.vue b/client/web/compose/src/components/PageBlocks/FileConfigurator.vue
index 771cbe2de..9e7051a20 100644
--- a/client/web/compose/src/components/PageBlocks/FileConfigurator.vue
+++ b/client/web/compose/src/components/PageBlocks/FileConfigurator.vue
@@ -173,14 +173,12 @@
               v-model="options.backgroundColor"
               :translations="{
                 modalTitle: $t('kind.file.view.colorPicker'),
-                light: $t('general:swatchers.labels.light'),
-                dark: $t('general:swatchers.labels.dark'),
+                light: $t('general:themes.labels.light'),
+                dark: $t('general:themes.labels.dark'),
                 cancelBtnLabel: $t('general:label.cancel'),
                 saveBtnLabel: $t('general:label.saveAndClose')
               }"
-              :color-tooltips="colorSchemeTooltips"
-              :swatchers="themeColors"
-              :swatcher-labels="swatcherLabels"
+              :theme-settings="themeSettings"
             />
           </b-form-group>
         </b-col>
@@ -210,25 +208,6 @@ export default {
 
   extends: base,
 
-  data () {
-    return {
-      swatcherLabels: [
-        'black',
-        'white',
-        'primary',
-        'secondary',
-        'success',
-        'warning',
-        'danger',
-        'light',
-        'extra-light',
-        'body-bg',
-        'sidebar-bg',
-        'topbar-bg',
-      ],
-    }
-  },
-
   computed: {
     endpoint () {
       const { pageID } = this.page
@@ -251,23 +230,8 @@ export default {
       return mode === 'gallery'
     },
 
-    colorSchemeTooltips () {
-      return this.swatcherLabels.reduce((acc, label) => {
-        acc[label] = this.$t(`general:swatchers.tooltips.${label}`)
-        return acc
-      }, {})
-    },
-
-    themeColors () {
-      const theme = this.$Settings.get('ui.studio.themes', [])
-      if (!theme.length) {
-        return theme
-      }
-
-      return theme.map(theme => {
-        theme.values = JSON.parse(theme.values)
-        return theme
-      })
+    themeSettings () {
+      return this.$Settings.get('ui.studio.themes', [])
     },
   },
 
diff --git a/client/web/compose/src/components/PageBlocks/GeometryConfigurator/FeedSource/configs/Record.vue b/client/web/compose/src/components/PageBlocks/GeometryConfigurator/FeedSource/configs/Record.vue
index fa6701f4c..44ddef80d 100644
--- a/client/web/compose/src/components/PageBlocks/GeometryConfigurator/FeedSource/configs/Record.vue
+++ b/client/web/compose/src/components/PageBlocks/GeometryConfigurator/FeedSource/configs/Record.vue
@@ -84,14 +84,12 @@
             v-model="feed.options.color"
             :translations="{
               modalTitle: $t('geometry.recordFeed.colorPicker'),
-              light: $t('general:swatchers.labels.light'),
-              dark: $t('general:swatchers.labels.dark'),
+              light: $t('general:themes.labels.light'),
+              dark: $t('general:themes.labels.dark'),
               cancelBtnLabel: $t('general:label.cancel'),
               saveBtnLabel: $t('general:label.saveAndClose')
             }"
-            :color-tooltips="colorSchemeTooltips"
-            :swatchers="themeColors"
-            :swatcher-labels="swatcherLabels"
+            theme-settings="themeSettings"
           />
         </b-form-group>
 
@@ -145,25 +143,6 @@ export default {
 
   extends: base,
 
-  data () {
-    return {
-      swatcherLabels: [
-        'black',
-        'white',
-        'primary',
-        'secondary',
-        'success',
-        'warning',
-        'danger',
-        'light',
-        'extra-light',
-        'body-bg',
-        'sidebar-bg',
-        'topbar-bg',
-      ],
-    }
-  },
-
   computed: {
     /**
      * Finds the module, this feed configurator should use
@@ -230,23 +209,8 @@ export default {
       ].filter(f => f.kind === 'Geometry')
     },
 
-    colorSchemeTooltips () {
-      return this.swatcherLabels.reduce((acc, label) => {
-        acc[label] = this.$t(`general:swatchers.tooltips.${label}`)
-        return acc
-      }, {})
-    },
-
-    themeColors () {
-      const theme = this.$Settings.get('ui.studio.themes', [])
-      if (!theme.length) {
-        return theme
-      }
-
-      return theme.map(theme => {
-        theme.values = JSON.parse(theme.values)
-        return theme
-      })
+    themeSettings () {
+      return this.$Settings.get('ui.studio.themes', [])
     },
   },
 }
diff --git a/client/web/compose/src/components/PageBlocks/MetricConfigurator/MStyle.vue b/client/web/compose/src/components/PageBlocks/MetricConfigurator/MStyle.vue
index 2b650148b..4c04db806 100644
--- a/client/web/compose/src/components/PageBlocks/MetricConfigurator/MStyle.vue
+++ b/client/web/compose/src/components/PageBlocks/MetricConfigurator/MStyle.vue
@@ -11,14 +11,12 @@
           v-model="options.color"
           :translations="{
             modalTitle: $t('metric.editStyle.colorPicker'),
-            light: $t('general:swatchers.labels.light'),
-            dark: $t('general:swatchers.labels.dark'),
+            light: $t('general:themes.labels.light'),
+            dark: $t('general:themes.labels.dark'),
             cancelBtnLabel: $t('general:label.cancel'),
             saveBtnLabel: $t('general:label.saveAndClose')
           }"
-          :color-tooltips="colorSchemeTooltips"
-          :swatchers="themeColors"
-          :swatcher-labels="swatcherLabels"
+          :theme-settings="themeSettings"
           class="mb-1"
         />
       </b-form-group>
@@ -31,14 +29,12 @@
           v-model="options.backgroundColor"
           :translations="{
             modalTitle: $t('geometry.recordFeed.colorPicker'),
-            light: $t('general:swatchers.labels.light'),
-            dark: $t('general:swatchers.labels.dark'),
+            light: $t('general:themes.labels.light'),
+            dark: $t('general:themes.labels.dark'),
             cancelBtnLabel: $t('general:label.cancel'),
             saveBtnLabel: $t('general:label.saveAndClose')
           }"
-          :color-tooltips="colorSchemeTooltips"
-          :swatchers="themeColors"
-          :swatcher-labels="swatcherLabels"
+          :theme-settings="themeSettings"
           class="mb-1"
         />
       </b-form-group>
@@ -81,43 +77,9 @@ export default {
     },
   },
 
-  data () {
-    return {
-      swatcherLabels: [
-        'black',
-        'white',
-        'primary',
-        'secondary',
-        'success',
-        'warning',
-        'danger',
-        'light',
-        'extra-light',
-        'body-bg',
-        'sidebar-bg',
-        'topbar-bg',
-      ],
-    }
-  },
-
   computed: {
-    colorSchemeTooltips () {
-      return this.swatcherLabels.reduce((acc, label) => {
-        acc[label] = this.$t(`general:swatchers.tooltips.${label}`)
-        return acc
-      }, {})
-    },
-
-    themeColors () {
-      const theme = this.$Settings.get('ui.studio.themes', [])
-      if (!theme.length) {
-        return theme
-      }
-
-      return theme.map(theme => {
-        theme.values = JSON.parse(theme.values)
-        return theme
-      })
+    themeSettings () {
+      return this.$Settings.get('ui.studio.themes', [])
     },
   },
 }
diff --git a/client/web/compose/src/components/PageBlocks/Navigation/Configurator.vue b/client/web/compose/src/components/PageBlocks/Navigation/Configurator.vue
index a6f016af4..43add775d 100644
--- a/client/web/compose/src/components/PageBlocks/Navigation/Configurator.vue
+++ b/client/web/compose/src/components/PageBlocks/Navigation/Configurator.vue
@@ -146,14 +146,12 @@
                         v-model="item.options.textColor"
                         :translations="{
                           modalTitle: $t('navigation.colorPicker'),
-                          light: $t('general:swatchers.labels.light'),
-                          dark: $t('general:swatchers.labels.dark'),
+                          light: $t('general:themes.labels.light'),
+                          dark: $t('general:themes.labels.dark'),
                           cancelBtnLabel: $t('general:label.cancel'),
                           saveBtnLabel: $t('general:label.saveAndClose')
                         }"
-                        :color-tooltips="colorSchemeTooltips"
-                        :swatchers="themeColors"
-                        :swatcher-labels="swatcherLabels"
+                        :theme-settings="themeSettings"
                         class="w-100"
                       />
                     </td>
@@ -163,14 +161,12 @@
                         v-model="item.options.backgroundColor"
                         :translations="{
                           modalTitle: $t('navigation.colorPicker'),
-                          light: $t('general:swatchers.labels.light'),
-                          dark: $t('general:swatchers.labels.dark'),
+                          light: $t('general:themes.labels.light'),
+                          dark: $t('general:themes.labels.dark'),
                           cancelBtnLabel: $t('general:label.cancel'),
                           saveBtnLabel: $t('general:label.saveAndClose')
                         }"
-                        :color-tooltips="colorSchemeTooltips"
-                        :swatchers="themeColors"
-                        :swatcher-labels="swatcherLabels"
+                        :theme-settings="themeSettings"
                         class="w-100"
                       />
                     </td>
@@ -292,42 +288,12 @@ export default {
         { value: 'dropdown', text: this.$t('navigation.dropdown') },
         { value: 'text-section', text: this.$t('navigation.text') },
       ],
-
-      swatcherLabels: [
-        'black',
-        'white',
-        'primary',
-        'secondary',
-        'success',
-        'warning',
-        'danger',
-        'light',
-        'extra-light',
-        'body-bg',
-        'sidebar-bg',
-        'topbar-bg',
-      ],
     }
   },
 
   computed: {
-    colorSchemeTooltips () {
-      return this.swatcherLabels.reduce((acc, label) => {
-        acc[label] = this.$t(`general:swatchers.tooltips.${label}`)
-        return acc
-      }, {})
-    },
-
-    themeColors () {
-      const theme = this.$Settings.get('ui.studio.themes', [])
-      if (!theme.length) {
-        return theme
-      }
-
-      return theme.map(theme => {
-        theme.values = JSON.parse(theme.values)
-        return theme
-      })
+    themeSettings () {
+      return this.$Settings.get('ui.studio.themes', [])
     },
   },
 
diff --git a/client/web/compose/src/views/Admin/Charts/Edit.vue b/client/web/compose/src/views/Admin/Charts/Edit.vue
index 07d54f2d1..c8e02a2bf 100644
--- a/client/web/compose/src/views/Admin/Charts/Edit.vue
+++ b/client/web/compose/src/views/Admin/Charts/Edit.vue
@@ -363,14 +363,12 @@
           data-test-id="input-scheme-color"
           :translations="{
             modalTitle: $t('colorScheme.pickAColor'),
-            light: $t('general:swatchers.labels.light'),
-            dark: $t('general:swatchers.labels.dark'),
+            light: $t('general:themes.labels.light'),
+            dark: $t('general:themes.labels.dark'),
             cancelBtnLabel: $t('general:label.cancel'),
             saveBtnLabel: $t('general:label.saveAndClose')
           }"
-          :color-tooltips="colorSchemeTooltips"
-          :swatchers="themeColors"
-          :swatcher-labels="swatcherLabels"
+          :theme-settings="themeSettings"
           class="d-inline-flex mr-1"
         >
           <template #footer>
@@ -512,21 +510,6 @@ export default {
         on: this.$t('general:label.yes'),
         off: this.$t('general:label.no'),
       },
-
-      swatcherLabels: [
-        'black',
-        'white',
-        'primary',
-        'secondary',
-        'success',
-        'warning',
-        'danger',
-        'light',
-        'extra-light',
-        'body-bg',
-        'sidebar-bg',
-        'topbar-bg',
-      ],
     }
   },
 
@@ -576,13 +559,6 @@ export default {
       return this.$t(`colorScheme.custom.${this.colorSchemeModal.edit ? 'edit' : 'add'}`)
     },
 
-    colorSchemeTooltips () {
-      return this.swatcherLabels.reduce((acc, label) => {
-        acc[label] = this.$t(`general:swatchers.tooltips.${label}`)
-        return acc
-      }, {})
-    },
-
     defaultReport () {
       return Object.assign({}, defaultReport)
     },
@@ -685,16 +661,8 @@ export default {
       return config.colorScheme && config.colorScheme.includes('custom') && this.canManageColorSchemes
     },
 
-    themeColors () {
-      const theme = this.$Settings.get('ui.studio.themes', [])
-      if (!theme.length) {
-        return theme
-      }
-
-      return theme.map(theme => {
-        theme.values = JSON.parse(theme.values)
-        return theme
-      })
+    themeSettings () {
+      return this.$Settings.get('ui.studio.themes', [])
     },
   },
 
diff --git a/client/web/reporter/src/components/Report/Blocks/DisplayElements/Configurators/Metric.vue b/client/web/reporter/src/components/Report/Blocks/DisplayElements/Configurators/Metric.vue
index 297f717ff..5e1ff9832 100644
--- a/client/web/reporter/src/components/Report/Blocks/DisplayElements/Configurators/Metric.vue
+++ b/client/web/reporter/src/components/Report/Blocks/DisplayElements/Configurators/Metric.vue
@@ -58,14 +58,12 @@
             v-model="options.color"
             :translations="{
               modalTitle: $t('color.picker'),
-              light: $t('swatchers.labels.light'),
-              dark: $t('swatchers.labels.dark'),
+              light: $t('general:themes.labels.light'),
+              dark: $t('general:themes.labels.dark'),
               cancelBtnLabel: $t('general:label.cancel'),
               saveBtnLabel: $t('general:label.saveAndClose')
             }"
-            :color-tooltips="colorSchemeTooltips"
-            :swatchers="themeColors"
-            :swatcher-labels="swatcherLabels"
+            :theme-settings="themeSettings"
           />
         </b-form-group>
       </b-col>
@@ -78,14 +76,12 @@
             v-model="options.backgroundColor"
             :translations="{
               modalTitle: $t('color.picker'),
-              light: $t('swatchers.labels.light'),
-              dark: $t('swatchers.labels.dark'),
+              light: $t('general:themes.labels.light'),
+              dark: $t('general:themes.labels.dark'),
               cancelBtnLabel: $t('general:label.cancel'),
               saveBtnLabel: $t('general:label.saveAndClose')
             }"
-            :color-tooltips="colorSchemeTooltips"
-            :swatchers="themeColors"
-            :swatcher-labels="swatcherLabels"
+            :theme-settings="themeSettings"
           />
         </b-form-group>
       </b-col>
@@ -112,25 +108,6 @@ export default {
 
   extends: base,
 
-  data () {
-    return {
-      swatcherLabels: [
-        'black',
-        'white',
-        'primary',
-        'secondary',
-        'success',
-        'warning',
-        'danger',
-        'light',
-        'extra-light',
-        'body-bg',
-        'sidebar-bg',
-        'topbar-bg',
-      ],
-    }
-  },
-
   computed: {
     valueColumns () {
       const columns = this.columns.length ? this.columns[0] : []
@@ -139,23 +116,8 @@ export default {
       ].sort((a, b) => a.label.localeCompare(b.label))
     },
 
-    colorSchemeTooltips () {
-      return this.swatcherLabels.reduce((acc, label) => {
-        acc[label] = this.$t(`swatchers.tooltips.${label}`)
-        return acc
-      }, {})
-    },
-
-    themeColors () {
-      const theme = this.$Settings.get('ui.studio.themes', [])
-      if (!theme.length) {
-        return theme
-      }
-
-      return theme.map(theme => {
-        theme.values = JSON.parse(theme.values)
-        return theme
-      })
+    themeSettings () {
+      return this.$Settings.get('ui.studio.themes', [])
     },
   },
 }
diff --git a/lib/vue/src/components/input/CInputColorPicker.vue b/lib/vue/src/components/input/CInputColorPicker.vue
index 7f614da06..96eb68b8e 100644
--- a/lib/vue/src/components/input/CInputColorPicker.vue
+++ b/lib/vue/src/components/input/CInputColorPicker.vue
@@ -67,23 +67,23 @@
         @input="updateColor"
       />
 
-      <hr/>
+      <hr v-if="themes.length > 0" />
       <div 
-        v-for="swatcher in swatchers"
-        :key="swatcher.id"
-        class="d-flex flex-nowrap p-2"
+        v-for="theme in themes"
+        :key="theme.id"
+        class="d-flex p-2"
       >
           <div 
-            v-for="key in swatcherLabels"
-            :key="key"
+            v-for="variable in themeVariables"
+            :key="variable.label"
             class="mb-2"
           >
           <b-button 
             squared 
-            class="swatcher" 
-            v-b-tooltip.hover="{ title: colorToolTip(swatcher.id,key), container: '#body' }"
-            :style="{ backgroundColor: swatcher.values[key], borderColor: swatcher.values[key] }"
-            @click="setColor(swatcher.values[key])"
+            class="swatch" 
+            v-b-tooltip.hover="{ title: colorToolTip(theme.id,variable.value), container: '#body' }"
+            :style="{ backgroundColor: theme.values[variable.label], borderColor: theme.values[variable.label] }"
+            @click="setColor(theme.values[variable.label])"
           >
           </b-button>
         </div>
@@ -159,19 +159,48 @@ export default {
       default: true,
     },
 
-    swatchers: {
+    themeSettings: {
       type: Array,
       default: [],
     },
 
-    swatcherLabels: {
+    themeVariables: {
       type: Array,
-      default: [],
-    },
-
-    colorTooltips: {
-      type: Object,
-    },
+      default: () => [
+        {
+          label: 'white',
+          value: 'White',
+        },
+        {
+          label: 'primary',
+          value: 'Primary',
+        },
+        {
+          label: 'secondary',
+          value: 'Secondary',
+        },
+        {
+          label: 'success',
+          value: 'Success',
+        },
+        {
+          label: 'warning',
+          value: 'Warning',
+        },
+        {
+          label: 'danger',
+          value: 'Danger',
+        },
+        {
+          label: 'light',
+          value: 'Light',
+        },
+        {
+          label: 'extra-light',
+          value: 'Extra light',
+        },
+      ],
+    }
   },
 
   data () {
@@ -181,6 +210,19 @@ export default {
     }
   },
 
+  computed: {
+    themes () {
+      return this.themeSettings
+      .filter((theme) => theme.id !== 'general') // remove general theme
+      .map((theme) => {
+        return {
+          id: theme.id,
+          values: JSON.parse(theme.values),
+        }
+      })
+    },
+  },
+
   watch: {
     value: {
       immediate: true,
@@ -226,14 +268,14 @@ export default {
     },
 
     colorToolTip (themeID, label) {
-      return `${this.translations[themeID]} - ${this.colorTooltips[label]}`
+      return `${this.translations[themeID]} - ${label}`
     },
   },
 }
 </script>
 
 <style lang="scss">
-.swatcher {
+.swatch {
   width: 32px;
   height: 32px;
 }
diff --git a/locale/en/corteza-webapp-admin/general.yaml b/locale/en/corteza-webapp-admin/general.yaml
index 3873ca9ad..c89c4141c 100644
--- a/locale/en/corteza-webapp-admin/general.yaml
+++ b/locale/en/corteza-webapp-admin/general.yaml
@@ -57,3 +57,8 @@ editor:
 resourceList:
   pagination:
     recordsPerPage: Records per page
+    
+themes:
+  labels:
+    light: Light
+    dark: Dark
\ No newline at end of file
diff --git a/locale/en/corteza-webapp-compose/general.yaml b/locale/en/corteza-webapp-compose/general.yaml
index e0bf1286a..07197613d 100644
--- a/locale/en/corteza-webapp-compose/general.yaml
+++ b/locale/en/corteza-webapp-compose/general.yaml
@@ -180,20 +180,7 @@ variants:
 editor:
   unsavedChanges:  Unsaved changes will be lost. Do you wish to leave the page?
 
-swatchers:
+themes:
   labels:
     light: Light
-    dark: Dark
-  tooltips:
-      white: White
-      black: Black
-      primary: Primary
-      secondary: Secondary
-      success: Success
-      warning: Warning
-      danger: Danger
-      light: Light
-      extra-light: Extra light
-      body-bg: Body background
-      sidebar-bg: Sidebar background
-      topbar-bg: Topbar background
+    dark: Dark
\ No newline at end of file
diff --git a/locale/en/corteza-webapp-reporter/display-element.yaml b/locale/en/corteza-webapp-reporter/display-element.yaml
index f7b73265a..f144db288 100644
--- a/locale/en/corteza-webapp-reporter/display-element.yaml
+++ b/locale/en/corteza-webapp-reporter/display-element.yaml
@@ -90,23 +90,6 @@ metric:
       background: Background color
       text: Text color
       picker: Choose a color
-    swatchers:
-      labels:
-        light: Light theme
-        dark: Dark theme
-      tooltips:
-        white: White
-        black: Black
-        primary: Primary
-        secondary: Secondary
-        success: Success
-        warning: Warning
-        danger: Danger
-        light: Light
-        extra-light: Extra light
-        body-bg: Body background
-        sidebar-bg: Sidebar background
-        topbar-bg: Topbar background
     format: Format
     label-column: Label column
     none: None
diff --git a/locale/en/corteza-webapp-reporter/general.yaml b/locale/en/corteza-webapp-reporter/general.yaml
index 5f745aca3..6dce6d279 100644
--- a/locale/en/corteza-webapp-reporter/general.yaml
+++ b/locale/en/corteza-webapp-reporter/general.yaml
@@ -33,3 +33,9 @@ resourceList:
     single: 'One {{data}}'
     single_plural: '{{count}} {{data}}'
     recordsPerPage: Records per page
+
+themes:
+  labels:
+    light: Light
+    dark: Dark
+    
\ No newline at end of file