diff --git a/src/components/ThemePicker/index.vue b/src/components/ThemePicker/index.vue
index 25292e4a..ded41398 100644
--- a/src/components/ThemePicker/index.vue
+++ b/src/components/ThemePicker/index.vue
@@ -69,7 +69,8 @@ export default {
       const colorOverrides = [] // only capture color overides
       oldCluster.forEach((color, index) => {
         const value = newCluster[index]
-        const repl = new RegExp(`(^|})([^{]+{[^{}]+)${color}\\b([^}]*)(?=})`, 'gi')
+        const color_plain = color.replace(/([()])/g,'\\$1')
+        const repl = new RegExp(`(^|})([^{]+{[^{}]+)${color_plain}\\b([^}]*)(?=})`, 'gi')
         const nestRepl = new RegExp(color, 'ig') // for greed matching before the 'color'
         let v
         while ((v = repl.exec(style))) {