diff --git a/src/config.js b/src/config.js
index ba06c2146..efe8cafd5 100644
--- a/src/config.js
+++ b/src/config.js
@@ -1,14 +1,22 @@
 import { assignWithDepth } from './utils';
 import { logger } from './logger';
+import theme from './themes';
+
+// import { unflatten } from 'flat';
+// import flatten from 'flat';
+
 // import themeVariables from './theme-default';
 // import themeForestVariables from './theme-forest';
 // import themeNeutralVariables from './theme-neutral';
 
-const themes = {};
+const handleThemeVariables = value => {
+  return theme[value] ? theme[value].getThemeVariables() : theme.default.getThemeVariables();
+};
+
+const manipulators = {
+  themeVariables: handleThemeVariables
+};
 
-for (const themeName of ['default', 'forest', 'dark', 'neutral', 'base']) {
-  themes[themeName] = require(`./themes/theme-${themeName}.js`);
-}
 /**
  * **Configuration methods in Mermaid version 8.6.0 have been updated, to learn more[[click here](8.6.0_docs.md)].**
  *
@@ -59,7 +67,7 @@ const config = {
    * </pre>
    */
   theme: 'default',
-  themeVariables: themes['default'].getThemeVariables(),
+  themeVariables: theme['default'].getThemeVariables(),
   themeCSS: undefined,
   /* **maxTextSize** - The maximum allowed size of the users text diamgram */
   maxTextSize: 50000,
@@ -869,6 +877,11 @@ const currentConfig = assignWithDepth({}, defaultConfig);
  * @returns {*} - the siteConfig
  */
 export const setSiteConfig = conf => {
+  Object.keys(conf).forEach(key => {
+    const manipulator = manipulators[key];
+    conf[key] = manipulator ? manipulator(conf[key]) : conf[key];
+  });
+
   assignWithDepth(currentConfig, conf, { clobber: true });
   // Set theme variables if user has set the theme option
   assignWithDepth(siteConfig, conf);
@@ -901,6 +914,10 @@ export const getSiteConfig = () => {
  */
 export const setConfig = conf => {
   sanitize(conf);
+  Object.keys(conf).forEach(key => {
+    const manipulator = manipulators[key];
+    conf[key] = manipulator ? manipulator(conf[key]) : conf[key];
+  });
 
   assignWithDepth(currentConfig, conf);
   return getConfig();
diff --git a/src/mermaidAPI.js b/src/mermaidAPI.js
index 0f37186a5..4587033e6 100644
--- a/src/mermaidAPI.js
+++ b/src/mermaidAPI.js
@@ -52,11 +52,7 @@ import journeyDb from './diagrams/user-journey/journeyDb';
 import journeyRenderer from './diagrams/user-journey/journeyRenderer';
 import configApi from './config';
 import getStyles from './styles';
-const themes = {};
-
-for (const themeName of ['default', 'forest', 'dark', 'neutral', 'base']) {
-  themes[themeName] = require(`./themes/theme-${themeName}.js`);
-}
+import theme from './themes';
 
 function parse(text) {
   const graphInit = utils.detectInit(text);
@@ -534,9 +530,9 @@ function updateRendererConfigs(conf) {
 
 function reinitialize(options) {
   // console.warn(`mermaidAPI.reinitialize: v${pkg.version}`, options);
-  if (options.theme && themes[options.theme]) {
+  if (options.theme && theme[options.theme]) {
     // Todo merge with user options
-    options.themeVariables = themes[options.theme].getThemeVariables(options.themeVariables);
+    options.themeVariables = options.theme;
   }
 
   // Set default options
@@ -550,11 +546,11 @@ function initialize(options) {
   // console.log(`mermaidAPI.initialize: v${pkg.version} ${options}`);
   // Set default options
 
-  if (options && options.theme && themes[options.theme]) {
+  if (options && options.theme && theme[options.theme]) {
     // Todo merge with user options
-    options.themeVariables = themes[options.theme].getThemeVariables(options.themeVariables);
+    options.themeVariables = theme[options.theme].getThemeVariables(options.themeVariables);
   } else {
-    if (options) options.themeVariables = themes.default;
+    if (options) options.themeVariables = theme.default.getThemeVariables();
   }
 
   const config = typeof options === 'object' ? setSiteConfig(options) : getSiteConfig();
diff --git a/src/themes/index.js b/src/themes/index.js
new file mode 100644
index 000000000..d3ee96baf
--- /dev/null
+++ b/src/themes/index.js
@@ -0,0 +1,23 @@
+import { getThemeVariables as baseThemeVariables } from './theme-base';
+import { getThemeVariables as darkThemeVariables } from './theme-dark';
+import { getThemeVariables as defaultThemeVariables } from './theme-default';
+import { getThemeVariables as forestThemeVariables } from './theme-forest';
+import { getThemeVariables as neutralThemeVariables } from './theme-neutral';
+
+export default {
+  base: {
+    getThemeVariables: baseThemeVariables
+  },
+  dark: {
+    getThemeVariables: darkThemeVariables
+  },
+  default: {
+    getThemeVariables: defaultThemeVariables
+  },
+  forest: {
+    getThemeVariables: forestThemeVariables
+  },
+  neutral: {
+    getThemeVariables: neutralThemeVariables
+  }
+};