diff --git a/CHANGELOG.md b/CHANGELOG.md
index 8e0f877e70..a1f5305cee 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -3,6 +3,41 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [0.50.0](https://github.com/deephaven/web-client-ui/compare/v0.49.1...v0.50.0) (2023-10-13)
+
+
+### Bug Fixes
+
+* Change display of rollup key columns from null to empty string ([#1563](https://github.com/deephaven/web-client-ui/issues/1563)) ([327bcb6](https://github.com/deephaven/web-client-ui/commit/327bcb649d47bff648a71fd7f979a63094650b25)), closes [#1483](https://github.com/deephaven/web-client-ui/issues/1483)
+* Disabled failing e2e test ([#1554](https://github.com/deephaven/web-client-ui/issues/1554)) ([49723ec](https://github.com/deephaven/web-client-ui/commit/49723ec6669b6afb0c74f2c4e8d88862a64e0f06)), closes [#1553](https://github.com/deephaven/web-client-ui/issues/1553)
+* Formatting Rule Doesn't use default set by user ([#1547](https://github.com/deephaven/web-client-ui/issues/1547)) ([ce51229](https://github.com/deephaven/web-client-ui/commit/ce51229231a9aae27871901412177e33dad24bea))
+* Handle deletion of unsaved copied file in NotebookPanel ([#1557](https://github.com/deephaven/web-client-ui/issues/1557)) ([4021aac](https://github.com/deephaven/web-client-ui/commit/4021aac3bc130f8eec84385c9aadcb4ecf0b995c)), closes [#1359](https://github.com/deephaven/web-client-ui/issues/1359)
+* Prompt for resetting layout ([#1552](https://github.com/deephaven/web-client-ui/issues/1552)) ([a273e64](https://github.com/deephaven/web-client-ui/commit/a273e6433a81f5500fb39992cac276bcbdbda753)), closes [#1250](https://github.com/deephaven/web-client-ui/issues/1250)
+
+
+* fix!: CSS based loading spinner (#1532) ([f06fbb0](https://github.com/deephaven/web-client-ui/commit/f06fbb01e27eaaeccab6031d8ff010ffee303d99)), closes [#1532](https://github.com/deephaven/web-client-ui/issues/1532) [#1531](https://github.com/deephaven/web-client-ui/issues/1531)
+
+
+### Features
+
+* Add copy/rename/delete options to notebook overflow menu ([#1551](https://github.com/deephaven/web-client-ui/issues/1551)) ([4441109](https://github.com/deephaven/web-client-ui/commit/4441109d10dcee8a9415b6884114ee5083fd1cc0)), closes [#1359](https://github.com/deephaven/web-client-ui/issues/1359)
+* data bar render from API ([#1415](https://github.com/deephaven/web-client-ui/issues/1415)) ([ee7d1c1](https://github.com/deephaven/web-client-ui/commit/ee7d1c108e86973b4c6855e482dce21d665dfe28)), closes [#0000](https://github.com/deephaven/web-client-ui/issues/0000) [#FF0000](https://github.com/deephaven/web-client-ui/issues/FF0000) [#FFFF00](https://github.com/deephaven/web-client-ui/issues/FFFF00) [#FFFF00](https://github.com/deephaven/web-client-ui/issues/FFFF00) [#00FF00](https://github.com/deephaven/web-client-ui/issues/00FF00)
+* Monaco theming ([#1560](https://github.com/deephaven/web-client-ui/issues/1560)) ([4eda17c](https://github.com/deephaven/web-client-ui/commit/4eda17c82f6c177a11ba600d6f43c4f36915f6bd)), closes [#1542](https://github.com/deephaven/web-client-ui/issues/1542)
+* Theme Plugin Loading ([#1524](https://github.com/deephaven/web-client-ui/issues/1524)) ([a9541b1](https://github.com/deephaven/web-client-ui/commit/a9541b108f1d998bb2713e70642f5a54aaf8bd97)), closes [#1a171](https://github.com/deephaven/web-client-ui/issues/1a171) [#4c7](https://github.com/deephaven/web-client-ui/issues/4c7) [#1a171](https://github.com/deephaven/web-client-ui/issues/1a171) [#4c7](https://github.com/deephaven/web-client-ui/issues/4c7) [#4c7](https://github.com/deephaven/web-client-ui/issues/4c7) [#1530](https://github.com/deephaven/web-client-ui/issues/1530)
+
+
+### BREAKING CHANGES
+
+* Theme variables have to be present on body to avoid
+Monaco init failing
+* Inline LoadingSpinner instances will need to be
+decorated with `className="loading-spinner-vertical-align"` for vertical
+alignment to work as before
+
+
+
+
+
 ## [0.49.1](https://github.com/deephaven/web-client-ui/compare/v0.49.0...v0.49.1) (2023-09-27)
 
 
diff --git a/lerna.json b/lerna.json
index 6006f9ae2f..a99723cf66 100644
--- a/lerna.json
+++ b/lerna.json
@@ -1,6 +1,6 @@
 {
   "useNx": false,
-  "version": "0.49.1",
+  "version": "0.50.0",
   "command": {
     "publish": {
       "distTag": "latest"
diff --git a/package-lock.json b/package-lock.json
index 7d701fd1e5..fac28af5cd 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -23247,9 +23247,9 @@
       }
     },
     "node_modules/postcss": {
-      "version": "8.4.23",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.23.tgz",
-      "integrity": "sha512-bQ3qMcpF6A/YjR55xtoTr0jGOlnPOKAIMdOWiv0EIT6HVPEaJiJB4NLljSbiHoC2RX7DN5Uvjtpbg1NPdwv1oA==",
+      "version": "8.4.31",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz",
+      "integrity": "sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==",
       "funding": [
         {
           "type": "opencollective",
@@ -27929,11 +27929,15 @@
     },
     "packages/app-utils": {
       "name": "@deephaven/app-utils",
-      "version": "0.49.1",
+      "version": "0.50.0",
       "license": "Apache-2.0",
       "dependencies": {
+        "@adobe/react-spectrum": "^3.29.0",
         "@deephaven/auth-plugins": "file:../auth-plugins",
+        "@deephaven/chart": "file:../chart",
         "@deephaven/components": "file:../components",
+        "@deephaven/icons": "file:../icons",
+        "@deephaven/iris-grid": "file:../iris-grid",
         "@deephaven/jsapi-bootstrap": "file:../jsapi-bootstrap",
         "@deephaven/jsapi-components": "file:../jsapi-components",
         "@deephaven/jsapi-types": "file:../jsapi-types",
@@ -28008,7 +28012,7 @@
     },
     "packages/auth-plugins": {
       "name": "@deephaven/auth-plugins",
-      "version": "0.49.1",
+      "version": "0.50.0",
       "license": "Apache-2.0",
       "dependencies": {
         "@deephaven/components": "file:../components",
@@ -28036,7 +28040,7 @@
     },
     "packages/babel-preset": {
       "name": "@deephaven/babel-preset",
-      "version": "0.49.0",
+      "version": "0.50.0",
       "license": "Apache-2.0",
       "dependencies": {
         "@babel/core": "^7.20.0",
@@ -28051,7 +28055,7 @@
     },
     "packages/chart": {
       "name": "@deephaven/chart",
-      "version": "0.49.0",
+      "version": "0.50.0",
       "license": "Apache-2.0",
       "dependencies": {
         "@deephaven/icons": "file:../icons",
@@ -28082,9 +28086,10 @@
     },
     "packages/code-studio": {
       "name": "@deephaven/code-studio",
-      "version": "0.49.1",
+      "version": "0.50.0",
       "license": "Apache-2.0",
       "dependencies": {
+        "@adobe/react-spectrum": "^3.29.0",
         "@deephaven/app-utils": "file:../app-utils",
         "@deephaven/auth-plugins": "file:../auth-plugins",
         "@deephaven/chart": "file:../chart",
@@ -28175,7 +28180,7 @@
     },
     "packages/components": {
       "name": "@deephaven/components",
-      "version": "0.49.1",
+      "version": "0.50.0",
       "license": "Apache-2.0",
       "dependencies": {
         "@adobe/react-spectrum": "^3.29.0",
@@ -28214,7 +28219,7 @@
     },
     "packages/console": {
       "name": "@deephaven/console",
-      "version": "0.49.1",
+      "version": "0.50.0",
       "license": "Apache-2.0",
       "dependencies": {
         "@deephaven/chart": "file:../chart",
@@ -28254,7 +28259,7 @@
     },
     "packages/dashboard": {
       "name": "@deephaven/dashboard",
-      "version": "0.49.1",
+      "version": "0.50.0",
       "license": "Apache-2.0",
       "dependencies": {
         "@deephaven/components": "file:../components",
@@ -28286,7 +28291,7 @@
     },
     "packages/dashboard-core-plugins": {
       "name": "@deephaven/dashboard-core-plugins",
-      "version": "0.49.1",
+      "version": "0.50.0",
       "license": "Apache-2.0",
       "dependencies": {
         "@deephaven/app-utils": "file:../app-utils",
@@ -28358,7 +28363,7 @@
     },
     "packages/embed-chart": {
       "name": "@deephaven/embed-chart",
-      "version": "0.49.1",
+      "version": "0.50.0",
       "license": "Apache-2.0",
       "dependencies": {
         "@deephaven/app-utils": "file:../app-utils",
@@ -28381,7 +28386,7 @@
     },
     "packages/embed-grid": {
       "name": "@deephaven/embed-grid",
-      "version": "0.49.1",
+      "version": "0.50.0",
       "license": "Apache-2.0",
       "dependencies": {
         "@deephaven/app-utils": "file:../app-utils",
@@ -28404,7 +28409,7 @@
     },
     "packages/eslint-config": {
       "name": "@deephaven/eslint-config",
-      "version": "0.49.0",
+      "version": "0.50.0",
       "license": "Apache-2.0",
       "dependencies": {
         "eslint-config-airbnb": "^19.0.4",
@@ -28423,7 +28428,7 @@
     },
     "packages/file-explorer": {
       "name": "@deephaven/file-explorer",
-      "version": "0.49.1",
+      "version": "0.50.0",
       "license": "Apache-2.0",
       "dependencies": {
         "@deephaven/components": "file:../components",
@@ -28449,7 +28454,7 @@
     },
     "packages/filters": {
       "name": "@deephaven/filters",
-      "version": "0.49.0",
+      "version": "0.50.0",
       "license": "Apache-2.0",
       "engines": {
         "node": ">=16"
@@ -28457,7 +28462,7 @@
     },
     "packages/golden-layout": {
       "name": "@deephaven/golden-layout",
-      "version": "0.49.1",
+      "version": "0.50.0",
       "license": "Apache-2.0",
       "dependencies": {
         "@deephaven/components": "file:../components",
@@ -28476,7 +28481,7 @@
     },
     "packages/grid": {
       "name": "@deephaven/grid",
-      "version": "0.49.0",
+      "version": "0.50.0",
       "license": "Apache-2.0",
       "dependencies": {
         "@deephaven/utils": "file:../utils",
@@ -28498,7 +28503,7 @@
     },
     "packages/icons": {
       "name": "@deephaven/icons",
-      "version": "0.49.0",
+      "version": "0.50.0",
       "license": "Apache-2.0",
       "dependencies": {
         "@fortawesome/fontawesome-common-types": "^6.1.1"
@@ -28515,7 +28520,7 @@
     },
     "packages/iris-grid": {
       "name": "@deephaven/iris-grid",
-      "version": "0.49.1",
+      "version": "0.50.0",
       "license": "Apache-2.0",
       "dependencies": {
         "@deephaven/components": "file:../components",
@@ -28560,7 +28565,7 @@
     },
     "packages/jsapi-bootstrap": {
       "name": "@deephaven/jsapi-bootstrap",
-      "version": "0.49.1",
+      "version": "0.50.0",
       "license": "Apache-2.0",
       "dependencies": {
         "@deephaven/components": "file:../components",
@@ -28580,7 +28585,7 @@
     },
     "packages/jsapi-components": {
       "name": "@deephaven/jsapi-components",
-      "version": "0.49.1",
+      "version": "0.50.0",
       "license": "Apache-2.0",
       "dependencies": {
         "@deephaven/components": "file:../components",
@@ -28609,7 +28614,7 @@
     },
     "packages/jsapi-shim": {
       "name": "@deephaven/jsapi-shim",
-      "version": "0.49.0",
+      "version": "0.50.0",
       "license": "Apache-2.0",
       "dependencies": {
         "@deephaven/jsapi-types": "file:../jsapi-types",
@@ -28621,7 +28626,7 @@
     },
     "packages/jsapi-types": {
       "name": "@deephaven/jsapi-types",
-      "version": "0.49.0",
+      "version": "0.50.0",
       "license": "Apache-2.0",
       "engines": {
         "node": ">=16"
@@ -28629,7 +28634,7 @@
     },
     "packages/jsapi-utils": {
       "name": "@deephaven/jsapi-utils",
-      "version": "0.49.0",
+      "version": "0.50.0",
       "license": "Apache-2.0",
       "dependencies": {
         "@deephaven/filters": "file:../filters",
@@ -28648,7 +28653,7 @@
     },
     "packages/log": {
       "name": "@deephaven/log",
-      "version": "0.49.0",
+      "version": "0.50.0",
       "license": "Apache-2.0",
       "dependencies": {
         "event-target-shim": "^6.0.2"
@@ -28659,7 +28664,7 @@
     },
     "packages/mocks": {
       "name": "@deephaven/mocks",
-      "version": "0.49.0",
+      "version": "0.50.0",
       "license": "Apache-2.0",
       "peerDependencies": {
         "jest": "29.x"
@@ -28667,7 +28672,7 @@
     },
     "packages/plugin": {
       "name": "@deephaven/plugin",
-      "version": "0.49.1",
+      "version": "0.50.0",
       "license": "Apache-2.0",
       "dependencies": {
         "@deephaven/components": "file:../components",
@@ -28715,7 +28720,7 @@
     },
     "packages/pouch-storage": {
       "name": "@deephaven/pouch-storage",
-      "version": "0.49.1",
+      "version": "0.50.0",
       "license": "Apache-2.0",
       "dependencies": {
         "@deephaven/console": "file:../console",
@@ -28736,7 +28741,7 @@
     },
     "packages/prettier-config": {
       "name": "@deephaven/prettier-config",
-      "version": "0.49.0",
+      "version": "0.50.0",
       "license": "Apache-2.0",
       "peerDependencies": {
         "prettier": "^3.0.0"
@@ -28744,7 +28749,7 @@
     },
     "packages/react-hooks": {
       "name": "@deephaven/react-hooks",
-      "version": "0.49.0",
+      "version": "0.50.0",
       "license": "Apache-2.0",
       "dependencies": {
         "@adobe/react-spectrum": "^3.29.0",
@@ -28762,7 +28767,7 @@
     },
     "packages/redux": {
       "name": "@deephaven/redux",
-      "version": "0.49.1",
+      "version": "0.50.0",
       "license": "Apache-2.0",
       "dependencies": {
         "@deephaven/jsapi-types": "file:../jsapi-types",
@@ -28780,7 +28785,7 @@
     },
     "packages/storage": {
       "name": "@deephaven/storage",
-      "version": "0.49.0",
+      "version": "0.50.0",
       "license": "Apache-2.0",
       "dependencies": {
         "@deephaven/filters": "file:../filters",
@@ -28796,7 +28801,7 @@
     },
     "packages/stylelint-config": {
       "name": "@deephaven/stylelint-config",
-      "version": "0.49.0",
+      "version": "0.50.0",
       "license": "Apache-2.0",
       "dependencies": {
         "stylelint-config-prettier-scss": "^0.0.1",
@@ -28808,13 +28813,13 @@
     },
     "packages/tsconfig": {
       "name": "@deephaven/tsconfig",
-      "version": "0.49.0",
+      "version": "0.50.0",
       "license": "Apache-2.0"
     },
     "packages/util": {},
     "packages/utils": {
       "name": "@deephaven/utils",
-      "version": "0.49.0",
+      "version": "0.50.0",
       "license": "Apache-2.0",
       "engines": {
         "node": ">=16"
@@ -30053,8 +30058,12 @@
     "@deephaven/app-utils": {
       "version": "file:packages/app-utils",
       "requires": {
+        "@adobe/react-spectrum": "^3.29.0",
         "@deephaven/auth-plugins": "file:../auth-plugins",
+        "@deephaven/chart": "file:../chart",
         "@deephaven/components": "file:../components",
+        "@deephaven/icons": "file:../icons",
+        "@deephaven/iris-grid": "file:../iris-grid",
         "@deephaven/jsapi-bootstrap": "file:../jsapi-bootstrap",
         "@deephaven/jsapi-components": "file:../jsapi-components",
         "@deephaven/jsapi-types": "file:../jsapi-types",
@@ -30127,6 +30136,7 @@
     "@deephaven/code-studio": {
       "version": "file:packages/code-studio",
       "requires": {
+        "@adobe/react-spectrum": "^3.29.0",
         "@deephaven/app-utils": "file:../app-utils",
         "@deephaven/auth-plugins": "file:../auth-plugins",
         "@deephaven/chart": "file:../chart",
@@ -45872,9 +45882,9 @@
       "version": "1.16.1"
     },
     "postcss": {
-      "version": "8.4.23",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.23.tgz",
-      "integrity": "sha512-bQ3qMcpF6A/YjR55xtoTr0jGOlnPOKAIMdOWiv0EIT6HVPEaJiJB4NLljSbiHoC2RX7DN5Uvjtpbg1NPdwv1oA==",
+      "version": "8.4.31",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz",
+      "integrity": "sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==",
       "requires": {
         "nanoid": "^3.3.6",
         "picocolors": "^1.0.0",
diff --git a/packages/app-utils/CHANGELOG.md b/packages/app-utils/CHANGELOG.md
index 162ae18ca9..3e756c5207 100644
--- a/packages/app-utils/CHANGELOG.md
+++ b/packages/app-utils/CHANGELOG.md
@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [0.50.0](https://github.com/deephaven/web-client-ui/compare/v0.49.1...v0.50.0) (2023-10-13)
+
+
+### Features
+
+* Theme Plugin Loading ([#1524](https://github.com/deephaven/web-client-ui/issues/1524)) ([a9541b1](https://github.com/deephaven/web-client-ui/commit/a9541b108f1d998bb2713e70642f5a54aaf8bd97)), closes [#1a171](https://github.com/deephaven/web-client-ui/issues/1a171) [#4c7](https://github.com/deephaven/web-client-ui/issues/4c7) [#1a171](https://github.com/deephaven/web-client-ui/issues/1a171) [#4c7](https://github.com/deephaven/web-client-ui/issues/4c7) [#4c7](https://github.com/deephaven/web-client-ui/issues/4c7) [#1530](https://github.com/deephaven/web-client-ui/issues/1530)
+
+
+
+
+
 ## [0.49.1](https://github.com/deephaven/web-client-ui/compare/v0.49.0...v0.49.1) (2023-09-27)
 
 **Note:** Version bump only for package @deephaven/app-utils
diff --git a/packages/app-utils/package.json b/packages/app-utils/package.json
index 574f28bea5..9968aabfda 100644
--- a/packages/app-utils/package.json
+++ b/packages/app-utils/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@deephaven/app-utils",
-  "version": "0.49.1",
+  "version": "0.50.0",
   "description": "Deephaven App Utils",
   "author": "Deephaven Data Labs LLC",
   "license": "Apache-2.0",
@@ -28,8 +28,12 @@
     "redux": "^4.x"
   },
   "dependencies": {
+    "@adobe/react-spectrum": "^3.29.0",
     "@deephaven/auth-plugins": "file:../auth-plugins",
+    "@deephaven/chart": "file:../chart",
     "@deephaven/components": "file:../components",
+    "@deephaven/icons": "file:../icons",
+    "@deephaven/iris-grid": "file:../iris-grid",
     "@deephaven/jsapi-bootstrap": "file:../jsapi-bootstrap",
     "@deephaven/jsapi-components": "file:../jsapi-components",
     "@deephaven/jsapi-types": "file:../jsapi-types",
diff --git a/packages/app-utils/src/plugins/remote-component.config.ts b/packages/app-utils/src/plugins/remote-component.config.ts
index 26b79e289c..21dfe9f21f 100644
--- a/packages/app-utils/src/plugins/remote-component.config.ts
+++ b/packages/app-utils/src/plugins/remote-component.config.ts
@@ -8,12 +8,16 @@ import react from 'react';
 import * as redux from 'redux';
 import * as reactRedux from 'react-redux';
 import ReactDOM from 'react-dom';
+import * as AdobeReactSpectrum from '@adobe/react-spectrum';
 import * as DeephavenAuthPlugins from '@deephaven/auth-plugins';
+import * as DeephavenChart from '@deephaven/chart';
 import * as DeephavenComponents from '@deephaven/components';
+import * as DeephavenIcons from '@deephaven/icons';
+import * as DeephavenIrisGrid from '@deephaven/iris-grid';
 import * as DeephavenJsapiBootstrap from '@deephaven/jsapi-bootstrap';
 import * as DeephavenJsapiComponents from '@deephaven/jsapi-components';
 import * as DeephavenJsapiUtils from '@deephaven/jsapi-utils';
-import * as DeephavenLog from '@deephaven/log';
+import DeephavenLog from '@deephaven/log';
 import * as DeephavenReactHooks from '@deephaven/react-hooks';
 
 // eslint-disable-next-line import/prefer-default-export
@@ -22,8 +26,12 @@ export const resolve = {
   'react-dom': ReactDOM,
   redux,
   'react-redux': reactRedux,
+  '@adobe/react-spectrum': AdobeReactSpectrum,
   '@deephaven/auth-plugins': DeephavenAuthPlugins,
+  '@deephaven/chart': DeephavenChart,
   '@deephaven/components': DeephavenComponents,
+  '@deephaven/icons': DeephavenIcons,
+  '@deephaven/iris-grid': DeephavenIrisGrid,
   '@deephaven/jsapi-bootstrap': DeephavenJsapiBootstrap,
   '@deephaven/jsapi-components': DeephavenJsapiComponents,
   '@deephaven/jsapi-utils': DeephavenJsapiUtils,
diff --git a/packages/app-utils/tsconfig.json b/packages/app-utils/tsconfig.json
index f18e274171..f5e6f5ea9b 100644
--- a/packages/app-utils/tsconfig.json
+++ b/packages/app-utils/tsconfig.json
@@ -8,7 +8,9 @@
   "exclude": ["node_modules", "src/**/*.test.*", "src/**/__mocks__/*"],
   "references": [
     { "path": "../auth-plugins" },
+    { "path": "../chart" },
     { "path": "../components" },
+    { "path": "../iris-grid" },
     { "path": "../jsapi-bootstrap" },
     { "path": "../jsapi-components" },
     { "path": "../jsapi-types" },
diff --git a/packages/auth-plugins/CHANGELOG.md b/packages/auth-plugins/CHANGELOG.md
index 4a7a096317..bf1f1e8bf8 100644
--- a/packages/auth-plugins/CHANGELOG.md
+++ b/packages/auth-plugins/CHANGELOG.md
@@ -3,6 +3,22 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [0.50.0](https://github.com/deephaven/web-client-ui/compare/v0.49.1...v0.50.0) (2023-10-13)
+
+
+* fix!: CSS based loading spinner (#1532) ([f06fbb0](https://github.com/deephaven/web-client-ui/commit/f06fbb01e27eaaeccab6031d8ff010ffee303d99)), closes [#1532](https://github.com/deephaven/web-client-ui/issues/1532) [#1531](https://github.com/deephaven/web-client-ui/issues/1531)
+
+
+### BREAKING CHANGES
+
+* Inline LoadingSpinner instances will need to be
+decorated with `className="loading-spinner-vertical-align"` for vertical
+alignment to work as before
+
+
+
+
+
 ## [0.49.1](https://github.com/deephaven/web-client-ui/compare/v0.49.0...v0.49.1) (2023-09-27)
 
 **Note:** Version bump only for package @deephaven/auth-plugins
diff --git a/packages/auth-plugins/package.json b/packages/auth-plugins/package.json
index f0d5186ca7..57e75cbe25 100644
--- a/packages/auth-plugins/package.json
+++ b/packages/auth-plugins/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@deephaven/auth-plugins",
-  "version": "0.49.1",
+  "version": "0.50.0",
   "description": "Deephaven Auth Plugins",
   "keywords": [
     "Deephaven",
diff --git a/packages/babel-preset/CHANGELOG.md b/packages/babel-preset/CHANGELOG.md
index 5a9c51cae0..ae46a12db8 100644
--- a/packages/babel-preset/CHANGELOG.md
+++ b/packages/babel-preset/CHANGELOG.md
@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [0.50.0](https://github.com/deephaven/web-client-ui/compare/v0.49.1...v0.50.0) (2023-10-13)
+
+
+### Features
+
+* Theme Plugin Loading ([#1524](https://github.com/deephaven/web-client-ui/issues/1524)) ([a9541b1](https://github.com/deephaven/web-client-ui/commit/a9541b108f1d998bb2713e70642f5a54aaf8bd97)), closes [#1a171](https://github.com/deephaven/web-client-ui/issues/1a171) [#4c7](https://github.com/deephaven/web-client-ui/issues/4c7) [#1a171](https://github.com/deephaven/web-client-ui/issues/1a171) [#4c7](https://github.com/deephaven/web-client-ui/issues/4c7) [#4c7](https://github.com/deephaven/web-client-ui/issues/4c7) [#1530](https://github.com/deephaven/web-client-ui/issues/1530)
+
+
+
+
+
 # [0.49.0](https://github.com/deephaven/web-client-ui/compare/v0.48.0...v0.49.0) (2023-09-15)
 
 **Note:** Version bump only for package @deephaven/babel-preset
diff --git a/packages/babel-preset/package.json b/packages/babel-preset/package.json
index 1a97da6f66..8f6b5ad9e0 100644
--- a/packages/babel-preset/package.json
+++ b/packages/babel-preset/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@deephaven/babel-preset",
-  "version": "0.49.0",
+  "version": "0.50.0",
   "description": "Deephaven Babel preset",
   "repository": {
     "type": "git",
diff --git a/packages/chart/CHANGELOG.md b/packages/chart/CHANGELOG.md
index 696b6c72d7..cc8338011f 100644
--- a/packages/chart/CHANGELOG.md
+++ b/packages/chart/CHANGELOG.md
@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [0.50.0](https://github.com/deephaven/web-client-ui/compare/v0.49.1...v0.50.0) (2023-10-13)
+
+**Note:** Version bump only for package @deephaven/chart
+
+
+
+
+
 # [0.49.0](https://github.com/deephaven/web-client-ui/compare/v0.48.0...v0.49.0) (2023-09-15)
 
 **Note:** Version bump only for package @deephaven/chart
diff --git a/packages/chart/package.json b/packages/chart/package.json
index b402af83e9..1b70fab042 100644
--- a/packages/chart/package.json
+++ b/packages/chart/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@deephaven/chart",
-  "version": "0.49.0",
+  "version": "0.50.0",
   "description": "Deephaven Chart",
   "author": "Deephaven Data Labs LLC",
   "license": "Apache-2.0",
diff --git a/packages/chart/src/Chart.tsx b/packages/chart/src/Chart.tsx
index c05a48ccaf..67220688d0 100644
--- a/packages/chart/src/Chart.tsx
+++ b/packages/chart/src/Chart.tsx
@@ -166,27 +166,33 @@ export class Chart extends Component<ChartProps, ChartState> {
     this.initData();
     this.initFormatter();
 
-    const { isActive } = this.props;
+    const { isActive, model } = this.props;
     if (isActive) {
-      this.subscribe();
+      this.subscribe(model);
     }
   }
 
   componentDidUpdate(prevProps: ChartProps): void {
-    const { isActive, settings } = this.props;
+    const { isActive, model, settings } = this.props;
     this.updateFormatterSettings(settings as FormatterSettings);
 
+    if (model !== prevProps.model) {
+      this.unsubscribe(prevProps.model);
+      this.subscribe(model);
+    }
+
     if (isActive !== prevProps.isActive) {
       if (isActive) {
-        this.subscribe();
+        this.subscribe(model);
       } else {
-        this.unsubscribe();
+        this.unsubscribe(model);
       }
     }
   }
 
   componentWillUnmount(): void {
-    this.unsubscribe();
+    const { model } = this.props;
+    this.unsubscribe(model);
   }
 
   currentSeries: number;
@@ -315,12 +321,11 @@ export class Chart extends Component<ChartProps, ChartState> {
     });
   }
 
-  subscribe(): void {
+  subscribe(model: ChartModel): void {
     if (this.isSubscribed) {
       return;
     }
 
-    const { model } = this.props;
     if (!this.rect || this.rect.width === 0 || this.rect.height === 0) {
       log.debug2('Delaying subscription until model dimensions are set');
       return;
@@ -329,12 +334,11 @@ export class Chart extends Component<ChartProps, ChartState> {
     this.isSubscribed = true;
   }
 
-  unsubscribe(): void {
+  unsubscribe(model: ChartModel): void {
     if (!this.isSubscribed) {
       return;
     }
 
-    const { model } = this.props;
     model.unsubscribe(this.handleModelEvent);
     this.isSubscribed = false;
   }
@@ -510,7 +514,7 @@ export class Chart extends Component<ChartProps, ChartState> {
       model.setDimensions(rect);
       // We may need to resubscribe if dimensions were too small before
       if (isActive) {
-        this.subscribe();
+        this.subscribe(model);
       }
     }
   }
diff --git a/packages/code-studio/CHANGELOG.md b/packages/code-studio/CHANGELOG.md
index 319aeba647..4368d26e82 100644
--- a/packages/code-studio/CHANGELOG.md
+++ b/packages/code-studio/CHANGELOG.md
@@ -3,6 +3,37 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [0.50.0](https://github.com/deephaven/web-client-ui/compare/v0.49.1...v0.50.0) (2023-10-13)
+
+
+### Bug Fixes
+
+* Formatting Rule Doesn't use default set by user ([#1547](https://github.com/deephaven/web-client-ui/issues/1547)) ([ce51229](https://github.com/deephaven/web-client-ui/commit/ce51229231a9aae27871901412177e33dad24bea))
+* Prompt for resetting layout ([#1552](https://github.com/deephaven/web-client-ui/issues/1552)) ([a273e64](https://github.com/deephaven/web-client-ui/commit/a273e6433a81f5500fb39992cac276bcbdbda753)), closes [#1250](https://github.com/deephaven/web-client-ui/issues/1250)
+
+
+* fix!: CSS based loading spinner (#1532) ([f06fbb0](https://github.com/deephaven/web-client-ui/commit/f06fbb01e27eaaeccab6031d8ff010ffee303d99)), closes [#1532](https://github.com/deephaven/web-client-ui/issues/1532) [#1531](https://github.com/deephaven/web-client-ui/issues/1531)
+
+
+### Features
+
+* data bar render from API ([#1415](https://github.com/deephaven/web-client-ui/issues/1415)) ([ee7d1c1](https://github.com/deephaven/web-client-ui/commit/ee7d1c108e86973b4c6855e482dce21d665dfe28)), closes [#0000](https://github.com/deephaven/web-client-ui/issues/0000) [#FF0000](https://github.com/deephaven/web-client-ui/issues/FF0000) [#FFFF00](https://github.com/deephaven/web-client-ui/issues/FFFF00) [#FFFF00](https://github.com/deephaven/web-client-ui/issues/FFFF00) [#00FF00](https://github.com/deephaven/web-client-ui/issues/00FF00)
+* Monaco theming ([#1560](https://github.com/deephaven/web-client-ui/issues/1560)) ([4eda17c](https://github.com/deephaven/web-client-ui/commit/4eda17c82f6c177a11ba600d6f43c4f36915f6bd)), closes [#1542](https://github.com/deephaven/web-client-ui/issues/1542)
+* Theme Plugin Loading ([#1524](https://github.com/deephaven/web-client-ui/issues/1524)) ([a9541b1](https://github.com/deephaven/web-client-ui/commit/a9541b108f1d998bb2713e70642f5a54aaf8bd97)), closes [#1a171](https://github.com/deephaven/web-client-ui/issues/1a171) [#4c7](https://github.com/deephaven/web-client-ui/issues/4c7) [#1a171](https://github.com/deephaven/web-client-ui/issues/1a171) [#4c7](https://github.com/deephaven/web-client-ui/issues/4c7) [#4c7](https://github.com/deephaven/web-client-ui/issues/4c7) [#1530](https://github.com/deephaven/web-client-ui/issues/1530)
+
+
+### BREAKING CHANGES
+
+* Theme variables have to be present on body to avoid
+Monaco init failing
+* Inline LoadingSpinner instances will need to be
+decorated with `className="loading-spinner-vertical-align"` for vertical
+alignment to work as before
+
+
+
+
+
 ## [0.49.1](https://github.com/deephaven/web-client-ui/compare/v0.49.0...v0.49.1) (2023-09-27)
 
 **Note:** Version bump only for package @deephaven/code-studio
diff --git a/packages/code-studio/package.json b/packages/code-studio/package.json
index 4d456aa4f8..d7d555812f 100644
--- a/packages/code-studio/package.json
+++ b/packages/code-studio/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@deephaven/code-studio",
-  "version": "0.49.1",
+  "version": "0.50.0",
   "description": "Deephaven Code Studio",
   "author": "Deephaven Data Labs LLC",
   "license": "Apache-2.0",
@@ -11,6 +11,7 @@
     "directory": "packages/code-studio"
   },
   "dependencies": {
+    "@adobe/react-spectrum": "^3.29.0",
     "@deephaven/app-utils": "file:../app-utils",
     "@deephaven/auth-plugins": "file:../auth-plugins",
     "@deephaven/chart": "file:../chart",
diff --git a/packages/code-studio/src/styleguide/Colors.tsx b/packages/code-studio/src/styleguide/Colors.tsx
index d84a1b0375..b796222817 100644
--- a/packages/code-studio/src/styleguide/Colors.tsx
+++ b/packages/code-studio/src/styleguide/Colors.tsx
@@ -3,22 +3,28 @@ import classNames from 'classnames';
 
 function Colors(): React.ReactElement {
   const graySwatches = [
-    '100',
-    '200',
-    '300',
-    '400',
-    '500',
-    '600',
-    '700',
-    '800',
-    '900',
-  ].map(swatch => (
+    ['100', '900'],
+    ['200', '800'],
+    ['300', '700'],
+    ['400', '600'],
+    ['500', '500'],
+    ['600', '500'],
+    ['700', '400'],
+    ['800', '300'],
+    ['850', '200'],
+    ['900', '75'],
+  ].map(([swatch, dh]) => (
     <div
       key={swatch}
       className={classNames('swatch', 'gray-swatch', `gray-swatch-${swatch}`)}
     >
-      Gray-
-      {swatch}
+      <span>
+        Gray-
+        {swatch}
+      </span>
+      <span style={{ backgroundColor: `var(--dh-color-gray-${dh})` }}>
+        --dh-gray-{dh}
+      </span>
     </div>
   ));
 
diff --git a/packages/code-studio/src/styleguide/StyleGuide.scss b/packages/code-studio/src/styleguide/StyleGuide.scss
index a7a2b654e5..58d270d8e2 100644
--- a/packages/code-studio/src/styleguide/StyleGuide.scss
+++ b/packages/code-studio/src/styleguide/StyleGuide.scss
@@ -18,6 +18,13 @@ pre {
   line-height: 2.5rem;
 }
 
+.gray-swatch {
+  display: flex;
+  span {
+    flex: 1 0 50%;
+  }
+}
+
 .swatch-content-bg {
   border: 1px solid $gray-600;
   margin-top: 2.5rem;
diff --git a/packages/code-studio/src/styleguide/StyleGuide.tsx b/packages/code-studio/src/styleguide/StyleGuide.tsx
index bbfd8036e8..a71843a61c 100644
--- a/packages/code-studio/src/styleguide/StyleGuide.tsx
+++ b/packages/code-studio/src/styleguide/StyleGuide.tsx
@@ -21,6 +21,7 @@ import Typograpy from './Typography';
 import './StyleGuide.scss';
 import DraggableLists from './DraggableLists';
 import Navigations from './Navigations';
+import ThemeColors from './ThemeColors';
 
 function StyleGuide(): React.ReactElement {
   return (
@@ -33,6 +34,8 @@ function StyleGuide(): React.ReactElement {
 
       <Colors />
 
+      <ThemeColors />
+
       <Buttons />
 
       <Progress />
diff --git a/packages/code-studio/src/styleguide/ThemeColors.module.scss b/packages/code-studio/src/styleguide/ThemeColors.module.scss
new file mode 100644
index 0000000000..2f65e1f9e5
--- /dev/null
+++ b/packages/code-studio/src/styleguide/ThemeColors.module.scss
@@ -0,0 +1,35 @@
+.themeColors {
+  --swatch-height: 35px;
+  --column-gap: 14px;
+
+  display: grid;
+  column-gap: var(--column-gap);
+  // Add as many columns as will fit in the container each 210px wide.
+  // Row height is set to the swatch height (35px) by dynamic `grid-row` style
+  // attributes set in ThemeColors.tsx.
+  grid-template-columns: repeat(auto-fit, 210px);
+
+  .label {
+    display: flex;
+    align-items: end;
+    justify-content: space-between;
+    gap: 4px;
+    height: var(--swatch-height);
+    text-transform: capitalize;
+    white-space: nowrap;
+  }
+
+  .swatch {
+    display: flex;
+    align-items: center;
+    height: var(--swatch-height);
+    justify-content: space-between;
+    padding: 0 10px;
+
+    span {
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    }
+  }
+}
diff --git a/packages/code-studio/src/styleguide/ThemeColors.tsx b/packages/code-studio/src/styleguide/ThemeColors.tsx
new file mode 100644
index 0000000000..07e2ca95ad
--- /dev/null
+++ b/packages/code-studio/src/styleguide/ThemeColors.tsx
@@ -0,0 +1,178 @@
+import React, { useMemo } from 'react';
+import { Tooltip } from '@deephaven/components';
+import { ColorUtils } from '@deephaven/utils';
+import palette from '@deephaven/components/src/theme/theme-dark/theme-dark-palette.css?inline';
+import semantic from '@deephaven/components/src/theme/theme-dark/theme-dark-semantic.css?inline';
+import semanticEditor from '@deephaven/components/src/theme/theme-dark/theme-dark-semantic-editor.css?inline';
+import semanticGrid from '@deephaven/components/src/theme/theme-dark/theme-dark-semantic-grid.css?inline';
+import styles from './ThemeColors.module.scss';
+
+// Group names are extracted from var names via a regex capture group. Most of
+// them work pretty well, but some need to be remapped to a more appropriate
+// group.
+const reassignVarGroups: Record<string, string> = {
+  '--dh-color-black': 'gray',
+  '--dh-color-white': 'gray',
+  // Editor
+  '--dh-color-editor-bg': 'editor',
+  '--dh-color-editor-fg': 'editor',
+  '--dh-color-editor-context-menu-bg': 'menus',
+  '--dh-color-editor-context-menu-fg': 'menus',
+  '--dh-color-editor-menu-selection-bg': 'menus',
+  // Grid
+  '--dh-color-grid-bg': 'grid',
+  '--dh-color-grid-number-positive': 'Data Types',
+  '--dh-color-grid-number-negative': 'Data Types',
+  '--dh-color-grid-number-zero': 'Data Types',
+  '--dh-color-grid-date': 'Data Types',
+  '--dh-color-grid-string-null': 'Data Types',
+};
+
+// Mappings of variable groups to rename
+const renameGroups = {
+  editor: {
+    line: 'editor',
+    comment: 'code',
+    string: 'code',
+    number: 'code',
+    delimiter: 'code',
+    identifier: 'code',
+    keyword: 'code',
+    operator: 'code',
+    storage: 'code',
+    predefined: 'code',
+    selection: 'state',
+    focus: 'state',
+  },
+  grid: { data: 'Data Bars', context: 'Context Menu' },
+};
+
+export function ThemeColors(): JSX.Element {
+  const swatchDataGroups = useMemo(
+    () => ({
+      'Theme Color Palette': buildColorGroups(palette, 1),
+      'Semantic Colors': buildColorGroups(semantic, 1),
+      'Editor Colors': buildColorGroups(semanticEditor, 2, renameGroups.editor),
+      'Grid Colors': buildColorGroups(semanticGrid, 2, renameGroups.grid),
+    }),
+    []
+  );
+
+  return (
+    <>
+      {Object.entries(swatchDataGroups).map(([label, data]) => (
+        <div key={label}>
+          <h2 className="ui-title">{label}</h2>
+          <div className={styles.themeColors}>
+            {Object.entries(data).map(([group, swatchData]) => (
+              <div
+                key={group}
+                // This is the secret sauce for filling columns. The height of
+                // each swatch group spans multiple rows (the number of swatches
+                // + 1 for the label). This causes the grid to create rows
+                // based on the swatch height (35px), and each swatch (also the
+                // group label) neatly fits in a grid cell. The grid will put a
+                // group in each column and then wrap back around to the first
+                // until all groups are placed.
+                style={{ gridRow: `span ${swatchData.length + 1}` }}
+              >
+                <span className={styles.label}>{group}</span>
+                {swatchData.map(({ name, value }) => (
+                  <div
+                    key={name}
+                    className={styles.swatch}
+                    style={{
+                      backgroundColor: value,
+                      color: `var(--dh-color-${contrastColor(value)})`,
+                    }}
+                  >
+                    <Tooltip>
+                      <div>{name}</div>
+                      <div>{value}</div>
+                      <div>
+                        {ColorUtils.normalizeCssColor(value).replace(
+                          /^(#[a-f0-9]{6})ff$/,
+                          '$1'
+                        )}
+                      </div>
+                    </Tooltip>
+                    <span>{name.replace('--dh-color-', '')}</span>
+                    {name.endsWith('-hue') ? <span>{value}</span> : null}
+                  </div>
+                ))}
+              </div>
+            ))}
+          </div>
+        </div>
+      ))}
+    </>
+  );
+}
+
+export default ThemeColors;
+
+/** Return black or white contrast color */
+function contrastColor(color: string): 'black' | 'white' {
+  const rgba = ColorUtils.parseRgba(ColorUtils.asRgbOrRgbaString(color) ?? '');
+  if (rgba == null || rgba.a < 0.5) {
+    return 'white';
+  }
+
+  const { r, g, b } = rgba;
+  const y = (299 * r + 587 * g + 114 * b) / 1000;
+  return y >= 128 ? 'black' : 'white';
+}
+
+/** Extract an array of { name, value } pairs for css variables in a given string  */
+function extractColorVars(
+  styleText: string
+): { name: string; value: string }[] {
+  const computedStyle = getComputedStyle(document.documentElement);
+
+  return styleText
+    .split('\n')
+    .map(line => /^\s{2}(--dh-color-(?:[^:]+))/.exec(line)?.[1])
+    .filter(Boolean)
+    .map(varName =>
+      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+      ({ name: varName!, value: computedStyle.getPropertyValue(varName!)! })
+    );
+}
+
+/** Group color data based on capture group value */
+function buildColorGroups(
+  styleText: string,
+  captureGroupI: number,
+  groupRemap: Record<string, string> = {}
+): Record<string, { name: string; value: string }[]> {
+  const swatchData = extractColorVars(styleText);
+
+  const groupData = swatchData.reduce(
+    (acc, { name, value }) => {
+      const match = /^--dh-color-([^-]+)(?:-([^-]+))?/.exec(name);
+      let group =
+        reassignVarGroups[name] ??
+        match?.[captureGroupI] ??
+        match?.[1] ??
+        '???';
+
+      group = groupRemap[group] ?? group;
+
+      if (acc[group] == null) {
+        acc[group] = [];
+      }
+
+      // Add a spacer for black / white
+      if (name === '--dh-color-black') {
+        acc[group].push({ name: '', value: '' });
+      }
+
+      acc[group].push({ name, value });
+
+      return acc;
+    },
+    {} as Record<string, { name: string; value: string }[]>
+  );
+
+  return groupData;
+}
diff --git a/packages/code-studio/src/styleguide/index.tsx b/packages/code-studio/src/styleguide/index.tsx
index a08f6c21a0..e2bb431cce 100644
--- a/packages/code-studio/src/styleguide/index.tsx
+++ b/packages/code-studio/src/styleguide/index.tsx
@@ -1,12 +1,22 @@
 import React, { Suspense } from 'react';
 import ReactDOM from 'react-dom';
 import '@deephaven/components/scss/BaseStyleSheet.scss';
-import { LoadingOverlay } from '@deephaven/components';
+import {
+  LoadingOverlay,
+  preloadTheme,
+  ThemeData,
+  ThemeProvider,
+} from '@deephaven/components';
 import { ApiBootstrap } from '@deephaven/jsapi-bootstrap';
 import logInit from '../log/LogInit';
 
 logInit();
 
+preloadTheme();
+
+// Provide a non-null array to ThemeProvider to tell it to initialize
+const customThemes: ThemeData[] = [];
+
 // eslint-disable-next-line react-refresh/only-export-components
 const StyleGuideRoot = React.lazy(() => import('./StyleGuideRoot'));
 
@@ -24,9 +34,11 @@ const apiURL = new URL(
 ReactDOM.render(
   <ApiBootstrap apiUrl={apiURL.href} setGlobally>
     <Suspense fallback={<LoadingOverlay />}>
-      <FontBootstrap>
-        <StyleGuideRoot />
-      </FontBootstrap>
+      <ThemeProvider themes={customThemes}>
+        <FontBootstrap>
+          <StyleGuideRoot />
+        </FontBootstrap>
+      </ThemeProvider>
     </Suspense>
   </ApiBootstrap>,
   document.getElementById('root')
diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
index 7e2afa8e4c..6a8610e74c 100644
--- a/packages/components/CHANGELOG.md
+++ b/packages/components/CHANGELOG.md
@@ -3,6 +3,30 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [0.50.0](https://github.com/deephaven/web-client-ui/compare/v0.49.1...v0.50.0) (2023-10-13)
+
+
+* fix!: CSS based loading spinner (#1532) ([f06fbb0](https://github.com/deephaven/web-client-ui/commit/f06fbb01e27eaaeccab6031d8ff010ffee303d99)), closes [#1532](https://github.com/deephaven/web-client-ui/issues/1532) [#1531](https://github.com/deephaven/web-client-ui/issues/1531)
+
+
+### Features
+
+* Monaco theming ([#1560](https://github.com/deephaven/web-client-ui/issues/1560)) ([4eda17c](https://github.com/deephaven/web-client-ui/commit/4eda17c82f6c177a11ba600d6f43c4f36915f6bd)), closes [#1542](https://github.com/deephaven/web-client-ui/issues/1542)
+* Theme Plugin Loading ([#1524](https://github.com/deephaven/web-client-ui/issues/1524)) ([a9541b1](https://github.com/deephaven/web-client-ui/commit/a9541b108f1d998bb2713e70642f5a54aaf8bd97)), closes [#1a171](https://github.com/deephaven/web-client-ui/issues/1a171) [#4c7](https://github.com/deephaven/web-client-ui/issues/4c7) [#1a171](https://github.com/deephaven/web-client-ui/issues/1a171) [#4c7](https://github.com/deephaven/web-client-ui/issues/4c7) [#4c7](https://github.com/deephaven/web-client-ui/issues/4c7) [#1530](https://github.com/deephaven/web-client-ui/issues/1530)
+
+
+### BREAKING CHANGES
+
+* Theme variables have to be present on body to avoid
+Monaco init failing
+* Inline LoadingSpinner instances will need to be
+decorated with `className="loading-spinner-vertical-align"` for vertical
+alignment to work as before
+
+
+
+
+
 ## [0.49.1](https://github.com/deephaven/web-client-ui/compare/v0.49.0...v0.49.1) (2023-09-27)
 
 
diff --git a/packages/components/package.json b/packages/components/package.json
index 8019bf2060..bef23df3f2 100644
--- a/packages/components/package.json
+++ b/packages/components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@deephaven/components",
-  "version": "0.49.1",
+  "version": "0.50.0",
   "description": "Deephaven React component library",
   "author": "Deephaven Data Labs LLC",
   "license": "Apache-2.0",
diff --git a/packages/components/scss/BaseStyleSheet.scss b/packages/components/scss/BaseStyleSheet.scss
index 08033a28b1..aef83108ef 100644
--- a/packages/components/scss/BaseStyleSheet.scss
+++ b/packages/components/scss/BaseStyleSheet.scss
@@ -20,7 +20,7 @@ html {
 
 body {
   min-height: 100%;
-  background-color: var(--dh-background-color, $background);
+  background-color: var(--dh-color-background, $background);
   color: $foreground;
   margin: 0;
   padding: 0;
@@ -30,7 +30,7 @@ body {
 }
 
 #root {
-  background-color: var(--dh-background-color, $background);
+  background-color: var(--dh-color-background, $background);
 
   .app {
     height: 100vh;
diff --git a/packages/components/src/LoadingSpinner.scss b/packages/components/src/LoadingSpinner.scss
index cb46e63c87..6409f733ad 100644
--- a/packages/components/src/LoadingSpinner.scss
+++ b/packages/components/src/LoadingSpinner.scss
@@ -2,7 +2,7 @@
 .loading-spinner {
   --primary-color: var(
     --dh-loading-spinner-primary-color,
-    var(--dh-accent-color, #4c7dee)
+    var(--dh-color-accent, #4c7dee)
   );
   --secondary-color: var(
     --dh-loading-spinner-secondary-color,
diff --git a/packages/components/src/theme/ThemeModel.ts b/packages/components/src/theme/ThemeModel.ts
index 489eb5354b..54c0526c42 100644
--- a/packages/components/src/theme/ThemeModel.ts
+++ b/packages/components/src/theme/ThemeModel.ts
@@ -7,8 +7,8 @@ export const DEFAULT_LIGHT_THEME_KEY = 'default-light' satisfies BaseThemeKey;
 
 // Css properties that are used in preload data with default values.
 export const DEFAULT_PRELOAD_DATA_VARIABLES = {
-  '--dh-accent-color': '#4c7dee', // dark theme --dh-color-blue-700
-  '--dh-background-color': '#1a171a', // dark theme --dh-color-gray-50
+  '--dh-color-accent': '#4c7dee', // dark theme --dh-color-blue-700
+  '--dh-color-background': '#1a171a', // dark theme --dh-color-gray-50
 } satisfies Record<`--dh-${string}`, string>;
 
 export const THEME_CACHE_LOCAL_STORAGE_KEY = 'deephaven.themeCache';
diff --git a/packages/components/src/theme/ThemeProvider.tsx b/packages/components/src/theme/ThemeProvider.tsx
index 677b99d7ec..d3ff14d0ec 100644
--- a/packages/components/src/theme/ThemeProvider.tsx
+++ b/packages/components/src/theme/ThemeProvider.tsx
@@ -36,7 +36,7 @@ export function ThemeProvider({
 
   const activeThemes = useMemo(
     () =>
-      // Themes remain inactive until a non-null themes value is provided. This
+      // Themes remain inactive until a non-null themes array is provided. This
       // avoids the default base theme overriding the preload if we are waiting
       // on additional themes to be available.
       themes == null
diff --git a/packages/components/src/theme/ThemeUtils.test.ts b/packages/components/src/theme/ThemeUtils.test.ts
index 1647f2ba3e..ba34a9b329 100644
--- a/packages/components/src/theme/ThemeUtils.test.ts
+++ b/packages/components/src/theme/ThemeUtils.test.ts
@@ -1,4 +1,6 @@
+import { ColorUtils, TestUtils } from '@deephaven/utils';
 import {
+  DEFAULT_DARK_THEME_KEY,
   DEFAULT_PRELOAD_DATA_VARIABLES,
   ThemeData,
   ThemeRegistrationData,
@@ -6,14 +8,23 @@ import {
 } from './ThemeModel';
 import {
   calculatePreloadStyleContent,
+  extractDistinctCssVariableExpressions,
   getActiveThemes,
+  getCssVariableRanges,
   getDefaultBaseThemes,
   getThemeKey,
   getThemePreloadData,
   preloadTheme,
+  resolveCssVariablesInRecord,
+  resolveCssVariablesInString,
   setThemePreloadData,
+  TMP_CSS_PROP_PREFIX,
 } from './ThemeUtils';
 
+jest.mock('shortid');
+
+const { asMock, createMockProxy } = TestUtils;
+
 beforeEach(() => {
   document.body.removeAttribute('style');
   document.head.innerHTML = '';
@@ -26,31 +37,61 @@ beforeEach(() => {
 describe('calculatePreloadStyleContent', () => {
   it('should set defaults if css variables are not defined', () => {
     expect(calculatePreloadStyleContent()).toEqual(
-      `:root{--dh-accent-color:${DEFAULT_PRELOAD_DATA_VARIABLES['--dh-accent-color']};--dh-background-color:${DEFAULT_PRELOAD_DATA_VARIABLES['--dh-background-color']}}`
+      `:root{--dh-color-accent:${DEFAULT_PRELOAD_DATA_VARIABLES['--dh-color-accent']};--dh-color-background:${DEFAULT_PRELOAD_DATA_VARIABLES['--dh-color-background']}}`
     );
   });
 
   it('should resolve css variables', () => {
-    document.body.style.setProperty('--dh-accent-color', 'pink');
-    document.body.style.setProperty('--dh-background-color', 'orange');
+    document.body.style.setProperty('--dh-color-accent', 'pink');
+    document.body.style.setProperty('--dh-color-background', 'orange');
 
     expect(calculatePreloadStyleContent()).toEqual(
-      ':root{--dh-accent-color:pink;--dh-background-color:orange}'
+      ':root{--dh-color-accent:pink;--dh-color-background:orange}'
+    );
+  });
+});
+
+describe('extractDistinctCssVariableExpressions', () => {
+  it('should extract distinct css variable expressions', () => {
+    const given = {
+      aaa: 'var(--aaa-aa)',
+      bbb: 'var(--bbb-bb)',
+      ccc: 'var(--ccc-cc)',
+      ddd: 'var(--aaa-aa)',
+      eee: 'var(--bbb-bb)',
+      fff: 'xxx',
+      ggg: 'xxx var(--gg-ggg) yyy',
+    };
+
+    const actual = extractDistinctCssVariableExpressions(given);
+    expect(actual).toEqual(
+      new Set([
+        'var(--aaa-aa)',
+        'var(--bbb-bb)',
+        'var(--ccc-cc)',
+        'var(--gg-ggg)',
+      ])
     );
   });
 });
 
 describe('getActiveThemes', () => {
   const mockTheme = {
+    default: {
+      name: 'Default Theme',
+      baseThemeKey: undefined,
+      themeKey: DEFAULT_DARK_THEME_KEY,
+      styleContent: '',
+    },
     base: {
       name: 'Base Theme',
       baseThemeKey: undefined,
-      themeKey: 'default-dark',
+      themeKey: 'default-light',
       styleContent: '',
     },
     custom: {
       name: 'Custom Theme',
-      baseThemeKey: 'default-dark',
+      baseThemeKey: 'default-light',
       themeKey: 'customTheme',
       styleContent: '',
     },
@@ -62,10 +103,15 @@ describe('getActiveThemes', () => {
   } satisfies Record<string, ThemeData>;
 
   const themeRegistration: ThemeRegistrationData = {
-    base: [mockTheme.base],
+    base: [mockTheme.default, mockTheme.base],
     custom: [mockTheme.custom],
   };
 
+  it('should use default dark theme if no base theme is matched', () => {
+    const actual = getActiveThemes('somekey', themeRegistration);
+    expect(actual).toEqual([mockTheme.default]);
+  });
+
   it.each([null, mockTheme.customInvalid])(
     'should throw if base theme not found',
     customTheme => {
@@ -92,6 +138,52 @@ describe('getActiveThemes', () => {
   });
 });
 
+describe('getCssVariableRanges', () => {
+  const t = [
+    ['Single var', 'var(--aaa-aa)', [[0, 12]]],
+    [
+      'Multiple vars',
+      'var(--aaa-aa) var(--bbb-bb)',
+      [
+        [0, 12],
+        [14, 26],
+      ],
+    ],
+    [
+      'Nested vars - level 2',
+      'var(--ccc-cc, var(--aaa-aa, green)) var(--bbb-bb)',
+      [
+        [0, 34],
+        [36, 48],
+      ],
+    ],
+    ['Nested vars - level 3', 'var(--a, var(--b, var(--c, red)))', [[0, 32]]],
+    [
+      'Nested vars - level 4',
+      'var(--a, var(--b, var(--c, var(--d, red)))) var(--e, var(--f, var(--g, var(--h, red))))',
+      [
+        [0, 42],
+        [44, 86],
+      ],
+    ],
+    ['Nested calc - level 3', 'var(--a, calc(calc(1px + 2px)))', [[0, 30]]],
+    [
+      'Nested calc - level 4',
+      'var(--a, calc(calc(calc(1px + 2px) + 3px)))',
+      [[0, 42]],
+    ],
+    ['Unbalanced', 'var(--a', []],
+  ] as const;
+
+  it.each(t)(
+    'should return the css variable ranges - %s: %s, %s',
+    (_label, given, expected) => {
+      const actual = getCssVariableRanges(given);
+      expect(actual).toEqual(expected);
+    }
+  );
+});
+
 describe('getDefaultBaseThemes', () => {
   it('should return default base themes', () => {
     const actual = getDefaultBaseThemes();
@@ -99,7 +191,8 @@ describe('getDefaultBaseThemes', () => {
       {
         name: 'Default Dark',
         themeKey: 'default-dark',
-        styleContent: 'test-file-stub',
+        styleContent:
+          'test-file-stub\ntest-file-stub\ntest-file-stub\ntest-file-stub',
       },
       {
         name: 'Default Light',
@@ -175,6 +268,152 @@ describe('preloadTheme', () => {
   });
 });
 
+describe.each([undefined, document.createElement('div')])(
+  'resolveCssVariablesInRecord',
+  targetElement => {
+    const computedStyle = createMockProxy<CSSStyleDeclaration>();
+    const expectedTargetEl = targetElement ?? document.body;
+    const tmpPropEl = document.createElement('div');
+
+    beforeEach(() => {
+      asMock(computedStyle.getPropertyValue)
+        .mockName('getPropertyValue')
+        .mockImplementation(key => `resolved:${key}`);
+
+      jest.spyOn(expectedTargetEl, 'appendChild').mockName('appendChild');
+
+      jest
+        .spyOn(document, 'createElement')
+        .mockName('createElement')
+        .mockReturnValue(tmpPropEl);
+
+      jest.spyOn(tmpPropEl.style, 'setProperty').mockName('setProperty');
+      jest.spyOn(tmpPropEl.style, 'removeProperty').mockName('removeProperty');
+      jest.spyOn(tmpPropEl, 'remove').mockName('remove');
+
+      jest
+        .spyOn(ColorUtils, 'normalizeCssColor')
+        .mockName('normalizeCssColor')
+        .mockImplementation(key => `normalized:${key}`);
+      jest
+        .spyOn(window, 'getComputedStyle')
+        .mockName('getComputedStyle')
+        .mockReturnValue(computedStyle);
+    });
+
+    it('should map non-css variable values verbatim', () => {
+      const given = {
+        aaa: 'aaa',
+        bbb: 'bbb',
+      };
+
+      const actual = resolveCssVariablesInRecord(given, targetElement);
+
+      expect(computedStyle.getPropertyValue).not.toHaveBeenCalled();
+      expect(ColorUtils.normalizeCssColor).not.toHaveBeenCalled();
+      expect(actual).toEqual(given);
+    });
+
+    it('should replace css variables with resolved values', () => {
+      const given = {
+        aaa: 'var(--aaa)',
+        bbb: 'var(--bbb1) var(--bbb2)',
+      };
+
+      const expected = {
+        aaa: 'normalized:resolved:--dh-tmp-0',
+        bbb: 'normalized:resolved:--dh-tmp-1 normalized:resolved:--dh-tmp-2',
+      };
+
+      const actual = resolveCssVariablesInRecord(given, targetElement);
+
+      expect(expectedTargetEl.appendChild).toHaveBeenCalledWith(tmpPropEl);
+      expect(tmpPropEl.remove).toHaveBeenCalled();
+      expect(actual).toEqual(expected);
+
+      let i = 0;
+
+      Object.keys(given).forEach(key => {
+        const varExpressions = given[key].split(' ');
+        varExpressions.forEach(value => {
+          const tmpPropKey = `--${TMP_CSS_PROP_PREFIX}-${i}`;
+          i += 1;
+
+          expect(tmpPropEl.style.setProperty).toHaveBeenCalledWith(
+            tmpPropKey,
+            value
+          );
+          expect(computedStyle.getPropertyValue).toHaveBeenCalledWith(
+            tmpPropKey
+          );
+          expect(ColorUtils.normalizeCssColor).toHaveBeenCalledWith(
+            `resolved:${tmpPropKey}`
+          );
+        });
+      });
+    });
+  }
+);
+
+describe('resolveCssVariablesInString', () => {
+  const mockResolver = jest.fn();
+
+  beforeEach(() => {
+    mockResolver
+      .mockName('mockResolver')
+      .mockImplementation(varExpression => `R[${varExpression}]`);
+  });
+
+  it.each([
+    ['No vars', 'red', 'red'],
+    ['Single var', 'var(--aaa-aa)', 'R[var(--aaa-aa)]'],
+    [
+      'Multiple vars',
+      'var(--aaa-aa) var(--bbb-bb)',
+      'R[var(--aaa-aa)] R[var(--bbb-bb)]',
+    ],
+    [
+      'Nested vars - level 2',
+      'var(--ccc-cc, var(--aaa-aa, green)) var(--bbb-bb)',
+      'R[var(--ccc-cc, var(--aaa-aa, green))] R[var(--bbb-bb)]',
+    ],
+    [
+      'Nested vars - level 3',
+      'var(--a, var(--b, var(--c, red)))',
+      'R[var(--a, var(--b, var(--c, red)))]',
+    ],
+    [
+      'Nested vars - level 4',
+      'var(--a, var(--b, var(--c, var(--d, red))))',
+      'R[var(--a, var(--b, var(--c, var(--d, red))))]',
+    ],
+    [
+      'Nested calc - level 3',
+      'var(--a, calc(calc(1px + 2px)))',
+      'R[var(--a, calc(calc(1px + 2px)))]',
+    ],
+    [
+      'Nested calc - level 4',
+      'var(--a, calc(calc(calc(1px + 2px) + 3px)))',
+      'R[var(--a, calc(calc(calc(1px + 2px) + 3px)))]',
+    ],
+    [
+      'Nested calc - level 4',
+      'var(--a, calc(calc(calc(1px + 2px) + 3px)))',
+      'R[var(--a, calc(calc(calc(1px + 2px) + 3px)))]',
+    ],
+    [
+      'Non top-level var',
+      'calc(var(--a, calc(calc(calc(1px + 2px) + 3px)))) var(--b)',
+      'calc(R[var(--a, calc(calc(calc(1px + 2px) + 3px)))]) R[var(--b)]',
+    ],
+  ])('should replace css variables - %s: %s, %s', (_label, given, expected) => {
+    const actual = resolveCssVariablesInString(mockResolver, given);
+
+    expect(actual).toEqual(expected);
+  });
+});
+
 describe('setThemePreloadData', () => {
   it('should set the theme preload data', () => {
     const preloadData = {
diff --git a/packages/components/src/theme/ThemeUtils.ts b/packages/components/src/theme/ThemeUtils.ts
index 04768f736e..f1bb6fd6b2 100644
--- a/packages/components/src/theme/ThemeUtils.ts
+++ b/packages/components/src/theme/ThemeUtils.ts
@@ -1,5 +1,5 @@
 import Log from '@deephaven/log';
-import { assertNotNull } from '@deephaven/utils';
+import { assertNotNull, ColorUtils } from '@deephaven/utils';
 // Note that ?inline imports are natively supported by Vite, but consumers of
 // @deephaven/components using Webpack will need to add a rule to their module
 // config.
@@ -12,8 +12,8 @@ import { assertNotNull } from '@deephaven/utils';
 //    },
 //  ],
 // },
-import darkTheme from './theme_default_dark.css?inline';
-import lightTheme from './theme_default_light.css?inline';
+import { themeDark } from './theme-dark';
+import { themeLight } from './theme-light';
 import {
   DEFAULT_DARK_THEME_KEY,
   DEFAULT_LIGHT_THEME_KEY,
@@ -27,6 +27,10 @@ import {
 
 const log = Log.module('ThemeUtils');
 
+export const TMP_CSS_PROP_PREFIX = 'dh-tmp';
+
+export type VarExpressionResolver = (varExpression: string) => string;
+
 /**
  * Creates a string containing preload style content for the current theme.
  * This resolves the current values of a few CSS variables that can be used
@@ -45,6 +49,25 @@ export function calculatePreloadStyleContent(): ThemePreloadStyleContent {
   return `:root{${pairs.join(';')}}`;
 }
 
+/**
+ * Extracts all css variable expressions from the given record and returns
+ * a set of unique expressions.
+ * @param record The record to extract css variable expressions from
+ */
+export function extractDistinctCssVariableExpressions(
+  record: Record<string, string>
+): Set<string> {
+  const set = new Set<string>();
+
+  Object.values(record).forEach(value => {
+    getCssVariableRanges(value).forEach(([start, end]) => {
+      set.add(value.substring(start, end + 1));
+    });
+  });
+
+  return set;
+}
+
 /**
  * Returns an array of the active themes. The first item will always be one
  * of the base themes. Optionally, the second item will be a custom theme.
@@ -93,12 +116,12 @@ export function getDefaultBaseThemes(): ThemeData[] {
     {
       name: 'Default Dark',
       themeKey: DEFAULT_DARK_THEME_KEY,
-      styleContent: darkTheme,
+      styleContent: themeDark,
     },
     {
       name: 'Default Light',
       themeKey: DEFAULT_LIGHT_THEME_KEY,
-      styleContent: lightTheme,
+      styleContent: themeLight,
     },
   ];
 }
@@ -119,6 +142,162 @@ export function getThemePreloadData(): ThemePreloadData | null {
   return null;
 }
 
+/**
+ * Identifies start and end indices of any css variable expressions in the given
+ * string.
+ *
+ * e.g.
+ * getCssVariableRanges('var(--aaa-aa) var(--bbb-bb)')
+ * yields:
+ * [
+ *   [0, 12],
+ *   [14, 26],
+ * ]
+ *
+ * In cases where there are nested expressions, only the indices of the outermost
+ * expression will be included.
+ *
+ * e.g.
+ * getCssVariableRanges('var(--ccc-cc, var(--aaa-aa, green)) var(--bbb-bb)')
+ * yields:
+ * [
+ *   [0, 34], // range for --ccc-cc expression
+ *   [36, 48], // range for --bbb-bb expression
+ * ]
+ * @param value The string to search for css variable expressions
+ * @returns An array of [start, end] index pairs for each css variable expression
+ */
+export function getCssVariableRanges(value: string): [number, number][] {
+  const ranges: [number, number][] = [];
+
+  const cssVarPrefix = 'var(--';
+  let start = value.indexOf(cssVarPrefix);
+  let parenLevel = 0;
+
+  while (start > -1) {
+    parenLevel = 1;
+    let i = start + cssVarPrefix.length;
+    for (; i < value.length; i += 1) {
+      if (value[i] === '(') {
+        parenLevel += 1;
+      } else if (value[i] === ')') {
+        parenLevel -= 1;
+      }
+
+      if (parenLevel === 0) {
+        ranges.push([start, i]);
+        break;
+      }
+    }
+
+    if (parenLevel !== 0) {
+      log.error('Unbalanced parentheses in css var expression', value);
+      return [];
+    }
+
+    start = value.indexOf(cssVarPrefix, i + 1);
+  }
+
+  return ranges;
+}
+
+/**
+ * Make a copy of the given object replacing any css variable expressions
+ * contained in its prop values with values resolved from the given HTML element.
+ * Variables that resolve to color strings will also be normalized to rgb or
+ * rgba color strings.
+ *
+ * Note that the browser will force a reflow when calling `getComputedStyle` if
+ * css properties have changed. In order to avoid a reflow for every property
+ * check we use distinct setup, resolve / normalize, and cleanup passes:
+ * 1. Setup - Create a tmp element and set all css props we want to evaluate
+ * 2. Resolve / Normalize - Evaluate all css props via `getPropertyValue` calls
+ *    and replace the original expressions with resolved values. Also normalize
+ *    css colors to rgb/a.
+ * 3. Cleanup - Remove the tmp element
+ * @param record An object whose values may contain css var expressions
+ * @param targetElement The element to resolve css variables against. Defaults
+ * to document.body
+ */
+export function resolveCssVariablesInRecord<T extends Record<string, string>>(
+  record: T,
+  targetElement: HTMLElement = document.body
+): T {
+  const perfStart = performance.now();
+
+  // Add a temporary div to attach temp css variables to
+  const tmpPropEl = document.createElement('div');
+  targetElement.appendChild(tmpPropEl);
+
+  const varExpressions = [...extractDistinctCssVariableExpressions(record)];
+
+  // Set temporary css variables for resolving var expressions
+  varExpressions.forEach((varExpression, i) => {
+    const tmpPropKey = `--${TMP_CSS_PROP_PREFIX}-${i}`;
+    tmpPropEl.style.setProperty(tmpPropKey, varExpression);
+  });
+
+  const result = {} as T;
+
+  const computedStyle = window.getComputedStyle(tmpPropEl);
+
+  const resolver = (varExpression: string): string => {
+    const tmpPropKey = `--${TMP_CSS_PROP_PREFIX}-${varExpressions.indexOf(
+      varExpression
+    )}`;
+
+    const resolved = computedStyle.getPropertyValue(tmpPropKey);
+
+    return ColorUtils.normalizeCssColor(resolved);
+  };
+
+  // Resolve the temporary css variables
+  Object.entries(record).forEach(([key, value]) => {
+    result[key as keyof T] = resolveCssVariablesInString(
+      resolver,
+      value
+    ) as T[keyof T];
+  });
+
+  // Remove the temporary css variables
+  tmpPropEl.remove();
+
+  log.debug('Resolved css variables', performance.now() - perfStart, 'ms');
+
+  return result;
+}
+
+/**
+ * Resolve css variable expressions in the given string using the
+ * given resolver and replace the original expressions with the resolved values.
+ *
+ * @param resolver Function that can resolve a css variable expression
+ * @param value Value that may contain css variable expressions
+ */
+export function resolveCssVariablesInString(
+  resolver: VarExpressionResolver,
+  value: string
+): string {
+  const result: string[] = [];
+  let i = 0;
+  getCssVariableRanges(value).forEach(([start, end]) => {
+    if (i < start) {
+      result.push(value.substring(i, start));
+      i += start - i;
+    }
+
+    result.push(resolver(value.substring(start, end + 1)));
+
+    i += end - start + 1;
+  });
+
+  if (result.length === 0) {
+    return value;
+  }
+
+  return result.join('');
+}
+
 /**
  * Store theme preload data in local storage.
  * @param preloadData The preload data to set
diff --git a/packages/components/src/theme/__snapshots__/ThemeProvider.test.tsx.snap b/packages/components/src/theme/__snapshots__/ThemeProvider.test.tsx.snap
index 245e385a12..33d1ae08e2 100644
--- a/packages/components/src/theme/__snapshots__/ThemeProvider.test.tsx.snap
+++ b/packages/components/src/theme/__snapshots__/ThemeProvider.test.tsx.snap
@@ -22,6 +22,9 @@ exports[`ThemeProvider setSelectedThemeKey: [ [Object] ] should change selected
       data-theme-key="default-dark"
     >
       test-file-stub
+test-file-stub
+test-file-stub
+test-file-stub
     </style>
     <style
       data-theme-key="themeA"
@@ -60,6 +63,9 @@ exports[`ThemeProvider should load themes based on preload data or default: [ [O
       data-theme-key="default-dark"
     >
       test-file-stub
+test-file-stub
+test-file-stub
+test-file-stub
     </style>
     <style
       data-theme-key="themeA"
@@ -78,6 +84,9 @@ exports[`ThemeProvider should load themes based on preload data or default: [ [O
       data-theme-key="default-dark"
     >
       test-file-stub
+test-file-stub
+test-file-stub
+test-file-stub
     </style>
     <div>
       Child
diff --git a/packages/components/src/theme/index.ts b/packages/components/src/theme/index.ts
index 42d06c3079..873ca8f528 100644
--- a/packages/components/src/theme/index.ts
+++ b/packages/components/src/theme/index.ts
@@ -1,3 +1,5 @@
+export * from './theme-dark';
+export * from './theme-light';
 export * from './ThemeModel';
 export * from './ThemeProvider';
 export * from './ThemeUtils';
diff --git a/packages/components/src/theme/theme-dark/index.ts b/packages/components/src/theme/theme-dark/index.ts
new file mode 100644
index 0000000000..04f5f09c2b
--- /dev/null
+++ b/packages/components/src/theme/theme-dark/index.ts
@@ -0,0 +1,13 @@
+import themeDarkPalette from './theme-dark-palette.css?inline';
+import themeDarkSemantic from './theme-dark-semantic.css?inline';
+import themeDarkSemanticEditor from './theme-dark-semantic-editor.css?inline';
+import themeDarkSemanticGrid from './theme-dark-semantic-grid.css?inline';
+
+export const themeDark = [
+  themeDarkPalette,
+  themeDarkSemantic,
+  themeDarkSemanticEditor,
+  themeDarkSemanticGrid,
+].join('\n');
+
+export default themeDark;
diff --git a/packages/components/src/theme/theme-dark/theme-dark-palette.css b/packages/components/src/theme/theme-dark/theme-dark-palette.css
new file mode 100644
index 0000000000..61e2929c0c
--- /dev/null
+++ b/packages/components/src/theme/theme-dark/theme-dark-palette.css
@@ -0,0 +1,302 @@
+:root {
+  /* Gray */
+  --dh-color-gray-hue: 0deg;
+  --dh-color-gray-50: hsl(var(--dh-color-gray-hue) 6% 10%);
+  --dh-color-gray-75: hsl(var(--dh-color-gray-hue) 5% 13%);
+  --dh-color-gray-100: hsl(var(--dh-color-gray-hue) 5% 17%);
+  --dh-color-gray-200: hsl(var(--dh-color-gray-hue) 4% 19%);
+  --dh-color-gray-300: hsl(var(--dh-color-gray-hue) 4% 21%);
+  --dh-color-gray-400: hsl(var(--dh-color-gray-hue) 2% 25%);
+  --dh-color-gray-500: hsl(var(--dh-color-gray-hue) 1% 36%);
+  --dh-color-gray-600: hsl(var(--dh-color-gray-hue) 0% 57%);
+  --dh-color-gray-700: hsl(var(--dh-color-gray-hue) 1% 75%);
+  --dh-color-gray-800: hsl(var(--dh-color-gray-hue) 6% 94%);
+  --dh-color-gray-900: hsl(var(--dh-color-gray-hue) 25% 98%);
+
+  /** Black & White */
+  --dh-color-black: var(--dh-color-gray-50);
+  --dh-color-white: var(--dh-color-gray-800);
+
+  /* Blue */
+  --dh-color-blue-hue: 222deg;
+  --dh-color-blue-100: hsl(var(--dh-color-blue-hue) 65% 19%);
+  --dh-color-blue-200: hsl(var(--dh-color-blue-hue) 66% 25%);
+  --dh-color-blue-300: hsl(var(--dh-color-blue-hue) 65% 32%);
+  --dh-color-blue-400: hsl(var(--dh-color-blue-hue) 63% 39%);
+  --dh-color-blue-500: hsl(var(--dh-color-blue-hue) 61% 47%);
+  --dh-color-blue-600: hsl(var(--dh-color-blue-hue) 68% 54%);
+  --dh-color-blue-700: hsl(var(--dh-color-blue-hue) 83% 62%);
+  --dh-color-blue-800: hsl(var(--dh-color-blue-hue) 94% 68%);
+  --dh-color-blue-900: hsl(var(--dh-color-blue-hue) 100% 74%);
+  --dh-color-blue-1000: hsl(var(--dh-color-blue-hue) 100% 80%);
+  --dh-color-blue-1100: hsl(calc(var(--dh-color-blue-hue) - 1deg) 100% 84%);
+  --dh-color-blue-1200: hsl(calc(var(--dh-color-blue-hue) - 1deg) 100% 89%);
+  --dh-color-blue-1300: hsl(var(--dh-color-blue-hue) 100% 93%);
+  --dh-color-blue-1400: hsl(calc(var(--dh-color-blue-hue) + 2deg) 100% 96%);
+
+  /* Red */
+  --dh-color-red-hue: 345deg;
+  --dh-color-red-100: hsl(calc(var(--dh-color-red-hue) + 1deg) 54% 18%);
+  --dh-color-red-200: hsl(var(--dh-color-red-hue) 55% 24%);
+  --dh-color-red-300: hsl(calc(var(--dh-color-red-hue) + 1deg) 54% 30%);
+  --dh-color-red-400: hsl(var(--dh-color-red-hue) 54% 37%);
+  --dh-color-red-500: hsl(var(--dh-color-red-hue) 53% 44%);
+  --dh-color-red-600: hsl(var(--dh-color-red-hue) 55% 51%);
+  --dh-color-red-700: hsl(var(--dh-color-red-hue) 71% 59%);
+  --dh-color-red-800: hsl(var(--dh-color-red-hue) 92% 67%);
+  --dh-color-red-900: hsl(calc(var(--dh-color-red-hue) - 1deg) 100% 74%);
+  --dh-color-red-1000: hsl(calc(var(--dh-color-red-hue) - 2deg) 100% 80%);
+  --dh-color-red-1100: hsl(calc(var(--dh-color-red-hue) - 2deg) 100% 85%);
+  --dh-color-red-1200: hsl(calc(var(--dh-color-red-hue) - 1deg) 100% 90%);
+  --dh-color-red-1300: hsl(calc(var(--dh-color-red-hue) - 1deg) 100% 94%);
+  --dh-color-red-1400: hsl(calc(var(--dh-color-red-hue) - 1deg) 100% 96%);
+
+  /* Orange */
+  --dh-color-orange-hue: 22deg;
+  --dh-color-orange-100: hsl(calc(var(--dh-color-orange-hue) - 2deg) 100% 14%);
+  --dh-color-orange-200: hsl(var(--dh-color-orange-hue) 96% 18%);
+  --dh-color-orange-300: hsl(calc(var(--dh-color-orange-hue) + 1deg) 90% 23%);
+  --dh-color-orange-400: hsl(var(--dh-color-orange-hue) 84% 29%);
+  --dh-color-orange-500: hsl(var(--dh-color-orange-hue) 80% 35%);
+  --dh-color-orange-600: hsl(var(--dh-color-orange-hue) 74% 41%);
+  --dh-color-orange-700: hsl(var(--dh-color-orange-hue) 70% 48%);
+  --dh-color-orange-800: hsl(var(--dh-color-orange-hue) 78% 55%);
+  --dh-color-orange-900: hsl(calc(var(--dh-color-orange-hue) - 1deg) 95% 63%);
+  --dh-color-orange-1000: hsl(var(--dh-color-orange-hue) 100% 71%);
+  --dh-color-orange-1100: hsl(calc(var(--dh-color-orange-hue) + 1deg) 100% 78%);
+  --dh-color-orange-1200: hsl(calc(var(--dh-color-orange-hue) + 2deg) 100% 84%);
+  --dh-color-orange-1300: hsl(calc(var(--dh-color-orange-hue) + 2deg) 100% 90%);
+  --dh-color-orange-1400: hsl(calc(var(--dh-color-orange-hue) + 3deg) 100% 94%);
+
+  /* Yellow */
+  --dh-color-yellow-hue: 49deg;
+  --dh-color-yellow-100: hsl(calc(var(--dh-color-yellow-hue) + 2deg) 100% 9%);
+  --dh-color-yellow-200: hsl(calc(var(--dh-color-yellow-hue) + 1deg) 100% 12%);
+  --dh-color-yellow-300: hsl(calc(var(--dh-color-yellow-hue) + 2deg) 100% 15%);
+  --dh-color-yellow-400: hsl(calc(var(--dh-color-yellow-hue) + 1deg) 90% 20%);
+  --dh-color-yellow-500: hsl(var(--dh-color-yellow-hue) 82% 25%);
+  --dh-color-yellow-600: hsl(calc(var(--dh-color-yellow-hue) - 1deg) 75% 30%);
+  --dh-color-yellow-700: hsl(calc(var(--dh-color-yellow-hue) - 1deg) 70% 35%);
+  --dh-color-yellow-800: hsl(calc(var(--dh-color-yellow-hue) - 2deg) 66% 41%);
+  --dh-color-yellow-900: hsl(calc(var(--dh-color-yellow-hue) - 2deg) 61% 47%);
+  --dh-color-yellow-1000: hsl(calc(var(--dh-color-yellow-hue) - 2deg) 66% 54%);
+  --dh-color-yellow-1100: hsl(calc(var(--dh-color-yellow-hue) - 3deg) 79% 60%);
+  --dh-color-yellow-1200: hsl(calc(var(--dh-color-yellow-hue) - 3deg) 94% 66%);
+  --dh-color-yellow-1300: hsl(var(--dh-color-yellow-hue) 100% 74%);
+  --dh-color-yellow-1400: hsl(calc(var(--dh-color-yellow-hue) + 2deg) 100% 84%);
+
+  /* Chartreuse */
+  --dh-color-chartreuse-hue: 70deg;
+  --dh-color-chartreuse-100: hsl(
+    calc(var(--dh-color-chartreuse-hue) + 7deg) 100% 8%
+  );
+  --dh-color-chartreuse-200: hsl(
+    calc(var(--dh-color-chartreuse-hue) + 5deg) 84% 12%
+  );
+  --dh-color-chartreuse-300: hsl(
+    calc(var(--dh-color-chartreuse-hue) + 4deg) 73% 16%
+  );
+  --dh-color-chartreuse-400: hsl(
+    calc(var(--dh-color-chartreuse-hue) + 1deg) 67% 20%
+  );
+  --dh-color-chartreuse-500: hsl(
+    calc(var(--dh-color-chartreuse-hue) + 1deg) 62% 25%
+  );
+  --dh-color-chartreuse-600: hsl(var(--dh-color-chartreuse-hue) 59% 30%);
+  --dh-color-chartreuse-700: hsl(
+    calc(var(--dh-color-chartreuse-hue) - 1deg) 56% 35%
+  );
+  --dh-color-chartreuse-800: hsl(
+    calc(var(--dh-color-chartreuse-hue) - 2deg) 53% 40%
+  );
+  --dh-color-chartreuse-900: hsl(
+    calc(var(--dh-color-chartreuse-hue) - 3deg) 50% 45%
+  );
+  --dh-color-chartreuse-1000: hsl(
+    calc(var(--dh-color-chartreuse-hue) - 3deg) 49% 51%
+  );
+  --dh-color-chartreuse-1100: hsl(
+    calc(var(--dh-color-chartreuse-hue) - 3deg) 58% 57%
+  );
+  --dh-color-chartreuse-1200: hsl(
+    calc(var(--dh-color-chartreuse-hue) - 4deg) 67% 64%
+  );
+  --dh-color-chartreuse-1300: hsl(
+    calc(var(--dh-color-chartreuse-hue) - 4deg) 76% 73%
+  );
+  --dh-color-chartreuse-1400: hsl(
+    calc(var(--dh-color-chartreuse-hue) - 4deg) 82% 83%
+  );
+
+  /* Celery */
+  --dh-color-celery-hue: 126deg;
+  --dh-color-celery-100: hsl(calc(var(--dh-color-celery-hue) + 1deg) 43% 12%);
+  --dh-color-celery-200: hsl(calc(var(--dh-color-celery-hue) - 1deg) 43% 16%);
+  --dh-color-celery-300: hsl(calc(var(--dh-color-celery-hue) - 1deg) 43% 21%);
+  --dh-color-celery-400: hsl(calc(var(--dh-color-celery-hue) - 1deg) 43% 25%);
+  --dh-color-celery-500: hsl(calc(var(--dh-color-celery-hue) - 1deg) 42% 30%);
+  --dh-color-celery-600: hsl(var(--dh-color-celery-hue) 41% 36%);
+  --dh-color-celery-700: hsl(calc(var(--dh-color-celery-hue) - 1deg) 39% 41%);
+  --dh-color-celery-800: hsl(calc(var(--dh-color-celery-hue) - 1deg) 37% 48%);
+  --dh-color-celery-900: hsl(calc(var(--dh-color-celery-hue) - 1deg) 39% 55%);
+  --dh-color-celery-1000: hsl(calc(var(--dh-color-celery-hue) - 1deg) 44% 63%);
+  --dh-color-celery-1100: hsl(calc(var(--dh-color-celery-hue) - 1deg) 48% 71%);
+  --dh-color-celery-1200: hsl(var(--dh-color-celery-hue) 50% 80%);
+  --dh-color-celery-1300: hsl(var(--dh-color-celery-hue) 48% 87%);
+  --dh-color-celery-1400: hsl(calc(var(--dh-color-celery-hue) + 1deg) 50% 93%);
+
+  /* Green */
+  --dh-color-green-hue: 94deg;
+  --dh-color-green-100: hsl(calc(var(--dh-color-green-hue) + 1deg) 17% 14%);
+  --dh-color-green-200: hsl(calc(var(--dh-color-green-hue) - 2deg) 19% 18%);
+  --dh-color-green-300: hsl(var(--dh-color-green-hue) 22% 23%);
+  --dh-color-green-400: hsl(var(--dh-color-green-hue) 23% 27%);
+  --dh-color-green-500: hsl(calc(var(--dh-color-green-hue) - 1deg) 26% 32%);
+  --dh-color-green-600: hsl(calc(var(--dh-color-green-hue) + 1deg) 28% 37%);
+  --dh-color-green-700: hsl(calc(var(--dh-color-green-hue) + 1deg) 30% 42%);
+  --dh-color-green-800: hsl(var(--dh-color-green-hue) 32% 48%);
+  --dh-color-green-900: hsl(var(--dh-color-green-hue) 38% 53%);
+  --dh-color-green-1000: hsl(var(--dh-color-green-hue) 47% 58%);
+  --dh-color-green-1100: hsl(var(--dh-color-green-hue) 59% 64%);
+  --dh-color-green-1200: hsl(var(--dh-color-green-hue) 71% 70%);
+  --dh-color-green-1300: hsl(var(--dh-color-green-hue) 81% 79%);
+  --dh-color-green-1400: hsl(calc(var(--dh-color-green-hue) - 1deg) 88% 87%);
+
+  /* Seafoam */
+  --dh-color-seafoam-hue: 159deg;
+  --dh-color-seafoam-100: hsl(calc(var(--dh-color-seafoam-hue) - 3deg) 14% 14%);
+  --dh-color-seafoam-200: hsl(calc(var(--dh-color-seafoam-hue) - 1deg) 17% 18%);
+  --dh-color-seafoam-300: hsl(var(--dh-color-seafoam-hue) 20% 23%);
+  --dh-color-seafoam-400: hsl(calc(var(--dh-color-seafoam-hue) - 1deg) 23% 28%);
+  --dh-color-seafoam-500: hsl(calc(var(--dh-color-seafoam-hue) - 1deg) 26% 33%);
+  --dh-color-seafoam-600: hsl(var(--dh-color-seafoam-hue) 29% 37%);
+  --dh-color-seafoam-700: hsl(calc(var(--dh-color-seafoam-hue) + 2deg) 33% 42%);
+  --dh-color-seafoam-800: hsl(calc(var(--dh-color-seafoam-hue) + 2deg) 36% 47%);
+  --dh-color-seafoam-900: hsl(calc(var(--dh-color-seafoam-hue) + 3deg) 42% 51%);
+  --dh-color-seafoam-1000: hsl(
+    calc(var(--dh-color-seafoam-hue) + 2deg) 53% 56%
+  );
+  --dh-color-seafoam-1100: hsl(
+    calc(var(--dh-color-seafoam-hue) + 3deg) 66% 62%
+  );
+  --dh-color-seafoam-1200: hsl(
+    calc(var(--dh-color-seafoam-hue) + 2deg) 76% 70%
+  );
+  --dh-color-seafoam-1300: hsl(
+    calc(var(--dh-color-seafoam-hue) - 1deg) 87% 80%
+  );
+  --dh-color-seafoam-1400: hsl(
+    calc(var(--dh-color-seafoam-hue) - 3deg) 89% 89%
+  );
+
+  /* Cyan */
+  --dh-color-cyan-hue: 186deg;
+  --dh-color-cyan-100: hsl(calc(var(--dh-color-cyan-hue) - 1deg) 38% 13%);
+  --dh-color-cyan-200: hsl(var(--dh-color-cyan-hue) 38% 16%);
+  --dh-color-cyan-300: hsl(var(--dh-color-cyan-hue) 39% 21%);
+  --dh-color-cyan-400: hsl(calc(var(--dh-color-cyan-hue) - 1deg) 38% 26%);
+  --dh-color-cyan-500: hsl(calc(var(--dh-color-cyan-hue) - 1deg) 38% 31%);
+  --dh-color-cyan-600: hsl(var(--dh-color-cyan-hue) 38% 37%);
+  --dh-color-cyan-700: hsl(calc(var(--dh-color-cyan-hue) - 1deg) 38% 42%);
+  --dh-color-cyan-800: hsl(calc(var(--dh-color-cyan-hue) - 1deg) 37% 48%);
+  --dh-color-cyan-900: hsl(calc(var(--dh-color-cyan-hue) - 1deg) 42% 54%);
+  --dh-color-cyan-1000: hsl(calc(var(--dh-color-cyan-hue) - 1deg) 52% 60%);
+  --dh-color-cyan-1100: hsl(var(--dh-color-cyan-hue) 64% 67%);
+  --dh-color-cyan-1200: hsl(var(--dh-color-cyan-hue) 79% 74%);
+  --dh-color-cyan-1300: hsl(var(--dh-color-cyan-hue) 92% 81%);
+  --dh-color-cyan-1400: hsl(var(--dh-color-cyan-hue) 100% 90%);
+
+  /* Indigo */
+  --dh-color-indigo-hue: 235deg;
+  --dh-color-indigo-100: hsl(calc(var(--dh-color-indigo-hue) + 2deg) 58% 24%);
+  --dh-color-indigo-200: hsl(calc(var(--dh-color-indigo-hue) + 1deg) 52% 30%);
+  --dh-color-indigo-300: hsl(calc(var(--dh-color-indigo-hue) + 1deg) 47% 37%);
+  --dh-color-indigo-400: hsl(var(--dh-color-indigo-hue) 43% 44%);
+  --dh-color-indigo-500: hsl(var(--dh-color-indigo-hue) 40% 51%);
+  --dh-color-indigo-600: hsl(var(--dh-color-indigo-hue) 49% 58%);
+  --dh-color-indigo-700: hsl(calc(var(--dh-color-indigo-hue) - 1deg) 60% 65%);
+  --dh-color-indigo-800: hsl(calc(var(--dh-color-indigo-hue) - 1deg) 75% 72%);
+  --dh-color-indigo-900: hsl(calc(var(--dh-color-indigo-hue) - 1deg) 91% 78%);
+  --dh-color-indigo-1000: hsl(calc(var(--dh-color-indigo-hue) - 1deg) 100% 83%);
+  --dh-color-indigo-1100: hsl(calc(var(--dh-color-indigo-hue) - 1deg) 100% 87%);
+  --dh-color-indigo-1200: hsl(var(--dh-color-indigo-hue) 100% 91%);
+  --dh-color-indigo-1300: hsl(calc(var(--dh-color-indigo-hue) - 3deg) 100% 94%);
+  --dh-color-indigo-1400: hsl(calc(var(--dh-color-indigo-hue) + 1deg) 100% 97%);
+
+  /* Purple */
+  --dh-color-purple-hue: 254deg;
+  --dh-color-purple-100: hsl(calc(var(--dh-color-purple-hue) + 9deg) 73% 23%);
+  --dh-color-purple-200: hsl(calc(var(--dh-color-purple-hue) + 6deg) 59% 30%);
+  --dh-color-purple-300: hsl(calc(var(--dh-color-purple-hue) + 4deg) 50% 37%);
+  --dh-color-purple-400: hsl(calc(var(--dh-color-purple-hue) + 3deg) 43% 44%);
+  --dh-color-purple-500: hsl(calc(var(--dh-color-purple-hue) + 1deg) 38% 50%);
+  --dh-color-purple-600: hsl(var(--dh-color-purple-hue) 45% 57%);
+  --dh-color-purple-700: hsl(calc(var(--dh-color-purple-hue) - 1deg) 54% 64%);
+  --dh-color-purple-800: hsl(calc(var(--dh-color-purple-hue) - 3deg) 64% 71%);
+  --dh-color-purple-900: hsl(calc(var(--dh-color-purple-hue) - 4deg) 79% 78%);
+  --dh-color-purple-1000: hsl(calc(var(--dh-color-purple-hue) - 5deg) 91% 83%);
+  --dh-color-purple-1100: hsl(calc(var(--dh-color-purple-hue) - 5deg) 97% 88%);
+  --dh-color-purple-1200: hsl(calc(var(--dh-color-purple-hue) - 4deg) 100% 91%);
+  --dh-color-purple-1300: hsl(calc(var(--dh-color-purple-hue) - 3deg) 100% 95%);
+  --dh-color-purple-1400: hsl(calc(var(--dh-color-purple-hue) + 6deg) 88% 97%);
+
+  /* Fuchsia */
+  --dh-color-fuchsia-hue: 286deg;
+  --dh-color-fuchsia-100: hsl(
+    calc(var(--dh-color-fuchsia-hue) + 15deg) 64% 16%
+  );
+  --dh-color-fuchsia-200: hsl(
+    calc(var(--dh-color-fuchsia-hue) + 14deg) 53% 22%
+  );
+  --dh-color-fuchsia-300: hsl(
+    calc(var(--dh-color-fuchsia-hue) + 11deg) 44% 29%
+  );
+  --dh-color-fuchsia-400: hsl(calc(var(--dh-color-fuchsia-hue) + 8deg) 39% 35%);
+  --dh-color-fuchsia-500: hsl(calc(var(--dh-color-fuchsia-hue) + 5deg) 35% 43%);
+  --dh-color-fuchsia-600: hsl(calc(var(--dh-color-fuchsia-hue) + 1deg) 33% 51%);
+  --dh-color-fuchsia-700: hsl(calc(var(--dh-color-fuchsia-hue) - 3deg) 40% 58%);
+  --dh-color-fuchsia-800: hsl(calc(var(--dh-color-fuchsia-hue) - 7deg) 50% 66%);
+  --dh-color-fuchsia-900: hsl(calc(var(--dh-color-fuchsia-hue) - 9deg) 61% 74%);
+  --dh-color-fuchsia-1000: hsl(
+    calc(var(--dh-color-fuchsia-hue) - 11deg) 71% 80%
+  );
+  --dh-color-fuchsia-1100: hsl(
+    calc(var(--dh-color-fuchsia-hue) - 11deg) 76% 85%
+  );
+  --dh-color-fuchsia-1200: hsl(
+    calc(var(--dh-color-fuchsia-hue) - 9deg) 78% 89%
+  );
+  --dh-color-fuchsia-1300: hsl(
+    calc(var(--dh-color-fuchsia-hue) - 6deg) 77% 93%
+  );
+  --dh-color-fuchsia-1400: hsl(
+    calc(var(--dh-color-fuchsia-hue) + 2deg) 71% 96%
+  );
+
+  /* Magenta */
+  --dh-color-magenta-hue: 330deg;
+  --dh-color-magenta-100: hsl(calc(var(--dh-color-magenta-hue) + 3deg) 91% 17%);
+  --dh-color-magenta-200: hsl(calc(var(--dh-color-magenta-hue) + 4deg) 72% 23%);
+  --dh-color-magenta-300: hsl(calc(var(--dh-color-magenta-hue) + 4deg) 60% 30%);
+  --dh-color-magenta-400: hsl(calc(var(--dh-color-magenta-hue) + 4deg) 52% 36%);
+  --dh-color-magenta-500: hsl(calc(var(--dh-color-magenta-hue) + 3deg) 46% 43%);
+  --dh-color-magenta-600: hsl(calc(var(--dh-color-magenta-hue) + 2deg) 42% 50%);
+  --dh-color-magenta-700: hsl(var(--dh-color-magenta-hue) 51% 58%);
+  --dh-color-magenta-800: hsl(calc(var(--dh-color-magenta-hue) - 1deg) 61% 65%);
+  --dh-color-magenta-900: hsl(calc(var(--dh-color-magenta-hue) - 1deg) 76% 72%);
+  --dh-color-magenta-1000: hsl(
+    calc(var(--dh-color-magenta-hue) - 2deg) 92% 79%
+  );
+  --dh-color-magenta-1100: hsl(
+    calc(var(--dh-color-magenta-hue) - 3deg) 100% 85%
+  );
+  --dh-color-magenta-1200: hsl(
+    calc(var(--dh-color-magenta-hue) - 3deg) 100% 89%
+  );
+  --dh-color-magenta-1300: hsl(
+    calc(var(--dh-color-magenta-hue) - 4deg) 100% 93%
+  );
+  --dh-color-magenta-1400: hsl(
+    calc(var(--dh-color-magenta-hue) - 2deg) 100% 96%
+  );
+}
diff --git a/packages/components/src/theme/theme-dark/theme-dark-semantic-editor.css b/packages/components/src/theme/theme-dark/theme-dark-semantic-editor.css
new file mode 100644
index 0000000000..3366c97fe0
--- /dev/null
+++ b/packages/components/src/theme/theme-dark/theme-dark-semantic-editor.css
@@ -0,0 +1,65 @@
+:root {
+  /* Editor */
+  --dh-color-editor-bg: var(--dh-color-content-background);
+  --dh-color-editor-fg: var(--dh-color-gray-900);
+  --dh-color-editor-error-fg: var(--dh-color-visual-red);
+  --dh-color-editor-line-number-fg: var(--dh-color-gray-700);
+  --dh-color-editor-line-highlight-bg: var(--dh-color-gray-200);
+  --dh-color-editor-selection-bg: var(--dh-color-text-highlight);
+
+  /* Code rules */
+  --dh-color-editor-comment: var(--dh-color-gray-700);
+  --dh-color-editor-delimiter: var(--dh-color-gray-700);
+  --dh-color-editor-identifier-js: var(--dh-color-visual-yellow);
+  --dh-color-editor-identifier-namespace: var(--dh-color-visual-red);
+  --dh-color-editor-identifier: var(--dh-color-gray-900);
+  --dh-color-editor-keyword: var(--dh-color-visual-cyan);
+  --dh-color-editor-number: var(--dh-color-visual-purple);
+  --dh-color-editor-operator: var(--dh-color-visual-red);
+  --dh-color-editor-predefined: var(--dh-color-visual-green);
+  --dh-color-editor-storage: var(--dh-color-visual-red);
+  --dh-color-editor-string-delim: var(--dh-color-gray-700);
+  --dh-color-editor-string: var(--dh-color-visual-yellow);
+
+  /* Input */
+  --dh-color-editor-focus-border: var(--dh-color-focus-border);
+  --dh-color-editor-input-option-active-border: var(--dh-color-focus-ring);
+  --dh-color-editor-input-bg: var(--dh-color-background);
+  --dh-color-editor-input-fg: var(--dh-color-text);
+  --dh-color-editor-input-border: var(--dh-color-border);
+
+  /* Menus */
+  --dh-color-editor-context-menu-bg: var(--dh-color-gray-300);
+  --dh-color-editor-context-menu-fg: var(--dh-color-gray-900);
+  --dh-color-editor-menu-selection-bg: var(--dh-color-highlight-hover);
+
+  /* Logging */
+  --dh-color-editor-log-date: var(--dh-color-gray-700);
+  --dh-color-editor-log-error: var(--dh-color-visual-red);
+  --dh-color-editor-log-info: var(--dh-color-visual-cyan);
+  --dh-color-editor-log-stdout: var(--dh-color-gray-900);
+  --dh-color-editor-log-warn: var(--dh-color-visual-yellow);
+  --dh-color-editor-log-debug: var(--dh-color-visual-purple);
+  --dh-color-editor-log-trace: var(--dh-color-visual-green);
+
+  /* Find */
+  --dh-color-editor-find-bg: var(--dh-color-gray-200);
+  --dh-color-editor-find-match-bg: var(--dh-color-highlight-selected);
+  --dh-color-editor-find-match-highlight-bg: var(
+    --dh-color-highlight-selected-hover
+  );
+  --dh-color-editor-find-option-active-bg: var(--dh-color-accent-700);
+  --dh-color-editor-find-option-active-fg: var(--dh-color-gray-900);
+
+  /* Suggest */
+  --dh-color-editor-suggest-bg: var(--dh-color-gray-200);
+  --dh-color-editor-suggest-border: var(--dh-color-gray-400);
+  --dh-color-editor-suggest-fg: var(--dh-color-gray-100);
+  --dh-color-editor-suggest-selected-bg: var(--dh-color-highlight-selected);
+  --dh-color-editor-suggest-highlight-fg: var(--dh-color-accent-700);
+  --dh-color-editor-suggest-hover-bg: var(--dh-color-highlight-hover);
+
+  /* Links */
+  --dh-color-editor-link-foreground: var(--dh-color-accent-1000);
+  --dh-color-editor-link-active-fg: var(--dh-color-accent-1100);
+}
diff --git a/packages/components/src/theme/theme-dark/theme-dark-semantic-grid.css b/packages/components/src/theme/theme-dark/theme-dark-semantic-grid.css
new file mode 100644
index 0000000000..07922f8ba3
--- /dev/null
+++ b/packages/components/src/theme/theme-dark/theme-dark-semantic-grid.css
@@ -0,0 +1,96 @@
+:root {
+  /* Grid */
+  --dh-color-grid-bg: var(--dh-color-background);
+
+  /* Header */
+  --dh-color-grid-header-bg: var(--dh-color-gray-100);
+  --dh-color-grid-header-text: var(--dh-color-heading-text);
+  --dh-color-grid-header-separator: var(--dh-color-gray-50);
+  --dh-color-grid-header-separator-hover: var(--dh-color-gray-600);
+  --dh-color-grid-header-separator-hidden-hover: var(--dh-color-accent-700);
+  --dh-color-grid-header-sort-bar: var(--dh-color-visual-purple);
+  --dh-color-grid-header-reverse-bar: var(--dh-color-visual-green);
+  --dh-color-grid-header-bar-casing: var(--dh-color-gray-50);
+
+  /* Row */
+  --dh-color-grid-row-0-bg: var(--dh-color-gray-200);
+  --dh-color-grid-row-1-bg: var(--dh-color-gray-100);
+  --dh-color-grid-row-hover-bg: var(--dh-color-highlight-hover);
+  --dh-color-grid-row-hover-bg-selected: var(
+    --dh-color-highlight-selected-hover
+  );
+
+  /* Selection */
+  --dh-color-grid-selection: var(--dh-color-highlight-selected);
+  --dh-color-grid-selection-outline: var(--dh-color-accent-900);
+  --dh-color-grid-selection-outline-casing: var(--dh-gray-50);
+
+  /** Sroll Bar */
+  --dh-color-grid-scroll-bar-active-selection-tick: var(--dh-color-accent-400);
+  --dh-color-grid-scroll-bar-bg: var(--dh-color-gray-100);
+  --dh-color-grid-scroll-bar-hover-bg: var(--dh-color-gray-200);
+  --dh-color-grid-scroll-bar-casing: var(--dh-color-gray-400);
+  --dh-color-grid-scroll-bar-corner: var(--dh-color-gray-100);
+  --dh-color-grid-scroll-bar: var(--dh-color-gray-500);
+  --dh-color-grid-scroll-bar-hover: var(--dh-color-gray-600);
+  --dh-color-grid-scroll-bar-active: var(--dh-color-gray-700);
+
+  /* Text */
+  --dh-color-grid-text: var(--dh-color-text);
+  --dh-color-grid-text-hyperlink: var(--dh-color-accent-1000);
+  --dh-color-grid-text-pending: var(--dh-color-yellow-1300);
+  --dh-color-grid-text-error: var(--dh-color-visual-negative);
+
+  /* Data Types */
+  --dh-color-grid-date: var(--dh-color-visual-notice);
+  --dh-color-grid-number-positive: var(--dh-color-visual-positive);
+  --dh-color-grid-number-negative: var(--dh-color-visual-negative);
+  --dh-color-grid-number-zero: var(--dh-color-visual-notice);
+  --dh-color-grid-string-null: var(--dh-color-gray-600);
+
+  /* Filter Bar */
+  --dh-color-grid-filter-bar-active-bg: var(--dh-color-accent-300);
+  --dh-color-grid-filter-bar-active: var(--dh-color-accent-600);
+  --dh-color-grid-filter-bar-expanded-bg: var(--dh-color-gray-200);
+  --dh-color-grid-filter-bar-expanded-active-bg: var(--dh-color-accent-100);
+  --dh-color-grid-filter-bar-expanded-active-cell-bg: var(
+    --dh-color-accent-200
+  );
+  --dh-color-grid-filter-bar-separator: var(--dh-color-gray-600);
+  --dh-color-grid-filter-bar-error: var(--dh-color-visual-negative);
+  --dh-color-grid-filter-icon: var(--dh-color-accent-600);
+
+  /* Context Menu */
+  --dh-color-grid-context-menu-sort-icon: var(--dh-color-visual-purple);
+  --dh-color-grid-context-menu-reverse-icon: var(--dh-color-visual-green);
+
+  /* Column */
+  --dh-color-grid-column-linker-hover-bg: var(
+    --dh-color-highlight-selected-hover
+  );
+  --dh-color-grid-column-grouped-divider: var(--dh-color-gray-50);
+
+  /* Tree */
+  --dh-color-grid-tree-line: var(--dh-color-gray-500);
+  --dh-color-grid-tree-marker: var(--dh-color-gray-700);
+  --dh-color-grid-tree-marker-hover: var(--dh-color-gray-900);
+
+  /* Floating */
+  --dh-color-grid-floating-row: var(--dh-color-gray-300);
+  --dh-color-grid-floating-row-bg: var(--dh-color-gray-200);
+  --dh-color-grid-floating-divider-inner: var(--dh-color-gray-200);
+  --dh-color-grid-floating-divider-outer: var(--dh-color-gray-50);
+
+  /* Overflow Button */
+  --dh-color-grid-overflow-button: var(--dh-color-gray-700);
+  --dh-color-grid-overflow-button-hover: var(--dh-color-gray-900);
+
+  /* Data Bars */
+  --dh-color-grid-data-bar-positive: var(--dh-color-visual-positive);
+  --dh-color-grid-data-bar-negative: var(--dh-color-visual-negative);
+  --dh-color-grid-data-bar-marker: var(--dh-color-white);
+  --dh-color-grid-data-bar-zero-line: var(--dh-color-gray-300);
+
+  /* Scrim */
+  --dh-color-grid-scrim: var(--dh-color-gray-50);
+}
diff --git a/packages/components/src/theme/theme-dark/theme-dark-semantic.css b/packages/components/src/theme/theme-dark/theme-dark-semantic.css
new file mode 100644
index 0000000000..f3a003352f
--- /dev/null
+++ b/packages/components/src/theme/theme-dark/theme-dark-semantic.css
@@ -0,0 +1,81 @@
+/* stylelint-disable custom-property-empty-line-before */
+/* stylelint-disable alpha-value-notation */
+:root {
+  /* General */
+  --dh-color-accent: var(--dh-color-blue-700);
+  --dh-color-border: var(--dh-color-gray-500);
+  --dh-color-background: var(--dh-color-black);
+  --dh-color-foreground: var(--dh-color-white);
+  --dh-color-content-background: var(--dh-color-gray-100);
+
+  /* Text */
+  --dh-color-heading-text: var(--dh-color-gray-900);
+  --dh-color-text: var(--dh-color-gray-800);
+  --dh-color-text-disabled: var(--dh-color-gray-400);
+  --dh-color-text-highlight: hsla(var(--dh-color-blue-hue), 83%, 62%, 0.3);
+
+  /** Accent Colors */
+  --dh-color-accent-100: var(--dh-color-blue-100);
+  --dh-color-accent-200: var(--dh-color-blue-200);
+  --dh-color-accent-300: var(--dh-color-blue-300);
+  --dh-color-accent-400: var(--dh-color-blue-400);
+  --dh-color-accent-500: var(--dh-color-blue-500);
+  --dh-color-accent-600: var(--dh-color-blue-600);
+  --dh-color-accent-700: var(--dh-color-blue-700);
+  --dh-color-accent-800: var(--dh-color-blue-800);
+  --dh-color-accent-900: var(--dh-color-blue-900);
+  --dh-color-accent-1000: var(--dh-color-blue-1000);
+  --dh-color-accent-1100: var(--dh-color-blue-1100);
+  --dh-color-accent-1200: var(--dh-color-blue-1200);
+  --dh-color-accent-1300: var(--dh-color-blue-1300);
+  --dh-color-accent-1400: var(--dh-color-blue-1400);
+
+  /* Accent Background */
+  --dh-color-accent-background-default: var(--dh-color-accent-600);
+  --dh-color-accent-background-hover: var(--dh-color-accent-500);
+  --dh-color-accent-background-down: var(--dh-color-accent-400);
+  --dh-color-accent-background-key-focus: var(--dh-color-accent-500);
+
+  /* Focus */
+  --dh-color-focus: var(--dh-color-blue-800);
+  --dh-color-focus-border: var(--dh-color-blue-800);
+  --dh-color-focus-ring: var(--dh-color-focus);
+
+  /* Highlight */
+  --dh-color-highlight-active: hsla(var(--dh-color-gray-hue), 0%, 94%, 0.15);
+  --dh-color-highlight-hover: hsla(var(--dh-color-gray-hue), 0%, 100%, 0.08);
+  --dh-color-highlight-invalid: hsla(var(--dh-color-red-hue), 80%, 48%, 0.15);
+  --dh-color-highlight-selected: hsla(var(--dh-color-blue-hue), 83%, 62%, 0.13);
+  --dh-color-highlight-selected-hover: hsla(
+    var(--dh-color-blue-hue),
+    83%,
+    62%,
+    0.2
+  );
+
+  /* Negative Background */
+  --dh-color-negative-background-default: var(--dh-color-red-600);
+  --dh-color-negative-background-hover: var(--dh-color-red-500);
+  --dh-color-negative-background-down: var(--dh-color-red-400);
+  --dh-color-negative-background-key-focus: var(--dh-color-red-500);
+
+  /* Visual Colors */
+  --dh-color-visual-blue: var(--dh-color-blue-700);
+  --dh-color-visual-celery: var(--dh-color-celery-1000);
+  --dh-color-visual-chartreuse: var(--dh-color-chartreuse-1100);
+  --dh-color-visual-cyan: var(--dh-color-cyan-1100);
+  --dh-color-visual-fuchsia: var(--dh-color-fuchsia-900);
+  --dh-color-visual-gray: var(--dh-color-gray-600);
+  --dh-color-visual-green: var(--dh-color-green-1100);
+  --dh-color-visual-indigo: var(--dh-color-indigo-900);
+  --dh-color-visual-magenta: var(--dh-color-magenta-900);
+  --dh-color-visual-orange: var(--dh-color-orange-900);
+  --dh-color-visual-purple: var(--dh-color-purple-900);
+  --dh-color-visual-red: var(--dh-color-red-800);
+  --dh-color-visual-seafoam: var(--dh-color-seafoam-1100);
+  --dh-color-visual-yellow: var(--dh-color-yellow-1200);
+
+  --dh-color-visual-positive: var(--dh-color-green-1100);
+  --dh-color-visual-negative: var(--dh-color-red-800);
+  --dh-color-visual-notice: var(--dh-color-yellow-1200);
+}
diff --git a/packages/components/src/theme/theme-light/index.ts b/packages/components/src/theme/theme-light/index.ts
new file mode 100644
index 0000000000..b6c7d42258
--- /dev/null
+++ b/packages/components/src/theme/theme-light/index.ts
@@ -0,0 +1,5 @@
+import themeLightPalette from './theme-light-palette.css?inline';
+
+export const themeLight = themeLightPalette;
+
+export default themeLight;
diff --git a/packages/components/src/theme/theme_default_light.css b/packages/components/src/theme/theme-light/theme-light-palette.css
similarity index 87%
rename from packages/components/src/theme/theme_default_light.css
rename to packages/components/src/theme/theme-light/theme-light-palette.css
index 20fb5c30f2..babcf63c22 100644
--- a/packages/components/src/theme/theme_default_light.css
+++ b/packages/components/src/theme/theme-light/theme-light-palette.css
@@ -47,8 +47,8 @@
   /* Semantic */
   --dh-color-black: var(--dh-color-gray-50);
   --dh-color-white: var(--dh-color-gray-75);
-  --dh-accent-color: var(--dh-color-blue-700);
-  --dh-background-color: var(--dh-color-white);
-  --dh-foreground-color: var(--dh-color-black);
-  --dh-grid-background-color: var(--dh-background-color);
+  --dh-color-accent: var(--dh-color-blue-700);
+  --dh-color-background: var(--dh-color-white);
+  --dh-color-foreground: var(--dh-color-black);
+  --dh-color-grid-bg: var(--dh-color-background);
 }
diff --git a/packages/components/src/theme/theme_default_dark.css b/packages/components/src/theme/theme_default_dark.css
deleted file mode 100644
index 7e2c6d7cfc..0000000000
--- a/packages/components/src/theme/theme_default_dark.css
+++ /dev/null
@@ -1,54 +0,0 @@
-:root {
-  /* Grays */
-  --dh-color-gray-900: #fcfcfa;
-  --dh-color-gray-800: #f0f0ee;
-  --dh-color-gray-700: #c0bfbf;
-  --dh-color-gray-600: #929192;
-  --dh-color-gray-500: #5b5a5c;
-  --dh-color-gray-400: #403e41;
-  --dh-color-gray-300: #373438;
-  --dh-color-gray-200: #322f33;
-  --dh-color-gray-100: #2d2a2e;
-  --dh-color-gray-75: #211f22;
-  --dh-color-gray-50: #1a171a;
-
-  /* Blues */
-  --dh-color-blue-100: #112451;
-  --dh-color-blue-200: #16306c;
-  --dh-color-blue-300: #1d3d88;
-  --dh-color-blue-400: #254ba4;
-  --dh-color-blue-500: #2f5bc0;
-  --dh-color-blue-600: #3b6bda;
-  --dh-color-blue-700: #4c7dee;
-  --dh-color-blue-800: #6390fa;
-  --dh-color-blue-900: #7ca4ff;
-  --dh-color-blue-1000: #97b7ff;
-  --dh-color-blue-1100: #afc9ff;
-  --dh-color-blue-1200: #c7d9ff;
-  --dh-color-blue-1300: #dbe6ff;
-  --dh-color-blue-1400: #ecf1ff;
-
-  /* Seafoam */
-  --dh-color-seafoam-100: #1f2925;
-  --dh-color-seafoam-200: #263630;
-  --dh-color-seafoam-300: #2f463e;
-  --dh-color-seafoam-400: #37574b;
-  --dh-color-seafoam-500: #3e6959;
-  --dh-color-seafoam-600: #447b68;
-  --dh-color-seafoam-700: #488f78;
-  --dh-color-seafoam-800: #4ca387;
-  --dh-color-seafoam-900: #4fb797;
-  --dh-color-seafoam-1000: #54cba6;
-  --dh-color-seafoam-1100: #5edeb7;
-  --dh-color-seafoam-1200: #78edc7;
-  --dh-color-seafoam-1300: #9ef8d7;
-  --dh-color-seafoam-1400: #cbfce8;
-
-  /* Semantic */
-  --dh-color-black: var(--dh-color-gray-50);
-  --dh-color-white: var(--dh-color-gray-800);
-  --dh-accent-color: var(--dh-color-blue-700);
-  --dh-background-color: var(--dh-color-black);
-  --dh-foreground-color: var(--dh-color-white);
-  --dh-grid-background-color: var(--dh-background-color);
-}
diff --git a/packages/console/CHANGELOG.md b/packages/console/CHANGELOG.md
index 35e9a56f2a..2b80a39ecc 100644
--- a/packages/console/CHANGELOG.md
+++ b/packages/console/CHANGELOG.md
@@ -3,6 +3,29 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [0.50.0](https://github.com/deephaven/web-client-ui/compare/v0.49.1...v0.50.0) (2023-10-13)
+
+
+* fix!: CSS based loading spinner (#1532) ([f06fbb0](https://github.com/deephaven/web-client-ui/commit/f06fbb01e27eaaeccab6031d8ff010ffee303d99)), closes [#1532](https://github.com/deephaven/web-client-ui/issues/1532) [#1531](https://github.com/deephaven/web-client-ui/issues/1531)
+
+
+### Features
+
+* Monaco theming ([#1560](https://github.com/deephaven/web-client-ui/issues/1560)) ([4eda17c](https://github.com/deephaven/web-client-ui/commit/4eda17c82f6c177a11ba600d6f43c4f36915f6bd)), closes [#1542](https://github.com/deephaven/web-client-ui/issues/1542)
+
+
+### BREAKING CHANGES
+
+* Theme variables have to be present on body to avoid
+Monaco init failing
+* Inline LoadingSpinner instances will need to be
+decorated with `className="loading-spinner-vertical-align"` for vertical
+alignment to work as before
+
+
+
+
+
 ## [0.49.1](https://github.com/deephaven/web-client-ui/compare/v0.49.0...v0.49.1) (2023-09-27)
 
 **Note:** Version bump only for package @deephaven/console
diff --git a/packages/console/package.json b/packages/console/package.json
index f4b830ae4c..c5e501e145 100644
--- a/packages/console/package.json
+++ b/packages/console/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@deephaven/console",
-  "version": "0.49.1",
+  "version": "0.50.0",
   "description": "Deephaven Console",
   "author": "Deephaven Data Labs LLC",
   "license": "Apache-2.0",
diff --git a/packages/console/src/monaco/MonacoTheme.module.scss b/packages/console/src/monaco/MonacoTheme.module.scss
index 24d242ebf0..35e688c29d 100644
--- a/packages/console/src/monaco/MonacoTheme.module.scss
+++ b/packages/console/src/monaco/MonacoTheme.module.scss
@@ -3,71 +3,76 @@
 
 :export {
   // iris dark theme
-  error-foreground: $red;
-  background: $content-bg;
-  foreground: $gray-100;
+  error-foreground: var(--dh-color-editor-error-fg);
+  background: var(--dh-color-editor-bg);
+  foreground: var(--dh-color-editor-fg);
   line-height: 19px; // 19 is the line height in the default monaco theme
 
   //code rules
-  //more nuanced grays required in a few spots
-  string: $yellow;
-  string-delim: $gray-400;
-  delimiter: mix($gray-400, $gray-300, 30%);
-  predefined: $green;
-  keyword: $blue;
-  storage: $red;
-  number: $purple;
-  operator: $red;
-  identifier: $gray-100;
-  namespace-identifier: $red;
-  identifier-js: $yellow;
-  comment: mix($gray-500, $gray-400, 40%);
+  string: var(--dh-color-editor-string);
+  string-delim: var(--dh-color-editor-string-delim);
+  delimiter: var(--dh-color-editor-delimiter);
+  predefined: var(--dh-color-editor-predefined);
+  keyword: var(--dh-color-editor-keyword);
+  storage: var(--dh-color-editor-storage);
+  number: var(--dh-color-editor-number);
+  operator: var(--dh-color-editor-operator);
+  identifier: var(--dh-color-editor-identifier);
+  namespace-identifier: var(--dh-color-editor-identifier-namespace);
+  identifier-js: var(--dh-color-editor-identifier-js);
+  comment: var(--dh-color-editor-comment);
 
   //input
-  input-option-active-border: $input-border-color;
-  focus-border: $input-focus-border-color;
-  input-background: $input-bg;
-  input-foreground: $input-color;
-  input-border: $input-border-color;
+  input-option-active-border: var(--dh-color-editor-input-option-active-border);
+  focus-border: var(--dh-color-editor-focus-border);
+  input-background: var(--dh-color-editor-input-bg);
+  input-foreground: var(--dh-color-editor-input-fg);
+  input-border: var(--dh-color-editor-input-border);
 
   //editor
-  editor-line-number-foreground: $gray-400;
-  editor-selection-background: $text-select-color-editor;
-  editor-line-highlight-bg: $gray-800;
+  editor-line-number-foreground: var(--dh-color-editor-line-number-fg);
+  editor-selection-background: var(--dh-color-editor-selection-bg);
+  editor-line-highlight-bg: var(--dh-color-editor-line-highlight-bg);
 
   //context menu
-  context-menu-background: $contextmenu-bg;
-  context-menu-foreground: $contextmenu-color;
-  menu-selection-background: $contextmenu-selected-bg;
+  context-menu-background: var(--dh-color-editor-context-menu-bg);
+  context-menu-foreground: var(--dh-color-editor-context-menu-fg);
+  menu-selection-background: var(--dh-color-editor-menu-selection-bg);
 
   //log items
-  log-date: $gray-400;
-  log-error: $danger;
-  log-info: $blue;
-  log-stdout: $foreground;
-  log-warn: $yellow;
-  log-debug: $purple;
-  log-trace: $green;
+  log-date: var(--dh-color-editor-log-date);
+  log-error: var(--dh-color-editor-log-error);
+  log-info: var(--dh-color-editor-log-info);
+  log-stdout: var(--dh-color-editor-log-stdout);
+  log-warn: var(--dh-color-editor-log-warn);
+  log-debug: var(--dh-color-editor-log-debug);
+  log-trace: var(--dh-color-editor-log-trace);
 
   // find matches
-  editor-find-match-background: mix($primary, $content-bg, 55%);
-  editor-find-match-highlight-background: mix($primary, $content-bg, 25%);
+  editor-find-match-background: var(--dh-color-editor-find-match-bg);
+  editor-find-match-highlight-background: var(
+    --dh-color-editor-find-match-highlight-bg
+  );
 
   // find widget
-  editor-widget-background: $gray-700;
-  input-option-active-background: $primary;
-  input-option-active-foreground: $foreground;
+  editor-widget-background: var(--dh-color-editor-find-bg);
+  input-option-active-background: var(--dh-color-editor-find-option-active-bg);
+  input-option-active-foreground: var(--dh-color-editor-find-option-active-fg);
 
   // suggest widget
-  editor-suggest-widget-background: $gray-700;
-  editor-suggest-widget-border: $gray-500;
-  editor-suggest-widget-foreground: $white;
-  editor-suggest-widget-selected-background: mix($primary, $gray-700, 15%);
-  editor-suggest-widget-highlightForeground: $primary;
-  list-hover-background: $gray-600;
+  editor-suggest-widget-background: var(--dh-color-editor-suggest-bg);
+  editor-suggest-widget-border: var(--dh-color-editor-suggest-border);
+  editor-suggest-widget-foreground: var(--dh-color-editor-suggest-fg);
+  editor-suggest-widget-selected-background: var(
+    --dh-color-editor-suggest-selected-bg
+  );
+  editor-suggest-widget-highlightForeground: var(
+    --dh-color-editor-suggest-highlight-fg
+  );
+  list-hover-background: var(--dh-color-editor-suggest-hover-bg);
 
   // links
-  text-link-foreground: $link-color;
-  text-link-active-foreground: $link-hover-color;
-  editor-link-active-foreground: $link-hover-color;
+  text-link-foreground: var(--dh-color-editor-link-foreground);
+  text-link-active-foreground: var(--dh-color-editor-link-active-fg);
+  editor-link-active-foreground: var(--dh-color-editor-link-active-fg);
 }
diff --git a/packages/console/src/monaco/MonacoUtils.ts b/packages/console/src/monaco/MonacoUtils.ts
index 26a9fb54ee..49f39e2127 100644
--- a/packages/console/src/monaco/MonacoUtils.ts
+++ b/packages/console/src/monaco/MonacoUtils.ts
@@ -3,7 +3,7 @@ import shortid from 'shortid';
 /**
  * Exports a function for initializing monaco with the deephaven theme/config
  */
-import { Shortcut } from '@deephaven/components';
+import { resolveCssVariablesInRecord, Shortcut } from '@deephaven/components';
 import type { IdeSession } from '@deephaven/jsapi-types';
 import { assertNotNull } from '@deephaven/utils';
 import { find as linkifyFind } from 'linkifyjs';
@@ -12,7 +12,7 @@ import type { Environment } from 'monaco-editor';
 // @ts-ignore
 import { KeyCodeUtils } from 'monaco-editor/esm/vs/base/common/keyCodes.js';
 import Log from '@deephaven/log';
-import MonacoTheme from './MonacoTheme.module.scss';
+import MonacoThemeRaw from './MonacoTheme.module.scss';
 import PyLang from './lang/python';
 import GroovyLang from './lang/groovy';
 import ScalaLang from './lang/scala';
@@ -45,6 +45,10 @@ class MonacoUtils {
 
     const { registerLanguages, removeHashtag } = MonacoUtils;
 
+    const MonacoTheme = resolveCssVariablesInRecord(MonacoThemeRaw);
+    log.debug2('Monaco theme:', MonacoThemeRaw);
+    log.debug2('Monaco theme derived:', MonacoTheme);
+
     const dhDarkRules = [
       { token: '', foreground: removeHashtag(MonacoTheme.foreground) },
       { token: 'string', foreground: removeHashtag(MonacoTheme.string) },
@@ -154,7 +158,7 @@ class MonacoUtils {
       rules: dhDarkRules,
       colors: dhDarkColors,
     });
-    log.debug2('monaco theme: ', MonacoTheme);
+
     monaco.editor.setTheme('dh-dark');
 
     registerLanguages([DbLang, PyLang, GroovyLang, LogLang, ScalaLang]);
diff --git a/packages/dashboard-core-plugins/CHANGELOG.md b/packages/dashboard-core-plugins/CHANGELOG.md
index 4cb2fa43da..01e806bc44 100644
--- a/packages/dashboard-core-plugins/CHANGELOG.md
+++ b/packages/dashboard-core-plugins/CHANGELOG.md
@@ -3,6 +3,33 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [0.50.0](https://github.com/deephaven/web-client-ui/compare/v0.49.1...v0.50.0) (2023-10-13)
+
+
+### Bug Fixes
+
+* Handle deletion of unsaved copied file in NotebookPanel ([#1557](https://github.com/deephaven/web-client-ui/issues/1557)) ([4021aac](https://github.com/deephaven/web-client-ui/commit/4021aac3bc130f8eec84385c9aadcb4ecf0b995c)), closes [#1359](https://github.com/deephaven/web-client-ui/issues/1359)
+* Prompt for resetting layout ([#1552](https://github.com/deephaven/web-client-ui/issues/1552)) ([a273e64](https://github.com/deephaven/web-client-ui/commit/a273e6433a81f5500fb39992cac276bcbdbda753)), closes [#1250](https://github.com/deephaven/web-client-ui/issues/1250)
+
+
+* fix!: CSS based loading spinner (#1532) ([f06fbb0](https://github.com/deephaven/web-client-ui/commit/f06fbb01e27eaaeccab6031d8ff010ffee303d99)), closes [#1532](https://github.com/deephaven/web-client-ui/issues/1532) [#1531](https://github.com/deephaven/web-client-ui/issues/1531)
+
+
+### Features
+
+* Add copy/rename/delete options to notebook overflow menu ([#1551](https://github.com/deephaven/web-client-ui/issues/1551)) ([4441109](https://github.com/deephaven/web-client-ui/commit/4441109d10dcee8a9415b6884114ee5083fd1cc0)), closes [#1359](https://github.com/deephaven/web-client-ui/issues/1359)
+
+
+### BREAKING CHANGES
+
+* Inline LoadingSpinner instances will need to be
+decorated with `className="loading-spinner-vertical-align"` for vertical
+alignment to work as before
+
+
+
+
+
 ## [0.49.1](https://github.com/deephaven/web-client-ui/compare/v0.49.0...v0.49.1) (2023-09-27)
 
 **Note:** Version bump only for package @deephaven/dashboard-core-plugins
diff --git a/packages/dashboard-core-plugins/package.json b/packages/dashboard-core-plugins/package.json
index b6dd152e5b..dd11bfc45e 100644
--- a/packages/dashboard-core-plugins/package.json
+++ b/packages/dashboard-core-plugins/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@deephaven/dashboard-core-plugins",
-  "version": "0.49.1",
+  "version": "0.50.0",
   "description": "Deephaven Dashboard Core Plugins",
   "author": "Deephaven Data Labs LLC",
   "license": "Apache-2.0",
diff --git a/packages/dashboard-core-plugins/src/panels/FileExplorerPanel.tsx b/packages/dashboard-core-plugins/src/panels/FileExplorerPanel.tsx
index b3f8f53395..1b07cd85be 100644
--- a/packages/dashboard-core-plugins/src/panels/FileExplorerPanel.tsx
+++ b/packages/dashboard-core-plugins/src/panels/FileExplorerPanel.tsx
@@ -165,20 +165,10 @@ export class FileExplorerPanel extends React.Component<
       log.error('Invalid item in handleCopyItem', file);
       return;
     }
-    let newName = FileUtils.getCopyFileName(file.filename);
-    const checkNewName = async (): Promise<boolean> => {
-      try {
-        await fileStorage.info(newName);
-        return true;
-      } catch (error) {
-        return false;
-      }
-    };
-    // await in loop is fine here, this isn't a parallel task
-    // eslint-disable-next-line no-await-in-loop
-    while (await checkNewName()) {
-      newName = FileUtils.getCopyFileName(newName);
-    }
+    const newName = await FileUtils.getUniqueCopyFileName(
+      fileStorage,
+      file.filename
+    );
     await fileStorage.copyFile(file.filename, newName);
   }
 
diff --git a/packages/dashboard-core-plugins/src/panels/NotebookPanel.tsx b/packages/dashboard-core-plugins/src/panels/NotebookPanel.tsx
index a77867d221..5ec6ad73b7 100644
--- a/packages/dashboard-core-plugins/src/panels/NotebookPanel.tsx
+++ b/packages/dashboard-core-plugins/src/panels/NotebookPanel.tsx
@@ -681,15 +681,31 @@ class NotebookPanel extends Component<NotebookPanelProps, NotebookPanelState> {
     this.focus();
   }
 
-  handleCopy(): void {
+  async handleCopy(): Promise<void> {
+    const { fileStorage, glEventHub, session } = this.props;
     const { fileMetadata, settings } = this.state;
     assertNotNull(fileMetadata);
-    const content = this.getNotebookValue();
     const { language } = settings;
     const { itemName } = fileMetadata;
-    const copyName = FileUtils.getCopyFileName(itemName);
+    const copyName = await FileUtils.getUniqueCopyFileName(
+      fileStorage,
+      itemName
+    );
     log.debug('handleCopy', fileMetadata, itemName, copyName);
-    this.createNotebook(copyName, language, content);
+    await fileStorage.copyFile(itemName, copyName);
+    const newFileMetadata = { id: copyName, itemName: copyName };
+    const notebookSettings = {
+      value: null,
+      language,
+    };
+    glEventHub.emit(
+      NotebookEvent.SELECT_NOTEBOOK,
+      session,
+      language,
+      notebookSettings,
+      newFileMetadata,
+      true
+    );
   }
 
   handleDelete(): void {
@@ -697,7 +713,7 @@ class NotebookPanel extends Component<NotebookPanelProps, NotebookPanelState> {
     this.setState({ showDeleteModal: true });
   }
 
-  handleDeleteConfirm(): void {
+  async handleDeleteConfirm(): Promise<void> {
     const { fileStorage, glContainer, glEventHub } = this.props;
     const { fileMetadata } = this.state;
 
@@ -708,7 +724,11 @@ class NotebookPanel extends Component<NotebookPanelProps, NotebookPanelState> {
       return;
     }
 
-    if (FileUtils.hasPath(fileMetadata.itemName)) {
+    if (
+      FileUtils.hasPath(fileMetadata.itemName) &&
+      // eslint-disable-next-line @typescript-eslint/strict-boolean-expressions
+      (await FileUtils.fileExists(fileStorage, fileMetadata.itemName))
+    ) {
       glEventHub.emit(NotebookEvent.CLOSE_FILE, fileMetadata, { force: true });
       fileStorage.deleteFile(fileMetadata.itemName);
     } else {
diff --git a/packages/dashboard/CHANGELOG.md b/packages/dashboard/CHANGELOG.md
index 7d1c1a7b95..f733824ca4 100644
--- a/packages/dashboard/CHANGELOG.md
+++ b/packages/dashboard/CHANGELOG.md
@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [0.50.0](https://github.com/deephaven/web-client-ui/compare/v0.49.1...v0.50.0) (2023-10-13)
+
+**Note:** Version bump only for package @deephaven/dashboard
+
+
+
+
+
 ## [0.49.1](https://github.com/deephaven/web-client-ui/compare/v0.49.0...v0.49.1) (2023-09-27)
 
 
diff --git a/packages/dashboard/package.json b/packages/dashboard/package.json
index 0b6dc4e291..e6e67d8245 100644
--- a/packages/dashboard/package.json
+++ b/packages/dashboard/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@deephaven/dashboard",
-  "version": "0.49.1",
+  "version": "0.50.0",
   "description": "Deephaven Dashboard",
   "author": "Deephaven Data Labs LLC",
   "license": "Apache-2.0",
diff --git a/packages/embed-chart/CHANGELOG.md b/packages/embed-chart/CHANGELOG.md
index 12f42d37cd..9b27839861 100644
--- a/packages/embed-chart/CHANGELOG.md
+++ b/packages/embed-chart/CHANGELOG.md
@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [0.50.0](https://github.com/deephaven/web-client-ui/compare/v0.49.1...v0.50.0) (2023-10-13)
+
+
+### Features
+
+* Theme Plugin Loading ([#1524](https://github.com/deephaven/web-client-ui/issues/1524)) ([a9541b1](https://github.com/deephaven/web-client-ui/commit/a9541b108f1d998bb2713e70642f5a54aaf8bd97)), closes [#1a171](https://github.com/deephaven/web-client-ui/issues/1a171) [#4c7](https://github.com/deephaven/web-client-ui/issues/4c7) [#1a171](https://github.com/deephaven/web-client-ui/issues/1a171) [#4c7](https://github.com/deephaven/web-client-ui/issues/4c7) [#4c7](https://github.com/deephaven/web-client-ui/issues/4c7) [#1530](https://github.com/deephaven/web-client-ui/issues/1530)
+
+
+
+
+
 ## [0.49.1](https://github.com/deephaven/web-client-ui/compare/v0.49.0...v0.49.1) (2023-09-27)
 
 **Note:** Version bump only for package @deephaven/embed-chart
diff --git a/packages/embed-chart/package.json b/packages/embed-chart/package.json
index e5e3eb66df..d63eeb80ae 100644
--- a/packages/embed-chart/package.json
+++ b/packages/embed-chart/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@deephaven/embed-chart",
-  "version": "0.49.1",
+  "version": "0.50.0",
   "description": "Deephaven Embedded Chart",
   "author": "Deephaven Data Labs LLC",
   "license": "Apache-2.0",
@@ -30,7 +30,7 @@
   "scripts": {
     "analyze": "source-map-explorer build/assets/*.js --no-border-checks",
     "start": "vite",
-    "build": "vite build",
+    "build": "NODE_OPTIONS='--max-old-space-size=4096' vite build",
     "preview": "vite preview"
   },
   "devDependencies": {
diff --git a/packages/embed-grid/CHANGELOG.md b/packages/embed-grid/CHANGELOG.md
index 92ffc6dcc4..69ee659283 100644
--- a/packages/embed-grid/CHANGELOG.md
+++ b/packages/embed-grid/CHANGELOG.md
@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [0.50.0](https://github.com/deephaven/web-client-ui/compare/v0.49.1...v0.50.0) (2023-10-13)
+
+
+### Features
+
+* Theme Plugin Loading ([#1524](https://github.com/deephaven/web-client-ui/issues/1524)) ([a9541b1](https://github.com/deephaven/web-client-ui/commit/a9541b108f1d998bb2713e70642f5a54aaf8bd97)), closes [#1a171](https://github.com/deephaven/web-client-ui/issues/1a171) [#4c7](https://github.com/deephaven/web-client-ui/issues/4c7) [#1a171](https://github.com/deephaven/web-client-ui/issues/1a171) [#4c7](https://github.com/deephaven/web-client-ui/issues/4c7) [#4c7](https://github.com/deephaven/web-client-ui/issues/4c7) [#1530](https://github.com/deephaven/web-client-ui/issues/1530)
+
+
+
+
+
 ## [0.49.1](https://github.com/deephaven/web-client-ui/compare/v0.49.0...v0.49.1) (2023-09-27)
 
 
diff --git a/packages/embed-grid/package.json b/packages/embed-grid/package.json
index 2d6785eb48..6b2b20056e 100644
--- a/packages/embed-grid/package.json
+++ b/packages/embed-grid/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@deephaven/embed-grid",
-  "version": "0.49.1",
+  "version": "0.50.0",
   "description": "Deephaven Embedded Grid",
   "author": "Deephaven Data Labs LLC",
   "license": "Apache-2.0",
diff --git a/packages/eslint-config/CHANGELOG.md b/packages/eslint-config/CHANGELOG.md
index edc97add21..8e77efde8d 100644
--- a/packages/eslint-config/CHANGELOG.md
+++ b/packages/eslint-config/CHANGELOG.md
@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [0.50.0](https://github.com/deephaven/web-client-ui/compare/v0.49.1...v0.50.0) (2023-10-13)
+
+**Note:** Version bump only for package @deephaven/eslint-config
+
+
+
+
+
 # [0.49.0](https://github.com/deephaven/web-client-ui/compare/v0.48.0...v0.49.0) (2023-09-15)
 
 **Note:** Version bump only for package @deephaven/eslint-config
diff --git a/packages/eslint-config/package.json b/packages/eslint-config/package.json
index 5502532107..673b64c68b 100644
--- a/packages/eslint-config/package.json
+++ b/packages/eslint-config/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@deephaven/eslint-config",
-  "version": "0.49.0",
+  "version": "0.50.0",
   "description": "Deephaven ESLint configuration",
   "repository": {
     "type": "git",
diff --git a/packages/file-explorer/CHANGELOG.md b/packages/file-explorer/CHANGELOG.md
index 33f73d7fbc..8815a46a34 100644
--- a/packages/file-explorer/CHANGELOG.md
+++ b/packages/file-explorer/CHANGELOG.md
@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [0.50.0](https://github.com/deephaven/web-client-ui/compare/v0.49.1...v0.50.0) (2023-10-13)
+
+
+### Bug Fixes
+
+* Handle deletion of unsaved copied file in NotebookPanel ([#1557](https://github.com/deephaven/web-client-ui/issues/1557)) ([4021aac](https://github.com/deephaven/web-client-ui/commit/4021aac3bc130f8eec84385c9aadcb4ecf0b995c)), closes [#1359](https://github.com/deephaven/web-client-ui/issues/1359)
+
+
+
+
+
 ## [0.49.1](https://github.com/deephaven/web-client-ui/compare/v0.49.0...v0.49.1) (2023-09-27)
 
 **Note:** Version bump only for package @deephaven/file-explorer
diff --git a/packages/file-explorer/package.json b/packages/file-explorer/package.json
index 6c88007afe..2edca5b01c 100644
--- a/packages/file-explorer/package.json
+++ b/packages/file-explorer/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@deephaven/file-explorer",
-  "version": "0.49.1",
+  "version": "0.50.0",
   "description": "Deephaven File Explorer React component",
   "author": "Deephaven Data Labs LLC",
   "license": "Apache-2.0",
diff --git a/packages/file-explorer/src/FileUtils.ts b/packages/file-explorer/src/FileUtils.ts
index 6bae38bbb9..6acaae7f58 100644
--- a/packages/file-explorer/src/FileUtils.ts
+++ b/packages/file-explorer/src/FileUtils.ts
@@ -1,4 +1,6 @@
 import { ValidationError } from '@deephaven/utils';
+import FileNotFoundError from './FileNotFoundError';
+import { FileStorage } from './FileStorage';
 
 /**
  * A basic list of some common MIME types.
@@ -16,6 +18,22 @@ export enum MIME_TYPE {
  * Collection of utils for operating on file names
  */
 export class FileUtils {
+  static async fileExists(
+    fileStorage: FileStorage,
+    name: string
+  ): Promise<boolean> {
+    try {
+      await fileStorage.info(name);
+      return true;
+    } catch (e) {
+      // Should probably make sure it's a `FileNotFoundError`, and re-throw the error if it is not
+      if (!(e instanceof FileNotFoundError)) {
+        throw e;
+      }
+      return false;
+    }
+  }
+
   /**
    * Format file extension
    * @param extension File extension to format, defaults to empty string
@@ -80,6 +98,19 @@ export class FileUtils {
     return extension !== null ? `${copyName}.${extension}` : copyName;
   }
 
+  static async getUniqueCopyFileName(
+    fileStorage: FileStorage,
+    originalName: string
+  ): Promise<string> {
+    let copyName = FileUtils.getCopyFileName(originalName);
+    // await in loop is fine here, this isn't a parallel task
+    // eslint-disable-next-line no-await-in-loop
+    while (await FileUtils.fileExists(fileStorage, copyName)) {
+      copyName = FileUtils.getCopyFileName(copyName);
+    }
+    return copyName;
+  }
+
   /**
    * Return a MIME type for the provided file
    * @param name The file name to get the type for
diff --git a/packages/filters/CHANGELOG.md b/packages/filters/CHANGELOG.md
index 0a3aa5ce6e..0ab2727f98 100644
--- a/packages/filters/CHANGELOG.md
+++ b/packages/filters/CHANGELOG.md
@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [0.50.0](https://github.com/deephaven/web-client-ui/compare/v0.49.1...v0.50.0) (2023-10-13)
+
+**Note:** Version bump only for package @deephaven/filters
+
+
+
+
+
 # [0.49.0](https://github.com/deephaven/web-client-ui/compare/v0.48.0...v0.49.0) (2023-09-15)
 
 **Note:** Version bump only for package @deephaven/filters
diff --git a/packages/filters/package.json b/packages/filters/package.json
index 1f8021e1ba..dd76e56e05 100644
--- a/packages/filters/package.json
+++ b/packages/filters/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@deephaven/filters",
-  "version": "0.49.0",
+  "version": "0.50.0",
   "description": "Deephaven Filters",
   "author": "Deephaven Data Labs LLC",
   "license": "Apache-2.0",
diff --git a/packages/golden-layout/CHANGELOG.md b/packages/golden-layout/CHANGELOG.md
index 536a807677..0fa72692f4 100644
--- a/packages/golden-layout/CHANGELOG.md
+++ b/packages/golden-layout/CHANGELOG.md
@@ -3,6 +3,30 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [0.50.0](https://github.com/deephaven/web-client-ui/compare/v0.49.1...v0.50.0) (2023-10-13)
+
+
+* fix!: CSS based loading spinner (#1532) ([f06fbb0](https://github.com/deephaven/web-client-ui/commit/f06fbb01e27eaaeccab6031d8ff010ffee303d99)), closes [#1532](https://github.com/deephaven/web-client-ui/issues/1532) [#1531](https://github.com/deephaven/web-client-ui/issues/1531)
+
+
+### Features
+
+* Monaco theming ([#1560](https://github.com/deephaven/web-client-ui/issues/1560)) ([4eda17c](https://github.com/deephaven/web-client-ui/commit/4eda17c82f6c177a11ba600d6f43c4f36915f6bd)), closes [#1542](https://github.com/deephaven/web-client-ui/issues/1542)
+* Theme Plugin Loading ([#1524](https://github.com/deephaven/web-client-ui/issues/1524)) ([a9541b1](https://github.com/deephaven/web-client-ui/commit/a9541b108f1d998bb2713e70642f5a54aaf8bd97)), closes [#1a171](https://github.com/deephaven/web-client-ui/issues/1a171) [#4c7](https://github.com/deephaven/web-client-ui/issues/4c7) [#1a171](https://github.com/deephaven/web-client-ui/issues/1a171) [#4c7](https://github.com/deephaven/web-client-ui/issues/4c7) [#4c7](https://github.com/deephaven/web-client-ui/issues/4c7) [#1530](https://github.com/deephaven/web-client-ui/issues/1530)
+
+
+### BREAKING CHANGES
+
+* Theme variables have to be present on body to avoid
+Monaco init failing
+* Inline LoadingSpinner instances will need to be
+decorated with `className="loading-spinner-vertical-align"` for vertical
+alignment to work as before
+
+
+
+
+
 ## [0.49.1](https://github.com/deephaven/web-client-ui/compare/v0.49.0...v0.49.1) (2023-09-27)
 
 
diff --git a/packages/golden-layout/package.json b/packages/golden-layout/package.json
index d44720406d..58b863a4b8 100644
--- a/packages/golden-layout/package.json
+++ b/packages/golden-layout/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@deephaven/golden-layout",
-  "version": "0.49.1",
+  "version": "0.50.0",
   "author": "Deephaven Data Labs LLC",
   "license": "Apache-2.0",
   "description": "A multi-screen javascript Layout manager",
diff --git a/packages/golden-layout/scss/goldenlayout-dark-theme.scss b/packages/golden-layout/scss/goldenlayout-dark-theme.scss
index d80d933f19..8bf2c972a7 100644
--- a/packages/golden-layout/scss/goldenlayout-dark-theme.scss
+++ b/packages/golden-layout/scss/goldenlayout-dark-theme.scss
@@ -63,7 +63,7 @@ body:not(.lm_dragging) .lm_header .lm_tab .lm_close_tab:hover {
 
 // Entire GoldenLayout Container, if a background is set, it is visible as color of "pane header" and "splitters" (if these latest has opacity very low)
 .lm_goldenlayout {
-  background: var(--dh-background-color, $background);
+  background: var(--dh-color-background, $background);
   position: absolute;
 }
 
diff --git a/packages/grid/CHANGELOG.md b/packages/grid/CHANGELOG.md
index 3569805493..dd8ac2465b 100644
--- a/packages/grid/CHANGELOG.md
+++ b/packages/grid/CHANGELOG.md
@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [0.50.0](https://github.com/deephaven/web-client-ui/compare/v0.49.1...v0.50.0) (2023-10-13)
+
+
+### Features
+
+* data bar render from API ([#1415](https://github.com/deephaven/web-client-ui/issues/1415)) ([ee7d1c1](https://github.com/deephaven/web-client-ui/commit/ee7d1c108e86973b4c6855e482dce21d665dfe28)), closes [#0000](https://github.com/deephaven/web-client-ui/issues/0000) [#FF0000](https://github.com/deephaven/web-client-ui/issues/FF0000) [#FFFF00](https://github.com/deephaven/web-client-ui/issues/FFFF00) [#FFFF00](https://github.com/deephaven/web-client-ui/issues/FFFF00) [#00FF00](https://github.com/deephaven/web-client-ui/issues/00FF00)
+
+
+
+
+
 # [0.49.0](https://github.com/deephaven/web-client-ui/compare/v0.48.0...v0.49.0) (2023-09-15)
 
 
diff --git a/packages/grid/package.json b/packages/grid/package.json
index 8781faa097..a3c8c458bb 100644
--- a/packages/grid/package.json
+++ b/packages/grid/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@deephaven/grid",
-  "version": "0.49.0",
+  "version": "0.50.0",
   "description": "Deephaven React grid component",
   "author": "Deephaven Data Labs LLC",
   "license": "Apache-2.0",
diff --git a/packages/grid/src/GridMetricCalculator.ts b/packages/grid/src/GridMetricCalculator.ts
index e9c2a9f950..4b36b92589 100644
--- a/packages/grid/src/GridMetricCalculator.ts
+++ b/packages/grid/src/GridMetricCalculator.ts
@@ -1656,7 +1656,7 @@ export class GridMetricCalculator {
     treePaddingX: number = this.calculateTreePaddingX(state)
   ): number {
     const { theme } = state;
-    const { autoSizeColumns, minColumnWidth } = theme;
+    const { autoSizeColumns, minColumnWidth, maxColumnWidth } = theme;
     if (!autoSizeColumns) {
       const { columnWidth } = theme;
       return columnWidth;
@@ -1667,6 +1667,7 @@ export class GridMetricCalculator {
     const cachedValue = this.calculatedColumnWidths.get(modelColumn);
     let columnWidth = Math.ceil(Math.max(headerWidth, dataWidth));
     columnWidth = Math.max(minColumnWidth, columnWidth);
+    columnWidth = Math.min(maxColumnWidth, columnWidth);
     if (cachedValue != null && cachedValue > columnWidth) {
       columnWidth = cachedValue;
     } else {
diff --git a/packages/grid/src/GridTheme.ts b/packages/grid/src/GridTheme.ts
index df3c55a2a3..13e4137c53 100644
--- a/packages/grid/src/GridTheme.ts
+++ b/packages/grid/src/GridTheme.ts
@@ -105,6 +105,7 @@ export type GridTheme = {
   columnWidth: number;
   minRowHeight: number;
   minColumnWidth: number;
+  maxColumnWidth: number;
 
   // Default row/column header/footers width/height
   columnHeaderHeight: number;
@@ -206,6 +207,7 @@ const defaultTheme: GridTheme = Object.freeze({
   columnWidth: 100,
   minRowHeight: 20,
   minColumnWidth: 55,
+  maxColumnWidth: 600,
   columnHeaderHeight: 20,
   rowHeaderWidth: 30,
   rowFooterWidth: 0,
diff --git a/packages/icons/CHANGELOG.md b/packages/icons/CHANGELOG.md
index 8206b60207..ac7348edda 100644
--- a/packages/icons/CHANGELOG.md
+++ b/packages/icons/CHANGELOG.md
@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [0.50.0](https://github.com/deephaven/web-client-ui/compare/v0.49.1...v0.50.0) (2023-10-13)
+
+**Note:** Version bump only for package @deephaven/icons
+
+
+
+
+
 # [0.49.0](https://github.com/deephaven/web-client-ui/compare/v0.48.0...v0.49.0) (2023-09-15)
 
 **Note:** Version bump only for package @deephaven/icons
diff --git a/packages/icons/package.json b/packages/icons/package.json
index c3397ad0dc..296d9fa492 100644
--- a/packages/icons/package.json
+++ b/packages/icons/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@deephaven/icons",
-  "version": "0.49.0",
+  "version": "0.50.0",
   "description": "Icons used in Deephaven client apps. Extends vscode-codicons to be font-awesome svg-core compatible and adds additional icons in a similar style.",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
diff --git a/packages/iris-grid/CHANGELOG.md b/packages/iris-grid/CHANGELOG.md
index 760d84233f..69f113e833 100644
--- a/packages/iris-grid/CHANGELOG.md
+++ b/packages/iris-grid/CHANGELOG.md
@@ -3,6 +3,32 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [0.50.0](https://github.com/deephaven/web-client-ui/compare/v0.49.1...v0.50.0) (2023-10-13)
+
+
+### Bug Fixes
+
+* Change display of rollup key columns from null to empty string ([#1563](https://github.com/deephaven/web-client-ui/issues/1563)) ([327bcb6](https://github.com/deephaven/web-client-ui/commit/327bcb649d47bff648a71fd7f979a63094650b25)), closes [#1483](https://github.com/deephaven/web-client-ui/issues/1483)
+
+
+* fix!: CSS based loading spinner (#1532) ([f06fbb0](https://github.com/deephaven/web-client-ui/commit/f06fbb01e27eaaeccab6031d8ff010ffee303d99)), closes [#1532](https://github.com/deephaven/web-client-ui/issues/1532) [#1531](https://github.com/deephaven/web-client-ui/issues/1531)
+
+
+### Features
+
+* data bar render from API ([#1415](https://github.com/deephaven/web-client-ui/issues/1415)) ([ee7d1c1](https://github.com/deephaven/web-client-ui/commit/ee7d1c108e86973b4c6855e482dce21d665dfe28)), closes [#0000](https://github.com/deephaven/web-client-ui/issues/0000) [#FF0000](https://github.com/deephaven/web-client-ui/issues/FF0000) [#FFFF00](https://github.com/deephaven/web-client-ui/issues/FFFF00) [#FFFF00](https://github.com/deephaven/web-client-ui/issues/FFFF00) [#00FF00](https://github.com/deephaven/web-client-ui/issues/00FF00)
+
+
+### BREAKING CHANGES
+
+* Inline LoadingSpinner instances will need to be
+decorated with `className="loading-spinner-vertical-align"` for vertical
+alignment to work as before
+
+
+
+
+
 ## [0.49.1](https://github.com/deephaven/web-client-ui/compare/v0.49.0...v0.49.1) (2023-09-27)
 
 
diff --git a/packages/iris-grid/package.json b/packages/iris-grid/package.json
index a8c3fd17e4..0aa0decd93 100644
--- a/packages/iris-grid/package.json
+++ b/packages/iris-grid/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@deephaven/iris-grid",
-  "version": "0.49.1",
+  "version": "0.50.0",
   "description": "Deephaven Iris Grid",
   "author": "Deephaven Data Labs LLC",
   "license": "Apache-2.0",
diff --git a/packages/iris-grid/src/IrisGrid.tsx b/packages/iris-grid/src/IrisGrid.tsx
index fbeee84b30..a999e1afc3 100644
--- a/packages/iris-grid/src/IrisGrid.tsx
+++ b/packages/iris-grid/src/IrisGrid.tsx
@@ -131,7 +131,7 @@ import ToastBottomBar from './ToastBottomBar';
 import IrisGridMetricCalculator from './IrisGridMetricCalculator';
 import IrisGridModelUpdater from './IrisGridModelUpdater';
 import IrisGridRenderer from './IrisGridRenderer';
-import IrisGridTheme, { IrisGridThemeType } from './IrisGridTheme';
+import { createDefaultIrisGridTheme, IrisGridThemeType } from './IrisGridTheme';
 import ColumnStatistics from './ColumnStatistics';
 import './IrisGrid.scss';
 import AdvancedFilterCreator from './AdvancedFilterCreator';
@@ -508,7 +508,7 @@ export class IrisGrid extends Component<IrisGridProps, IrisGridState> {
     canCopy: true,
     canDownloadCsv: true,
     frozenColumns: null,
-    theme: IrisGridTheme,
+    theme: null,
     canToggleSearch: true,
   };
 
@@ -1337,16 +1337,25 @@ export class IrisGrid extends Component<IrisGridProps, IrisGridState> {
 
   getCachedTheme = memoize(
     (
-      theme: GridThemeType,
+      theme: GridThemeType | null,
       isEditable: boolean,
       floatingRowCount: number
-    ): Partial<IrisGridThemeType> => ({
-      ...IrisGridTheme,
-      ...theme,
-      autoSelectRow: !isEditable,
+    ): Partial<IrisGridThemeType> => {
+      const defaultTheme = createDefaultIrisGridTheme();
+
       // We only show the row footers when we have floating rows for aggregations
-      rowFooterWidth: floatingRowCount > 0 ? theme.rowFooterWidth : 0,
-    }),
+      const rowFooterWidth =
+        floatingRowCount > 0
+          ? theme?.rowFooterWidth ?? defaultTheme.rowFooterWidth
+          : 0;
+
+      return {
+        ...defaultTheme,
+        ...theme,
+        autoSelectRow: !isEditable,
+        rowFooterWidth,
+      };
+    },
     { max: 1 }
   );
 
diff --git a/packages/iris-grid/src/IrisGridTheme.module.scss b/packages/iris-grid/src/IrisGridTheme.module.scss
index 41e50c5799..a74d9c267e 100644
--- a/packages/iris-grid/src/IrisGridTheme.module.scss
+++ b/packages/iris-grid/src/IrisGridTheme.module.scss
@@ -1,103 +1,98 @@
 /* stylelint-disable */
 @import '@deephaven/components/scss/custom.scss';
 
-$selection-color: rgba($blue, 0.09);
 $selection-outline-color: $blue;
-$selection-outline-casing-color: $gray-900;
 $font-size: 12px;
 $row-height: 19px;
-$row-hover-bg: mix($gray-600, $gray-700, 50%);
 $header-bg: $content-bg;
 $header-separator-color: $gray-900;
 $header-height: 30px;
 
 :export {
-  grid-bg: $gray-900;
+  grid-bg: var(--dh-color-grid-bg);
   font:
     $font-size Fira Sans,
     sans-serif; // must be preloaded
-  white: $white;
-  black: $black;
-  header-bg: $header-bg;
-  header-color: $foreground;
+  white: var(--dh-color-white);
+  black: var(--dh-color-black);
+  header-bg: var(--dh-color-grid-header-bg);
+  header-color: var(--dh-color-grid-header-text);
   header-height: $header-height;
-  header-separator-color: $header-separator-color;
-  header-separator-hover-color: $gray-400;
-  header-hidden-separator-hover-color: $primary;
-  header-sort-bar-color: $purple;
-  header-reverse-bar-color: $green-dark;
-  header-bar-casing-color: $gray-900;
+  header-separator-color: var(--dh-color-grid-header-separator);
+  header-separator-hover-color: var(--dh-color-grid-header-separator-hover);
+  header-hidden-separator-hover-color: var(
+    --dh-color-grid-header-separator-hidden-hover
+  );
+  header-sort-bar-color: var(--dh-color-grid-header-sort-bar);
+  header-reverse-bar-color: var(--dh-color-grid-header-reverse-bar);
+  header-bar-casing-color: var(--dh-color-grid-header-bar-casing);
   header-font:
     600 $font-size Fira Sans,
     sans-serif; // must be preloaded
   row-height: $row-height;
-  row-background-colors: $gray-800 $content-bg;
-  selection-color: $selection-color;
-  selection-outline-color: $selection-outline-color;
-  selection-outline-casing-color: $selection-outline-casing-color;
-  row-hover-bg: $row-hover-bg;
-  selected-row-hover-bg: rgba($blue, 0.25);
-  scroll-bar-active-selection-tick-color: rgba($blue, 0.5);
+  row-background-colors: var(--dh-color-grid-row-0-bg)
+    var(--dh-color-grid-row-1-bg);
+  selection-color: var(--dh-color-grid-selection);
+  selection-outline-color: var(--dh-color-grid-selection-outline);
+  selection-outline-casing-color: var(--dh-color-grid-selection-outline-casing);
+  row-hover-bg: var(--dh-color-grid-row-hover-bg);
+  selected-row-hover-bg: var(--dh-color-grid-row-hover-bg-selected);
+  scroll-bar-active-selection-tick-color: var(
+    --dh-color-grid-scroll-bar-active-selection-tick
+  );
 
-  scroll-bar-bg: $gray-850;
-  scroll-bar-hover-bg: $gray-800;
-  scroll-bar-casing-color: $gray-600;
-  scroll-bar-corner-color: $gray-850;
-  scroll-bar-color: $gray-500;
-  scroll-bar-hover-color: $gray-400;
-  scroll-bar-active-color: $gray-300;
+  scroll-bar-bg: var(--dh-color-grid-scroll-bar-bg);
+  scroll-bar-hover-bg: var(--dh-color-grid-scroll-bar-hover-bg);
+  scroll-bar-casing-color: var(--dh-color-grid-scroll-bar-casing);
+  scroll-bar-corner-color: var(--dh-color-grid-scroll-bar-corner);
+  scroll-bar-color: var(--dh-color-grid-scroll-bar);
+  scroll-bar-hover-color: var(--dh-color-grid-scroll-bar-hover);
+  scroll-bar-active-color: var(--dh-color-grid-scroll-bar-active);
 
-  text-color: $white;
-  hyperlink-color: $primary;
-  positive-number-color: $green;
-  negative-number-color: $red;
-  zero-number-color: $yellow;
-  date-color: $yellow;
-  pending-text-color: lighten($yellow, 10%);
-  error-text-color: $danger;
-  null-string-color: $gray-400;
+  text-color: var(--dh-color-grid-text);
+  hyperlink-color: var(--dh-color-grid-text-hyperlink);
+  positive-number-color: var(--dh-color-grid-number-positive);
+  negative-number-color: var(--dh-color-grid-number-negative);
+  zero-number-color: var(--dh-color-grid-number-zero);
+  date-color: var(--dh-color-grid-date);
+  pending-text-color: var(--dh-color-grid-text-pending);
+  error-text-color: var(--dh-color-grid-text-error);
+  null-string-color: var(--dh-color-grid-string-null);
 
-  $filter-color: $primary; // local to just the following
-  filter-bar-active-bg: scale-color(
-    $filter-color,
-    $saturation: -65%,
-    $lightness: -40%
+  filter-bar-active-bg: var(--dh-color-grid-filter-bar-active-bg);
+  filter-bar-active-color: var(--dh-color-grid-filter-bar-active);
+  filter-bar-expanded-bg: var(--dh-color-grid-filter-bar-expanded-bg);
+  filter-bar-expanded-active-bg: var(
+    --dh-color-grid-filter-bar-expanded-active-bg
   );
-  filter-bar-active-color: $filter-color;
-  filter-bar-expanded-bg: $gray-800;
-  filter-bar-expanded-active-bg: scale-color(
-    $filter-color,
-    $saturation: -75%,
-    $lightness: -60%
+  filter-bar-expanded-active-cell-bg: var(
+    --dh-color-grid-filter-bar-expanded-active-cell-bg
   );
-  filter-bar-expanded-active-cell-bg: scale-color(
-    $filter-color,
-    $saturation: -50%,
-    $lightness: -40%
-  );
-  filter-bar-separator-color: $gray-400;
-  filter-bar-error-color: $danger;
-  filter-icon-color: $filter-color;
+  filter-bar-separator-color: var(--dh-color-grid-filter-bar-separator);
+  filter-bar-error-color: var(--dh-color-grid-filter-bar-error);
+  filter-icon-color: var(--dh-color-grid-filter-icon);
 
-  scrim-color: $gray-900;
-  context-menu-sort-icon-color: $purple;
-  context-menu-reverse-icon-color: $green-dark;
-  linker-column-hover-bg: rgba($blue, 0.09);
-  tree-line-color: $gray-500;
-  tree-marker-color: $gray-300;
-  tree-marker-hover-color: $gray-100;
-  grouped-column-divider-color: $black;
+  scrim-color: var(--dh-color-grid-scrim);
+  context-menu-sort-icon-color: var(--dh-color-grid-context-menu-sort-icon);
+  context-menu-reverse-icon-color: var(
+    --dh-color-grid-context-menu-reverse-icon
+  );
+  linker-column-hover-bg: var(--dh-color-grid-column-linker-hover-bg);
+  tree-line-color: var(--dh-color-grid-tree-line);
+  tree-marker-color: var(--dh-color-grid-tree-marker);
+  tree-marker-hover-color: var(--dh-color-grid-tree-marker-hover);
+  grouped-column-divider-color: var(--dh-color-grid-column-grouped-divider);
 
-  floating-grid-row-color: $gray-600;
-  floating-row-background-colors: $gray-700;
-  floating-divider-inner-color: $gray-700;
-  floating-divider-outer-color: $gray-900;
+  floating-grid-row-color: var(--dh-color-grid-floating-row);
+  floating-row-background-colors: var(--dh-color-grid-floating-row-bg);
+  floating-divider-inner-color: var(--dh-color-grid-floating-divider-inner);
+  floating-divider-outer-color: var(--dh-color-grid-floating-divider-outer);
 
-  overflow-button-color: $gray-300;
-  overflow-button-hover-color: $gray-100;
+  overflow-button-color: var(--dh-color-grid-overflow-button);
+  overflow-button-hover-color: var(--dh-color-grid-overflow-button-hover);
 
-  zero-line-color: $gray-500;
-  positive-bar-color: $green;
-  negative-bar-color: $red;
-  marker-bar-color: $white;
+  zero-line-color: var(--dh-color-grid-data-bar-zero-line);
+  positive-bar-color: var(--dh-color-grid-data-bar-positive);
+  negative-bar-color: var(--dh-color-grid-data-bar-negative);
+  marker-bar-color: var(--dh-color-grid-data-bar-marker);
 }
diff --git a/packages/iris-grid/src/IrisGridTheme.test.ts b/packages/iris-grid/src/IrisGridTheme.test.ts
new file mode 100644
index 0000000000..4bb745df15
--- /dev/null
+++ b/packages/iris-grid/src/IrisGridTheme.test.ts
@@ -0,0 +1,39 @@
+import { resolveCssVariablesInRecord } from '@deephaven/components';
+import { TestUtils } from '@deephaven/utils';
+import { createDefaultIrisGridTheme } from './IrisGridTheme';
+
+const { asMock } = TestUtils;
+
+jest.mock('@deephaven/components', () => ({
+  ...jest.requireActual('@deephaven/components'),
+  resolveCssVariablesInRecord: jest.fn(),
+}));
+
+beforeEach(() => {
+  jest.clearAllMocks();
+  expect.hasAssertions();
+});
+
+describe('createDefaultIrisGridTheme', () => {
+  // Proxy for IrisGridTheme
+  const identityProxy = new Proxy(
+    {},
+    {
+      get(_target, name) {
+        return `IrisGridTheme['${String(name)}']`;
+      },
+    }
+  );
+
+  beforeEach(() => {
+    asMock(resolveCssVariablesInRecord)
+      .mockName('resolveCssVariablesInRecord')
+      .mockReturnValue(identityProxy);
+  });
+
+  it('should derive the default Iris grid theme', () => {
+    const theme = createDefaultIrisGridTheme();
+    expect(resolveCssVariablesInRecord).toHaveBeenCalled();
+    expect(theme).toMatchSnapshot();
+  });
+});
diff --git a/packages/iris-grid/src/IrisGridTheme.ts b/packages/iris-grid/src/IrisGridTheme.ts
index 1d3423fe6a..500dbf6ea3 100644
--- a/packages/iris-grid/src/IrisGridTheme.ts
+++ b/packages/iris-grid/src/IrisGridTheme.ts
@@ -1,6 +1,10 @@
+import { resolveCssVariablesInRecord } from '@deephaven/components';
 import type { GridThemeType } from '@deephaven/grid';
+import Log from '@deephaven/log';
 import { GridColor, NullableGridColor } from '@deephaven/grid/src/GridTheme';
-import IrisGridTheme from './IrisGridTheme.module.scss';
+import IrisGridThemeRaw from './IrisGridTheme.module.scss';
+
+const log = Log.module('IrisGridTheme');
 
 export type IrisGridThemeType = GridThemeType & {
   filterBarCollapsedHeight: number;
@@ -39,107 +43,120 @@ export type IrisGridThemeType = GridThemeType & {
   floatingGridRowColor: NullableGridColor;
 };
 
-const theme: Partial<IrisGridThemeType> = Object.freeze({
-  backgroundColor: IrisGridTheme['grid-bg'],
-  white: IrisGridTheme.white,
-  black: IrisGridTheme.black,
-  font: IrisGridTheme.font,
-  headerBackgroundColor: IrisGridTheme['header-bg'],
-  headerColor: IrisGridTheme['header-color'],
-  headerSeparatorColor: IrisGridTheme['header-separator-color'],
-  headerSeparatorHoverColor: IrisGridTheme['header-separator-hover-color'],
-  headerHiddenSeparatorHoverColor:
-    IrisGridTheme['header-hidden-separator-hover-color'],
-  headerSortBarColor: IrisGridTheme['header-sort-bar-color'],
-  headerReverseBarColor: IrisGridTheme['header-reverse-bar-color'],
-  headerBarCasingColor: IrisGridTheme['header-bar-casing-color'],
-  headerFont: IrisGridTheme['header-font'],
-  rowBackgroundColors: IrisGridTheme['row-background-colors'],
-  rowHoverBackgroundColor: IrisGridTheme['row-hover-bg'],
-  selectionColor: IrisGridTheme['selection-color'],
-  selectionOutlineColor: IrisGridTheme['selection-outline-color'],
-  selectionOutlineCasingColor: IrisGridTheme['selection-outline-casing-color'],
-  selectedRowHoverBackgroundColor: IrisGridTheme['selected-row-hover-bg'],
-  scrollBarBackgroundColor: IrisGridTheme['scroll-bar-bg'],
-  scrollBarHoverBackgroundColor: IrisGridTheme['scroll-bar-hover-bg'],
-  scrollBarCasingColor: IrisGridTheme['scroll-bar-casing-color'],
-  scrollBarCornerColor: IrisGridTheme['scroll-bar-corner-color'],
-  scrollBarColor: IrisGridTheme['scroll-bar-color'],
-  scrollBarHoverColor: IrisGridTheme['scroll-bar-hover-color'],
-  scrollBarActiveColor: IrisGridTheme['scroll-bar-active-color'],
-  scrollBarSelectionTickColor: IrisGridTheme['selected-row-hover-bg'],
-  scrollBarActiveSelectionTickColor:
-    IrisGridTheme['scroll-bar-active-selection-tick-color'],
-  textColor: IrisGridTheme['text-color'],
-  hyperlinkColor: IrisGridTheme['hyperlink-color'],
-  positiveNumberColor: IrisGridTheme['positive-number-color'],
-  negativeNumberColor: IrisGridTheme['negative-number-color'],
-  zeroNumberColor: IrisGridTheme['zero-number-color'],
-  dateColor: IrisGridTheme['date-color'],
-  pendingTextColor: IrisGridTheme['pending-text-color'],
-  errorTextColor: IrisGridTheme['error-text-color'],
-  nullStringColor: IrisGridTheme['null-string-color'],
-  filterBarActiveBackgroundColor: IrisGridTheme['filter-bar-active-bg'],
-  filterBarExpandedBackgroundColor: IrisGridTheme['filter-bar-expanded-bg'],
-  filterBarExpandedActiveBackgroundColor:
-    IrisGridTheme['filter-bar-expanded-active-bg'],
-  filterBarExpandedActiveCellBackgroundColor:
-    IrisGridTheme['filter-bar-expanded-active-cell-bg'],
-  filterBarSeparatorColor: IrisGridTheme['filter-bar-separator-color'],
-  filterBarActiveColor: IrisGridTheme['filter-bar-active-color'],
-  filterBarErrorColor: IrisGridTheme['filter-bar-error-color'],
-  filterIconColor: IrisGridTheme['filter-icon-color'],
-  scrimColor: IrisGridTheme['scrim-color'],
-  contextMenuSortIconColor: IrisGridTheme['context-menu-sort-icon-color'],
-  contextMenuReverseIconColor: IrisGridTheme['context-menu-reverse-icon-color'],
+/**
+ * Derive default Iris grid theme from IrisGridThemeRaw. Note that CSS variables
+ * contained in IrisGridThemeRaw are resolved to their actual values. This means
+ * that the returned theme is statically defined and does not change when CSS
+ * variables change.
+ */
+export function createDefaultIrisGridTheme(): Partial<IrisGridThemeType> {
+  const IrisGridTheme = resolveCssVariablesInRecord(IrisGridThemeRaw);
+  log.debug2('Iris grid theme:', IrisGridThemeRaw);
+  log.debug2('Iris grid theme derived:', IrisGridTheme);
 
-  allowRowResize: false,
-  autoSelectRow: true,
-  gridColumnColor: null,
-  gridRowColor: null,
-  groupedColumnDividerColor: IrisGridTheme['grouped-column-divider-color'],
-  columnHoverBackgroundColor: null,
-  headerHorizontalPadding: 12,
-  scrollBarSize: 13,
-  scrollBarHoverSize: 16, // system default scrollbar width is 17
-  minScrollHandleSize: 24,
-  rowHeight: parseInt(IrisGridTheme['row-height'], 10) || 19, // IrisGrid test breaks without the fallback value
-  columnWidth: 100,
-  rowHeaderWidth: 0,
-  rowFooterWidth: 60,
-  columnHeaderHeight: parseInt(IrisGridTheme['header-height'], 10) || 30,
-  filterBarHeight: 30, // includes 1px casing at bottom
-  filterBarCollapsedHeight: 5, // includes 1px casing at bottom
-  sortHeaderBarHeight: 2,
-  reverseHeaderBarHeight: 4,
-  filterBarHorizontalPadding: 4,
+  return Object.freeze({
+    backgroundColor: IrisGridTheme['grid-bg'],
+    white: IrisGridTheme.white,
+    black: IrisGridTheme.black,
+    font: IrisGridTheme.font,
+    headerBackgroundColor: IrisGridTheme['header-bg'],
+    headerColor: IrisGridTheme['header-color'],
+    headerSeparatorColor: IrisGridTheme['header-separator-color'],
+    headerSeparatorHoverColor: IrisGridTheme['header-separator-hover-color'],
+    headerHiddenSeparatorHoverColor:
+      IrisGridTheme['header-hidden-separator-hover-color'],
+    headerSortBarColor: IrisGridTheme['header-sort-bar-color'],
+    headerReverseBarColor: IrisGridTheme['header-reverse-bar-color'],
+    headerBarCasingColor: IrisGridTheme['header-bar-casing-color'],
+    headerFont: IrisGridTheme['header-font'],
+    rowBackgroundColors: IrisGridTheme['row-background-colors'],
+    rowHoverBackgroundColor: IrisGridTheme['row-hover-bg'],
+    selectionColor: IrisGridTheme['selection-color'],
+    selectionOutlineColor: IrisGridTheme['selection-outline-color'],
+    selectionOutlineCasingColor:
+      IrisGridTheme['selection-outline-casing-color'],
+    selectedRowHoverBackgroundColor: IrisGridTheme['selected-row-hover-bg'],
+    scrollBarBackgroundColor: IrisGridTheme['scroll-bar-bg'],
+    scrollBarHoverBackgroundColor: IrisGridTheme['scroll-bar-hover-bg'],
+    scrollBarCasingColor: IrisGridTheme['scroll-bar-casing-color'],
+    scrollBarCornerColor: IrisGridTheme['scroll-bar-corner-color'],
+    scrollBarColor: IrisGridTheme['scroll-bar-color'],
+    scrollBarHoverColor: IrisGridTheme['scroll-bar-hover-color'],
+    scrollBarActiveColor: IrisGridTheme['scroll-bar-active-color'],
+    scrollBarSelectionTickColor: IrisGridTheme['selected-row-hover-bg'],
+    scrollBarActiveSelectionTickColor:
+      IrisGridTheme['scroll-bar-active-selection-tick-color'],
+    textColor: IrisGridTheme['text-color'],
+    hyperlinkColor: IrisGridTheme['hyperlink-color'],
+    positiveNumberColor: IrisGridTheme['positive-number-color'],
+    negativeNumberColor: IrisGridTheme['negative-number-color'],
+    zeroNumberColor: IrisGridTheme['zero-number-color'],
+    dateColor: IrisGridTheme['date-color'],
+    pendingTextColor: IrisGridTheme['pending-text-color'],
+    errorTextColor: IrisGridTheme['error-text-color'],
+    nullStringColor: IrisGridTheme['null-string-color'],
+    filterBarActiveBackgroundColor: IrisGridTheme['filter-bar-active-bg'],
+    filterBarExpandedBackgroundColor: IrisGridTheme['filter-bar-expanded-bg'],
+    filterBarExpandedActiveBackgroundColor:
+      IrisGridTheme['filter-bar-expanded-active-bg'],
+    filterBarExpandedActiveCellBackgroundColor:
+      IrisGridTheme['filter-bar-expanded-active-cell-bg'],
+    filterBarSeparatorColor: IrisGridTheme['filter-bar-separator-color'],
+    filterBarActiveColor: IrisGridTheme['filter-bar-active-color'],
+    filterBarErrorColor: IrisGridTheme['filter-bar-error-color'],
+    filterIconColor: IrisGridTheme['filter-icon-color'],
+    scrimColor: IrisGridTheme['scrim-color'],
+    contextMenuSortIconColor: IrisGridTheme['context-menu-sort-icon-color'],
+    contextMenuReverseIconColor:
+      IrisGridTheme['context-menu-reverse-icon-color'],
 
-  // Amount of blur to apply to the bottom of the scrim while animating in
-  scrimBlurSize: 25,
-  minScrimTransitionTime: 150,
-  maxScrimTransitionTime: 350,
+    allowRowResize: false,
+    autoSelectRow: true,
+    gridColumnColor: null,
+    gridRowColor: null,
+    groupedColumnDividerColor: IrisGridTheme['grouped-column-divider-color'],
+    columnHoverBackgroundColor: null,
+    headerHorizontalPadding: 12,
+    scrollBarSize: 13,
+    scrollBarHoverSize: 16, // system default scrollbar width is 17
+    minScrollHandleSize: 24,
+    rowHeight: parseInt(IrisGridTheme['row-height'], 10) || 19, // IrisGrid test breaks without the fallback value
+    columnWidth: 100,
+    rowHeaderWidth: 0,
+    rowFooterWidth: 60,
+    columnHeaderHeight: parseInt(IrisGridTheme['header-height'], 10) || 30,
+    filterBarHeight: 30, // includes 1px casing at bottom
+    filterBarCollapsedHeight: 5, // includes 1px casing at bottom
+    sortHeaderBarHeight: 2,
+    reverseHeaderBarHeight: 4,
+    filterBarHorizontalPadding: 4,
 
-  scrollSnapToRow: true,
+    // Amount of blur to apply to the bottom of the scrim while animating in
+    scrimBlurSize: 25,
+    minScrimTransitionTime: 150,
+    maxScrimTransitionTime: 350,
 
-  linkerColumnHoverBackgroundColor: IrisGridTheme['linker-column-hover-bg'],
+    scrollSnapToRow: true,
 
-  treeLineColor: IrisGridTheme['tree-line-color'],
-  treeMarkerColor: IrisGridTheme['tree-marker-color'],
-  treeMarkerHoverColor: IrisGridTheme['tree-marker-hover-color'],
+    linkerColumnHoverBackgroundColor: IrisGridTheme['linker-column-hover-bg'],
 
-  floatingGridColumnColor: null,
-  floatingGridRowColor: IrisGridTheme['floating-grid-row-color'],
-  floatingRowBackgroundColors: IrisGridTheme['floating-row-background-colors'],
-  floatingDividerInnerColor: IrisGridTheme['floating-divider-inner-color'],
-  floatingDividerOuterColor: IrisGridTheme['floating-divider-outer-color'],
+    treeLineColor: IrisGridTheme['tree-line-color'],
+    treeMarkerColor: IrisGridTheme['tree-marker-color'],
+    treeMarkerHoverColor: IrisGridTheme['tree-marker-hover-color'],
 
-  overflowButtonColor: IrisGridTheme['overflow-button-color'],
-  overflowButtonHoverColor: IrisGridTheme['overflow-button-hover-color'],
+    floatingGridColumnColor: null,
+    floatingGridRowColor: IrisGridTheme['floating-grid-row-color'],
+    floatingRowBackgroundColors:
+      IrisGridTheme['floating-row-background-colors'],
+    floatingDividerInnerColor: IrisGridTheme['floating-divider-inner-color'],
+    floatingDividerOuterColor: IrisGridTheme['floating-divider-outer-color'],
 
-  zeroLineColor: IrisGridTheme['zero-line-color'],
-  positiveBarColor: IrisGridTheme['positive-bar-color'],
-  negativeBarColor: IrisGridTheme['negative-bar-color'],
-  markerBarColor: IrisGridTheme['marker-bar-color'],
-});
+    overflowButtonColor: IrisGridTheme['overflow-button-color'],
+    overflowButtonHoverColor: IrisGridTheme['overflow-button-hover-color'],
 
-export default theme;
+    zeroLineColor: IrisGridTheme['zero-line-color'],
+    positiveBarColor: IrisGridTheme['positive-bar-color'],
+    negativeBarColor: IrisGridTheme['negative-bar-color'],
+    markerBarColor: IrisGridTheme['marker-bar-color'],
+  });
+}
diff --git a/packages/iris-grid/src/IrisGridTreeTableModel.ts b/packages/iris-grid/src/IrisGridTreeTableModel.ts
index 555cf140c8..003d58177c 100644
--- a/packages/iris-grid/src/IrisGridTreeTableModel.ts
+++ b/packages/iris-grid/src/IrisGridTreeTableModel.ts
@@ -33,6 +33,15 @@ class IrisGridTreeTableModel extends IrisGridTableModelTemplate<
         const value = this.valueForCell(x, y);
         return this.displayString(value, column.constituentType, column.name);
       }
+      // Show empty string instead of null in rollup grouping columns (issue #1483)
+      if (
+        row.hasChildren &&
+        row.depth <= x + 1 &&
+        this.valueForCell(x, y) === null &&
+        this.getCachedGroupedColumnSet(this.groupedColumns).has(x)
+      ) {
+        return '';
+      }
     }
 
     return super.textForCell(x, y);
@@ -182,6 +191,15 @@ class IrisGridTreeTableModel extends IrisGridTableModelTemplate<
       )
   );
 
+  getCachedGroupedColumnSet = memoize(
+    (groupedColumns: readonly Column[]) =>
+      new Set(
+        groupedColumns.map(c1 =>
+          this.columns.findIndex(c2 => c1.name === c2.name)
+        )
+      )
+  );
+
   updateFrozenColumns(columns: ColumnName[]): void {
     if (columns.length > 0) {
       throw new Error('Cannot freeze columns on a tree table');
diff --git a/packages/iris-grid/src/__snapshots__/IrisGridTheme.test.ts.snap b/packages/iris-grid/src/__snapshots__/IrisGridTheme.test.ts.snap
new file mode 100644
index 0000000000..7a2e0cc4d5
--- /dev/null
+++ b/packages/iris-grid/src/__snapshots__/IrisGridTheme.test.ts.snap
@@ -0,0 +1,93 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`createDefaultIrisGridTheme should derive the default Iris grid theme 1`] = `
+{
+  "allowRowResize": false,
+  "autoSelectRow": true,
+  "backgroundColor": "IrisGridTheme['grid-bg']",
+  "black": "IrisGridTheme['black']",
+  "columnHeaderHeight": 30,
+  "columnHoverBackgroundColor": null,
+  "columnWidth": 100,
+  "contextMenuReverseIconColor": "IrisGridTheme['context-menu-reverse-icon-color']",
+  "contextMenuSortIconColor": "IrisGridTheme['context-menu-sort-icon-color']",
+  "dateColor": "IrisGridTheme['date-color']",
+  "errorTextColor": "IrisGridTheme['error-text-color']",
+  "filterBarActiveBackgroundColor": "IrisGridTheme['filter-bar-active-bg']",
+  "filterBarActiveColor": "IrisGridTheme['filter-bar-active-color']",
+  "filterBarCollapsedHeight": 5,
+  "filterBarErrorColor": "IrisGridTheme['filter-bar-error-color']",
+  "filterBarExpandedActiveBackgroundColor": "IrisGridTheme['filter-bar-expanded-active-bg']",
+  "filterBarExpandedActiveCellBackgroundColor": "IrisGridTheme['filter-bar-expanded-active-cell-bg']",
+  "filterBarExpandedBackgroundColor": "IrisGridTheme['filter-bar-expanded-bg']",
+  "filterBarHeight": 30,
+  "filterBarHorizontalPadding": 4,
+  "filterBarSeparatorColor": "IrisGridTheme['filter-bar-separator-color']",
+  "filterIconColor": "IrisGridTheme['filter-icon-color']",
+  "floatingDividerInnerColor": "IrisGridTheme['floating-divider-inner-color']",
+  "floatingDividerOuterColor": "IrisGridTheme['floating-divider-outer-color']",
+  "floatingGridColumnColor": null,
+  "floatingGridRowColor": "IrisGridTheme['floating-grid-row-color']",
+  "floatingRowBackgroundColors": "IrisGridTheme['floating-row-background-colors']",
+  "font": "IrisGridTheme['font']",
+  "gridColumnColor": null,
+  "gridRowColor": null,
+  "groupedColumnDividerColor": "IrisGridTheme['grouped-column-divider-color']",
+  "headerBackgroundColor": "IrisGridTheme['header-bg']",
+  "headerBarCasingColor": "IrisGridTheme['header-bar-casing-color']",
+  "headerColor": "IrisGridTheme['header-color']",
+  "headerFont": "IrisGridTheme['header-font']",
+  "headerHiddenSeparatorHoverColor": "IrisGridTheme['header-hidden-separator-hover-color']",
+  "headerHorizontalPadding": 12,
+  "headerReverseBarColor": "IrisGridTheme['header-reverse-bar-color']",
+  "headerSeparatorColor": "IrisGridTheme['header-separator-color']",
+  "headerSeparatorHoverColor": "IrisGridTheme['header-separator-hover-color']",
+  "headerSortBarColor": "IrisGridTheme['header-sort-bar-color']",
+  "hyperlinkColor": "IrisGridTheme['hyperlink-color']",
+  "linkerColumnHoverBackgroundColor": "IrisGridTheme['linker-column-hover-bg']",
+  "markerBarColor": "IrisGridTheme['marker-bar-color']",
+  "maxScrimTransitionTime": 350,
+  "minScrimTransitionTime": 150,
+  "minScrollHandleSize": 24,
+  "negativeBarColor": "IrisGridTheme['negative-bar-color']",
+  "negativeNumberColor": "IrisGridTheme['negative-number-color']",
+  "nullStringColor": "IrisGridTheme['null-string-color']",
+  "overflowButtonColor": "IrisGridTheme['overflow-button-color']",
+  "overflowButtonHoverColor": "IrisGridTheme['overflow-button-hover-color']",
+  "pendingTextColor": "IrisGridTheme['pending-text-color']",
+  "positiveBarColor": "IrisGridTheme['positive-bar-color']",
+  "positiveNumberColor": "IrisGridTheme['positive-number-color']",
+  "reverseHeaderBarHeight": 4,
+  "rowBackgroundColors": "IrisGridTheme['row-background-colors']",
+  "rowFooterWidth": 60,
+  "rowHeaderWidth": 0,
+  "rowHeight": 19,
+  "rowHoverBackgroundColor": "IrisGridTheme['row-hover-bg']",
+  "scrimBlurSize": 25,
+  "scrimColor": "IrisGridTheme['scrim-color']",
+  "scrollBarActiveColor": "IrisGridTheme['scroll-bar-active-color']",
+  "scrollBarActiveSelectionTickColor": "IrisGridTheme['scroll-bar-active-selection-tick-color']",
+  "scrollBarBackgroundColor": "IrisGridTheme['scroll-bar-bg']",
+  "scrollBarCasingColor": "IrisGridTheme['scroll-bar-casing-color']",
+  "scrollBarColor": "IrisGridTheme['scroll-bar-color']",
+  "scrollBarCornerColor": "IrisGridTheme['scroll-bar-corner-color']",
+  "scrollBarHoverBackgroundColor": "IrisGridTheme['scroll-bar-hover-bg']",
+  "scrollBarHoverColor": "IrisGridTheme['scroll-bar-hover-color']",
+  "scrollBarHoverSize": 16,
+  "scrollBarSelectionTickColor": "IrisGridTheme['selected-row-hover-bg']",
+  "scrollBarSize": 13,
+  "scrollSnapToRow": true,
+  "selectedRowHoverBackgroundColor": "IrisGridTheme['selected-row-hover-bg']",
+  "selectionColor": "IrisGridTheme['selection-color']",
+  "selectionOutlineCasingColor": "IrisGridTheme['selection-outline-casing-color']",
+  "selectionOutlineColor": "IrisGridTheme['selection-outline-color']",
+  "sortHeaderBarHeight": 2,
+  "textColor": "IrisGridTheme['text-color']",
+  "treeLineColor": "IrisGridTheme['tree-line-color']",
+  "treeMarkerColor": "IrisGridTheme['tree-marker-color']",
+  "treeMarkerHoverColor": "IrisGridTheme['tree-marker-hover-color']",
+  "white": "IrisGridTheme['white']",
+  "zeroLineColor": "IrisGridTheme['zero-line-color']",
+  "zeroNumberColor": "IrisGridTheme['zero-number-color']",
+}
+`;
diff --git a/packages/iris-grid/src/index.ts b/packages/iris-grid/src/index.ts
index 6754afbc16..0d5efc174a 100644
--- a/packages/iris-grid/src/index.ts
+++ b/packages/iris-grid/src/index.ts
@@ -16,7 +16,7 @@ export { default as IrisGridTableModelTemplate } from './IrisGridTableModelTempl
 export * from './IrisGridTableModelTemplate';
 export * from './IrisGridTreeTableModel';
 export { default as IrisGridModelFactory } from './IrisGridModelFactory';
-export { default as IrisGridTheme } from './IrisGridTheme';
+export { createDefaultIrisGridTheme } from './IrisGridTheme';
 export type { IrisGridThemeType } from './IrisGridTheme';
 export { default as IrisGridTestUtils } from './IrisGridTestUtils';
 export { default as IrisGridUtils } from './IrisGridUtils';
diff --git a/packages/jsapi-bootstrap/CHANGELOG.md b/packages/jsapi-bootstrap/CHANGELOG.md
index f74a6a7441..9cb9909d1b 100644
--- a/packages/jsapi-bootstrap/CHANGELOG.md
+++ b/packages/jsapi-bootstrap/CHANGELOG.md
@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [0.50.0](https://github.com/deephaven/web-client-ui/compare/v0.49.1...v0.50.0) (2023-10-13)
+
+
+### Features
+
+* Theme Plugin Loading ([#1524](https://github.com/deephaven/web-client-ui/issues/1524)) ([a9541b1](https://github.com/deephaven/web-client-ui/commit/a9541b108f1d998bb2713e70642f5a54aaf8bd97)), closes [#1a171](https://github.com/deephaven/web-client-ui/issues/1a171) [#4c7](https://github.com/deephaven/web-client-ui/issues/4c7) [#1a171](https://github.com/deephaven/web-client-ui/issues/1a171) [#4c7](https://github.com/deephaven/web-client-ui/issues/4c7) [#4c7](https://github.com/deephaven/web-client-ui/issues/4c7) [#1530](https://github.com/deephaven/web-client-ui/issues/1530)
+
+
+
+
+
 ## [0.49.1](https://github.com/deephaven/web-client-ui/compare/v0.49.0...v0.49.1) (2023-09-27)
 
 **Note:** Version bump only for package @deephaven/jsapi-bootstrap
diff --git a/packages/jsapi-bootstrap/package.json b/packages/jsapi-bootstrap/package.json
index 618a429053..624a9c5ab1 100644
--- a/packages/jsapi-bootstrap/package.json
+++ b/packages/jsapi-bootstrap/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@deephaven/jsapi-bootstrap",
-  "version": "0.49.1",
+  "version": "0.50.0",
   "description": "Deephaven JSAPI Bootstrap",
   "author": "Deephaven Data Labs LLC",
   "license": "Apache-2.0",
diff --git a/packages/jsapi-components/CHANGELOG.md b/packages/jsapi-components/CHANGELOG.md
index 196afb7c78..ce824d19ad 100644
--- a/packages/jsapi-components/CHANGELOG.md
+++ b/packages/jsapi-components/CHANGELOG.md
@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [0.50.0](https://github.com/deephaven/web-client-ui/compare/v0.49.1...v0.50.0) (2023-10-13)
+
+**Note:** Version bump only for package @deephaven/jsapi-components
+
+
+
+
+
 ## [0.49.1](https://github.com/deephaven/web-client-ui/compare/v0.49.0...v0.49.1) (2023-09-27)
 
 **Note:** Version bump only for package @deephaven/jsapi-components
diff --git a/packages/jsapi-components/package.json b/packages/jsapi-components/package.json
index 3f9bcaa612..262e3548e3 100644
--- a/packages/jsapi-components/package.json
+++ b/packages/jsapi-components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@deephaven/jsapi-components",
-  "version": "0.49.1",
+  "version": "0.50.0",
   "description": "Deephaven JSAPI Components",
   "author": "Deephaven Data Labs LLC",
   "license": "Apache-2.0",
diff --git a/packages/jsapi-shim/CHANGELOG.md b/packages/jsapi-shim/CHANGELOG.md
index b526e8a0d2..6d0d082ede 100644
--- a/packages/jsapi-shim/CHANGELOG.md
+++ b/packages/jsapi-shim/CHANGELOG.md
@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [0.50.0](https://github.com/deephaven/web-client-ui/compare/v0.49.1...v0.50.0) (2023-10-13)
+
+**Note:** Version bump only for package @deephaven/jsapi-shim
+
+
+
+
+
 # [0.49.0](https://github.com/deephaven/web-client-ui/compare/v0.48.0...v0.49.0) (2023-09-15)
 
 **Note:** Version bump only for package @deephaven/jsapi-shim
diff --git a/packages/jsapi-shim/package.json b/packages/jsapi-shim/package.json
index 63d00992b6..94528927b0 100644
--- a/packages/jsapi-shim/package.json
+++ b/packages/jsapi-shim/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@deephaven/jsapi-shim",
-  "version": "0.49.0",
+  "version": "0.50.0",
   "description": "Deephaven JSAPI Shim",
   "author": "Deephaven Data Labs LLC",
   "license": "Apache-2.0",
diff --git a/packages/jsapi-types/CHANGELOG.md b/packages/jsapi-types/CHANGELOG.md
index d1b585a231..d8bcad4c08 100644
--- a/packages/jsapi-types/CHANGELOG.md
+++ b/packages/jsapi-types/CHANGELOG.md
@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [0.50.0](https://github.com/deephaven/web-client-ui/compare/v0.49.1...v0.50.0) (2023-10-13)
+
+
+### Features
+
+* data bar render from API ([#1415](https://github.com/deephaven/web-client-ui/issues/1415)) ([ee7d1c1](https://github.com/deephaven/web-client-ui/commit/ee7d1c108e86973b4c6855e482dce21d665dfe28)), closes [#0000](https://github.com/deephaven/web-client-ui/issues/0000) [#FF0000](https://github.com/deephaven/web-client-ui/issues/FF0000) [#FFFF00](https://github.com/deephaven/web-client-ui/issues/FFFF00) [#FFFF00](https://github.com/deephaven/web-client-ui/issues/FFFF00) [#00FF00](https://github.com/deephaven/web-client-ui/issues/00FF00)
+
+
+
+
+
 # [0.49.0](https://github.com/deephaven/web-client-ui/compare/v0.48.0...v0.49.0) (2023-09-15)
 
 **Note:** Version bump only for package @deephaven/jsapi-types
diff --git a/packages/jsapi-types/package.json b/packages/jsapi-types/package.json
index 6e4d690981..debddbc5ae 100644
--- a/packages/jsapi-types/package.json
+++ b/packages/jsapi-types/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@deephaven/jsapi-types",
-  "version": "0.49.0",
+  "version": "0.50.0",
   "description": "Deephaven JSAPI Types",
   "author": "Deephaven Data Labs LLC",
   "license": "Apache-2.0",
diff --git a/packages/jsapi-types/src/dh.types.ts b/packages/jsapi-types/src/dh.types.ts
index c9c3218c90..2985b4ca30 100644
--- a/packages/jsapi-types/src/dh.types.ts
+++ b/packages/jsapi-types/src/dh.types.ts
@@ -35,6 +35,7 @@ export interface dh {
     FileContents: FileContentsStatic;
   };
   ValueType: typeof ValueType;
+  Widget: Widget;
 }
 
 const VariableType = {
@@ -349,6 +350,26 @@ export interface Figure extends Evented {
   close(): void;
 }
 
+export type WidgetExportedObject = {
+  type: string;
+  fetch: () => Promise<unknown>;
+  close: () => void;
+};
+
+export interface Widget {
+  readonly EVENT_MESSAGE: string;
+
+  addEventListener: (
+    type: string,
+    listener: (event: unknown) => void
+  ) => () => void;
+  getDataAsBase64(): string;
+  getDataAsString(): string;
+  getDataAsU8(): Uint8Array;
+  sendMessage: (message: string, references?: never[]) => void;
+  exportedObjects: WidgetExportedObject[];
+}
+
 export interface FigureDataUpdatedEvent {
   /**
    * The series instances which were affected by this event and need to be updated.
diff --git a/packages/jsapi-utils/CHANGELOG.md b/packages/jsapi-utils/CHANGELOG.md
index c346d60cae..5ea079b73e 100644
--- a/packages/jsapi-utils/CHANGELOG.md
+++ b/packages/jsapi-utils/CHANGELOG.md
@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [0.50.0](https://github.com/deephaven/web-client-ui/compare/v0.49.1...v0.50.0) (2023-10-13)
+
+**Note:** Version bump only for package @deephaven/jsapi-utils
+
+
+
+
+
 # [0.49.0](https://github.com/deephaven/web-client-ui/compare/v0.48.0...v0.49.0) (2023-09-15)
 
 **Note:** Version bump only for package @deephaven/jsapi-utils
diff --git a/packages/jsapi-utils/package.json b/packages/jsapi-utils/package.json
index 00a4016509..4ecc0eb80d 100644
--- a/packages/jsapi-utils/package.json
+++ b/packages/jsapi-utils/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@deephaven/jsapi-utils",
-  "version": "0.49.0",
+  "version": "0.50.0",
   "description": "Deephaven JSAPI Utils",
   "author": "Deephaven Data Labs LLC",
   "license": "Apache-2.0",
diff --git a/packages/log/CHANGELOG.md b/packages/log/CHANGELOG.md
index b9dc117be7..b460c0762a 100644
--- a/packages/log/CHANGELOG.md
+++ b/packages/log/CHANGELOG.md
@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [0.50.0](https://github.com/deephaven/web-client-ui/compare/v0.49.1...v0.50.0) (2023-10-13)
+
+**Note:** Version bump only for package @deephaven/log
+
+
+
+
+
 # [0.49.0](https://github.com/deephaven/web-client-ui/compare/v0.48.0...v0.49.0) (2023-09-15)
 
 **Note:** Version bump only for package @deephaven/log
diff --git a/packages/log/package.json b/packages/log/package.json
index acae3fe9a3..5503fedb38 100644
--- a/packages/log/package.json
+++ b/packages/log/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@deephaven/log",
-  "version": "0.49.0",
+  "version": "0.50.0",
   "description": "Deephaven Logger",
   "author": "Deephaven Data Labs LLC",
   "license": "Apache-2.0",
diff --git a/packages/mocks/CHANGELOG.md b/packages/mocks/CHANGELOG.md
index 6de1ba9e78..67ae452342 100644
--- a/packages/mocks/CHANGELOG.md
+++ b/packages/mocks/CHANGELOG.md
@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [0.50.0](https://github.com/deephaven/web-client-ui/compare/v0.49.1...v0.50.0) (2023-10-13)
+
+**Note:** Version bump only for package @deephaven/mocks
+
+
+
+
+
 # [0.49.0](https://github.com/deephaven/web-client-ui/compare/v0.48.0...v0.49.0) (2023-09-15)
 
 **Note:** Version bump only for package @deephaven/mocks
diff --git a/packages/mocks/package.json b/packages/mocks/package.json
index 619a8b026e..9a5864d515 100644
--- a/packages/mocks/package.json
+++ b/packages/mocks/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@deephaven/mocks",
-  "version": "0.49.0",
+  "version": "0.50.0",
   "description": "Deephaven Mocks for common libraries",
   "repository": {
     "type": "git",
diff --git a/packages/plugin/CHANGELOG.md b/packages/plugin/CHANGELOG.md
index 67bbfb2797..d01b10d338 100644
--- a/packages/plugin/CHANGELOG.md
+++ b/packages/plugin/CHANGELOG.md
@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [0.50.0](https://github.com/deephaven/web-client-ui/compare/v0.49.1...v0.50.0) (2023-10-13)
+
+
+### Features
+
+* Theme Plugin Loading ([#1524](https://github.com/deephaven/web-client-ui/issues/1524)) ([a9541b1](https://github.com/deephaven/web-client-ui/commit/a9541b108f1d998bb2713e70642f5a54aaf8bd97)), closes [#1a171](https://github.com/deephaven/web-client-ui/issues/1a171) [#4c7](https://github.com/deephaven/web-client-ui/issues/4c7) [#1a171](https://github.com/deephaven/web-client-ui/issues/1a171) [#4c7](https://github.com/deephaven/web-client-ui/issues/4c7) [#4c7](https://github.com/deephaven/web-client-ui/issues/4c7) [#1530](https://github.com/deephaven/web-client-ui/issues/1530)
+
+
+
+
+
 ## [0.49.1](https://github.com/deephaven/web-client-ui/compare/v0.49.0...v0.49.1) (2023-09-27)
 
 **Note:** Version bump only for package @deephaven/plugin
diff --git a/packages/plugin/package.json b/packages/plugin/package.json
index ae51397be3..798e1aade7 100644
--- a/packages/plugin/package.json
+++ b/packages/plugin/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@deephaven/plugin",
-  "version": "0.49.1",
+  "version": "0.50.0",
   "description": "Deephaven JS Plugin Core",
   "author": "Deephaven Data Labs LLC",
   "license": "Apache-2.0",
diff --git a/packages/pouch-storage/CHANGELOG.md b/packages/pouch-storage/CHANGELOG.md
index 17e6ae3799..d65b0e1bd3 100644
--- a/packages/pouch-storage/CHANGELOG.md
+++ b/packages/pouch-storage/CHANGELOG.md
@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [0.50.0](https://github.com/deephaven/web-client-ui/compare/v0.49.1...v0.50.0) (2023-10-13)
+
+**Note:** Version bump only for package @deephaven/pouch-storage
+
+
+
+
+
 ## [0.49.1](https://github.com/deephaven/web-client-ui/compare/v0.49.0...v0.49.1) (2023-09-27)
 
 **Note:** Version bump only for package @deephaven/pouch-storage
diff --git a/packages/pouch-storage/package.json b/packages/pouch-storage/package.json
index dd72f6ecf7..969b5fcf13 100644
--- a/packages/pouch-storage/package.json
+++ b/packages/pouch-storage/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@deephaven/pouch-storage",
-  "version": "0.49.1",
+  "version": "0.50.0",
   "description": "Deephaven Storage based on PouchDB",
   "author": "Deephaven Data Labs LLC",
   "license": "Apache-2.0",
diff --git a/packages/prettier-config/CHANGELOG.md b/packages/prettier-config/CHANGELOG.md
index ee9799db11..abd49ca37c 100644
--- a/packages/prettier-config/CHANGELOG.md
+++ b/packages/prettier-config/CHANGELOG.md
@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [0.50.0](https://github.com/deephaven/web-client-ui/compare/v0.49.1...v0.50.0) (2023-10-13)
+
+**Note:** Version bump only for package @deephaven/prettier-config
+
+
+
+
+
 # [0.49.0](https://github.com/deephaven/web-client-ui/compare/v0.48.0...v0.49.0) (2023-09-15)
 
 **Note:** Version bump only for package @deephaven/prettier-config
diff --git a/packages/prettier-config/package.json b/packages/prettier-config/package.json
index f3270af880..368e68d3cc 100644
--- a/packages/prettier-config/package.json
+++ b/packages/prettier-config/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@deephaven/prettier-config",
-  "version": "0.49.0",
+  "version": "0.50.0",
   "description": "Deephaven Prettier configuration",
   "repository": {
     "type": "git",
diff --git a/packages/react-hooks/CHANGELOG.md b/packages/react-hooks/CHANGELOG.md
index 7f70d2f76b..a4044dd8eb 100644
--- a/packages/react-hooks/CHANGELOG.md
+++ b/packages/react-hooks/CHANGELOG.md
@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [0.50.0](https://github.com/deephaven/web-client-ui/compare/v0.49.1...v0.50.0) (2023-10-13)
+
+**Note:** Version bump only for package @deephaven/react-hooks
+
+
+
+
+
 # [0.49.0](https://github.com/deephaven/web-client-ui/compare/v0.48.0...v0.49.0) (2023-09-15)
 
 **Note:** Version bump only for package @deephaven/react-hooks
diff --git a/packages/react-hooks/package.json b/packages/react-hooks/package.json
index 348194e01f..1163d5d60f 100644
--- a/packages/react-hooks/package.json
+++ b/packages/react-hooks/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@deephaven/react-hooks",
-  "version": "0.49.0",
+  "version": "0.50.0",
   "description": "Deephaven React hooks library",
   "author": "Deephaven Data Labs LLC",
   "license": "Apache-2.0",
diff --git a/packages/redux/CHANGELOG.md b/packages/redux/CHANGELOG.md
index c383eada4e..7fc9f174a6 100644
--- a/packages/redux/CHANGELOG.md
+++ b/packages/redux/CHANGELOG.md
@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [0.50.0](https://github.com/deephaven/web-client-ui/compare/v0.49.1...v0.50.0) (2023-10-13)
+
+**Note:** Version bump only for package @deephaven/redux
+
+
+
+
+
 ## [0.49.1](https://github.com/deephaven/web-client-ui/compare/v0.49.0...v0.49.1) (2023-09-27)
 
 **Note:** Version bump only for package @deephaven/redux
diff --git a/packages/redux/package.json b/packages/redux/package.json
index 260fe417ba..eeaf158f9d 100644
--- a/packages/redux/package.json
+++ b/packages/redux/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@deephaven/redux",
-  "version": "0.49.1",
+  "version": "0.50.0",
   "description": "Deephaven Redux",
   "author": "Deephaven Data Labs LLC",
   "license": "Apache-2.0",
diff --git a/packages/storage/CHANGELOG.md b/packages/storage/CHANGELOG.md
index d00c8f9d5a..a5168966a9 100644
--- a/packages/storage/CHANGELOG.md
+++ b/packages/storage/CHANGELOG.md
@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [0.50.0](https://github.com/deephaven/web-client-ui/compare/v0.49.1...v0.50.0) (2023-10-13)
+
+**Note:** Version bump only for package @deephaven/storage
+
+
+
+
+
 # [0.49.0](https://github.com/deephaven/web-client-ui/compare/v0.48.0...v0.49.0) (2023-09-15)
 
 **Note:** Version bump only for package @deephaven/storage
diff --git a/packages/storage/package.json b/packages/storage/package.json
index f77bb79c63..63591fcc70 100644
--- a/packages/storage/package.json
+++ b/packages/storage/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@deephaven/storage",
-  "version": "0.49.0",
+  "version": "0.50.0",
   "description": "Deephaven Storage abstract classes for storing app data",
   "author": "Deephaven Data Labs LLC",
   "license": "Apache-2.0",
diff --git a/packages/stylelint-config/CHANGELOG.md b/packages/stylelint-config/CHANGELOG.md
index 4fef0542d5..4495da75ec 100644
--- a/packages/stylelint-config/CHANGELOG.md
+++ b/packages/stylelint-config/CHANGELOG.md
@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [0.50.0](https://github.com/deephaven/web-client-ui/compare/v0.49.1...v0.50.0) (2023-10-13)
+
+**Note:** Version bump only for package @deephaven/stylelint-config
+
+
+
+
+
 # [0.49.0](https://github.com/deephaven/web-client-ui/compare/v0.48.0...v0.49.0) (2023-09-15)
 
 **Note:** Version bump only for package @deephaven/stylelint-config
diff --git a/packages/stylelint-config/package.json b/packages/stylelint-config/package.json
index f07407a348..6bf6b23282 100644
--- a/packages/stylelint-config/package.json
+++ b/packages/stylelint-config/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@deephaven/stylelint-config",
-  "version": "0.49.0",
+  "version": "0.50.0",
   "description": "Deephaven Stylelint configuration",
   "repository": {
     "type": "git",
diff --git a/packages/tsconfig/CHANGELOG.md b/packages/tsconfig/CHANGELOG.md
index fdfa398236..e672075e1e 100644
--- a/packages/tsconfig/CHANGELOG.md
+++ b/packages/tsconfig/CHANGELOG.md
@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [0.50.0](https://github.com/deephaven/web-client-ui/compare/v0.49.1...v0.50.0) (2023-10-13)
+
+**Note:** Version bump only for package @deephaven/tsconfig
+
+
+
+
+
 # [0.49.0](https://github.com/deephaven/web-client-ui/compare/v0.48.0...v0.49.0) (2023-09-15)
 
 **Note:** Version bump only for package @deephaven/tsconfig
diff --git a/packages/tsconfig/package.json b/packages/tsconfig/package.json
index f6b370d958..b98503ef81 100644
--- a/packages/tsconfig/package.json
+++ b/packages/tsconfig/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@deephaven/tsconfig",
-  "version": "0.49.0",
+  "version": "0.50.0",
   "description": "Deephaven TypeScript configuration",
   "repository": {
     "type": "git",
diff --git a/packages/utils/CHANGELOG.md b/packages/utils/CHANGELOG.md
index 44a27dd144..b7490ffd9b 100644
--- a/packages/utils/CHANGELOG.md
+++ b/packages/utils/CHANGELOG.md
@@ -3,6 +3,30 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [0.50.0](https://github.com/deephaven/web-client-ui/compare/v0.49.1...v0.50.0) (2023-10-13)
+
+
+* fix!: CSS based loading spinner (#1532) ([f06fbb0](https://github.com/deephaven/web-client-ui/commit/f06fbb01e27eaaeccab6031d8ff010ffee303d99)), closes [#1532](https://github.com/deephaven/web-client-ui/issues/1532) [#1531](https://github.com/deephaven/web-client-ui/issues/1531)
+
+
+### Features
+
+* Monaco theming ([#1560](https://github.com/deephaven/web-client-ui/issues/1560)) ([4eda17c](https://github.com/deephaven/web-client-ui/commit/4eda17c82f6c177a11ba600d6f43c4f36915f6bd)), closes [#1542](https://github.com/deephaven/web-client-ui/issues/1542)
+* Theme Plugin Loading ([#1524](https://github.com/deephaven/web-client-ui/issues/1524)) ([a9541b1](https://github.com/deephaven/web-client-ui/commit/a9541b108f1d998bb2713e70642f5a54aaf8bd97)), closes [#1a171](https://github.com/deephaven/web-client-ui/issues/1a171) [#4c7](https://github.com/deephaven/web-client-ui/issues/4c7) [#1a171](https://github.com/deephaven/web-client-ui/issues/1a171) [#4c7](https://github.com/deephaven/web-client-ui/issues/4c7) [#4c7](https://github.com/deephaven/web-client-ui/issues/4c7) [#1530](https://github.com/deephaven/web-client-ui/issues/1530)
+
+
+### BREAKING CHANGES
+
+* Theme variables have to be present on body to avoid
+Monaco init failing
+* Inline LoadingSpinner instances will need to be
+decorated with `className="loading-spinner-vertical-align"` for vertical
+alignment to work as before
+
+
+
+
+
 # [0.49.0](https://github.com/deephaven/web-client-ui/compare/v0.48.0...v0.49.0) (2023-09-15)
 
 **Note:** Version bump only for package @deephaven/utils
diff --git a/packages/utils/package.json b/packages/utils/package.json
index 69e8527c15..240da1e6b8 100644
--- a/packages/utils/package.json
+++ b/packages/utils/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@deephaven/utils",
-  "version": "0.49.0",
+  "version": "0.50.0",
   "description": "Deephaven Utils",
   "author": "Deephaven Data Labs LLC",
   "license": "Apache-2.0",
diff --git a/packages/utils/src/ColorUtils.test.ts b/packages/utils/src/ColorUtils.test.ts
index 3616722903..5cc3166e82 100644
--- a/packages/utils/src/ColorUtils.test.ts
+++ b/packages/utils/src/ColorUtils.test.ts
@@ -1,4 +1,104 @@
 import ColorUtils from './ColorUtils';
+import TestUtils from './TestUtils';
+
+const { createMockProxy } = TestUtils;
+
+const getBackgroundColor = jest.fn();
+const setBackgroundColor = jest.fn();
+
+const mockDivEl = createMockProxy<HTMLDivElement>({
+  style: {
+    get backgroundColor(): string {
+      return getBackgroundColor();
+    },
+    set backgroundColor(value: string) {
+      setBackgroundColor(value);
+    },
+  } as HTMLDivElement['style'],
+});
+
+const colorMap = [
+  {
+    rgb: { r: 255, g: 0, b: 0 },
+    hex: '#ff0000ff',
+  },
+  {
+    rgb: { r: 255, g: 128, b: 0 },
+    hex: '#ff8000ff',
+  },
+  {
+    rgb: { r: 255, g: 255, b: 0 },
+    hex: '#ffff00ff',
+  },
+  {
+    rgb: { r: 128, g: 255, b: 0 },
+    hex: '#80ff00ff',
+  },
+  {
+    rgb: { r: 0, g: 255, b: 0 },
+    hex: '#00ff00ff',
+  },
+  {
+    rgb: { r: 0, g: 255, b: 128 },
+    hex: '#00ff80ff',
+  },
+  {
+    rgb: { r: 0, g: 255, b: 255 },
+    hex: '#00ffffff',
+  },
+  {
+    rgb: { r: 0, g: 128, b: 255 },
+    hex: '#0080ffff',
+  },
+  {
+    rgb: { r: 0, g: 0, b: 255 },
+    hex: '#0000ffff',
+  },
+  {
+    rgb: { r: 128, g: 0, b: 255 },
+    hex: '#8000ffff',
+  },
+  {
+    rgb: { r: 255, g: 0, b: 255 },
+    hex: '#ff00ffff',
+  },
+  {
+    rgb: { r: 255, g: 0, b: 128 },
+    hex: '#ff0080ff',
+  },
+];
+
+beforeEach(() => {
+  jest.clearAllMocks();
+  jest.restoreAllMocks();
+  expect.hasAssertions();
+
+  getBackgroundColor.mockName('getBackgroundColor');
+  setBackgroundColor.mockName('setBackgroundColor');
+});
+
+describe('asRgbOrRgbaString', () => {
+  beforeEach(() => {
+    jest
+      .spyOn(document, 'createElement')
+      .mockName('createElement')
+      .mockReturnValue(mockDivEl);
+  });
+
+  it('should return resolved backgroundColor value', () => {
+    getBackgroundColor.mockReturnValue('get backgroundColor');
+
+    const actual = ColorUtils.asRgbOrRgbaString('red');
+    expect(actual).toEqual('get backgroundColor');
+  });
+
+  it('should return null if backgroundColor resolves to empty string', () => {
+    getBackgroundColor.mockReturnValue('');
+
+    const actual = ColorUtils.asRgbOrRgbaString('red');
+    expect(actual).toBeNull();
+  });
+});
 
 describe('isDark', () => {
   it('returns true if the background is dark', () => {
@@ -21,3 +121,83 @@ describe('isDark', () => {
     expect(() => ColorUtils.isDark('')).toThrowError(/Invalid color received/);
   });
 });
+
+describe('normalizeCssColor', () => {
+  beforeEach(() => {
+    jest
+      .spyOn(document, 'createElement')
+      .mockName('createElement')
+      .mockReturnValue(mockDivEl);
+  });
+
+  it.each([
+    'rgb(0, 128, 255)',
+    'rgba(0, 128, 255, 64)',
+    'rgb(0 128 255)',
+    'rgba(0 128 255 64)',
+  ])(
+    'should normalize a resolved rgb/a color to 8 character hex value',
+    rgbOrRgbaColor => {
+      getBackgroundColor.mockReturnValue(rgbOrRgbaColor);
+
+      const actual = ColorUtils.normalizeCssColor('some.color');
+      expect(actual).toEqual(
+        ColorUtils.rgbaToHex8(ColorUtils.parseRgba(rgbOrRgbaColor)!)
+      );
+    }
+  );
+
+  it('should return original color if backgroundColor resolves to empty string', () => {
+    getBackgroundColor.mockReturnValue('');
+
+    const actual = ColorUtils.normalizeCssColor('red');
+    expect(actual).toEqual('red');
+  });
+
+  it('should return original color if backgroundColor resolves to non rgb/a', () => {
+    getBackgroundColor.mockReturnValue('xxx');
+
+    const actual = ColorUtils.normalizeCssColor('red');
+    expect(actual).toEqual('red');
+  });
+});
+
+describe('parseRgba', () => {
+  it.each([
+    ['rgb(255, 255, 255)', { r: 255, g: 255, b: 255, a: 1 }],
+    ['rgb(0,0,0)', { r: 0, g: 0, b: 0, a: 1 }],
+    ['rgb(255 255 255)', { r: 255, g: 255, b: 255, a: 1 }],
+    ['rgb(0 0 0)', { r: 0, g: 0, b: 0, a: 1 }],
+    ['rgb(0 128 255)', { r: 0, g: 128, b: 255, a: 1 }],
+    ['rgb(0 128 255 / .5)', { r: 0, g: 128, b: 255, a: 0.5 }],
+  ])('should parse rgb: %s, %s', (rgb, hex) => {
+    expect(ColorUtils.parseRgba(rgb)).toEqual(hex);
+  });
+
+  it.each([
+    ['rgba(255, 255, 255, 1)', { r: 255, g: 255, b: 255, a: 1 }],
+    ['rgba(0,0,0,0)', { r: 0, g: 0, b: 0, a: 0 }],
+    ['rgba(255 255 255 1)', { r: 255, g: 255, b: 255, a: 1 }],
+    ['rgba(0 0 0 0)', { r: 0, g: 0, b: 0, a: 0 }],
+    ['rgba(0 128 255 .5)', { r: 0, g: 128, b: 255, a: 0.5 }],
+  ])('should parse rgba: %s, %s', (rgba, hex) => {
+    expect(ColorUtils.parseRgba(rgba)).toEqual(hex);
+  });
+
+  it('should return null if not rgb or rgba', () => {
+    expect(ColorUtils.parseRgba('xxx')).toBeNull();
+  });
+
+  it.each(['rgb(0 128)', 'rgba(0 128)', 'rgb(0, 128)', 'rgba(0, 128)'])(
+    'should return null if given < 3 args',
+    value => {
+      expect(ColorUtils.parseRgba(value)).toBeNull();
+    }
+  );
+});
+
+describe('rgbaToHex8', () => {
+  it.each(colorMap)('should convert rgb to hex: %s, %s', ({ rgb, hex }) => {
+    expect(ColorUtils.rgbaToHex8(rgb)).toEqual(hex);
+  });
+});
diff --git a/packages/utils/src/ColorUtils.ts b/packages/utils/src/ColorUtils.ts
index 6531fedec0..297994df44 100644
--- a/packages/utils/src/ColorUtils.ts
+++ b/packages/utils/src/ColorUtils.ts
@@ -1,4 +1,20 @@
 class ColorUtils {
+  /**
+   * Attempt to get the rgb or rgba string for a color string. If the color string
+   * can't be resolved to a valid color, null is returned.
+   * @param colorString The color string to resolve
+   */
+  static asRgbOrRgbaString(colorString: string): string | null {
+    const divEl = document.createElement('div');
+    divEl.style.backgroundColor = colorString;
+
+    if (divEl.style.backgroundColor === '') {
+      return null;
+    }
+
+    return divEl.style.backgroundColor;
+  }
+
   /**
    * THIS HAS POOR PERFORMANCE DUE TO DOM MANIPULATION
    * DO NOT USE HEAVILY
@@ -32,5 +48,88 @@ class ColorUtils {
       (color[0] * 299 + color[1] * 587 + color[2] * 114) / 1000
     );
   }
+
+  /**
+   * Normalize a css color to 8 character hex value. If the color can't be resolved,
+   * return the original color string.
+   * @param colorString The color string to normalize
+   */
+  static normalizeCssColor(colorString: string): string {
+    const maybeRgbOrRgba = ColorUtils.asRgbOrRgbaString(colorString);
+    if (maybeRgbOrRgba == null) {
+      return colorString;
+    }
+
+    const rgba = ColorUtils.parseRgba(maybeRgbOrRgba);
+    if (rgba === null) {
+      return colorString;
+    }
+
+    return ColorUtils.rgbaToHex8(rgba);
+  }
+
+  /**
+   * Parse a given `rgb` or `rgba` css expression into its constituent r, g, b, a
+   * values. If the expression cannot be parsed, it will return null.
+   * Note that this parser is more permissive than the CSS spec and shouldn't be
+   * relied on as a full validation mechanism. For the most part, it assumes that
+   * the input is already a valid rgb or rgba expression.
+   *
+   * e.g. `rgb(255, 255, 255)` -> `{ r: 255, g: 255, b: 255, a: 1 }`
+   * e.g. `rgba(255, 255, 255, 0.5)` -> `{ r: 255, g: 255, b: 255, a: 0.5 }`
+   * @param rgbOrRgbaString The rgb or rgba string to parse
+   */
+  static parseRgba(
+    rgbOrRgbaString: string
+  ): { r: number; g: number; b: number; a: number } | null {
+    const [, name, args] = /^(rgba?)\((.*?)\)$/.exec(rgbOrRgbaString) ?? [];
+    if (name == null) {
+      return null;
+    }
+
+    // Split on spaces, commas, and slashes. Note that this more permissive than
+    // the CSS spec in that slashes should only be used to delimit the alpha value
+    // (e.g. r g b / a), but this would match r/g/b/a. It also would match a mixed
+    // delimiter case (e.g. r,g b,a). This seems like a reasonable tradeoff for the
+    // complexity that would be added to enforce the full spec.
+    const tokens = args.split(/[ ,/]/).filter(Boolean);
+
+    if (tokens.length < 3) {
+      return null;
+    }
+
+    const [r, g, b, a = 1] = tokens.map(Number);
+
+    return { r, g, b, a };
+  }
+
+  /**
+   * Convert an rgba object to an 8 character hex color string.
+   * @param r The red value
+   * @param g The green value
+   * @param b The blue value
+   * @param a The alpha value (defaults to 1)
+   * @returns The a character hex string with # prefix
+   */
+  static rgbaToHex8({
+    r,
+    g,
+    b,
+    a = 1,
+  }: {
+    r: number;
+    g: number;
+    b: number;
+    a?: number;
+  }): string {
+    // eslint-disable-next-line no-param-reassign
+    a = Math.round(a * 255);
+
+    const [rh, gh, bh, ah] = [r, g, b, a].map(v =>
+      v.toString(16).padStart(2, '0')
+    );
+
+    return `#${rh}${gh}${bh}${ah}`;
+  }
 }
 export default ColorUtils;
diff --git a/tests/table-operations.spec.ts-snapshots/rollup-rows-and-aggregrate-columns-1-chromium-linux.png b/tests/table-operations.spec.ts-snapshots/rollup-rows-and-aggregrate-columns-1-chromium-linux.png
index 66e8100836..b780e4cbbb 100644
Binary files a/tests/table-operations.spec.ts-snapshots/rollup-rows-and-aggregrate-columns-1-chromium-linux.png and b/tests/table-operations.spec.ts-snapshots/rollup-rows-and-aggregrate-columns-1-chromium-linux.png differ
diff --git a/tests/table-operations.spec.ts-snapshots/rollup-rows-and-aggregrate-columns-1-firefox-linux.png b/tests/table-operations.spec.ts-snapshots/rollup-rows-and-aggregrate-columns-1-firefox-linux.png
index e7f2ffbfba..23bd07d68b 100644
Binary files a/tests/table-operations.spec.ts-snapshots/rollup-rows-and-aggregrate-columns-1-firefox-linux.png and b/tests/table-operations.spec.ts-snapshots/rollup-rows-and-aggregrate-columns-1-firefox-linux.png differ
diff --git a/tests/table-operations.spec.ts-snapshots/rollup-rows-and-aggregrate-columns-1-webkit-linux.png b/tests/table-operations.spec.ts-snapshots/rollup-rows-and-aggregrate-columns-1-webkit-linux.png
index b47300ecbc..8446e49fd5 100644
Binary files a/tests/table-operations.spec.ts-snapshots/rollup-rows-and-aggregrate-columns-1-webkit-linux.png and b/tests/table-operations.spec.ts-snapshots/rollup-rows-and-aggregrate-columns-1-webkit-linux.png differ
diff --git a/tests/table-operations.spec.ts-snapshots/rollup-rows-and-aggregrate-columns-2-chromium-linux.png b/tests/table-operations.spec.ts-snapshots/rollup-rows-and-aggregrate-columns-2-chromium-linux.png
index d4801a4724..08ccdd76d3 100644
Binary files a/tests/table-operations.spec.ts-snapshots/rollup-rows-and-aggregrate-columns-2-chromium-linux.png and b/tests/table-operations.spec.ts-snapshots/rollup-rows-and-aggregrate-columns-2-chromium-linux.png differ
diff --git a/tests/table-operations.spec.ts-snapshots/rollup-rows-and-aggregrate-columns-2-firefox-linux.png b/tests/table-operations.spec.ts-snapshots/rollup-rows-and-aggregrate-columns-2-firefox-linux.png
index 03cdbb8684..a0880f72d3 100644
Binary files a/tests/table-operations.spec.ts-snapshots/rollup-rows-and-aggregrate-columns-2-firefox-linux.png and b/tests/table-operations.spec.ts-snapshots/rollup-rows-and-aggregrate-columns-2-firefox-linux.png differ
diff --git a/tests/table-operations.spec.ts-snapshots/rollup-rows-and-aggregrate-columns-2-webkit-linux.png b/tests/table-operations.spec.ts-snapshots/rollup-rows-and-aggregrate-columns-2-webkit-linux.png
index 8bd046af9d..47370be3ba 100644
Binary files a/tests/table-operations.spec.ts-snapshots/rollup-rows-and-aggregrate-columns-2-webkit-linux.png and b/tests/table-operations.spec.ts-snapshots/rollup-rows-and-aggregrate-columns-2-webkit-linux.png differ
diff --git a/tests/table-operations.spec.ts-snapshots/rollup-rows-and-aggregrate-columns-3-chromium-linux.png b/tests/table-operations.spec.ts-snapshots/rollup-rows-and-aggregrate-columns-3-chromium-linux.png
index 4c1987805d..72161db66f 100644
Binary files a/tests/table-operations.spec.ts-snapshots/rollup-rows-and-aggregrate-columns-3-chromium-linux.png and b/tests/table-operations.spec.ts-snapshots/rollup-rows-and-aggregrate-columns-3-chromium-linux.png differ
diff --git a/tests/table-operations.spec.ts-snapshots/rollup-rows-and-aggregrate-columns-3-firefox-linux.png b/tests/table-operations.spec.ts-snapshots/rollup-rows-and-aggregrate-columns-3-firefox-linux.png
index f65a50fa1c..ff7ea1c4b1 100644
Binary files a/tests/table-operations.spec.ts-snapshots/rollup-rows-and-aggregrate-columns-3-firefox-linux.png and b/tests/table-operations.spec.ts-snapshots/rollup-rows-and-aggregrate-columns-3-firefox-linux.png differ
diff --git a/tests/table-operations.spec.ts-snapshots/rollup-rows-and-aggregrate-columns-3-webkit-linux.png b/tests/table-operations.spec.ts-snapshots/rollup-rows-and-aggregrate-columns-3-webkit-linux.png
index 21e214d568..1717ae9bdc 100644
Binary files a/tests/table-operations.spec.ts-snapshots/rollup-rows-and-aggregrate-columns-3-webkit-linux.png and b/tests/table-operations.spec.ts-snapshots/rollup-rows-and-aggregrate-columns-3-webkit-linux.png differ
diff --git a/tests/table-operations.spec.ts-snapshots/rollup-rows-and-aggregrate-columns-4-chromium-linux.png b/tests/table-operations.spec.ts-snapshots/rollup-rows-and-aggregrate-columns-4-chromium-linux.png
index 2636ae6d84..c46011cf3c 100644
Binary files a/tests/table-operations.spec.ts-snapshots/rollup-rows-and-aggregrate-columns-4-chromium-linux.png and b/tests/table-operations.spec.ts-snapshots/rollup-rows-and-aggregrate-columns-4-chromium-linux.png differ
diff --git a/tests/table-operations.spec.ts-snapshots/rollup-rows-and-aggregrate-columns-4-firefox-linux.png b/tests/table-operations.spec.ts-snapshots/rollup-rows-and-aggregrate-columns-4-firefox-linux.png
index d421320741..3e57774343 100644
Binary files a/tests/table-operations.spec.ts-snapshots/rollup-rows-and-aggregrate-columns-4-firefox-linux.png and b/tests/table-operations.spec.ts-snapshots/rollup-rows-and-aggregrate-columns-4-firefox-linux.png differ
diff --git a/tests/table-operations.spec.ts-snapshots/rollup-rows-and-aggregrate-columns-4-webkit-linux.png b/tests/table-operations.spec.ts-snapshots/rollup-rows-and-aggregrate-columns-4-webkit-linux.png
index db02aeb0a7..39a8098eee 100644
Binary files a/tests/table-operations.spec.ts-snapshots/rollup-rows-and-aggregrate-columns-4-webkit-linux.png and b/tests/table-operations.spec.ts-snapshots/rollup-rows-and-aggregrate-columns-4-webkit-linux.png differ
diff --git a/tests/table-operations.spec.ts-snapshots/rollup-rows-and-aggregrate-columns-5-chromium-linux.png b/tests/table-operations.spec.ts-snapshots/rollup-rows-and-aggregrate-columns-5-chromium-linux.png
index 67d89ae466..1ea62c210f 100644
Binary files a/tests/table-operations.spec.ts-snapshots/rollup-rows-and-aggregrate-columns-5-chromium-linux.png and b/tests/table-operations.spec.ts-snapshots/rollup-rows-and-aggregrate-columns-5-chromium-linux.png differ
diff --git a/tests/table-operations.spec.ts-snapshots/rollup-rows-and-aggregrate-columns-5-firefox-linux.png b/tests/table-operations.spec.ts-snapshots/rollup-rows-and-aggregrate-columns-5-firefox-linux.png
index 140922d569..832efd0b29 100644
Binary files a/tests/table-operations.spec.ts-snapshots/rollup-rows-and-aggregrate-columns-5-firefox-linux.png and b/tests/table-operations.spec.ts-snapshots/rollup-rows-and-aggregrate-columns-5-firefox-linux.png differ
diff --git a/tests/table-operations.spec.ts-snapshots/rollup-rows-and-aggregrate-columns-5-webkit-linux.png b/tests/table-operations.spec.ts-snapshots/rollup-rows-and-aggregrate-columns-5-webkit-linux.png
index 266959ec4e..099ae4b89d 100644
Binary files a/tests/table-operations.spec.ts-snapshots/rollup-rows-and-aggregrate-columns-5-webkit-linux.png and b/tests/table-operations.spec.ts-snapshots/rollup-rows-and-aggregrate-columns-5-webkit-linux.png differ
diff --git a/tests/table-operations.spec.ts-snapshots/rollup-rows-and-aggregrate-columns-6-chromium-linux.png b/tests/table-operations.spec.ts-snapshots/rollup-rows-and-aggregrate-columns-6-chromium-linux.png
index 55131ce706..09b7dbfc69 100644
Binary files a/tests/table-operations.spec.ts-snapshots/rollup-rows-and-aggregrate-columns-6-chromium-linux.png and b/tests/table-operations.spec.ts-snapshots/rollup-rows-and-aggregrate-columns-6-chromium-linux.png differ
diff --git a/tests/table-operations.spec.ts-snapshots/rollup-rows-and-aggregrate-columns-6-firefox-linux.png b/tests/table-operations.spec.ts-snapshots/rollup-rows-and-aggregrate-columns-6-firefox-linux.png
index e7a7a2fd0a..0d118afe91 100644
Binary files a/tests/table-operations.spec.ts-snapshots/rollup-rows-and-aggregrate-columns-6-firefox-linux.png and b/tests/table-operations.spec.ts-snapshots/rollup-rows-and-aggregrate-columns-6-firefox-linux.png differ
diff --git a/tests/table-operations.spec.ts-snapshots/rollup-rows-and-aggregrate-columns-6-webkit-linux.png b/tests/table-operations.spec.ts-snapshots/rollup-rows-and-aggregrate-columns-6-webkit-linux.png
index 14b382209e..96263e72ec 100644
Binary files a/tests/table-operations.spec.ts-snapshots/rollup-rows-and-aggregrate-columns-6-webkit-linux.png and b/tests/table-operations.spec.ts-snapshots/rollup-rows-and-aggregrate-columns-6-webkit-linux.png differ
diff --git a/tests/table-operations.spec.ts-snapshots/rollup-rows-and-aggregrate-columns-7-chromium-linux.png b/tests/table-operations.spec.ts-snapshots/rollup-rows-and-aggregrate-columns-7-chromium-linux.png
index 8e315668d9..f384881e5d 100644
Binary files a/tests/table-operations.spec.ts-snapshots/rollup-rows-and-aggregrate-columns-7-chromium-linux.png and b/tests/table-operations.spec.ts-snapshots/rollup-rows-and-aggregrate-columns-7-chromium-linux.png differ
diff --git a/tests/table-operations.spec.ts-snapshots/rollup-rows-and-aggregrate-columns-7-firefox-linux.png b/tests/table-operations.spec.ts-snapshots/rollup-rows-and-aggregrate-columns-7-firefox-linux.png
index 8b7bad8d14..b7686d07b0 100644
Binary files a/tests/table-operations.spec.ts-snapshots/rollup-rows-and-aggregrate-columns-7-firefox-linux.png and b/tests/table-operations.spec.ts-snapshots/rollup-rows-and-aggregrate-columns-7-firefox-linux.png differ
diff --git a/tests/table-operations.spec.ts-snapshots/rollup-rows-and-aggregrate-columns-7-webkit-linux.png b/tests/table-operations.spec.ts-snapshots/rollup-rows-and-aggregrate-columns-7-webkit-linux.png
index 0883271226..03917650b2 100644
Binary files a/tests/table-operations.spec.ts-snapshots/rollup-rows-and-aggregrate-columns-7-webkit-linux.png and b/tests/table-operations.spec.ts-snapshots/rollup-rows-and-aggregrate-columns-7-webkit-linux.png differ
diff --git a/tests/table.spec.ts-snapshots/tests-simple-table-operations-go-to-1-chromium-linux.png b/tests/table.spec.ts-snapshots/tests-simple-table-operations-go-to-1-chromium-linux.png
index 4697fe11db..067bf33c35 100644
Binary files a/tests/table.spec.ts-snapshots/tests-simple-table-operations-go-to-1-chromium-linux.png and b/tests/table.spec.ts-snapshots/tests-simple-table-operations-go-to-1-chromium-linux.png differ
diff --git a/tests/table.spec.ts-snapshots/tests-simple-table-operations-go-to-1-firefox-linux.png b/tests/table.spec.ts-snapshots/tests-simple-table-operations-go-to-1-firefox-linux.png
index f105166d15..3da537b491 100644
Binary files a/tests/table.spec.ts-snapshots/tests-simple-table-operations-go-to-1-firefox-linux.png and b/tests/table.spec.ts-snapshots/tests-simple-table-operations-go-to-1-firefox-linux.png differ
diff --git a/tests/table.spec.ts-snapshots/tests-simple-table-operations-go-to-1-webkit-linux.png b/tests/table.spec.ts-snapshots/tests-simple-table-operations-go-to-1-webkit-linux.png
index 70ef232433..288bb1d605 100644
Binary files a/tests/table.spec.ts-snapshots/tests-simple-table-operations-go-to-1-webkit-linux.png and b/tests/table.spec.ts-snapshots/tests-simple-table-operations-go-to-1-webkit-linux.png differ