diff --git a/public/sass/theme.dark.generated.json b/public/sass/theme.dark.generated.json
new file mode 100644
index 00000000000..fc5311eaa6d
--- /dev/null
+++ b/public/sass/theme.dark.generated.json
@@ -0,0 +1,946 @@
+{
+  "name": "Dark",
+  "isDark": true,
+  "isLight": false,
+  "colors": {
+    "mode": "dark",
+    "whiteBase": "204, 204, 220",
+    "border": {
+      "weak": "rgba(204, 204, 220, 0.07)",
+      "medium": "rgba(204, 204, 220, 0.15)",
+      "strong": "rgba(204, 204, 220, 0.25)"
+    },
+    "text": {
+      "primary": "rgb(204, 204, 220)",
+      "secondary": "rgba(204, 204, 220, 0.65)",
+      "disabled": "rgba(204, 204, 220, 0.6)",
+      "link": "#6E9FFF",
+      "maxContrast": "#FFFFFF"
+    },
+    "primary": {
+      "main": "#3D71D9",
+      "text": "#6E9FFF",
+      "border": "#6E9FFF",
+      "name": "primary",
+      "shade": "rgb(90, 134, 222)",
+      "transparent": "#3D71D926",
+      "contrastText": "#FFFFFF"
+    },
+    "secondary": {
+      "main": "rgba(204, 204, 220, 0.16)",
+      "shade": "rgba(204, 204, 220, 0.20)",
+      "text": "rgb(204, 204, 220)",
+      "contrastText": "rgb(204, 204, 220)",
+      "border": "rgba(204, 204, 220, 0.25)",
+      "name": "secondary",
+      "transparent": "rgba(204, 204, 220, 0.15)"
+    },
+    "info": {
+      "main": "#3D71D9",
+      "text": "#6E9FFF",
+      "border": "#6E9FFF",
+      "name": "info",
+      "shade": "rgb(90, 134, 222)",
+      "transparent": "#3D71D926",
+      "contrastText": "#FFFFFF"
+    },
+    "error": {
+      "main": "#D10E5C",
+      "text": "#FF5286",
+      "name": "error",
+      "border": "#FF5286",
+      "shade": "rgb(215, 50, 116)",
+      "transparent": "#D10E5C26",
+      "contrastText": "#FFFFFF"
+    },
+    "success": {
+      "main": "#1A7F4B",
+      "text": "#6CCF8E",
+      "name": "success",
+      "border": "#6CCF8E",
+      "shade": "rgb(60, 146, 102)",
+      "transparent": "#1A7F4B26",
+      "contrastText": "#FFFFFF"
+    },
+    "warning": {
+      "main": "#F5B73D",
+      "text": "#F8D06B",
+      "name": "warning",
+      "border": "#F8D06B",
+      "shade": "rgb(246, 193, 90)",
+      "transparent": "#F5B73D26",
+      "contrastText": "#000000"
+    },
+    "background": {
+      "canvas": "#111217",
+      "primary": "#181b1f",
+      "secondary": "#22252b"
+    },
+    "action": {
+      "hover": "rgba(204, 204, 220, 0.16)",
+      "selected": "rgba(204, 204, 220, 0.12)",
+      "focus": "rgba(204, 204, 220, 0.16)",
+      "hoverOpacity": 0.08,
+      "disabledText": "rgba(204, 204, 220, 0.6)",
+      "disabledBackground": "rgba(204, 204, 220, 0.04)",
+      "disabledOpacity": 0.38
+    },
+    "gradients": {
+      "brandHorizontal": " linear-gradient(270deg, #F55F3E 0%, #FF8833 100%);",
+      "brandVertical": "linear-gradient(0.01deg, #F55F3E 0.01%, #FF8833 99.99%);"
+    },
+    "contrastThreshold": 3,
+    "hoverFactor": 0.03,
+    "tonalOffset": 0.15
+  },
+  "breakpoints": {
+    "values": {
+      "xs": 0,
+      "sm": 544,
+      "md": 769,
+      "lg": 992,
+      "xl": 1200,
+      "xxl": 1440
+    },
+    "keys": ["xs", "sm", "md", "lg", "xl", "xxl"],
+    "unit": "px"
+  },
+  "shape": {},
+  "components": {
+    "height": {
+      "sm": 3,
+      "md": 4,
+      "lg": 6
+    },
+    "input": {
+      "borderColor": "rgba(204, 204, 220, 0.15)",
+      "borderHover": "rgba(204, 204, 220, 0.25)",
+      "text": "rgb(204, 204, 220)",
+      "background": "#111217"
+    },
+    "panel": {
+      "padding": 1,
+      "headerHeight": 4,
+      "background": "#181b1f",
+      "borderColor": "rgba(204, 204, 220, 0.07)",
+      "boxShadow": "none"
+    },
+    "dropdown": {
+      "background": "#111217"
+    },
+    "tooltip": {
+      "background": "#35383e",
+      "text": "rgb(204, 204, 220)"
+    },
+    "dashboard": {
+      "background": "#111217",
+      "padding": 1
+    },
+    "overlay": {
+      "background": "rgba(63, 62, 62, 0.45)"
+    },
+    "sidemenu": {
+      "width": 48
+    }
+  },
+  "typography": {
+    "htmlFontSize": 14,
+    "fontFamily": "\"Roboto\", \"Helvetica\", \"Arial\", sans-serif",
+    "fontFamilyMonospace": "'Roboto Mono', monospace",
+    "fontSize": 14,
+    "fontWeightLight": 300,
+    "fontWeightRegular": 400,
+    "fontWeightMedium": 500,
+    "fontWeightBold": 500,
+    "size": {
+      "base": "14px",
+      "xs": "10px",
+      "sm": "12px",
+      "md": "14px",
+      "lg": "18px"
+    },
+    "h1": {
+      "fontFamily": "\"Roboto\", \"Helvetica\", \"Arial\", sans-serif",
+      "fontWeight": 300,
+      "fontSize": "2rem",
+      "lineHeight": 1.167,
+      "letterSpacing": "-0.00893em"
+    },
+    "h2": {
+      "fontFamily": "\"Roboto\", \"Helvetica\", \"Arial\", sans-serif",
+      "fontWeight": 300,
+      "fontSize": "1.7142857142857142rem",
+      "lineHeight": 1.2,
+      "letterSpacing": "0em"
+    },
+    "h3": {
+      "fontFamily": "\"Roboto\", \"Helvetica\", \"Arial\", sans-serif",
+      "fontWeight": 400,
+      "fontSize": "1.5rem",
+      "lineHeight": 1.167,
+      "letterSpacing": "0em"
+    },
+    "h4": {
+      "fontFamily": "\"Roboto\", \"Helvetica\", \"Arial\", sans-serif",
+      "fontWeight": 400,
+      "fontSize": "1.2857142857142858rem",
+      "lineHeight": 1.235,
+      "letterSpacing": "0.01389em"
+    },
+    "h5": {
+      "fontFamily": "\"Roboto\", \"Helvetica\", \"Arial\", sans-serif",
+      "fontWeight": 400,
+      "fontSize": "1.1428571428571428rem",
+      "lineHeight": 1.334,
+      "letterSpacing": "0em"
+    },
+    "h6": {
+      "fontFamily": "\"Roboto\", \"Helvetica\", \"Arial\", sans-serif",
+      "fontWeight": 500,
+      "fontSize": "1rem",
+      "lineHeight": 1.6,
+      "letterSpacing": "0.01071em"
+    },
+    "body": {
+      "fontFamily": "\"Roboto\", \"Helvetica\", \"Arial\", sans-serif",
+      "fontWeight": 400,
+      "fontSize": "1rem",
+      "lineHeight": 1.5,
+      "letterSpacing": "0.01071em"
+    },
+    "bodySmall": {
+      "fontFamily": "\"Roboto\", \"Helvetica\", \"Arial\", sans-serif",
+      "fontWeight": 400,
+      "fontSize": "0.8571428571428571rem",
+      "lineHeight": 1.5,
+      "letterSpacing": "0.0125em"
+    }
+  },
+  "shadows": {
+    "z1": "0px 1px 2px rgba(24, 26, 27, 0.75)",
+    "z2": "0px 4px 8px rgba(24, 26, 27, 0.75)",
+    "z3": "0px 8px 24px rgb(1,4,9)"
+  },
+  "transitions": {
+    "duration": {
+      "shortest": 150,
+      "shorter": 200,
+      "short": 250,
+      "standard": 300,
+      "complex": 375,
+      "enteringScreen": 225,
+      "leavingScreen": 195
+    },
+    "easing": {
+      "easeInOut": "cubic-bezier(0.4, 0, 0.2, 1)",
+      "easeOut": "cubic-bezier(0.0, 0, 0.2, 1)",
+      "easeIn": "cubic-bezier(0.4, 0, 1, 1)",
+      "sharp": "cubic-bezier(0.4, 0, 0.6, 1)"
+    }
+  },
+  "visualization": {
+    "hues": [
+      {
+        "name": "red",
+        "shades": [
+          {
+            "color": "#FFA6B0",
+            "name": "super-light-red"
+          },
+          {
+            "color": "#FF7383",
+            "name": "light-red"
+          },
+          {
+            "color": "#F2495C",
+            "name": "red",
+            "primary": true
+          },
+          {
+            "color": "#E02F44",
+            "name": "semi-dark-red"
+          },
+          {
+            "color": "#C4162A",
+            "name": "dark-red"
+          }
+        ]
+      },
+      {
+        "name": "orange",
+        "shades": [
+          {
+            "color": "#FFCB7D",
+            "name": "super-light-orange",
+            "aliases": []
+          },
+          {
+            "color": "#FFB357",
+            "name": "light-orange",
+            "aliases": []
+          },
+          {
+            "color": "#FF9830",
+            "name": "orange",
+            "aliases": [],
+            "primary": true
+          },
+          {
+            "color": "#FF780A",
+            "name": "semi-dark-orange",
+            "aliases": []
+          },
+          {
+            "color": "#FA6400",
+            "name": "dark-orange",
+            "aliases": []
+          }
+        ]
+      },
+      {
+        "name": "yellow",
+        "shades": [
+          {
+            "color": "#FFF899",
+            "name": "super-light-yellow",
+            "aliases": []
+          },
+          {
+            "color": "#FFEE52",
+            "name": "light-yellow",
+            "aliases": []
+          },
+          {
+            "color": "#FADE2A",
+            "name": "yellow",
+            "aliases": [],
+            "primary": true
+          },
+          {
+            "color": "#F2CC0C",
+            "name": "semi-dark-yellow",
+            "aliases": []
+          },
+          {
+            "color": "#E0B400",
+            "name": "dark-yellow",
+            "aliases": []
+          }
+        ]
+      },
+      {
+        "name": "green",
+        "shades": [
+          {
+            "color": "#C8F2C2",
+            "name": "super-light-green",
+            "aliases": []
+          },
+          {
+            "color": "#96D98D",
+            "name": "light-green",
+            "aliases": []
+          },
+          {
+            "color": "#73BF69",
+            "name": "green",
+            "aliases": [],
+            "primary": true
+          },
+          {
+            "color": "#56A64B",
+            "name": "semi-dark-green",
+            "aliases": []
+          },
+          {
+            "color": "#37872D",
+            "name": "dark-green",
+            "aliases": []
+          }
+        ]
+      },
+      {
+        "name": "blue",
+        "shades": [
+          {
+            "color": "#C0D8FF",
+            "name": "super-light-blue",
+            "aliases": []
+          },
+          {
+            "color": "#8AB8FF",
+            "name": "light-blue",
+            "aliases": []
+          },
+          {
+            "color": "#5794F2",
+            "name": "blue",
+            "aliases": [],
+            "primary": true
+          },
+          {
+            "color": "#3274D9",
+            "name": "semi-dark-blue",
+            "aliases": []
+          },
+          {
+            "color": "#1F60C4",
+            "name": "dark-blue",
+            "aliases": []
+          }
+        ]
+      },
+      {
+        "name": "purple",
+        "shades": [
+          {
+            "color": "#DEB6F2",
+            "name": "super-light-purple",
+            "aliases": []
+          },
+          {
+            "color": "#CA95E5",
+            "name": "light-purple",
+            "aliases": []
+          },
+          {
+            "color": "#B877D9",
+            "name": "purple",
+            "aliases": [],
+            "primary": true
+          },
+          {
+            "color": "#A352CC",
+            "name": "semi-dark-purple",
+            "aliases": []
+          },
+          {
+            "color": "#8F3BB8",
+            "name": "dark-purple",
+            "aliases": []
+          }
+        ]
+      }
+    ],
+    "palette": [
+      "green",
+      "semi-dark-yellow",
+      "light-blue",
+      "semi-dark-orange",
+      "red",
+      "blue",
+      "purple",
+      "#705DA0",
+      "dark-green",
+      "yellow",
+      "#447EBC",
+      "#C15C17",
+      "#890F02",
+      "#0A437C",
+      "#6D1F62",
+      "#584477",
+      "#B7DBAB",
+      "#F4D598",
+      "#70DBED",
+      "#F9BA8F",
+      "#F29191",
+      "#82B5D8",
+      "#E5A8E2",
+      "#AEA2E0",
+      "#629E51",
+      "#E5AC0E",
+      "#64B0C8",
+      "#E0752D",
+      "#BF1B00",
+      "#0A50A1",
+      "#962D82",
+      "#614D93",
+      "#9AC48A",
+      "#F2C96D",
+      "#65C5DB",
+      "#F9934E",
+      "#EA6460",
+      "#5195CE",
+      "#D683CE",
+      "#806EB7",
+      "#3F6833",
+      "#967302",
+      "#2F575E",
+      "#99440A",
+      "#58140C",
+      "#052B51",
+      "#511749",
+      "#3F2B5B",
+      "#E0F9D7",
+      "#FCEACA",
+      "#CFFAFF",
+      "#F9E2D2",
+      "#FCE2DE",
+      "#BADFF4",
+      "#F9D9F9",
+      "#DEDAF7"
+    ]
+  },
+  "zIndex": {
+    "navbarFixed": 1000,
+    "sidemenu": 1020,
+    "dropdown": 1030,
+    "typeahead": 1030,
+    "tooltip": 1040,
+    "modalBackdrop": 1050,
+    "modal": 1060,
+    "portal": 1061
+  },
+  "v1": {
+    "name": "Dark",
+    "typography": {
+      "fontFamily": {
+        "sansSerif": "\"Roboto\", \"Helvetica\", \"Arial\", sans-serif",
+        "monospace": "'Roboto Mono', monospace"
+      },
+      "size": {
+        "base": "14px",
+        "xs": "10px",
+        "sm": "12px",
+        "md": "14px",
+        "lg": "18px"
+      },
+      "heading": {
+        "h1": "2rem",
+        "h2": "1.7142857142857142rem",
+        "h3": "1.5rem",
+        "h4": "1.2857142857142858rem",
+        "h5": "1.1428571428571428rem",
+        "h6": "1rem"
+      },
+      "weight": {
+        "light": 300,
+        "regular": 400,
+        "semibold": 500,
+        "bold": 500
+      },
+      "lineHeight": {
+        "xs": 1.5,
+        "sm": 1.5,
+        "md": 1.5,
+        "lg": 1.2
+      },
+      "link": {
+        "decoration": "none",
+        "hoverDecoration": "none"
+      }
+    },
+    "breakpoints": {
+      "xs": "0px",
+      "sm": "544px",
+      "md": "769px",
+      "lg": "992px",
+      "xl": "1200px",
+      "xxl": "1440px"
+    },
+    "spacing": {
+      "base": 8,
+      "insetSquishMd": "4px 8px",
+      "d": "16px",
+      "xxs": "2px",
+      "xs": "4px",
+      "sm": "8px",
+      "md": "16px",
+      "lg": "24px",
+      "xl": "32px",
+      "gutter": "32px",
+      "formSpacingBase": 8,
+      "formMargin": "32px",
+      "formFieldsetMargin": "16px",
+      "formInputHeight": 32,
+      "formButtonHeight": 32,
+      "formInputPaddingHorizontal": "8px",
+      "formInputAffixPaddingHorizontal": "4px",
+      "formInputMargin": "16px",
+      "formLabelPadding": "0 0 0 2px",
+      "formLabelMargin": "0 0 4px 0",
+      "formValidationMessagePadding": "4px 8px",
+      "formValidationMessageMargin": "4px 0 0 0",
+      "inlineFormMargin": "4px"
+    },
+    "border": {
+      "radius": {
+        "sm": "2px",
+        "md": "4px",
+        "lg": "6px"
+      },
+      "width": {
+        "sm": "1px"
+      }
+    },
+    "height": {
+      "sm": 24,
+      "md": 32,
+      "lg": 48
+    },
+    "panelPadding": 8,
+    "panelHeaderHeight": 32,
+    "zIndex": {
+      "navbarFixed": 1000,
+      "sidemenu": 1020,
+      "dropdown": 1030,
+      "typeahead": 1030,
+      "tooltip": 1040,
+      "modalBackdrop": 1050,
+      "modal": 1060,
+      "portal": 1061
+    },
+    "type": "dark",
+    "isDark": true,
+    "isLight": false,
+    "palette": {
+      "gray98": "#f7f8fa",
+      "gray97": "#f1f5f9",
+      "gray95": "#e9edf2",
+      "gray90": "#dce1e6",
+      "gray85": "#c7d0d9",
+      "gray70": "#9fa7b3",
+      "gray60": "#7b8087",
+      "gray33": "#464c54",
+      "gray25": "#2c3235",
+      "gray15": "#202226",
+      "gray10": "#141619",
+      "gray05": "#0b0c0e",
+      "blue95": "#5794f2",
+      "blue85": "#33a2e5",
+      "blue80": "#3274d9",
+      "blue77": "#1f60c4",
+      "red88": "#e02f44",
+      "black": "#000000",
+      "white": "#ffffff",
+      "dark1": "#141414",
+      "dark2": "#161719",
+      "dark3": "#1f1f20",
+      "dark4": "#212124",
+      "dark5": "#222426",
+      "dark6": "#262628",
+      "dark7": "#292a2d",
+      "dark8": "#2f2f32",
+      "dark9": "#343436",
+      "dark10": "#424345",
+      "gray1": "#555555",
+      "gray2": "#8e8e8e",
+      "gray3": "#b3b3b3",
+      "gray4": "#d8d9da",
+      "gray5": "#ececec",
+      "gray6": "#f4f5f8",
+      "gray7": "#fbfbfb",
+      "redBase": "#e02f44",
+      "redShade": "#c4162a",
+      "greenBase": "#299c46",
+      "greenShade": "#23843b",
+      "red": "#d44a3a",
+      "yellow": "#ecbb13",
+      "purple": "#9933cc",
+      "variable": "#32d1df",
+      "orange": "#eb7b18",
+      "orangeDark": "#ff780a",
+      "brandPrimary": "#eb7b18",
+      "brandSuccess": "#1A7F4B",
+      "brandWarning": "#F5B73D",
+      "brandDanger": "#D10E5C",
+      "queryRed": "#FF5286",
+      "queryGreen": "#6CCF8E",
+      "queryPurple": "#fe85fc",
+      "queryOrange": "#eb7b18",
+      "online": "#1A7F4B",
+      "warn": "#1A7F4B",
+      "critical": "#1A7F4B"
+    },
+    "colors": {
+      "bg1": "#181b1f",
+      "bg2": "#22252b",
+      "bg3": "rgba(204, 204, 220, 0.16)",
+      "dashboardBg": "#111217",
+      "bgBlue1": "#3D71D9",
+      "bgBlue2": "rgb(90, 134, 222)",
+      "border1": "rgba(204, 204, 220, 0.07)",
+      "border2": "rgba(204, 204, 220, 0.15)",
+      "border3": "rgba(204, 204, 220, 0.25)",
+      "formLabel": "rgb(204, 204, 220)",
+      "formDescription": "rgba(204, 204, 220, 0.65)",
+      "formInputBg": "#111217",
+      "formInputBgDisabled": "rgba(204, 204, 220, 0.04)",
+      "formInputBorder": "rgba(204, 204, 220, 0.15)",
+      "formInputBorderHover": "rgba(204, 204, 220, 0.25)",
+      "formInputBorderActive": "#6E9FFF",
+      "formInputBorderInvalid": "#FF5286",
+      "formInputPlaceholderText": "rgba(204, 204, 220, 0.6)",
+      "formInputText": "rgb(204, 204, 220)",
+      "formInputDisabledText": "rgba(204, 204, 220, 0.6)",
+      "formFocusOutline": "#3D71D9",
+      "formValidationMessageText": "#FFFFFF",
+      "formValidationMessageBg": "#D10E5C",
+      "textStrong": "#FFFFFF",
+      "textHeading": "rgb(204, 204, 220)",
+      "text": "rgb(204, 204, 220)",
+      "textSemiWeak": "rgba(204, 204, 220, 0.65)",
+      "textWeak": "rgba(204, 204, 220, 0.65)",
+      "textFaint": "rgba(204, 204, 220, 0.6)",
+      "textBlue": "#6E9FFF",
+      "bodyBg": "#111217",
+      "panelBg": "#181b1f",
+      "panelBorder": "rgba(204, 204, 220, 0.07)",
+      "pageHeaderBg": "#111217",
+      "pageHeaderBorder": "#111217",
+      "dropdownBg": "#111217",
+      "dropdownShadow": "#000000",
+      "dropdownOptionHoverBg": "#22252b",
+      "link": "rgb(204, 204, 220)",
+      "linkDisabled": "rgba(204, 204, 220, 0.6)",
+      "linkHover": "#FFFFFF",
+      "linkExternal": "#6E9FFF"
+    },
+    "shadows": {
+      "listItem": "none"
+    },
+    "visualization": {
+      "hues": [
+        {
+          "name": "red",
+          "shades": [
+            {
+              "color": "#FFA6B0",
+              "name": "super-light-red"
+            },
+            {
+              "color": "#FF7383",
+              "name": "light-red"
+            },
+            {
+              "color": "#F2495C",
+              "name": "red",
+              "primary": true
+            },
+            {
+              "color": "#E02F44",
+              "name": "semi-dark-red"
+            },
+            {
+              "color": "#C4162A",
+              "name": "dark-red"
+            }
+          ]
+        },
+        {
+          "name": "orange",
+          "shades": [
+            {
+              "color": "#FFCB7D",
+              "name": "super-light-orange",
+              "aliases": []
+            },
+            {
+              "color": "#FFB357",
+              "name": "light-orange",
+              "aliases": []
+            },
+            {
+              "color": "#FF9830",
+              "name": "orange",
+              "aliases": [],
+              "primary": true
+            },
+            {
+              "color": "#FF780A",
+              "name": "semi-dark-orange",
+              "aliases": []
+            },
+            {
+              "color": "#FA6400",
+              "name": "dark-orange",
+              "aliases": []
+            }
+          ]
+        },
+        {
+          "name": "yellow",
+          "shades": [
+            {
+              "color": "#FFF899",
+              "name": "super-light-yellow",
+              "aliases": []
+            },
+            {
+              "color": "#FFEE52",
+              "name": "light-yellow",
+              "aliases": []
+            },
+            {
+              "color": "#FADE2A",
+              "name": "yellow",
+              "aliases": [],
+              "primary": true
+            },
+            {
+              "color": "#F2CC0C",
+              "name": "semi-dark-yellow",
+              "aliases": []
+            },
+            {
+              "color": "#E0B400",
+              "name": "dark-yellow",
+              "aliases": []
+            }
+          ]
+        },
+        {
+          "name": "green",
+          "shades": [
+            {
+              "color": "#C8F2C2",
+              "name": "super-light-green",
+              "aliases": []
+            },
+            {
+              "color": "#96D98D",
+              "name": "light-green",
+              "aliases": []
+            },
+            {
+              "color": "#73BF69",
+              "name": "green",
+              "aliases": [],
+              "primary": true
+            },
+            {
+              "color": "#56A64B",
+              "name": "semi-dark-green",
+              "aliases": []
+            },
+            {
+              "color": "#37872D",
+              "name": "dark-green",
+              "aliases": []
+            }
+          ]
+        },
+        {
+          "name": "blue",
+          "shades": [
+            {
+              "color": "#C0D8FF",
+              "name": "super-light-blue",
+              "aliases": []
+            },
+            {
+              "color": "#8AB8FF",
+              "name": "light-blue",
+              "aliases": []
+            },
+            {
+              "color": "#5794F2",
+              "name": "blue",
+              "aliases": [],
+              "primary": true
+            },
+            {
+              "color": "#3274D9",
+              "name": "semi-dark-blue",
+              "aliases": []
+            },
+            {
+              "color": "#1F60C4",
+              "name": "dark-blue",
+              "aliases": []
+            }
+          ]
+        },
+        {
+          "name": "purple",
+          "shades": [
+            {
+              "color": "#DEB6F2",
+              "name": "super-light-purple",
+              "aliases": []
+            },
+            {
+              "color": "#CA95E5",
+              "name": "light-purple",
+              "aliases": []
+            },
+            {
+              "color": "#B877D9",
+              "name": "purple",
+              "aliases": [],
+              "primary": true
+            },
+            {
+              "color": "#A352CC",
+              "name": "semi-dark-purple",
+              "aliases": []
+            },
+            {
+              "color": "#8F3BB8",
+              "name": "dark-purple",
+              "aliases": []
+            }
+          ]
+        }
+      ],
+      "palette": [
+        "green",
+        "semi-dark-yellow",
+        "light-blue",
+        "semi-dark-orange",
+        "red",
+        "blue",
+        "purple",
+        "#705DA0",
+        "dark-green",
+        "yellow",
+        "#447EBC",
+        "#C15C17",
+        "#890F02",
+        "#0A437C",
+        "#6D1F62",
+        "#584477",
+        "#B7DBAB",
+        "#F4D598",
+        "#70DBED",
+        "#F9BA8F",
+        "#F29191",
+        "#82B5D8",
+        "#E5A8E2",
+        "#AEA2E0",
+        "#629E51",
+        "#E5AC0E",
+        "#64B0C8",
+        "#E0752D",
+        "#BF1B00",
+        "#0A50A1",
+        "#962D82",
+        "#614D93",
+        "#9AC48A",
+        "#F2C96D",
+        "#65C5DB",
+        "#F9934E",
+        "#EA6460",
+        "#5195CE",
+        "#D683CE",
+        "#806EB7",
+        "#3F6833",
+        "#967302",
+        "#2F575E",
+        "#99440A",
+        "#58140C",
+        "#052B51",
+        "#511749",
+        "#3F2B5B",
+        "#E0F9D7",
+        "#FCEACA",
+        "#CFFAFF",
+        "#F9E2D2",
+        "#FCE2DE",
+        "#BADFF4",
+        "#F9D9F9",
+        "#DEDAF7"
+      ]
+    }
+  }
+}
diff --git a/public/sass/theme.light.generated.json b/public/sass/theme.light.generated.json
new file mode 100644
index 00000000000..1cdea276243
--- /dev/null
+++ b/public/sass/theme.light.generated.json
@@ -0,0 +1,946 @@
+{
+  "name": "Dark",
+  "isDark": false,
+  "isLight": true,
+  "colors": {
+    "mode": "light",
+    "blackBase": "36, 41, 46",
+    "primary": {
+      "main": "#3871DC",
+      "border": "#1F62E0",
+      "text": "#1F62E0",
+      "name": "primary",
+      "shade": "rgb(44, 90, 176)",
+      "transparent": "#3871DC14",
+      "contrastText": "#FFFFFF"
+    },
+    "text": {
+      "primary": "rgba(36, 41, 46, 1)",
+      "secondary": "rgba(36, 41, 46, 0.75)",
+      "disabled": "rgba(36, 41, 46, 0.50)",
+      "link": "#1F62E0",
+      "maxContrast": "#000000"
+    },
+    "border": {
+      "weak": "rgba(36, 41, 46, 0.12)",
+      "medium": "rgba(36, 41, 46, 0.30)",
+      "strong": "rgba(36, 41, 46, 0.40)"
+    },
+    "secondary": {
+      "main": "rgba(36, 41, 46, 0.16)",
+      "shade": "rgba(36, 41, 46, 0.20)",
+      "contrastText": "rgba(36, 41, 46,  1)",
+      "text": "rgba(36, 41, 46, 1)",
+      "border": "rgba(36, 41, 46, 0.40)",
+      "name": "secondary",
+      "transparent": "rgba(36, 41, 46, 0.08)"
+    },
+    "info": {
+      "main": "#3871DC",
+      "text": "#1F62E0",
+      "name": "info",
+      "border": "#1F62E0",
+      "shade": "rgb(44, 90, 176)",
+      "transparent": "#3871DC14",
+      "contrastText": "#FFFFFF"
+    },
+    "error": {
+      "main": "#E0226E",
+      "text": "#CF0E5B",
+      "border": "#CF0E5B",
+      "name": "error",
+      "shade": "rgb(179, 27, 88)",
+      "transparent": "#E0226E14",
+      "contrastText": "#FFFFFF"
+    },
+    "success": {
+      "main": "#1B855E",
+      "text": "#0A764E",
+      "name": "success",
+      "border": "#0A764E",
+      "shade": "rgb(21, 106, 75)",
+      "transparent": "#1B855E14",
+      "contrastText": "#FFFFFF"
+    },
+    "warning": {
+      "main": "#FAD34A",
+      "text": "#8A6C00",
+      "name": "warning",
+      "border": "#8A6C00",
+      "shade": "rgb(200, 168, 59)",
+      "transparent": "#FAD34A14",
+      "contrastText": "#000000"
+    },
+    "background": {
+      "canvas": "#F4F5F5",
+      "primary": "#FFFFFF",
+      "secondary": "#F4F5F5"
+    },
+    "action": {
+      "hover": "rgba(36, 41, 46, 0.12)",
+      "selected": "rgba(36, 41, 46, 0.08)",
+      "hoverOpacity": 0.08,
+      "focus": "rgba(36, 41, 46, 0.12)",
+      "disabledBackground": "rgba(36, 41, 46, 0.04)",
+      "disabledText": "rgba(36, 41, 46, 0.50)",
+      "disabledOpacity": 0.38
+    },
+    "gradients": {
+      "brandHorizontal": "linear-gradient(90deg, #FF8833 0%, #F53E4C 100%);",
+      "brandVertical": "linear-gradient(0.01deg, #F53E4C -31.2%, #FF8833 113.07%);"
+    },
+    "contrastThreshold": 3,
+    "hoverFactor": 0.03,
+    "tonalOffset": 0.2
+  },
+  "breakpoints": {
+    "values": {
+      "xs": 0,
+      "sm": 544,
+      "md": 769,
+      "lg": 992,
+      "xl": 1200,
+      "xxl": 1440
+    },
+    "keys": ["xs", "sm", "md", "lg", "xl", "xxl"],
+    "unit": "px"
+  },
+  "shape": {},
+  "components": {
+    "height": {
+      "sm": 3,
+      "md": 4,
+      "lg": 6
+    },
+    "input": {
+      "borderColor": "rgba(36, 41, 46, 0.30)",
+      "borderHover": "rgba(36, 41, 46, 0.40)",
+      "text": "rgba(36, 41, 46, 1)",
+      "background": "#FFFFFF"
+    },
+    "panel": {
+      "padding": 1,
+      "headerHeight": 4,
+      "background": "#FFFFFF",
+      "borderColor": "rgba(36, 41, 46, 0.12)",
+      "boxShadow": "none"
+    },
+    "dropdown": {
+      "background": "#FFFFFF"
+    },
+    "tooltip": {
+      "background": "#555",
+      "text": "#FFF"
+    },
+    "dashboard": {
+      "background": "#F4F5F5",
+      "padding": 1
+    },
+    "overlay": {
+      "background": "rgba(208, 209, 211, 0.24)"
+    },
+    "sidemenu": {
+      "width": 48
+    }
+  },
+  "typography": {
+    "htmlFontSize": 14,
+    "fontFamily": "\"Roboto\", \"Helvetica\", \"Arial\", sans-serif",
+    "fontFamilyMonospace": "'Roboto Mono', monospace",
+    "fontSize": 14,
+    "fontWeightLight": 300,
+    "fontWeightRegular": 400,
+    "fontWeightMedium": 500,
+    "fontWeightBold": 500,
+    "size": {
+      "base": "14px",
+      "xs": "10px",
+      "sm": "12px",
+      "md": "14px",
+      "lg": "18px"
+    },
+    "h1": {
+      "fontFamily": "\"Roboto\", \"Helvetica\", \"Arial\", sans-serif",
+      "fontWeight": 300,
+      "fontSize": "2rem",
+      "lineHeight": 1.167,
+      "letterSpacing": "-0.00893em"
+    },
+    "h2": {
+      "fontFamily": "\"Roboto\", \"Helvetica\", \"Arial\", sans-serif",
+      "fontWeight": 300,
+      "fontSize": "1.7142857142857142rem",
+      "lineHeight": 1.2,
+      "letterSpacing": "0em"
+    },
+    "h3": {
+      "fontFamily": "\"Roboto\", \"Helvetica\", \"Arial\", sans-serif",
+      "fontWeight": 400,
+      "fontSize": "1.5rem",
+      "lineHeight": 1.167,
+      "letterSpacing": "0em"
+    },
+    "h4": {
+      "fontFamily": "\"Roboto\", \"Helvetica\", \"Arial\", sans-serif",
+      "fontWeight": 400,
+      "fontSize": "1.2857142857142858rem",
+      "lineHeight": 1.235,
+      "letterSpacing": "0.01389em"
+    },
+    "h5": {
+      "fontFamily": "\"Roboto\", \"Helvetica\", \"Arial\", sans-serif",
+      "fontWeight": 400,
+      "fontSize": "1.1428571428571428rem",
+      "lineHeight": 1.334,
+      "letterSpacing": "0em"
+    },
+    "h6": {
+      "fontFamily": "\"Roboto\", \"Helvetica\", \"Arial\", sans-serif",
+      "fontWeight": 500,
+      "fontSize": "1rem",
+      "lineHeight": 1.6,
+      "letterSpacing": "0.01071em"
+    },
+    "body": {
+      "fontFamily": "\"Roboto\", \"Helvetica\", \"Arial\", sans-serif",
+      "fontWeight": 400,
+      "fontSize": "1rem",
+      "lineHeight": 1.5,
+      "letterSpacing": "0.01071em"
+    },
+    "bodySmall": {
+      "fontFamily": "\"Roboto\", \"Helvetica\", \"Arial\", sans-serif",
+      "fontWeight": 400,
+      "fontSize": "0.8571428571428571rem",
+      "lineHeight": 1.5,
+      "letterSpacing": "0.0125em"
+    }
+  },
+  "shadows": {
+    "z1": "0px 1px 2px rgba(24, 26, 27, 0.2)",
+    "z2": "0px 4px 8px rgba(24, 26, 27, 0.2)",
+    "z3": "0px 13px 20px 1px rgba(24, 26, 27, 0.18)"
+  },
+  "transitions": {
+    "duration": {
+      "shortest": 150,
+      "shorter": 200,
+      "short": 250,
+      "standard": 300,
+      "complex": 375,
+      "enteringScreen": 225,
+      "leavingScreen": 195
+    },
+    "easing": {
+      "easeInOut": "cubic-bezier(0.4, 0, 0.2, 1)",
+      "easeOut": "cubic-bezier(0.0, 0, 0.2, 1)",
+      "easeIn": "cubic-bezier(0.4, 0, 1, 1)",
+      "sharp": "cubic-bezier(0.4, 0, 0.6, 1)"
+    }
+  },
+  "visualization": {
+    "hues": [
+      {
+        "name": "red",
+        "shades": [
+          {
+            "color": "#FF7383",
+            "name": "super-light-red"
+          },
+          {
+            "color": "#F2495C",
+            "name": "light-red"
+          },
+          {
+            "color": "#E02F44",
+            "name": "red",
+            "primary": true
+          },
+          {
+            "color": "#C4162A",
+            "name": "semi-dark-red"
+          },
+          {
+            "color": "#AD0317",
+            "name": "dark-red"
+          }
+        ]
+      },
+      {
+        "name": "orange",
+        "shades": [
+          {
+            "color": "#FFB357",
+            "name": "super-light-orange",
+            "aliases": []
+          },
+          {
+            "color": "#FF9830",
+            "name": "light-orange",
+            "aliases": []
+          },
+          {
+            "color": "#FF780A",
+            "name": "orange",
+            "aliases": [],
+            "primary": true
+          },
+          {
+            "color": "#FA6400",
+            "name": "semi-dark-orange",
+            "aliases": []
+          },
+          {
+            "color": "#E55400",
+            "name": "dark-orange",
+            "aliases": []
+          }
+        ]
+      },
+      {
+        "name": "yellow",
+        "shades": [
+          {
+            "color": "#FFEE52",
+            "name": "super-light-yellow",
+            "aliases": []
+          },
+          {
+            "color": "#FADE2A",
+            "name": "light-yellow",
+            "aliases": []
+          },
+          {
+            "color": "#F2CC0C",
+            "name": "yellow",
+            "aliases": [],
+            "primary": true
+          },
+          {
+            "color": "#E0B400",
+            "name": "semi-dark-yellow",
+            "aliases": []
+          },
+          {
+            "color": "#CC9D00",
+            "name": "dark-yellow",
+            "aliases": []
+          }
+        ]
+      },
+      {
+        "name": "green",
+        "shades": [
+          {
+            "color": "#96D98D",
+            "name": "super-light-green",
+            "aliases": []
+          },
+          {
+            "color": "#73BF69",
+            "name": "light-green",
+            "aliases": []
+          },
+          {
+            "color": "#56A64B",
+            "name": "green",
+            "aliases": [],
+            "primary": true
+          },
+          {
+            "color": "#37872D",
+            "name": "semi-dark-green",
+            "aliases": []
+          },
+          {
+            "color": "#19730E",
+            "name": "dark-green",
+            "aliases": []
+          }
+        ]
+      },
+      {
+        "name": "blue",
+        "shades": [
+          {
+            "color": "#8AB8FF",
+            "name": "super-light-blue",
+            "aliases": []
+          },
+          {
+            "color": "#5794F2",
+            "name": "light-blue",
+            "aliases": []
+          },
+          {
+            "color": "#3274D9",
+            "name": "blue",
+            "aliases": [],
+            "primary": true
+          },
+          {
+            "color": "#1F60C4",
+            "name": "semi-dark-blue",
+            "aliases": []
+          },
+          {
+            "color": "#1250B0",
+            "name": "dark-blue",
+            "aliases": []
+          }
+        ]
+      },
+      {
+        "name": "purple",
+        "shades": [
+          {
+            "color": "#CA95E5",
+            "name": "super-light-purple",
+            "aliases": []
+          },
+          {
+            "color": "#B877D9",
+            "name": "light-purple",
+            "aliases": []
+          },
+          {
+            "color": "#A352CC",
+            "name": "purple",
+            "aliases": [],
+            "primary": true
+          },
+          {
+            "color": "#8F3BB8",
+            "name": "semi-dark-purple",
+            "aliases": []
+          },
+          {
+            "color": "#7C2EA3",
+            "name": "dark-purple",
+            "aliases": []
+          }
+        ]
+      }
+    ],
+    "palette": [
+      "green",
+      "semi-dark-yellow",
+      "light-blue",
+      "semi-dark-orange",
+      "red",
+      "blue",
+      "purple",
+      "#705DA0",
+      "dark-green",
+      "yellow",
+      "#447EBC",
+      "#C15C17",
+      "#890F02",
+      "#0A437C",
+      "#6D1F62",
+      "#584477",
+      "#B7DBAB",
+      "#F4D598",
+      "#70DBED",
+      "#F9BA8F",
+      "#F29191",
+      "#82B5D8",
+      "#E5A8E2",
+      "#AEA2E0",
+      "#629E51",
+      "#E5AC0E",
+      "#64B0C8",
+      "#E0752D",
+      "#BF1B00",
+      "#0A50A1",
+      "#962D82",
+      "#614D93",
+      "#9AC48A",
+      "#F2C96D",
+      "#65C5DB",
+      "#F9934E",
+      "#EA6460",
+      "#5195CE",
+      "#D683CE",
+      "#806EB7",
+      "#3F6833",
+      "#967302",
+      "#2F575E",
+      "#99440A",
+      "#58140C",
+      "#052B51",
+      "#511749",
+      "#3F2B5B",
+      "#E0F9D7",
+      "#FCEACA",
+      "#CFFAFF",
+      "#F9E2D2",
+      "#FCE2DE",
+      "#BADFF4",
+      "#F9D9F9",
+      "#DEDAF7"
+    ]
+  },
+  "zIndex": {
+    "navbarFixed": 1000,
+    "sidemenu": 1020,
+    "dropdown": 1030,
+    "typeahead": 1030,
+    "tooltip": 1040,
+    "modalBackdrop": 1050,
+    "modal": 1060,
+    "portal": 1061
+  },
+  "v1": {
+    "name": "Dark",
+    "typography": {
+      "fontFamily": {
+        "sansSerif": "\"Roboto\", \"Helvetica\", \"Arial\", sans-serif",
+        "monospace": "'Roboto Mono', monospace"
+      },
+      "size": {
+        "base": "14px",
+        "xs": "10px",
+        "sm": "12px",
+        "md": "14px",
+        "lg": "18px"
+      },
+      "heading": {
+        "h1": "2rem",
+        "h2": "1.7142857142857142rem",
+        "h3": "1.5rem",
+        "h4": "1.2857142857142858rem",
+        "h5": "1.1428571428571428rem",
+        "h6": "1rem"
+      },
+      "weight": {
+        "light": 300,
+        "regular": 400,
+        "semibold": 500,
+        "bold": 500
+      },
+      "lineHeight": {
+        "xs": 1.5,
+        "sm": 1.5,
+        "md": 1.5,
+        "lg": 1.2
+      },
+      "link": {
+        "decoration": "none",
+        "hoverDecoration": "none"
+      }
+    },
+    "breakpoints": {
+      "xs": "0px",
+      "sm": "544px",
+      "md": "769px",
+      "lg": "992px",
+      "xl": "1200px",
+      "xxl": "1440px"
+    },
+    "spacing": {
+      "base": 8,
+      "insetSquishMd": "4px 8px",
+      "d": "16px",
+      "xxs": "2px",
+      "xs": "4px",
+      "sm": "8px",
+      "md": "16px",
+      "lg": "24px",
+      "xl": "32px",
+      "gutter": "32px",
+      "formSpacingBase": 8,
+      "formMargin": "32px",
+      "formFieldsetMargin": "16px",
+      "formInputHeight": 32,
+      "formButtonHeight": 32,
+      "formInputPaddingHorizontal": "8px",
+      "formInputAffixPaddingHorizontal": "4px",
+      "formInputMargin": "16px",
+      "formLabelPadding": "0 0 0 2px",
+      "formLabelMargin": "0 0 4px 0",
+      "formValidationMessagePadding": "4px 8px",
+      "formValidationMessageMargin": "4px 0 0 0",
+      "inlineFormMargin": "4px"
+    },
+    "border": {
+      "radius": {
+        "sm": "2px",
+        "md": "4px",
+        "lg": "6px"
+      },
+      "width": {
+        "sm": "1px"
+      }
+    },
+    "height": {
+      "sm": 24,
+      "md": 32,
+      "lg": 48
+    },
+    "panelPadding": 8,
+    "panelHeaderHeight": 32,
+    "zIndex": {
+      "navbarFixed": 1000,
+      "sidemenu": 1020,
+      "dropdown": 1030,
+      "typeahead": 1030,
+      "tooltip": 1040,
+      "modalBackdrop": 1050,
+      "modal": 1060,
+      "portal": 1061
+    },
+    "type": "light",
+    "isDark": false,
+    "isLight": true,
+    "palette": {
+      "gray98": "#f7f8fa",
+      "gray97": "#f1f5f9",
+      "gray95": "#e9edf2",
+      "gray90": "#dce1e6",
+      "gray85": "#c7d0d9",
+      "gray70": "#9fa7b3",
+      "gray60": "#7b8087",
+      "gray33": "#464c54",
+      "gray25": "#2c3235",
+      "gray15": "#202226",
+      "gray10": "#141619",
+      "gray05": "#0b0c0e",
+      "blue95": "#5794f2",
+      "blue85": "#33a2e5",
+      "blue80": "#3274d9",
+      "blue77": "#1f60c4",
+      "red88": "#e02f44",
+      "black": "#000000",
+      "white": "#ffffff",
+      "dark1": "#141414",
+      "dark2": "#161719",
+      "dark3": "#1f1f20",
+      "dark4": "#212124",
+      "dark5": "#222426",
+      "dark6": "#262628",
+      "dark7": "#292a2d",
+      "dark8": "#2f2f32",
+      "dark9": "#343436",
+      "dark10": "#424345",
+      "gray1": "#555555",
+      "gray2": "#8e8e8e",
+      "gray3": "#b3b3b3",
+      "gray4": "#d8d9da",
+      "gray5": "#ececec",
+      "gray6": "#f4f5f8",
+      "gray7": "#fbfbfb",
+      "redBase": "#e02f44",
+      "redShade": "#c4162a",
+      "greenBase": "#299c46",
+      "greenShade": "#23843b",
+      "red": "#d44a3a",
+      "yellow": "#ecbb13",
+      "purple": "#9933cc",
+      "variable": "#32d1df",
+      "orange": "#eb7b18",
+      "orangeDark": "#ff780a",
+      "brandPrimary": "#eb7b18",
+      "brandSuccess": "#1B855E",
+      "brandWarning": "#FAD34A",
+      "brandDanger": "#E0226E",
+      "queryRed": "#CF0E5B",
+      "queryGreen": "#0A764E",
+      "queryPurple": "#fe85fc",
+      "queryOrange": "#eb7b18",
+      "online": "#1B855E",
+      "warn": "#1B855E",
+      "critical": "#1B855E"
+    },
+    "colors": {
+      "bg1": "#FFFFFF",
+      "bg2": "#F4F5F5",
+      "bg3": "rgba(36, 41, 46, 0.12)",
+      "dashboardBg": "#F4F5F5",
+      "bgBlue1": "#3871DC",
+      "bgBlue2": "rgb(44, 90, 176)",
+      "border1": "rgba(36, 41, 46, 0.12)",
+      "border2": "rgba(36, 41, 46, 0.30)",
+      "border3": "rgba(36, 41, 46, 0.40)",
+      "formLabel": "rgba(36, 41, 46, 1)",
+      "formDescription": "rgba(36, 41, 46, 0.75)",
+      "formInputBg": "#FFFFFF",
+      "formInputBgDisabled": "rgba(36, 41, 46, 0.04)",
+      "formInputBorder": "rgba(36, 41, 46, 0.30)",
+      "formInputBorderHover": "rgba(36, 41, 46, 0.40)",
+      "formInputBorderActive": "#1F62E0",
+      "formInputBorderInvalid": "#CF0E5B",
+      "formInputPlaceholderText": "rgba(36, 41, 46, 0.50)",
+      "formInputText": "rgba(36, 41, 46, 1)",
+      "formInputDisabledText": "rgba(36, 41, 46, 0.50)",
+      "formFocusOutline": "#3871DC",
+      "formValidationMessageText": "#FFFFFF",
+      "formValidationMessageBg": "#E0226E",
+      "textStrong": "#000000",
+      "textHeading": "rgba(36, 41, 46, 1)",
+      "text": "rgba(36, 41, 46, 1)",
+      "textSemiWeak": "rgba(36, 41, 46, 0.75)",
+      "textWeak": "rgba(36, 41, 46, 0.75)",
+      "textFaint": "rgba(36, 41, 46, 0.50)",
+      "textBlue": "#1F62E0",
+      "bodyBg": "#F4F5F5",
+      "panelBg": "#FFFFFF",
+      "panelBorder": "rgba(36, 41, 46, 0.12)",
+      "pageHeaderBg": "#F4F5F5",
+      "pageHeaderBorder": "#F4F5F5",
+      "dropdownBg": "#FFFFFF",
+      "dropdownShadow": "#000000",
+      "dropdownOptionHoverBg": "#F4F5F5",
+      "link": "rgba(36, 41, 46, 1)",
+      "linkDisabled": "rgba(36, 41, 46, 0.50)",
+      "linkHover": "#000000",
+      "linkExternal": "#1F62E0"
+    },
+    "shadows": {
+      "listItem": "none"
+    },
+    "visualization": {
+      "hues": [
+        {
+          "name": "red",
+          "shades": [
+            {
+              "color": "#FF7383",
+              "name": "super-light-red"
+            },
+            {
+              "color": "#F2495C",
+              "name": "light-red"
+            },
+            {
+              "color": "#E02F44",
+              "name": "red",
+              "primary": true
+            },
+            {
+              "color": "#C4162A",
+              "name": "semi-dark-red"
+            },
+            {
+              "color": "#AD0317",
+              "name": "dark-red"
+            }
+          ]
+        },
+        {
+          "name": "orange",
+          "shades": [
+            {
+              "color": "#FFB357",
+              "name": "super-light-orange",
+              "aliases": []
+            },
+            {
+              "color": "#FF9830",
+              "name": "light-orange",
+              "aliases": []
+            },
+            {
+              "color": "#FF780A",
+              "name": "orange",
+              "aliases": [],
+              "primary": true
+            },
+            {
+              "color": "#FA6400",
+              "name": "semi-dark-orange",
+              "aliases": []
+            },
+            {
+              "color": "#E55400",
+              "name": "dark-orange",
+              "aliases": []
+            }
+          ]
+        },
+        {
+          "name": "yellow",
+          "shades": [
+            {
+              "color": "#FFEE52",
+              "name": "super-light-yellow",
+              "aliases": []
+            },
+            {
+              "color": "#FADE2A",
+              "name": "light-yellow",
+              "aliases": []
+            },
+            {
+              "color": "#F2CC0C",
+              "name": "yellow",
+              "aliases": [],
+              "primary": true
+            },
+            {
+              "color": "#E0B400",
+              "name": "semi-dark-yellow",
+              "aliases": []
+            },
+            {
+              "color": "#CC9D00",
+              "name": "dark-yellow",
+              "aliases": []
+            }
+          ]
+        },
+        {
+          "name": "green",
+          "shades": [
+            {
+              "color": "#96D98D",
+              "name": "super-light-green",
+              "aliases": []
+            },
+            {
+              "color": "#73BF69",
+              "name": "light-green",
+              "aliases": []
+            },
+            {
+              "color": "#56A64B",
+              "name": "green",
+              "aliases": [],
+              "primary": true
+            },
+            {
+              "color": "#37872D",
+              "name": "semi-dark-green",
+              "aliases": []
+            },
+            {
+              "color": "#19730E",
+              "name": "dark-green",
+              "aliases": []
+            }
+          ]
+        },
+        {
+          "name": "blue",
+          "shades": [
+            {
+              "color": "#8AB8FF",
+              "name": "super-light-blue",
+              "aliases": []
+            },
+            {
+              "color": "#5794F2",
+              "name": "light-blue",
+              "aliases": []
+            },
+            {
+              "color": "#3274D9",
+              "name": "blue",
+              "aliases": [],
+              "primary": true
+            },
+            {
+              "color": "#1F60C4",
+              "name": "semi-dark-blue",
+              "aliases": []
+            },
+            {
+              "color": "#1250B0",
+              "name": "dark-blue",
+              "aliases": []
+            }
+          ]
+        },
+        {
+          "name": "purple",
+          "shades": [
+            {
+              "color": "#CA95E5",
+              "name": "super-light-purple",
+              "aliases": []
+            },
+            {
+              "color": "#B877D9",
+              "name": "light-purple",
+              "aliases": []
+            },
+            {
+              "color": "#A352CC",
+              "name": "purple",
+              "aliases": [],
+              "primary": true
+            },
+            {
+              "color": "#8F3BB8",
+              "name": "semi-dark-purple",
+              "aliases": []
+            },
+            {
+              "color": "#7C2EA3",
+              "name": "dark-purple",
+              "aliases": []
+            }
+          ]
+        }
+      ],
+      "palette": [
+        "green",
+        "semi-dark-yellow",
+        "light-blue",
+        "semi-dark-orange",
+        "red",
+        "blue",
+        "purple",
+        "#705DA0",
+        "dark-green",
+        "yellow",
+        "#447EBC",
+        "#C15C17",
+        "#890F02",
+        "#0A437C",
+        "#6D1F62",
+        "#584477",
+        "#B7DBAB",
+        "#F4D598",
+        "#70DBED",
+        "#F9BA8F",
+        "#F29191",
+        "#82B5D8",
+        "#E5A8E2",
+        "#AEA2E0",
+        "#629E51",
+        "#E5AC0E",
+        "#64B0C8",
+        "#E0752D",
+        "#BF1B00",
+        "#0A50A1",
+        "#962D82",
+        "#614D93",
+        "#9AC48A",
+        "#F2C96D",
+        "#65C5DB",
+        "#F9934E",
+        "#EA6460",
+        "#5195CE",
+        "#D683CE",
+        "#806EB7",
+        "#3F6833",
+        "#967302",
+        "#2F575E",
+        "#99440A",
+        "#58140C",
+        "#052B51",
+        "#511749",
+        "#3F2B5B",
+        "#E0F9D7",
+        "#FCEACA",
+        "#CFFAFF",
+        "#F9E2D2",
+        "#FCE2DE",
+        "#BADFF4",
+        "#F9D9F9",
+        "#DEDAF7"
+      ]
+    }
+  }
+}
diff --git a/scripts/cli/generateSassVariableFiles.ts b/scripts/cli/generateSassVariableFiles.ts
index 4e7cb99d5b7..8a08a69aaf4 100644
--- a/scripts/cli/generateSassVariableFiles.ts
+++ b/scripts/cli/generateSassVariableFiles.ts
@@ -9,6 +9,9 @@ const darkThemeVariablesPath = __dirname + '/../../public/sass/_variables.dark.g
 const lightThemeVariablesPath = __dirname + '/../../public/sass/_variables.light.generated.scss';
 const defaultThemeVariablesPath = __dirname + '/../../public/sass/_variables.generated.scss';
 
+const darkThemeJsonPath = __dirname + '/../../public/sass/theme.dark.generated.json';
+const lightThemeJsonPath = __dirname + '/../../public/sass/theme.light.generated.json';
+
 const writeVariablesFile = async (path: string, data: string) => {
   return new Promise((resolve, reject) => {
     fs.writeFile(path, data, (e) => {
@@ -36,6 +39,16 @@ const generateSassVariableFiles = async () => {
     console.error('\nWriting SASS variable files failed', error);
     process.exit(1);
   }
+
+  try {
+    const darkJson = JSON.stringify(darkTheme, null, 2);
+    const lightJson = JSON.stringify(lightTheme, null, 2);
+
+    writeVariablesFile(darkThemeJsonPath, darkJson);
+    writeVariablesFile(lightThemeJsonPath, lightJson);
+  } catch (error) {
+    console.error('\nWriting JSON variable files failed', error);
+  }
 };
 
 generateSassVariableFiles();