diff --git a/dist/index.html b/dist/index.html
index 8d856d04e..3ae6eccfd 100644
--- a/dist/index.html
+++ b/dist/index.html
@@ -109,6 +109,7 @@ Class08 <--> C2: Cool label
   <script>
     mermaid.initialize({
       theme: 'forest',
+      themeCSS: '.node rect { fill: red; }',
       logLevel: 3,
       gantt: { axisFormat: '%m/%d/%Y' },
       sequence: { actorMargin: 50 },
diff --git a/package.json b/package.json
index cab612a29..63e4def53 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "mermaid",
-  "version": "8.0.0-alpha.9",
+  "version": "8.0.0-beta.1",
   "description": "Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.",
   "main": "dist/mermaid.core.js",
   "keywords": [
diff --git a/src/mermaidAPI.js b/src/mermaidAPI.js
index 3a14fcff6..e20c5d67b 100644
--- a/src/mermaidAPI.js
+++ b/src/mermaidAPI.js
@@ -50,6 +50,7 @@ for (const themeName of ['default', 'forest', 'dark', 'neutral']) {
  */
 const config = {
   theme: 'default',
+  themeCSS: undefined,
 
   /**
    * logLevel , decides the amount of logging to be used.
@@ -380,8 +381,15 @@ const render = function (id, txt, cb, container) {
   const svg = element.firstChild
   const firstChild = svg.firstChild
 
+  // pre-defined theme
+  let style = config.theme !== undefined ? themes[config.theme] : ''
+
+  // user provided theme CSS
+  if (config.themeCSS !== undefined) {
+    style += `\n${config.themeCSS}`
+  }
+
   // classDef
-  let style = themes[config.theme] || themes.default
   if (graphType === 'flowchart') {
     const classes = flowRenderer.getClasses(txt)
     for (const className in classes) {
diff --git a/todo.md b/todo.md
index a5317425f..8996b3819 100644
--- a/todo.md
+++ b/todo.md
@@ -2,4 +2,3 @@
 - git graph requires a blank line at the end. why?
 - Create a desktop client
 - Flowchart `interpolate` is useless because there is no rendering code using it
-- How to use custom theme?