diff --git a/styles/dist/dark.json b/styles/dist/dark.json
deleted file mode 100644
index cf780140dd..0000000000
--- a/styles/dist/dark.json
+++ /dev/null
@@ -1,531 +0,0 @@
-{
-  "meta": {
-    "themeName": "cave-dark"
-  },
-  "text": {
-    "primary": {
-      "value": "#e2dfe7",
-      "type": "color"
-    },
-    "secondary": {
-      "value": "#8b8792",
-      "type": "color"
-    },
-    "muted": {
-      "value": "#8b8792",
-      "type": "color"
-    },
-    "placeholder": {
-      "value": "#7e7887",
-      "type": "color"
-    },
-    "active": {
-      "value": "#efecf4",
-      "type": "color"
-    },
-    "feature": {
-      "value": "#576ddb",
-      "type": "color"
-    },
-    "ok": {
-      "value": "#2a9292",
-      "type": "color"
-    },
-    "error": {
-      "value": "#be4678",
-      "type": "color"
-    },
-    "warning": {
-      "value": "#a06e3b",
-      "type": "color"
-    },
-    "info": {
-      "value": "#576ddb",
-      "type": "color"
-    }
-  },
-  "icon": {
-    "primary": {
-      "value": "#e2dfe7",
-      "type": "color"
-    },
-    "secondary": {
-      "value": "#8b8792",
-      "type": "color"
-    },
-    "muted": {
-      "value": "#8b8792",
-      "type": "color"
-    },
-    "placeholder": {
-      "value": "#7e7887",
-      "type": "color"
-    },
-    "active": {
-      "value": "#efecf4",
-      "type": "color"
-    },
-    "feature": {
-      "value": "#576ddb",
-      "type": "color"
-    },
-    "ok": {
-      "value": "#2a9292",
-      "type": "color"
-    },
-    "error": {
-      "value": "#be4678",
-      "type": "color"
-    },
-    "warning": {
-      "value": "#a06e3b",
-      "type": "color"
-    },
-    "info": {
-      "value": "#576ddb",
-      "type": "color"
-    }
-  },
-  "background": {
-    "100": {
-      "base": {
-        "value": "#26232a",
-        "type": "color"
-      },
-      "hovered": {
-        "value": "#5852603d",
-        "type": "color"
-      },
-      "active": {
-        "value": "#5852605c",
-        "type": "color"
-      }
-    },
-    "300": {
-      "base": {
-        "value": "#26232a",
-        "type": "color"
-      },
-      "hovered": {
-        "value": "#5852603d",
-        "type": "color"
-      },
-      "active": {
-        "value": "#5852605c",
-        "type": "color"
-      }
-    },
-    "500": {
-      "base": {
-        "value": "#19171c",
-        "type": "color"
-      },
-      "hovered": {
-        "value": "#26232a3d",
-        "type": "color"
-      },
-      "active": {
-        "value": "#26232a5c",
-        "type": "color"
-      }
-    },
-    "on300": {
-      "base": {
-        "value": "#19171c",
-        "type": "color"
-      },
-      "hovered": {
-        "value": "#26232a3d",
-        "type": "color"
-      },
-      "active": {
-        "value": "#26232a7a",
-        "type": "color"
-      }
-    },
-    "on500": {
-      "base": {
-        "value": "#26232a",
-        "type": "color"
-      },
-      "hovered": {
-        "value": "#5852603d",
-        "type": "color"
-      },
-      "active": {
-        "value": "#5852607a",
-        "type": "color"
-      }
-    },
-    "ok": {
-      "base": {
-        "value": "#2a929226",
-        "type": "color"
-      },
-      "hovered": {
-        "value": "#2a929233",
-        "type": "color"
-      },
-      "active": {
-        "value": "#2a929240",
-        "type": "color"
-      }
-    },
-    "error": {
-      "base": {
-        "value": "#be467826",
-        "type": "color"
-      },
-      "hovered": {
-        "value": "#be467833",
-        "type": "color"
-      },
-      "active": {
-        "value": "#be467840",
-        "type": "color"
-      }
-    },
-    "warning": {
-      "base": {
-        "value": "#a06e3b26",
-        "type": "color"
-      },
-      "hovered": {
-        "value": "#a06e3b33",
-        "type": "color"
-      },
-      "active": {
-        "value": "#a06e3b40",
-        "type": "color"
-      }
-    },
-    "info": {
-      "base": {
-        "value": "#576ddb26",
-        "type": "color"
-      },
-      "hovered": {
-        "value": "#576ddb33",
-        "type": "color"
-      },
-      "active": {
-        "value": "#576ddb40",
-        "type": "color"
-      }
-    }
-  },
-  "border": {
-    "primary": {
-      "value": "#19171c",
-      "type": "color"
-    },
-    "secondary": {
-      "value": "#26232a",
-      "type": "color"
-    },
-    "muted": {
-      "value": "#655f6d",
-      "type": "color"
-    },
-    "active": {
-      "value": "#655f6d",
-      "type": "color"
-    },
-    "onMedia": {
-      "value": "#19171c1a",
-      "type": "color"
-    },
-    "ok": {
-      "value": "#2a929226",
-      "type": "color"
-    },
-    "error": {
-      "value": "#be467826",
-      "type": "color"
-    },
-    "warning": {
-      "value": "#a06e3b26",
-      "type": "color"
-    },
-    "info": {
-      "value": "#576ddb26",
-      "type": "color"
-    }
-  },
-  "editor": {
-    "background": {
-      "value": "#19171c",
-      "type": "color"
-    },
-    "indent_guide": {
-      "value": "#655f6d",
-      "type": "color"
-    },
-    "indent_guide_active": {
-      "value": "#26232a",
-      "type": "color"
-    },
-    "line": {
-      "active": {
-        "value": "#efecf412",
-        "type": "color"
-      },
-      "highlighted": {
-        "value": "#efecf41f",
-        "type": "color"
-      },
-      "inserted": {
-        "value": "#2a929240",
-        "type": "color"
-      },
-      "deleted": {
-        "value": "#be467840",
-        "type": "color"
-      },
-      "modified": {
-        "value": "#576ddb40",
-        "type": "color"
-      }
-    },
-    "highlight": {
-      "selection": {
-        "value": "#576ddb3d",
-        "type": "color"
-      },
-      "occurrence": {
-        "value": "#efecf41f",
-        "type": "color"
-      },
-      "activeOccurrence": {
-        "value": "#efecf43d",
-        "type": "color"
-      },
-      "matchingBracket": {
-        "value": "#26232a5c",
-        "type": "color"
-      },
-      "match": {
-        "value": "#955ae77a",
-        "type": "color"
-      },
-      "activeMatch": {
-        "value": "#955ae7b8",
-        "type": "color"
-      },
-      "related": {
-        "value": "#26232a3d",
-        "type": "color"
-      }
-    },
-    "gutter": {
-      "primary": {
-        "value": "#7e7887",
-        "type": "color"
-      },
-      "active": {
-        "value": "#efecf4",
-        "type": "color"
-      }
-    }
-  },
-  "syntax": {
-    "primary": {
-      "value": "#efecf4",
-      "type": "color"
-    },
-    "comment": {
-      "value": "#8b8792",
-      "type": "color"
-    },
-    "keyword": {
-      "value": "#576ddb",
-      "type": "color"
-    },
-    "function": {
-      "value": "#a06e3b",
-      "type": "color"
-    },
-    "type": {
-      "value": "#398bc6",
-      "type": "color"
-    },
-    "variant": {
-      "value": "#576ddb",
-      "type": "color"
-    },
-    "property": {
-      "value": "#576ddb",
-      "type": "color"
-    },
-    "enum": {
-      "value": "#aa573c",
-      "type": "color"
-    },
-    "operator": {
-      "value": "#aa573c",
-      "type": "color"
-    },
-    "string": {
-      "value": "#aa573c",
-      "type": "color"
-    },
-    "number": {
-      "value": "#2a9292",
-      "type": "color"
-    },
-    "boolean": {
-      "value": "#2a9292",
-      "type": "color"
-    }
-  },
-  "player": {
-    "1": {
-      "baseColor": {
-        "value": "#576ddb",
-        "type": "color"
-      },
-      "cursorColor": {
-        "value": "#576ddb",
-        "type": "color"
-      },
-      "selectionColor": {
-        "value": "#576ddb3d",
-        "type": "color"
-      },
-      "borderColor": {
-        "value": "#576ddbcc",
-        "type": "color"
-      }
-    },
-    "2": {
-      "baseColor": {
-        "value": "#2a9292",
-        "type": "color"
-      },
-      "cursorColor": {
-        "value": "#2a9292",
-        "type": "color"
-      },
-      "selectionColor": {
-        "value": "#2a92923d",
-        "type": "color"
-      },
-      "borderColor": {
-        "value": "#2a9292cc",
-        "type": "color"
-      }
-    },
-    "3": {
-      "baseColor": {
-        "value": "#bf40bf",
-        "type": "color"
-      },
-      "cursorColor": {
-        "value": "#bf40bf",
-        "type": "color"
-      },
-      "selectionColor": {
-        "value": "#bf40bf3d",
-        "type": "color"
-      },
-      "borderColor": {
-        "value": "#bf40bfcc",
-        "type": "color"
-      }
-    },
-    "4": {
-      "baseColor": {
-        "value": "#aa573c",
-        "type": "color"
-      },
-      "cursorColor": {
-        "value": "#aa573c",
-        "type": "color"
-      },
-      "selectionColor": {
-        "value": "#aa573c3d",
-        "type": "color"
-      },
-      "borderColor": {
-        "value": "#aa573ccc",
-        "type": "color"
-      }
-    },
-    "5": {
-      "baseColor": {
-        "value": "#955ae7",
-        "type": "color"
-      },
-      "cursorColor": {
-        "value": "#955ae7",
-        "type": "color"
-      },
-      "selectionColor": {
-        "value": "#955ae73d",
-        "type": "color"
-      },
-      "borderColor": {
-        "value": "#955ae7cc",
-        "type": "color"
-      }
-    },
-    "6": {
-      "baseColor": {
-        "value": "#398bc6",
-        "type": "color"
-      },
-      "cursorColor": {
-        "value": "#398bc6",
-        "type": "color"
-      },
-      "selectionColor": {
-        "value": "#398bc63d",
-        "type": "color"
-      },
-      "borderColor": {
-        "value": "#398bc6cc",
-        "type": "color"
-      }
-    },
-    "7": {
-      "baseColor": {
-        "value": "#be4678",
-        "type": "color"
-      },
-      "cursorColor": {
-        "value": "#be4678",
-        "type": "color"
-      },
-      "selectionColor": {
-        "value": "#be46783d",
-        "type": "color"
-      },
-      "borderColor": {
-        "value": "#be4678cc",
-        "type": "color"
-      }
-    },
-    "8": {
-      "baseColor": {
-        "value": "#a06e3b",
-        "type": "color"
-      },
-      "cursorColor": {
-        "value": "#a06e3b",
-        "type": "color"
-      },
-      "selectionColor": {
-        "value": "#a06e3b3d",
-        "type": "color"
-      },
-      "borderColor": {
-        "value": "#a06e3bcc",
-        "type": "color"
-      }
-    }
-  },
-  "shadowAlpha": {
-    "value": 0.24,
-    "type": "number"
-  }
-}
\ No newline at end of file
diff --git a/styles/dist/light.json b/styles/dist/light.json
deleted file mode 100644
index 1287dea481..0000000000
--- a/styles/dist/light.json
+++ /dev/null
@@ -1,531 +0,0 @@
-{
-  "meta": {
-    "themeName": "cave-light"
-  },
-  "text": {
-    "primary": {
-      "value": "#26232a",
-      "type": "color"
-    },
-    "secondary": {
-      "value": "#585260",
-      "type": "color"
-    },
-    "muted": {
-      "value": "#585260",
-      "type": "color"
-    },
-    "placeholder": {
-      "value": "#655f6d",
-      "type": "color"
-    },
-    "active": {
-      "value": "#19171c",
-      "type": "color"
-    },
-    "feature": {
-      "value": "#576ddb",
-      "type": "color"
-    },
-    "ok": {
-      "value": "#2a9292",
-      "type": "color"
-    },
-    "error": {
-      "value": "#be4678",
-      "type": "color"
-    },
-    "warning": {
-      "value": "#a06e3b",
-      "type": "color"
-    },
-    "info": {
-      "value": "#576ddb",
-      "type": "color"
-    }
-  },
-  "icon": {
-    "primary": {
-      "value": "#26232a",
-      "type": "color"
-    },
-    "secondary": {
-      "value": "#585260",
-      "type": "color"
-    },
-    "muted": {
-      "value": "#585260",
-      "type": "color"
-    },
-    "placeholder": {
-      "value": "#655f6d",
-      "type": "color"
-    },
-    "active": {
-      "value": "#19171c",
-      "type": "color"
-    },
-    "feature": {
-      "value": "#576ddb",
-      "type": "color"
-    },
-    "ok": {
-      "value": "#2a9292",
-      "type": "color"
-    },
-    "error": {
-      "value": "#be4678",
-      "type": "color"
-    },
-    "warning": {
-      "value": "#a06e3b",
-      "type": "color"
-    },
-    "info": {
-      "value": "#576ddb",
-      "type": "color"
-    }
-  },
-  "background": {
-    "100": {
-      "base": {
-        "value": "#e2dfe7",
-        "type": "color"
-      },
-      "hovered": {
-        "value": "#8b87921f",
-        "type": "color"
-      },
-      "active": {
-        "value": "#8b87922e",
-        "type": "color"
-      }
-    },
-    "300": {
-      "base": {
-        "value": "#e2dfe7",
-        "type": "color"
-      },
-      "hovered": {
-        "value": "#8b87921f",
-        "type": "color"
-      },
-      "active": {
-        "value": "#8b87922e",
-        "type": "color"
-      }
-    },
-    "500": {
-      "base": {
-        "value": "#efecf4",
-        "type": "color"
-      },
-      "hovered": {
-        "value": "#e2dfe71f",
-        "type": "color"
-      },
-      "active": {
-        "value": "#e2dfe72e",
-        "type": "color"
-      }
-    },
-    "on300": {
-      "base": {
-        "value": "#efecf4",
-        "type": "color"
-      },
-      "hovered": {
-        "value": "#e2dfe71f",
-        "type": "color"
-      },
-      "active": {
-        "value": "#e2dfe73d",
-        "type": "color"
-      }
-    },
-    "on500": {
-      "base": {
-        "value": "#e2dfe7",
-        "type": "color"
-      },
-      "hovered": {
-        "value": "#8b87921f",
-        "type": "color"
-      },
-      "active": {
-        "value": "#8b87923d",
-        "type": "color"
-      }
-    },
-    "ok": {
-      "base": {
-        "value": "#2a929226",
-        "type": "color"
-      },
-      "hovered": {
-        "value": "#2a929233",
-        "type": "color"
-      },
-      "active": {
-        "value": "#2a929240",
-        "type": "color"
-      }
-    },
-    "error": {
-      "base": {
-        "value": "#be467826",
-        "type": "color"
-      },
-      "hovered": {
-        "value": "#be467833",
-        "type": "color"
-      },
-      "active": {
-        "value": "#be467840",
-        "type": "color"
-      }
-    },
-    "warning": {
-      "base": {
-        "value": "#a06e3b26",
-        "type": "color"
-      },
-      "hovered": {
-        "value": "#a06e3b33",
-        "type": "color"
-      },
-      "active": {
-        "value": "#a06e3b40",
-        "type": "color"
-      }
-    },
-    "info": {
-      "base": {
-        "value": "#576ddb26",
-        "type": "color"
-      },
-      "hovered": {
-        "value": "#576ddb33",
-        "type": "color"
-      },
-      "active": {
-        "value": "#576ddb40",
-        "type": "color"
-      }
-    }
-  },
-  "border": {
-    "primary": {
-      "value": "#efecf4",
-      "type": "color"
-    },
-    "secondary": {
-      "value": "#e2dfe7",
-      "type": "color"
-    },
-    "muted": {
-      "value": "#7e7887",
-      "type": "color"
-    },
-    "active": {
-      "value": "#7e7887",
-      "type": "color"
-    },
-    "onMedia": {
-      "value": "#efecf41a",
-      "type": "color"
-    },
-    "ok": {
-      "value": "#2a929226",
-      "type": "color"
-    },
-    "error": {
-      "value": "#be467826",
-      "type": "color"
-    },
-    "warning": {
-      "value": "#a06e3b26",
-      "type": "color"
-    },
-    "info": {
-      "value": "#576ddb26",
-      "type": "color"
-    }
-  },
-  "editor": {
-    "background": {
-      "value": "#efecf4",
-      "type": "color"
-    },
-    "indent_guide": {
-      "value": "#7e7887",
-      "type": "color"
-    },
-    "indent_guide_active": {
-      "value": "#e2dfe7",
-      "type": "color"
-    },
-    "line": {
-      "active": {
-        "value": "#19171c12",
-        "type": "color"
-      },
-      "highlighted": {
-        "value": "#19171c1f",
-        "type": "color"
-      },
-      "inserted": {
-        "value": "#2a929240",
-        "type": "color"
-      },
-      "deleted": {
-        "value": "#be467840",
-        "type": "color"
-      },
-      "modified": {
-        "value": "#576ddb40",
-        "type": "color"
-      }
-    },
-    "highlight": {
-      "selection": {
-        "value": "#576ddb3d",
-        "type": "color"
-      },
-      "occurrence": {
-        "value": "#19171c0f",
-        "type": "color"
-      },
-      "activeOccurrence": {
-        "value": "#19171c1f",
-        "type": "color"
-      },
-      "matchingBracket": {
-        "value": "#e2dfe72e",
-        "type": "color"
-      },
-      "match": {
-        "value": "#955ae73d",
-        "type": "color"
-      },
-      "activeMatch": {
-        "value": "#955ae75c",
-        "type": "color"
-      },
-      "related": {
-        "value": "#e2dfe71f",
-        "type": "color"
-      }
-    },
-    "gutter": {
-      "primary": {
-        "value": "#655f6d",
-        "type": "color"
-      },
-      "active": {
-        "value": "#19171c",
-        "type": "color"
-      }
-    }
-  },
-  "syntax": {
-    "primary": {
-      "value": "#19171c",
-      "type": "color"
-    },
-    "comment": {
-      "value": "#585260",
-      "type": "color"
-    },
-    "keyword": {
-      "value": "#576ddb",
-      "type": "color"
-    },
-    "function": {
-      "value": "#a06e3b",
-      "type": "color"
-    },
-    "type": {
-      "value": "#398bc6",
-      "type": "color"
-    },
-    "variant": {
-      "value": "#576ddb",
-      "type": "color"
-    },
-    "property": {
-      "value": "#576ddb",
-      "type": "color"
-    },
-    "enum": {
-      "value": "#aa573c",
-      "type": "color"
-    },
-    "operator": {
-      "value": "#aa573c",
-      "type": "color"
-    },
-    "string": {
-      "value": "#aa573c",
-      "type": "color"
-    },
-    "number": {
-      "value": "#2a9292",
-      "type": "color"
-    },
-    "boolean": {
-      "value": "#2a9292",
-      "type": "color"
-    }
-  },
-  "player": {
-    "1": {
-      "baseColor": {
-        "value": "#576ddb",
-        "type": "color"
-      },
-      "cursorColor": {
-        "value": "#576ddb",
-        "type": "color"
-      },
-      "selectionColor": {
-        "value": "#576ddb3d",
-        "type": "color"
-      },
-      "borderColor": {
-        "value": "#576ddbcc",
-        "type": "color"
-      }
-    },
-    "2": {
-      "baseColor": {
-        "value": "#2a9292",
-        "type": "color"
-      },
-      "cursorColor": {
-        "value": "#2a9292",
-        "type": "color"
-      },
-      "selectionColor": {
-        "value": "#2a92923d",
-        "type": "color"
-      },
-      "borderColor": {
-        "value": "#2a9292cc",
-        "type": "color"
-      }
-    },
-    "3": {
-      "baseColor": {
-        "value": "#bf40bf",
-        "type": "color"
-      },
-      "cursorColor": {
-        "value": "#bf40bf",
-        "type": "color"
-      },
-      "selectionColor": {
-        "value": "#bf40bf3d",
-        "type": "color"
-      },
-      "borderColor": {
-        "value": "#bf40bfcc",
-        "type": "color"
-      }
-    },
-    "4": {
-      "baseColor": {
-        "value": "#aa573c",
-        "type": "color"
-      },
-      "cursorColor": {
-        "value": "#aa573c",
-        "type": "color"
-      },
-      "selectionColor": {
-        "value": "#aa573c3d",
-        "type": "color"
-      },
-      "borderColor": {
-        "value": "#aa573ccc",
-        "type": "color"
-      }
-    },
-    "5": {
-      "baseColor": {
-        "value": "#955ae7",
-        "type": "color"
-      },
-      "cursorColor": {
-        "value": "#955ae7",
-        "type": "color"
-      },
-      "selectionColor": {
-        "value": "#955ae73d",
-        "type": "color"
-      },
-      "borderColor": {
-        "value": "#955ae7cc",
-        "type": "color"
-      }
-    },
-    "6": {
-      "baseColor": {
-        "value": "#398bc6",
-        "type": "color"
-      },
-      "cursorColor": {
-        "value": "#398bc6",
-        "type": "color"
-      },
-      "selectionColor": {
-        "value": "#398bc63d",
-        "type": "color"
-      },
-      "borderColor": {
-        "value": "#398bc6cc",
-        "type": "color"
-      }
-    },
-    "7": {
-      "baseColor": {
-        "value": "#be4678",
-        "type": "color"
-      },
-      "cursorColor": {
-        "value": "#be4678",
-        "type": "color"
-      },
-      "selectionColor": {
-        "value": "#be46783d",
-        "type": "color"
-      },
-      "borderColor": {
-        "value": "#be4678cc",
-        "type": "color"
-      }
-    },
-    "8": {
-      "baseColor": {
-        "value": "#a06e3b",
-        "type": "color"
-      },
-      "cursorColor": {
-        "value": "#a06e3b",
-        "type": "color"
-      },
-      "selectionColor": {
-        "value": "#a06e3b3d",
-        "type": "color"
-      },
-      "borderColor": {
-        "value": "#a06e3bcc",
-        "type": "color"
-      }
-    }
-  },
-  "shadowAlpha": {
-    "value": 0.12,
-    "type": "number"
-  }
-}
\ No newline at end of file
diff --git a/styles/dist/tokens.json b/styles/dist/tokens.json
index acf9fa0c0a..5874a9a7c1 100644
--- a/styles/dist/tokens.json
+++ b/styles/dist/tokens.json
@@ -3255,5 +3255,1043 @@
       "value": 0.12,
       "type": "number"
     }
+  },
+  "sulphurpool-dark": {
+    "meta": {
+      "themeName": "sulphurpool-dark"
+    },
+    "text": {
+      "primary": {
+        "value": "#dfe2f1",
+        "type": "color"
+      },
+      "secondary": {
+        "value": "#979db4",
+        "type": "color"
+      },
+      "muted": {
+        "value": "#979db4",
+        "type": "color"
+      },
+      "placeholder": {
+        "value": "#898ea4",
+        "type": "color"
+      },
+      "active": {
+        "value": "#f5f7ff",
+        "type": "color"
+      },
+      "feature": {
+        "value": "#3d8fd1",
+        "type": "color"
+      },
+      "ok": {
+        "value": "#ac9739",
+        "type": "color"
+      },
+      "error": {
+        "value": "#c94922",
+        "type": "color"
+      },
+      "warning": {
+        "value": "#c08b30",
+        "type": "color"
+      },
+      "info": {
+        "value": "#3d8fd1",
+        "type": "color"
+      }
+    },
+    "icon": {
+      "primary": {
+        "value": "#dfe2f1",
+        "type": "color"
+      },
+      "secondary": {
+        "value": "#979db4",
+        "type": "color"
+      },
+      "muted": {
+        "value": "#979db4",
+        "type": "color"
+      },
+      "placeholder": {
+        "value": "#898ea4",
+        "type": "color"
+      },
+      "active": {
+        "value": "#f5f7ff",
+        "type": "color"
+      },
+      "feature": {
+        "value": "#3d8fd1",
+        "type": "color"
+      },
+      "ok": {
+        "value": "#ac9739",
+        "type": "color"
+      },
+      "error": {
+        "value": "#c94922",
+        "type": "color"
+      },
+      "warning": {
+        "value": "#c08b30",
+        "type": "color"
+      },
+      "info": {
+        "value": "#3d8fd1",
+        "type": "color"
+      }
+    },
+    "background": {
+      "100": {
+        "base": {
+          "value": "#363f62",
+          "type": "color"
+        },
+        "hovered": {
+          "value": "#444c6f",
+          "type": "color"
+        },
+        "active": {
+          "value": "#51597b",
+          "type": "color"
+        }
+      },
+      "300": {
+        "base": {
+          "value": "#293256",
+          "type": "color"
+        },
+        "hovered": {
+          "value": "#363f62",
+          "type": "color"
+        },
+        "active": {
+          "value": "#444c6f",
+          "type": "color"
+        }
+      },
+      "500": {
+        "base": {
+          "value": "#202746",
+          "type": "color"
+        },
+        "hovered": {
+          "value": "#222a4a",
+          "type": "color"
+        },
+        "active": {
+          "value": "#252d4e",
+          "type": "color"
+        }
+      },
+      "on300": {
+        "base": {
+          "value": "#202746",
+          "type": "color"
+        },
+        "hovered": {
+          "value": "#222a4a",
+          "type": "color"
+        },
+        "active": {
+          "value": "#252d4e",
+          "type": "color"
+        }
+      },
+      "on500": {
+        "base": {
+          "value": "#363f62",
+          "type": "color"
+        },
+        "hovered": {
+          "value": "#444c6f",
+          "type": "color"
+        },
+        "active": {
+          "value": "#51597b",
+          "type": "color"
+        }
+      },
+      "ok": {
+        "base": {
+          "value": "#ac973926",
+          "type": "color"
+        },
+        "hovered": {
+          "value": "#ac973933",
+          "type": "color"
+        },
+        "active": {
+          "value": "#ac973940",
+          "type": "color"
+        }
+      },
+      "error": {
+        "base": {
+          "value": "#c9492226",
+          "type": "color"
+        },
+        "hovered": {
+          "value": "#c9492233",
+          "type": "color"
+        },
+        "active": {
+          "value": "#c9492240",
+          "type": "color"
+        }
+      },
+      "warning": {
+        "base": {
+          "value": "#c08b3026",
+          "type": "color"
+        },
+        "hovered": {
+          "value": "#c08b3033",
+          "type": "color"
+        },
+        "active": {
+          "value": "#c08b3040",
+          "type": "color"
+        }
+      },
+      "info": {
+        "base": {
+          "value": "#3d8fd126",
+          "type": "color"
+        },
+        "hovered": {
+          "value": "#3d8fd133",
+          "type": "color"
+        },
+        "active": {
+          "value": "#3d8fd140",
+          "type": "color"
+        }
+      }
+    },
+    "border": {
+      "primary": {
+        "value": "#202746",
+        "type": "color"
+      },
+      "secondary": {
+        "value": "#293256",
+        "type": "color"
+      },
+      "muted": {
+        "value": "#6b7394",
+        "type": "color"
+      },
+      "active": {
+        "value": "#6b7394",
+        "type": "color"
+      },
+      "onMedia": {
+        "value": "#2027461a",
+        "type": "color"
+      },
+      "ok": {
+        "value": "#ac973926",
+        "type": "color"
+      },
+      "error": {
+        "value": "#c9492226",
+        "type": "color"
+      },
+      "warning": {
+        "value": "#c08b3026",
+        "type": "color"
+      },
+      "info": {
+        "value": "#3d8fd126",
+        "type": "color"
+      }
+    },
+    "editor": {
+      "background": {
+        "value": "#202746",
+        "type": "color"
+      },
+      "indent_guide": {
+        "value": "#6b7394",
+        "type": "color"
+      },
+      "indent_guide_active": {
+        "value": "#293256",
+        "type": "color"
+      },
+      "line": {
+        "active": {
+          "value": "#293256",
+          "type": "color"
+        },
+        "highlighted": {
+          "value": "#363f62",
+          "type": "color"
+        }
+      },
+      "highlight": {
+        "selection": {
+          "value": "#3d8fd13d",
+          "type": "color"
+        },
+        "occurrence": {
+          "value": "#5e66873d",
+          "type": "color"
+        },
+        "activeOccurrence": {
+          "value": "#5e66877a",
+          "type": "color"
+        },
+        "matchingBracket": {
+          "value": "#252d4e",
+          "type": "color"
+        },
+        "match": {
+          "value": "#1a2a6d",
+          "type": "color"
+        },
+        "activeMatch": {
+          "value": "#3d56c47a",
+          "type": "color"
+        },
+        "related": {
+          "value": "#222a4a",
+          "type": "color"
+        }
+      },
+      "gutter": {
+        "primary": {
+          "value": "#898ea4",
+          "type": "color"
+        },
+        "active": {
+          "value": "#f5f7ff",
+          "type": "color"
+        }
+      }
+    },
+    "syntax": {
+      "primary": {
+        "value": "#f5f7ff",
+        "type": "color"
+      },
+      "comment": {
+        "value": "#979db4",
+        "type": "color"
+      },
+      "keyword": {
+        "value": "#3d8fd1",
+        "type": "color"
+      },
+      "function": {
+        "value": "#c08b30",
+        "type": "color"
+      },
+      "type": {
+        "value": "#22a2c9",
+        "type": "color"
+      },
+      "variant": {
+        "value": "#3d8fd1",
+        "type": "color"
+      },
+      "property": {
+        "value": "#3d8fd1",
+        "type": "color"
+      },
+      "enum": {
+        "value": "#c76b29",
+        "type": "color"
+      },
+      "operator": {
+        "value": "#c76b29",
+        "type": "color"
+      },
+      "string": {
+        "value": "#c76b29",
+        "type": "color"
+      },
+      "number": {
+        "value": "#ac9739",
+        "type": "color"
+      },
+      "boolean": {
+        "value": "#ac9739",
+        "type": "color"
+      }
+    },
+    "player": {
+      "1": {
+        "baseColor": {
+          "value": "#3d8fd1",
+          "type": "color"
+        },
+        "cursorColor": {
+          "value": "#3d8fd1",
+          "type": "color"
+        },
+        "selectionColor": {
+          "value": "#3d8fd13d",
+          "type": "color"
+        },
+        "borderColor": {
+          "value": "#3d8fd1cc",
+          "type": "color"
+        }
+      },
+      "2": {
+        "baseColor": {
+          "value": "#ac9739",
+          "type": "color"
+        },
+        "cursorColor": {
+          "value": "#ac9739",
+          "type": "color"
+        },
+        "selectionColor": {
+          "value": "#ac97393d",
+          "type": "color"
+        },
+        "borderColor": {
+          "value": "#ac9739cc",
+          "type": "color"
+        }
+      },
+      "3": {
+        "baseColor": {
+          "value": "#9c637a",
+          "type": "color"
+        },
+        "cursorColor": {
+          "value": "#9c637a",
+          "type": "color"
+        },
+        "selectionColor": {
+          "value": "#9c637a3d",
+          "type": "color"
+        },
+        "borderColor": {
+          "value": "#9c637acc",
+          "type": "color"
+        }
+      },
+      "4": {
+        "baseColor": {
+          "value": "#c76b29",
+          "type": "color"
+        },
+        "cursorColor": {
+          "value": "#c76b29",
+          "type": "color"
+        },
+        "selectionColor": {
+          "value": "#c76b293d",
+          "type": "color"
+        },
+        "borderColor": {
+          "value": "#c76b29cc",
+          "type": "color"
+        }
+      },
+      "5": {
+        "baseColor": {
+          "value": "#6679cc",
+          "type": "color"
+        },
+        "cursorColor": {
+          "value": "#6679cc",
+          "type": "color"
+        },
+        "selectionColor": {
+          "value": "#6679cc3d",
+          "type": "color"
+        },
+        "borderColor": {
+          "value": "#6679cccc",
+          "type": "color"
+        }
+      },
+      "6": {
+        "baseColor": {
+          "value": "#22a2c9",
+          "type": "color"
+        },
+        "cursorColor": {
+          "value": "#22a2c9",
+          "type": "color"
+        },
+        "selectionColor": {
+          "value": "#22a2c93d",
+          "type": "color"
+        },
+        "borderColor": {
+          "value": "#22a2c9cc",
+          "type": "color"
+        }
+      },
+      "7": {
+        "baseColor": {
+          "value": "#c94922",
+          "type": "color"
+        },
+        "cursorColor": {
+          "value": "#c94922",
+          "type": "color"
+        },
+        "selectionColor": {
+          "value": "#c949223d",
+          "type": "color"
+        },
+        "borderColor": {
+          "value": "#c94922cc",
+          "type": "color"
+        }
+      },
+      "8": {
+        "baseColor": {
+          "value": "#c08b30",
+          "type": "color"
+        },
+        "cursorColor": {
+          "value": "#c08b30",
+          "type": "color"
+        },
+        "selectionColor": {
+          "value": "#c08b303d",
+          "type": "color"
+        },
+        "borderColor": {
+          "value": "#c08b30cc",
+          "type": "color"
+        }
+      }
+    },
+    "shadowAlpha": {
+      "value": 0.24,
+      "type": "number"
+    }
+  },
+  "sulphurpool-light": {
+    "meta": {
+      "themeName": "sulphurpool-light"
+    },
+    "text": {
+      "primary": {
+        "value": "#293256",
+        "type": "color"
+      },
+      "secondary": {
+        "value": "#5e6687",
+        "type": "color"
+      },
+      "muted": {
+        "value": "#5e6687",
+        "type": "color"
+      },
+      "placeholder": {
+        "value": "#6b7394",
+        "type": "color"
+      },
+      "active": {
+        "value": "#202746",
+        "type": "color"
+      },
+      "feature": {
+        "value": "#3d8fd1",
+        "type": "color"
+      },
+      "ok": {
+        "value": "#ac9739",
+        "type": "color"
+      },
+      "error": {
+        "value": "#c94922",
+        "type": "color"
+      },
+      "warning": {
+        "value": "#c08b30",
+        "type": "color"
+      },
+      "info": {
+        "value": "#3d8fd1",
+        "type": "color"
+      }
+    },
+    "icon": {
+      "primary": {
+        "value": "#293256",
+        "type": "color"
+      },
+      "secondary": {
+        "value": "#5e6687",
+        "type": "color"
+      },
+      "muted": {
+        "value": "#5e6687",
+        "type": "color"
+      },
+      "placeholder": {
+        "value": "#6b7394",
+        "type": "color"
+      },
+      "active": {
+        "value": "#202746",
+        "type": "color"
+      },
+      "feature": {
+        "value": "#3d8fd1",
+        "type": "color"
+      },
+      "ok": {
+        "value": "#ac9739",
+        "type": "color"
+      },
+      "error": {
+        "value": "#c94922",
+        "type": "color"
+      },
+      "warning": {
+        "value": "#c08b30",
+        "type": "color"
+      },
+      "info": {
+        "value": "#3d8fd1",
+        "type": "color"
+      }
+    },
+    "background": {
+      "100": {
+        "base": {
+          "value": "#cdd1e2",
+          "type": "color"
+        },
+        "hovered": {
+          "value": "#bbc0d3",
+          "type": "color"
+        },
+        "active": {
+          "value": "#a9aec3",
+          "type": "color"
+        }
+      },
+      "300": {
+        "base": {
+          "value": "#dfe2f1",
+          "type": "color"
+        },
+        "hovered": {
+          "value": "#cdd1e2",
+          "type": "color"
+        },
+        "active": {
+          "value": "#bbc0d3",
+          "type": "color"
+        }
+      },
+      "500": {
+        "base": {
+          "value": "#f5f7ff",
+          "type": "color"
+        },
+        "hovered": {
+          "value": "#f0f2fc",
+          "type": "color"
+        },
+        "active": {
+          "value": "#eaedf8",
+          "type": "color"
+        }
+      },
+      "on300": {
+        "base": {
+          "value": "#f5f7ff",
+          "type": "color"
+        },
+        "hovered": {
+          "value": "#f0f2fc",
+          "type": "color"
+        },
+        "active": {
+          "value": "#eaedf8",
+          "type": "color"
+        }
+      },
+      "on500": {
+        "base": {
+          "value": "#cdd1e2",
+          "type": "color"
+        },
+        "hovered": {
+          "value": "#bbc0d3",
+          "type": "color"
+        },
+        "active": {
+          "value": "#a9aec3",
+          "type": "color"
+        }
+      },
+      "ok": {
+        "base": {
+          "value": "#ac973926",
+          "type": "color"
+        },
+        "hovered": {
+          "value": "#ac973933",
+          "type": "color"
+        },
+        "active": {
+          "value": "#ac973940",
+          "type": "color"
+        }
+      },
+      "error": {
+        "base": {
+          "value": "#c9492226",
+          "type": "color"
+        },
+        "hovered": {
+          "value": "#c9492233",
+          "type": "color"
+        },
+        "active": {
+          "value": "#c9492240",
+          "type": "color"
+        }
+      },
+      "warning": {
+        "base": {
+          "value": "#c08b3026",
+          "type": "color"
+        },
+        "hovered": {
+          "value": "#c08b3033",
+          "type": "color"
+        },
+        "active": {
+          "value": "#c08b3040",
+          "type": "color"
+        }
+      },
+      "info": {
+        "base": {
+          "value": "#3d8fd126",
+          "type": "color"
+        },
+        "hovered": {
+          "value": "#3d8fd133",
+          "type": "color"
+        },
+        "active": {
+          "value": "#3d8fd140",
+          "type": "color"
+        }
+      }
+    },
+    "border": {
+      "primary": {
+        "value": "#979db4",
+        "type": "color"
+      },
+      "secondary": {
+        "value": "#979db4",
+        "type": "color"
+      },
+      "muted": {
+        "value": "#6b7394",
+        "type": "color"
+      },
+      "active": {
+        "value": "#6b7394",
+        "type": "color"
+      },
+      "onMedia": {
+        "value": "#f5f7ff1a",
+        "type": "color"
+      },
+      "ok": {
+        "value": "#ac973926",
+        "type": "color"
+      },
+      "error": {
+        "value": "#c9492226",
+        "type": "color"
+      },
+      "warning": {
+        "value": "#c08b3026",
+        "type": "color"
+      },
+      "info": {
+        "value": "#3d8fd126",
+        "type": "color"
+      }
+    },
+    "editor": {
+      "background": {
+        "value": "#f5f7ff",
+        "type": "color"
+      },
+      "indent_guide": {
+        "value": "#6b7394",
+        "type": "color"
+      },
+      "indent_guide_active": {
+        "value": "#979db4",
+        "type": "color"
+      },
+      "line": {
+        "active": {
+          "value": "#dfe2f1",
+          "type": "color"
+        },
+        "highlighted": {
+          "value": "#cdd1e2",
+          "type": "color"
+        }
+      },
+      "highlight": {
+        "selection": {
+          "value": "#3d8fd13d",
+          "type": "color"
+        },
+        "occurrence": {
+          "value": "#979db41f",
+          "type": "color"
+        },
+        "activeOccurrence": {
+          "value": "#979db43d",
+          "type": "color"
+        },
+        "matchingBracket": {
+          "value": "#eaedf8",
+          "type": "color"
+        },
+        "match": {
+          "value": "#bcc6f7",
+          "type": "color"
+        },
+        "activeMatch": {
+          "value": "#7b8ddc3d",
+          "type": "color"
+        },
+        "related": {
+          "value": "#f0f2fc",
+          "type": "color"
+        }
+      },
+      "gutter": {
+        "primary": {
+          "value": "#6b7394",
+          "type": "color"
+        },
+        "active": {
+          "value": "#202746",
+          "type": "color"
+        }
+      }
+    },
+    "syntax": {
+      "primary": {
+        "value": "#202746",
+        "type": "color"
+      },
+      "comment": {
+        "value": "#5e6687",
+        "type": "color"
+      },
+      "keyword": {
+        "value": "#3d8fd1",
+        "type": "color"
+      },
+      "function": {
+        "value": "#c08b30",
+        "type": "color"
+      },
+      "type": {
+        "value": "#22a2c9",
+        "type": "color"
+      },
+      "variant": {
+        "value": "#3d8fd1",
+        "type": "color"
+      },
+      "property": {
+        "value": "#3d8fd1",
+        "type": "color"
+      },
+      "enum": {
+        "value": "#c76b29",
+        "type": "color"
+      },
+      "operator": {
+        "value": "#c76b29",
+        "type": "color"
+      },
+      "string": {
+        "value": "#c76b29",
+        "type": "color"
+      },
+      "number": {
+        "value": "#ac9739",
+        "type": "color"
+      },
+      "boolean": {
+        "value": "#ac9739",
+        "type": "color"
+      }
+    },
+    "player": {
+      "1": {
+        "baseColor": {
+          "value": "#3d8fd1",
+          "type": "color"
+        },
+        "cursorColor": {
+          "value": "#3d8fd1",
+          "type": "color"
+        },
+        "selectionColor": {
+          "value": "#3d8fd13d",
+          "type": "color"
+        },
+        "borderColor": {
+          "value": "#3d8fd1cc",
+          "type": "color"
+        }
+      },
+      "2": {
+        "baseColor": {
+          "value": "#ac9739",
+          "type": "color"
+        },
+        "cursorColor": {
+          "value": "#ac9739",
+          "type": "color"
+        },
+        "selectionColor": {
+          "value": "#ac97393d",
+          "type": "color"
+        },
+        "borderColor": {
+          "value": "#ac9739cc",
+          "type": "color"
+        }
+      },
+      "3": {
+        "baseColor": {
+          "value": "#9c637a",
+          "type": "color"
+        },
+        "cursorColor": {
+          "value": "#9c637a",
+          "type": "color"
+        },
+        "selectionColor": {
+          "value": "#9c637a3d",
+          "type": "color"
+        },
+        "borderColor": {
+          "value": "#9c637acc",
+          "type": "color"
+        }
+      },
+      "4": {
+        "baseColor": {
+          "value": "#c76b29",
+          "type": "color"
+        },
+        "cursorColor": {
+          "value": "#c76b29",
+          "type": "color"
+        },
+        "selectionColor": {
+          "value": "#c76b293d",
+          "type": "color"
+        },
+        "borderColor": {
+          "value": "#c76b29cc",
+          "type": "color"
+        }
+      },
+      "5": {
+        "baseColor": {
+          "value": "#6679cc",
+          "type": "color"
+        },
+        "cursorColor": {
+          "value": "#6679cc",
+          "type": "color"
+        },
+        "selectionColor": {
+          "value": "#6679cc3d",
+          "type": "color"
+        },
+        "borderColor": {
+          "value": "#6679cccc",
+          "type": "color"
+        }
+      },
+      "6": {
+        "baseColor": {
+          "value": "#22a2c9",
+          "type": "color"
+        },
+        "cursorColor": {
+          "value": "#22a2c9",
+          "type": "color"
+        },
+        "selectionColor": {
+          "value": "#22a2c93d",
+          "type": "color"
+        },
+        "borderColor": {
+          "value": "#22a2c9cc",
+          "type": "color"
+        }
+      },
+      "7": {
+        "baseColor": {
+          "value": "#c94922",
+          "type": "color"
+        },
+        "cursorColor": {
+          "value": "#c94922",
+          "type": "color"
+        },
+        "selectionColor": {
+          "value": "#c949223d",
+          "type": "color"
+        },
+        "borderColor": {
+          "value": "#c94922cc",
+          "type": "color"
+        }
+      },
+      "8": {
+        "baseColor": {
+          "value": "#c08b30",
+          "type": "color"
+        },
+        "cursorColor": {
+          "value": "#c08b30",
+          "type": "color"
+        },
+        "selectionColor": {
+          "value": "#c08b303d",
+          "type": "color"
+        },
+        "borderColor": {
+          "value": "#c08b30cc",
+          "type": "color"
+        }
+      }
+    },
+    "shadowAlpha": {
+      "value": 0.12,
+      "type": "number"
+    }
   }
 }
\ No newline at end of file
diff --git a/styles/src/buildThemes.ts b/styles/src/buildThemes.ts
index 69bd96f2c5..520a37395d 100644
--- a/styles/src/buildThemes.ts
+++ b/styles/src/buildThemes.ts
@@ -1,17 +1,9 @@
 import * as fs from "fs";
 import * as path from "path";
 import app from "./styleTree/app";
-import { dark as caveDark, light as caveLight } from "./themes/cave";
-import { dark as solarizedDark, light as solarizedLight } from "./themes/solarized";
-import { dark as sulphurpoolDark, light as sulphurpoolLight } from "./themes/sulphurpool";
+import themes from "./themes";
 import snakeCase from "./utils/snakeCase";
 
-const themes = [
-  caveDark, caveLight,
-  solarizedDark, solarizedLight,
-  sulphurpoolDark, sulphurpoolLight
-];
-
 const themeDirectory = `${__dirname}/../../assets/themes/`;
 
 // Clear existing themes
diff --git a/styles/src/buildTokens.ts b/styles/src/buildTokens.ts
index 27ea50d814..04b4a6b752 100644
--- a/styles/src/buildTokens.ts
+++ b/styles/src/buildTokens.ts
@@ -1,9 +1,7 @@
 import * as fs from "fs";
 import * as path from "path";
-import { light as solarizedLight, dark as solarizedDark } from "./themes/solarized";
-// Use cave as "light" and "dark" themes
-import { light, dark } from "./themes/cave";
-import Theme from "./themes/theme";
+import themes from "./themes";
+import Theme from "./themes/common/theme";
 import { colors, fontFamilies, fontSizes, fontWeights, sizes } from "./tokens";
 
 // Organize theme tokens
@@ -50,6 +48,9 @@ const coreTokens = {
 const combinedTokens: any = {};
 
 const distPath = path.resolve(`${__dirname}/../dist`);
+for (const file of fs.readdirSync(distPath)) {
+  fs.unlinkSync(path.join(distPath, file));
+}
 
 // Add core tokens to the combined tokens and write `core.json`.
 // We write `core.json` as a separate file for the design team's convenience, but it isn't consumed by Figma Tokens directly.
@@ -60,7 +61,6 @@ combinedTokens.core = coreTokens;
 
 // Add each theme to the combined tokens and write ${theme}.json.
 // We write `${theme}.json` as a separate file for the design team's convenience, but it isn't consumed by Figma Tokens directly.
-let themes = [dark, light, solarizedDark, solarizedLight];
 themes.forEach((theme) => {
   const themePath = `${distPath}/${theme.name}.json`
   fs.writeFileSync(themePath, JSON.stringify(themeTokens(theme), null, 2));
diff --git a/styles/src/styleTree/app.ts b/styles/src/styleTree/app.ts
index 9822f6766e..230bd3e57f 100644
--- a/styles/src/styleTree/app.ts
+++ b/styles/src/styleTree/app.ts
@@ -1,4 +1,4 @@
-import Theme from "../themes/theme";
+import Theme from "../themes/common/theme";
 import chatPanel from "./chatPanel";
 import { text } from "./components";
 import contactFinder from "./contactFinder";
diff --git a/styles/src/styleTree/chatPanel.ts b/styles/src/styleTree/chatPanel.ts
index 69b5f3baa0..778cd67584 100644
--- a/styles/src/styleTree/chatPanel.ts
+++ b/styles/src/styleTree/chatPanel.ts
@@ -1,4 +1,4 @@
-import Theme from "../themes/theme";
+import Theme from "../themes/common/theme";
 import { panel } from "./app";
 import {
   backgroundColor,
diff --git a/styles/src/styleTree/commandPalette.ts b/styles/src/styleTree/commandPalette.ts
index 0dd290a91c..7b94f1cfae 100644
--- a/styles/src/styleTree/commandPalette.ts
+++ b/styles/src/styleTree/commandPalette.ts
@@ -1,4 +1,4 @@
-import Theme from "../themes/theme";
+import Theme from "../themes/common/theme";
 import { text, backgroundColor, border } from "./components";
 
 export default function commandPalette(theme: Theme) {
diff --git a/styles/src/styleTree/components.ts b/styles/src/styleTree/components.ts
index d0412af02e..2a26537750 100644
--- a/styles/src/styleTree/components.ts
+++ b/styles/src/styleTree/components.ts
@@ -1,5 +1,5 @@
 import chroma from "chroma-js";
-import Theme, { BackgroundColorSet } from "../themes/theme";
+import Theme, { BackgroundColorSet } from "../themes/common/theme";
 import { fontFamilies, fontSizes, FontWeight } from "../tokens";
 import { Color } from "../utils/color";
 
diff --git a/styles/src/styleTree/contactFinder.ts b/styles/src/styleTree/contactFinder.ts
index 853f87ca5e..fdefa34b8a 100644
--- a/styles/src/styleTree/contactFinder.ts
+++ b/styles/src/styleTree/contactFinder.ts
@@ -1,4 +1,4 @@
-import Theme from "../themes/theme";
+import Theme from "../themes/common/theme";
 import picker from "./picker";
 import { backgroundColor, iconColor } from "./components";
 
diff --git a/styles/src/styleTree/contactNotification.ts b/styles/src/styleTree/contactNotification.ts
index 09360f2f91..0ed9636399 100644
--- a/styles/src/styleTree/contactNotification.ts
+++ b/styles/src/styleTree/contactNotification.ts
@@ -1,4 +1,4 @@
-import Theme from "../themes/theme";
+import Theme from "../themes/common/theme";
 import { backgroundColor, iconColor, text } from "./components";
 
 const avatarSize = 12;
diff --git a/styles/src/styleTree/contactsPanel.ts b/styles/src/styleTree/contactsPanel.ts
index 421afd1967..d55487a97b 100644
--- a/styles/src/styleTree/contactsPanel.ts
+++ b/styles/src/styleTree/contactsPanel.ts
@@ -1,4 +1,4 @@
-import Theme from "../themes/theme";
+import Theme from "../themes/common/theme";
 import { panel } from "./app";
 import { backgroundColor, border, borderColor, iconColor, player, text } from "./components";
 
diff --git a/styles/src/styleTree/editor.ts b/styles/src/styleTree/editor.ts
index 88e630b357..06f0d98d70 100644
--- a/styles/src/styleTree/editor.ts
+++ b/styles/src/styleTree/editor.ts
@@ -1,4 +1,4 @@
-import Theme from "../themes/theme";
+import Theme from "../themes/common/theme";
 import {
   backgroundColor,
   border,
diff --git a/styles/src/styleTree/picker.ts b/styles/src/styleTree/picker.ts
index e783945dd1..adb53458d3 100644
--- a/styles/src/styleTree/picker.ts
+++ b/styles/src/styleTree/picker.ts
@@ -1,4 +1,4 @@
-import Theme from "../themes/theme";
+import Theme from "../themes/common/theme";
 import { backgroundColor, border, player, shadow, text } from "./components";
 
 export default function picker(theme: Theme) {
diff --git a/styles/src/styleTree/projectDiagnostics.ts b/styles/src/styleTree/projectDiagnostics.ts
index 7331df1f98..fe2d3e5f3b 100644
--- a/styles/src/styleTree/projectDiagnostics.ts
+++ b/styles/src/styleTree/projectDiagnostics.ts
@@ -1,4 +1,4 @@
-import Theme from "../themes/theme";
+import Theme from "../themes/common/theme";
 import {
   backgroundColor,
   text,
diff --git a/styles/src/styleTree/projectPanel.ts b/styles/src/styleTree/projectPanel.ts
index bacc3590e5..6892b666d9 100644
--- a/styles/src/styleTree/projectPanel.ts
+++ b/styles/src/styleTree/projectPanel.ts
@@ -1,4 +1,4 @@
-import Theme from "../themes/theme";
+import Theme from "../themes/common/theme";
 import { panel } from "./app";
 import { backgroundColor, iconColor, player, text } from "./components";
 
diff --git a/styles/src/styleTree/search.ts b/styles/src/styleTree/search.ts
index b48dccc156..7febfb98b1 100644
--- a/styles/src/styleTree/search.ts
+++ b/styles/src/styleTree/search.ts
@@ -1,4 +1,4 @@
-import Theme from "../themes/theme";
+import Theme from "../themes/common/theme";
 import { backgroundColor, border, player, text } from "./components";
 
 export default function search(theme: Theme) {
diff --git a/styles/src/styleTree/statusBar.ts b/styles/src/styleTree/statusBar.ts
index c7b7c6a0a3..4b3fbaafea 100644
--- a/styles/src/styleTree/statusBar.ts
+++ b/styles/src/styleTree/statusBar.ts
@@ -1,4 +1,4 @@
-import Theme from "../themes/theme";
+import Theme from "../themes/common/theme";
 import { backgroundColor, border, iconColor, text } from "./components";
 import { workspaceBackground } from "./workspace";
 
diff --git a/styles/src/styleTree/workspace.ts b/styles/src/styleTree/workspace.ts
index 1109068688..560049b494 100644
--- a/styles/src/styleTree/workspace.ts
+++ b/styles/src/styleTree/workspace.ts
@@ -1,4 +1,4 @@
-import Theme from "../themes/theme";
+import Theme from "../themes/common/theme";
 import { backgroundColor, border, iconColor, shadow, text } from "./components";
 import statusBar from "./statusBar";
 
diff --git a/styles/src/themes.ts b/styles/src/themes.ts
new file mode 100644
index 0000000000..ef02fab821
--- /dev/null
+++ b/styles/src/themes.ts
@@ -0,0 +1,16 @@
+import fs from "fs";
+import path from "path";
+import Theme from "./themes/common/theme";
+
+const themes: Theme[] = [];
+export default themes;
+
+const themesPath = path.resolve(`${__dirname}/themes`);
+for (const fileName of fs.readdirSync(themesPath)) {
+  const filePath = path.join(themesPath, fileName);
+  if (fs.statSync(filePath).isFile()) {
+    const theme = require(filePath);
+    themes.push(theme.dark);
+    themes.push(theme.light);
+  }
+}
diff --git a/styles/src/themes/cave.ts b/styles/src/themes/cave.ts
index aa443dc837..f3c8102ac9 100644
--- a/styles/src/themes/cave.ts
+++ b/styles/src/themes/cave.ts
@@ -1,5 +1,5 @@
 import chroma from "chroma-js";
-import { colorRamp, createTheme } from "./base16";
+import { colorRamp, createTheme } from "./common/base16";
 
 const name = "cave";
 
diff --git a/styles/src/themes/base16.ts b/styles/src/themes/common/base16.ts
similarity index 99%
rename from styles/src/themes/base16.ts
rename to styles/src/themes/common/base16.ts
index 8122350727..7fd485b0c3 100644
--- a/styles/src/themes/base16.ts
+++ b/styles/src/themes/common/base16.ts
@@ -1,7 +1,7 @@
 import chroma from "chroma-js";
 import { Scale, Color } from "chroma-js";
-import { color, ColorToken, fontWeights, NumberToken } from "../tokens";
-import { withOpacity } from "../utils/color";
+import { color, ColorToken, fontWeights, NumberToken } from "../../tokens";
+import { withOpacity } from "../../utils/color";
 import Theme, { buildPlayer, Syntax } from "./theme";
 
 export function colorRamp(color: Color): Scale {
diff --git a/styles/src/themes/theme.ts b/styles/src/themes/common/theme.ts
similarity index 96%
rename from styles/src/themes/theme.ts
rename to styles/src/themes/common/theme.ts
index 21eda88268..2c648e87ec 100644
--- a/styles/src/themes/theme.ts
+++ b/styles/src/themes/common/theme.ts
@@ -1,5 +1,5 @@
-import { ColorToken, FontWeightToken, NumberToken } from "../tokens";
-import { withOpacity } from "../utils/color";
+import { ColorToken, FontWeightToken, NumberToken } from "../../tokens";
+import { withOpacity } from "../../utils/color";
 
 export interface SyntaxHighlightStyle {
   color: ColorToken;
diff --git a/styles/src/themes/gruvbox.ts b/styles/src/themes/gruvbox.ts
deleted file mode 100644
index f0100fa327..0000000000
--- a/styles/src/themes/gruvbox.ts
+++ /dev/null
@@ -1,30 +0,0 @@
-import chroma from "chroma-js";
-import { createTheme } from "./base16";
-
-const name = "cave";
-
-const colors = {
-  "red": chroma("#be4678"),
-  "orange": chroma("#aa573c"),
-  "yellow": chroma("#a06e3b"),
-  "green": chroma("#2a9292"),
-  "cyan": chroma("#398bc6"),
-  "blue": chroma("#576ddb"),
-  "violet": chroma("#955ae7"),
-  "magenta": chroma("#bf40bf"),
-};
-
-const ramps = {
-  neutral: chroma.scale(["#19171c", "#26232a", "#585260", "#655f6d", "#7e7887", "#8b8792", "#e2dfe7", "#efecf4"]),
-  red: chroma.scale([colors.red.darken(3), colors.red, colors.red.brighten(3)]),
-  orange: chroma.scale([colors.orange.darken(3), colors.orange, colors.orange.brighten(3)]),
-  yellow: chroma.scale([colors.yellow.darken(3), colors.yellow, colors.yellow.brighten(3)]),
-  green: chroma.scale([colors.green.darken(3), colors.green, colors.green.brighten(3)]),
-  cyan: chroma.scale([colors.cyan.darken(3), colors.cyan, colors.cyan.brighten(3)]),
-  blue: chroma.scale([colors.blue.darken(3), colors.blue, colors.blue.brighten(3)]),
-  violet: chroma.scale([colors.violet.darken(3), colors.violet, colors.violet.brighten(3)]),
-  magenta: chroma.scale([colors.magenta.darken(3), colors.magenta, colors.magenta.brighten(3)]),
-}
-
-export const dark = createTheme(`${name}-dark`, false, ramps);
-export const light = createTheme(`${name}-light`, true, ramps);
\ No newline at end of file
diff --git a/styles/src/themes/solarized.ts b/styles/src/themes/solarized.ts
index 2b9db83311..6992dc5bf8 100644
--- a/styles/src/themes/solarized.ts
+++ b/styles/src/themes/solarized.ts
@@ -1,5 +1,5 @@
 import chroma from "chroma-js";
-import { colorRamp, createTheme } from "./base16";
+import { colorRamp, createTheme } from "./common/base16";
 
 const name = "solarized";
 
diff --git a/styles/src/themes/sulphurpool.ts b/styles/src/themes/sulphurpool.ts
index 727f1ce38a..202d52bc68 100644
--- a/styles/src/themes/sulphurpool.ts
+++ b/styles/src/themes/sulphurpool.ts
@@ -1,5 +1,5 @@
 import chroma from "chroma-js";
-import { colorRamp, createTheme } from "./base16";
+import { colorRamp, createTheme } from "./common/base16";
 
 const name = "sulphurpool";