#1542 Setting theme options as the regular options

src/config.js

@@ -1,6 +1,14 @@
 import { assignWithDepth } from './utils';
 import { logger } from './logger';
+// import themeVariables from './theme-default';
+// import themeForestVariables from './theme-forest';
+// import themeNeutralVariables from './theme-neutral';
 
+const themes = {};
+
+for (const themeName of ['default', 'forest', 'dark', 'neutral']) {
+  themes[themeName] = require(`./theme-${themeName}.js`).default;
+}
 /**
  * **Configuration methods in Mermaid version 8.6.0 have been updated, to learn more[[click here](8.6.0_docs.md)].**
  *
@@ -51,6 +59,7 @@ const config = {
    * </pre>
    */
   theme: 'default',
+  themeVariables: themes.default,
   themeCSS: undefined,
   /* **maxTextSize** - The maximum allowed size of the users text diamgram */
   maxTextSize: 50000,
@@ -836,6 +845,8 @@ const config = {
     useMaxWidth: true
   }
 };
+
+// debugger;
 config.class.arrowMarkerAbsolute = config.arrowMarkerAbsolute;
 config.git.arrowMarkerAbsolute = config.arrowMarkerAbsolute;
 export const defaultConfig = Object.freeze(config);
@@ -845,24 +856,30 @@ const currentConfig = assignWithDepth({}, defaultConfig);
 
 /**
  *## setSiteConfig
-  
+
  *| Function | Description         | Type    | Values             |
  *| --------- | ------------------- | ------- | ------------------ |
  *| setSiteConfig|Sets the siteConfig to desired values | Put Request | Any Values, except ones in secure array|
- 
+
  ***Notes:**
  *Sets the siteConfig. The siteConfig is a protected configuration for repeat use. Calls to reset() will reset
  *the currentConfig to siteConfig. Calls to reset(configApi.defaultConfig) will reset siteConfig and currentConfig
  *to the defaultConfig
  *Note: currentConfig is set in this function
-  
+
  **Default value: At default, will mirror Global Config**
  * @param conf - the base currentConfig to use as siteConfig
  * @returns {*} - the siteConfig
  */
 export const setSiteConfig = conf => {
   assignWithDepth(currentConfig, conf, { clobber: true });
+  // Set theme variables if user has set the theme option
+  // if (conf.theme && themes[conf.theme]) {
+  //   conf.themeVariables = themes[conf.theme];
+  // }
+  // debugger;
   assignWithDepth(siteConfig, conf);
+
   return getSiteConfig();
 };
 /**
@@ -870,7 +887,7 @@ export const setSiteConfig = conf => {
  *| Function | Description         | Type    |  Values             |
  *| --------- | ------------------- | ------- |  ------------------ |
  *| setSiteConfig|Returns the current siteConfig base configuration | Get Request | Returns Any Values  in siteConfig|
-  
+
  ***Notes**:
  *Returns **any** values in siteConfig.
  * @returns {*}
@@ -883,8 +900,8 @@ export const getSiteConfig = () => {
  *| Function  | Description         | Type    | Values             |
  *| --------- | ------------------- | ------- | ------------------ |
  *| setSiteConfig|Sets the siteConfig to desired values | Put Request| Any Values, except ones in secure array|
-  
-  
+
+
  ***Notes**:
  *Sets the currentConfig. The parameter conf is sanitized based on the siteConfig.secure keys. Any
  *values found in conf with key found in siteConfig.secure will be replaced with the corresponding
@@ -894,6 +911,10 @@ export const getSiteConfig = () => {
  */
 export const setConfig = conf => {
   sanitize(conf);
+
+  // if (conf.theme && themes[conf.theme]) {
+  //   conf.themeVariables = themes[conf.theme];
+  // }
   assignWithDepth(currentConfig, conf);
   return getConfig();
 };
@@ -902,7 +923,7 @@ export const setConfig = conf => {
  *| Function  | Description         | Type    | Return Values            |
  *| --------- | ------------------- | ------- | ------------------ |
  *| getConfig |Obtains the currentConfig | Get Request | Any Values from currentConfig|
-  
+
  ***Notes**:
  *Returns **any** the currentConfig
  * @returns {*} - the currentConfig
@@ -915,7 +936,7 @@ export const getConfig = () => {
  *| Function | Description         | Type    | Values             |
  *| --------- | ------------------- | ------- | ------------------ |
  *| sanitize  |Sets the siteConfig to desired values. | Put Request |None|
-  
+
  *Ensures options parameter does not attempt to override siteConfig secure keys
  *Note: modifies options in-place
  * @param options - the potential setConfig parameter
@@ -935,7 +956,7 @@ export const sanitize = options => {
 };
 /**
  *## reset
-  
+
  *| Function | Description         | Type    | Required | Values             |
  *| --------- | ------------------- | ------- | -------- | ------------------ |
  *| reset|Resets currentConfig to conf| Put Request | Required | None|
@@ -951,6 +972,12 @@ export const sanitize = options => {
 export const reset = (conf = getSiteConfig()) => {
   Object.keys(siteConfig).forEach(key => delete siteConfig[key]);
   Object.keys(currentConfig).forEach(key => delete currentConfig[key]);
+  // Set theme variables if user has set the theme option
+  // if (conf.theme && themes[conf.theme]) {
+  //   conf.themeVariables = themes[conf.theme];
+  // }
+  // debugger;
+
   assignWithDepth(siteConfig, conf, { clobber: true });
   assignWithDepth(currentConfig, conf, { clobber: true });
 };

src/diagrams/flowchart/styles.js

@@ -1,23 +1,4 @@
-const options = {
-  mainBkg: '#ECECFF',
-  secondBkg: '#ffffde',
-  lineColor: '#333333',
-  border1: '#CCCCFF',
-  border2: '#aaaa33',
-  arrowheadColor: '#333333',
-
-  /* Flowchart variables */
-
-  nodeBkg: 'mainBkg',
-  nodeBorder: '#9370DB',
-  clusterBkg: 'secondBkg',
-  clusterBorder: 'border2',
-  defaultLinkColor: 'lineColor',
-  titleColor: '#333',
-  edgeLabelBackground: '#e8e8e8'
-};
-
-const getStyles = () =>
+const getStyles = options =>
   `.label {
     font-family: 'trebuchet ms', verdana, arial;
     font-family: var(--mermaid-font-family);

src/mermaid.js

@@ -129,7 +129,7 @@ const init = function() {
 };
 
 const initialize = function(config) {
-  mermaidAPI.reset();
+  // mermaidAPI.reset();
   if (typeof config.mermaid !== 'undefined') {
     if (typeof config.mermaid.startOnLoad !== 'undefined') {
       mermaid.startOnLoad = config.mermaid.startOnLoad;
@@ -139,6 +139,7 @@ const initialize = function(config) {
     }
   }
   mermaidAPI.initialize(config);
+  mermaidAPI.reset();
 };
 
 /**

src/mermaidAPI.js

@@ -51,12 +51,11 @@ import journeyParser from './diagrams/user-journey/parser/journey';
 import journeyDb from './diagrams/user-journey/journeyDb';
 import journeyRenderer from './diagrams/user-journey/journeyRenderer';
 import configApi from './config';
-import getStyles from './theme';
-
+import getStyles from './styles';
 const themes = {};
 
 for (const themeName of ['default', 'forest', 'dark', 'neutral']) {
-  themes[themeName] = require(`./themes/${themeName}/index.scss`);
+  themes[themeName] = require(`./theme-${themeName}.js`).default;
 }
 
 function parse(text) {
@@ -199,6 +198,8 @@ export const decodeEntities = function(text) {
  * completed.
  */
 const render = function(id, _txt, cb, container) {
+  // debugger;
+
   const cnf = getConfig();
   // Check the maximum allowed text size
   let txt = _txt;
@@ -284,7 +285,7 @@ const render = function(id, _txt, cb, container) {
   const stylis = new Stylis();
   // stylis.use(extraScopePlugin(`#${id}`));
   console.warn('graphType', graphType);
-  const rules = stylis(`#${id}`, getStyles(graphType, userStyles, {}));
+  const rules = stylis(`#${id}`, getStyles(graphType, userStyles, cnf.themeVariables));
 
   const style1 = document.createElement('style');
   // style1.innerHTML = scope(style, `#${id}`);
@@ -537,7 +538,13 @@ function reinitialize(options) {
 function initialize(options) {
   // console.log(`mermaidAPI.initialize: v${pkg.version}`);
   // Set default options
+
+  if (options.theme && themes[options.theme]) {
+    options.themeVariables = themes[options.theme];
+  }
+
   const config = typeof options === 'object' ? setSiteConfig(options) : getSiteConfig();
+
   updateRendererConfigs(config);
   setLogLevel(config.logLevel);
   logger.debug('mermaidAPI.initialize: ', config);

src/styles.js

@@ -1,22 +1,10 @@
-import getFlowchartStyles from './diagrams/flowchart/theme';
+import getFlowchartStyles from './diagrams/flowchart/styles';
 
 const themes = {
   flowchart: getFlowchartStyles
 };
 
-const options = {
-  mainBkg: '#ECECFF',
-  secondBkg: '#ffffde',
-  lineColor: '#333333',
-  border1: '#CCCCFF',
-  border2: '#aaaa33',
-  arrowheadColor: '#333333',
-  labelColor: 'black',
-  errorBkgColor: '#552222',
-  errorTextColor: '#552222'
-};
-
-const getStyles = (type, userStyles, options2) =>
+const getStyles = (type, userStyles, options) =>
   `:root {
     --mermaid-font-family: '"trebuchet ms", verdana, arial';
     font-family: '"trebuchet ms", verdana, arial';
@@ -64,7 +52,7 @@ const getStyles = (type, userStyles, options2) =>
     font-family: var(--mermaid-font-family);
   }
 
-  ${themes[type]()}
+  ${themes[type](options)}
 
   ${userStyles}
 `;

src/theme-dark.js

@@ -0,0 +1,21 @@
+const theme = {
+  mainBkg: '#ECECFF',
+  secondBkg: '#ffffde',
+  lineColor: '#333333',
+  border1: '#CCCCFF',
+  border2: '#aaaa33',
+  arrowheadColor: '#333333',
+  labelColor: 'black',
+  errorBkgColor: '#552222',
+  errorTextColor: '#552222',
+
+  /* Flowchart variables */
+  nodeBkg: 'mainBkg',
+  nodeBorder: '#9370DB',
+  clusterBkg: 'secondBkg',
+  clusterBorder: 'border2',
+  defaultLinkColor: 'lineColor',
+  titleColor: '#333',
+  edgeLabelBackground: '#e8e8e8'
+};
+export default theme;

src/theme-default.js

@@ -0,0 +1,21 @@
+const theme = {
+  mainBkg: '#ECECFF',
+  secondBkg: '#ffffde',
+  lineColor: '#333333',
+  border1: '#CCCCFF',
+  border2: '#aaaa33',
+  arrowheadColor: '#333333',
+  labelColor: 'black',
+  errorBkgColor: '#552222',
+  errorTextColor: '#552222',
+
+  /* Flowchart variables */
+  nodeBkg: 'mainBkg',
+  nodeBorder: '#9370DB',
+  clusterBkg: 'secondBkg',
+  clusterBorder: 'border2',
+  defaultLinkColor: 'lineColor',
+  titleColor: '#333',
+  edgeLabelBackground: '#e8e8e8'
+};
+export default theme;

src/theme-forest.js

@@ -0,0 +1,21 @@
+const theme = {
+  mainBkg: 'red',
+  secondBkg: '#ffffde',
+  lineColor: '#333333',
+  border1: '#CCCCFF',
+  border2: '#aaaa33',
+  arrowheadColor: '#333333',
+  labelColor: 'black',
+  errorBkgColor: '#552222',
+  errorTextColor: '#552222',
+
+  /* Flowchart variables */
+  nodeBkg: 'red',
+  nodeBorder: '#9370DB',
+  clusterBkg: 'secondBkg',
+  clusterBorder: 'border2',
+  defaultLinkColor: 'lineColor',
+  titleColor: '#333',
+  edgeLabelBackground: '#e8e8e8'
+};
+export default theme;

src/theme-neutral.js

@@ -0,0 +1,21 @@
+const theme = {
+  mainBkg: 'yellow',
+  secondBkg: '#ffffde',
+  lineColor: '#333333',
+  border1: '#CCCCFF',
+  border2: '#aaaa33',
+  arrowheadColor: '#333333',
+  labelColor: 'black',
+  errorBkgColor: '#552222',
+  errorTextColor: '#552222',
+
+  /* Flowchart variables */
+  nodeBkg: 'mainBkg',
+  nodeBorder: '#9370DB',
+  clusterBkg: 'secondBkg',
+  clusterBorder: 'border2',
+  defaultLinkColor: 'lineColor',
+  titleColor: '#333',
+  edgeLabelBackground: '#e8e8e8'
+};
+export default theme;