src/components/color_input/color_input.scss

@@ -28,7 +28,7 @@
         flex: 0 0 2em;
         min-width: 2em;
         align-self: center;
-        height: 100%;
+        height: 2em;
       }
     }
     .computedIndicator,

src/components/settings_modal/tabs/theme_tab/theme_tab.js

@@ -51,8 +51,11 @@ const v1OnlyNames = [
   'cOrange'
 ].map(_ => _ + 'ColorLocal')
 
+// if color doesn't match regex, it's not a color
+const isColor = (color) => /^#[0-9a-f]{6}$/i.test(color)
+
 const colorConvert = (color) => {
-  if (color.startsWith('--') || color === 'transparent') {
+  if (color.startsWith('--') || color === 'transparent' || !isColor(color)) {
     return color
   } else {
     return hex2rgb(color)
@@ -246,6 +249,7 @@ export default {
         const colors = this.previewTheme.colors
         const opacity = this.previewTheme.opacity
         if (!colors.bg) return {}
+        if (!isColor(colors.bg)) return {}
         const hints = (ratio) => ({
           text: ratio.toPrecision(3) + ':1',
           // AA level, AAA level