diff --git a/package.json b/package.json
index 70a1dd7f..edce40d6 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@soramitsu/soramitsu-js-ui",
-  "version": "0.5.6",
+  "version": "0.5.7",
   "private": false,
   "publishConfig": {
     "registry": "https://nexus.iroha.tech/repository/npm-soramitsu-private/"
diff --git a/src/stories/Intro/Customization.stories.ts b/src/stories/Intro/Customization.stories.ts
index 43df1693..17083f81 100644
--- a/src/stories/Intro/Customization.stories.ts
+++ b/src/stories/Intro/Customization.stories.ts
@@ -10,10 +10,11 @@ export default {
   excludeStories: /.*Data$/
 }
 
-const getColorsData = (colors) => Object.values(colors).map(color => {
-  const value = getComputedStyle(document.documentElement).getPropertyValue(`--s-color-${color}`)
+const colorPropertyPrefix = '--s-color-'
+const getColorsData = (colors) => Object.values(colors).map(colorPropertyName => {
+  const value = getComputedStyle(document.documentElement).getPropertyValue(`${colorPropertyPrefix}${colorPropertyName}`)
   const isRgb = value.includes('rgb')
-  return { label: color, value, isRgb }
+  return { label: colorPropertyName, value, isRgb }
 })
 export const colorsSectionsData = [
   { title: 'Theme / Accent', colors: getColorsData(AccentColors) },
@@ -84,7 +85,7 @@ export const configurable = () => ({
   }),
   methods: {
     handleColorChange: (label: string, color: string) => {
-      document.documentElement.style.setProperty(label, color)
+      document.documentElement.style.setProperty(`${colorPropertyPrefix}${label}`, color)
     }
   }
 })