diff --git a/apps/remix-ide/src/app/tabs/theme-module.js b/apps/remix-ide/src/app/tabs/theme-module.js
index e1e066c4b5..6d3e248a93 100644
--- a/apps/remix-ide/src/app/tabs/theme-module.js
+++ b/apps/remix-ide/src/app/tabs/theme-module.js
@@ -5,20 +5,33 @@ import * as packageJson from '../../../../../package.json'
 import Registry from '../state/registry'
 const _paq = window._paq = window._paq || []
 
+//sol2uml dot files cannot work with css variables so hex values for colors are used
 const themes = [
-  { name: 'Dark', quality: 'dark', url: 'assets/css/themes/remix-dark_tvx1s2.css' },
-  { name: 'Light', quality: 'light', url: 'assets/css/themes/remix-light_powaqg.css' },
-  { name: 'Violet', quality: 'light', url: 'assets/css/themes/remix-violet.css' },
-  { name: 'Unicorn', quality: 'light', url: 'assets/css/themes/remix-unicorn.css' },
-  { name: 'Midcentury', quality: 'light', url: 'assets/css/themes/remix-midcentury_hrzph3.css' },
-  { name: 'Black', quality: 'dark', url: 'assets/css/themes/remix-black_undtds.css' },
-  { name: 'Candy', quality: 'light', url: 'assets/css/themes/remix-candy_ikhg4m.css' },
-  { name: 'HackerOwl', quality: 'dark', url: 'assets/css/themes/remix-hacker_owl.css' },
+  { name: 'Dark', quality: 'dark', url: 'assets/css/themes/remix-dark_tvx1s2.css', backgroundColor: '#222336', textColor: '#babbcc',
+    shapeColor: '#babbcc',fillColor: '#2a2c3f' },
+  { name: 'Light', quality: 'light', url: 'assets/css/themes/remix-light_powaqg.css', backgroundColor: '#eef1f6', textColor: '#3b445e',
+    shapeColor: '#343a40',fillColor: '#ffffff' },
+  { name: 'Violet', quality: 'light', url: 'assets/css/themes/remix-violet.css', backgroundColor: '#f1eef6', textColor: '#3b445e',
+    shapeColor: '#343a40',fillColor: '#f8fafe' },
+  { name: 'Unicorn', quality: 'light', url: 'assets/css/themes/remix-unicorn.css', backgroundColor: '#f1eef6', textColor: '#343a40',
+    shapeColor: '#343a40',fillColor: '#f8fafe' },
+  { name: 'Midcentury', quality: 'light', url: 'assets/css/themes/remix-midcentury_hrzph3.css', backgroundColor: '#DBE2E0', textColor: '#11556c',
+    shapeColor: '#343a40',fillColor: '#eeede9' },
+  { name: 'Black', quality: 'dark', url: 'assets/css/themes/remix-black_undtds.css', backgroundColor: '#1a1a1a', textColor: '#babbcc',
+    shapeColor: '#b5b4bc',fillColor: '#1f2020' },
+  { name: 'Candy', quality: 'light', url: 'assets/css/themes/remix-candy_ikhg4m.css', backgroundColor: '#d5efff', textColor: '#11556c',
+    shapeColor: '#343a40',fillColor: '#fbe7f8' },
+  { name: 'HackerOwl', quality: 'dark', url: 'assets/css/themes/remix-hacker_owl.css', backgroundColor: '#011628', textColor: '#babbcc',
+    shapeColor: '#8694a1',fillColor: '#011C32' },
 
-  { name: 'Cerulean', quality: 'light', url: 'assets/css/themes/bootstrap-cerulean.min.css' },
-  { name: 'Flatly', quality: 'light', url: 'assets/css/themes/bootstrap-flatly.min.css' },
-  { name: 'Spacelab', quality: 'light', url: 'assets/css/themes/bootstrap-spacelab.min.css' },
-  { name: 'Cyborg', quality: 'dark', url: 'assets/css/themes/bootstrap-cyborg.min.css' }
+  { name: 'Cerulean', quality: 'light', url: 'assets/css/themes/bootstrap-cerulean.min.css', backgroundColor: '#ffffff', textColor: '#343a40',
+    shapeColor: '#343a40',fillColor: '#f8f9fa' },
+  { name: 'Flatly', quality: 'light', url: 'assets/css/themes/bootstrap-flatly.min.css', backgroundColor: '#ffffff', textColor: '#343a40',
+    shapeColor: '#7b8a8b',fillColor: '#ffffff' },
+  { name: 'Spacelab', quality: 'light', url: 'assets/css/themes/bootstrap-spacelab.min.css', backgroundColor: '#ffffff', textColor: '#343a40',
+    shapeColor: '#333333', fillColor: '#eeeeee' },
+  { name: 'Cyborg', quality: 'dark', url: 'assets/css/themes/bootstrap-cyborg.min.css', backgroundColor: '#060606', textColor: '#adafae',
+    shapeColor: '#adafae', fillColor: '#222222' }
 ]
 
 const profile = {
@@ -55,7 +68,7 @@ export class ThemeModule extends Plugin {
     this.forced = !!queryTheme
   }
 
-  /** Return the active theme 
+  /** Return the active theme
    * @return {{ name: string, quality: string, url: string }} - The active theme
   */
   currentTheme () {
@@ -93,7 +106,7 @@ export class ThemeModule extends Plugin {
    * @param {string} [themeName] - The name of the theme
    */
   switchTheme (themeName) {
-    themeName = themeName && themeName.toLocaleLowerCase() 
+    themeName = themeName && themeName.toLocaleLowerCase()
     if (themeName && !Object.keys(this.themes).includes(themeName)) {
       throw new Error(`Theme ${themeName} doesn't exist`)
     }