diff --git a/apps/remix-ide/src/app/plugins/solidity-umlgen.tsx b/apps/remix-ide/src/app/plugins/solidity-umlgen.tsx
index be69e02b1f..88fe818684 100644
--- a/apps/remix-ide/src/app/plugins/solidity-umlgen.tsx
+++ b/apps/remix-ide/src/app/plugins/solidity-umlgen.tsx
@@ -37,6 +37,8 @@ const themeCollection = [
 
 type ThemeQualityType = { name: string, quality: 'light' | 'dark', url: string }
 
+type ThemeSummary = { themeName: string, backgroundColor: string, actualHex: string }
+
 /**
  * add context menu which will offer download as pdf and download png.
  * add menu under the first download button to download
@@ -50,6 +52,7 @@ export class SolidityUmlGen extends ViewPlugin implements ISolidityUmlGen {
   currentlySelectedTheme: string
   themeName: string
   loading: boolean
+  themeCollection: ThemeSummary[]
 
   appManager: RemixAppManager
   dispatch: React.Dispatch<any> = () => {}
@@ -61,6 +64,7 @@ export class SolidityUmlGen extends ViewPlugin implements ISolidityUmlGen {
     this.loading = false
     this.currentlySelectedTheme = ''
     this.themeName = ''
+    this.themeCollection = themeCollection
     this.appManager = appManager
     this.element = document.createElement('div')
     this.element.setAttribute('id', 'sol-uml-gen')
@@ -173,7 +177,8 @@ export class SolidityUmlGen extends ViewPlugin implements ISolidityUmlGen {
       updatedSvg: this.updatedSvg,
       loading: this.loading,
       themeSelected: this.currentlySelectedTheme,
-      themeName: this.themeName
+      themeName: this.themeName,
+      themeCollection: this.themeCollection
     })
   }
 
diff --git a/libs/remix-ui/solidity-uml-gen/src/lib/solidity-uml-gen.tsx b/libs/remix-ui/solidity-uml-gen/src/lib/solidity-uml-gen.tsx
index 149beddbea..5d83a70722 100644
--- a/libs/remix-ui/solidity-uml-gen/src/lib/solidity-uml-gen.tsx
+++ b/libs/remix-ui/solidity-uml-gen/src/lib/solidity-uml-gen.tsx
@@ -11,19 +11,6 @@ export interface RemixUiSolidityUmlGenProps {
   themeName: string
 }
 
-const themeCollection = [
-  { themeName: 'HackerOwl', backgroundColor: '--body-bg', actualHex: '#011628'},
-  { themeName: 'Cerulean', backgroundColor: '--body-bg', actualHex: '#fff'},
-  { themeName: 'Cyborg', backgroundColor: '--body-bg', actualHex: '#060606'},
-  { themeName: 'Dark', backgroundColor: '--body-bg', actualHex: '#222336'},
-  { themeName: 'Flatly', backgroundColor: '--body-bg', actualHex: '#fff'},
-  { themeName: 'Black', backgroundColor: '--body-bg', actualHex: '#1a1a1a'},
-  { themeName: 'Light', backgroundColor: '--body-bg', actualHex: '#eef1f6'},
-  { themeName: 'Midcentuary', backgroundColor: '--body-bg', actualHex: '#DBE2E0'},
-  { themeName: 'Spacelab', backgroundColor: '--body-bg', actualHex: '#fff'},
-  { themeName: 'Candy', backgroundColor: '--body-bg', actualHex: '#d5efff'},
-]
-
 type ButtonAction = {
   svgValid: () => boolean
   action: () => void
@@ -87,8 +74,6 @@ export function RemixUiSolidityUmlGen ({ plugin, updatedSvg, loading, themeSelec
   const encoder = new TextEncoder()
   const data = encoder.encode(updatedSvg)
   const final = btoa(String.fromCharCode.apply(null, data))
-  const selected = themeCollection.find(theme => theme.themeName === themeName)
-  console.log({selected})
 
   const DefaultInfo = () => (
     <div className="d-flex flex-column justify-content-center align-items-center mt-5">
@@ -130,7 +115,6 @@ export function RemixUiSolidityUmlGen ({ plugin, updatedSvg, loading, themeSelec
                       src={`data:image/svg+xml;base64,${final}`}
                       width={'100%'}
                       height={'auto'}
-                      style={{ backgroundColor: selected?.actualHex }}
                       className="position-relative"
                     />
                   </TransformComponent>