diff --git a/scripts/compile-oui.js b/scripts/compile-oui.js
index 96b9a02ed6..1746eb6ee2 100755
--- a/scripts/compile-oui.js
+++ b/scripts/compile-oui.js
@@ -308,6 +308,55 @@ function compileBundle() {
     }
   });
   console.log(chalk.green('✔ Finished test utils files'));
+
+  console.log('Building chart theme module...');
+  execSync(
+    'webpack src/themes/charts/themes.ts -o dist/oui_charts_theme.js --output-library-target="commonjs" --config=src/webpack.config.js',
+    {
+      stdio: 'inherit',
+    }
+  );
+  dtsGenerator({
+    prefix: '',
+    out: 'dist/oui_charts_theme.d.ts',
+    baseDir: path.resolve(__dirname, '..', 'src/themes/charts/'),
+    files: ['themes.ts'],
+    resolveModuleId() {
+      return '@opensearch-project/oui/dist/oui_charts_theme';
+    },
+    resolveModuleImport(params) {
+      if (params.importedModuleId === '../../components/common') {
+        return '@opensearch-project/oui/src/components/common';
+      }
+      return null;
+    }
+  });
+
+  /* OUI -> EUI Aliases */
+  execSync(
+    'webpack src/themes/charts/themes.ts -o dist/eui_charts_theme.js --output-library-target="commonjs" --config=src/webpack.config.js',
+    {
+      stdio: 'inherit',
+    }
+  );
+  dtsGenerator({
+    prefix: '',
+    out: 'dist/eui_charts_theme.d.ts',
+    baseDir: path.resolve(__dirname, '..', 'src/themes/charts/'),
+    files: ['themes.ts'],
+    resolveModuleId() {
+      return '@elastic/eui/dist/eui_charts_theme';
+    },
+    resolveModuleImport(params) {
+      if (params.importedModuleId === '../../components/common') {
+        return '@elastic/eui/src/components/common';
+      }
+      return null;
+    }
+  });
+  /* End of Aliases */
+
+  console.log(chalk.green('✔ Finished chart theme module'));
 }
 
 /* OUI -> EUI Aliases */
diff --git a/scripts/dtsgenerator.js b/scripts/dtsgenerator.js
index c31976a46b..399ff749ee 100644
--- a/scripts/dtsgenerator.js
+++ b/scripts/dtsgenerator.js
@@ -46,6 +46,7 @@ const generator = dtsGenerator({
     '**/*.test.tsx',
     '**/*.testenv.ts',
     '**/*.testenv.tsx',
+    'src/themes/charts/*', // A separate d.ts file is generated for the charts theme file
     'src/test/*', // A separate d.ts file is generated for test utils
     'src-docs/**/*', // Don't include src-docs
   ],
diff --git a/src-docs/src/theme_cascadia_dark.scss b/src-docs/src/theme_cascadia_dark.scss
index e627c40573..4ade42cd98 100644
--- a/src-docs/src/theme_cascadia_dark.scss
+++ b/src-docs/src/theme_cascadia_dark.scss
@@ -19,3 +19,4 @@
 
 // Elastic charts
 @import '~@elastic/charts/dist/theme';
+@import '../../src/themes/charts/theme';
diff --git a/src-docs/src/theme_cascadia_light.scss b/src-docs/src/theme_cascadia_light.scss
index 152856f99f..fbe33f98da 100644
--- a/src-docs/src/theme_cascadia_light.scss
+++ b/src-docs/src/theme_cascadia_light.scss
@@ -19,3 +19,4 @@
 
 // Elastic charts
 @import '~@elastic/charts/dist/theme';
+@import '../../src/themes/charts/theme';
diff --git a/src-docs/src/theme_dark.scss b/src-docs/src/theme_dark.scss
index 44296a9d92..0cfed9c329 100644
--- a/src-docs/src/theme_dark.scss
+++ b/src-docs/src/theme_dark.scss
@@ -20,3 +20,4 @@
 
 // Elastic charts
 @import '~@elastic/charts/dist/theme';
+@import '../../src/themes/charts/theme';
diff --git a/src-docs/src/theme_light.scss b/src-docs/src/theme_light.scss
index f32f76dc86..b88c094394 100644
--- a/src-docs/src/theme_light.scss
+++ b/src-docs/src/theme_light.scss
@@ -20,3 +20,4 @@
 
 // Elastic charts
 @import '~@elastic/charts/dist/theme';
+@import '../../src/themes/charts/theme';