diff --git a/src/themes/c4.scss b/src/themes/c4.scss
deleted file mode 100644
index 0c3fca3a99..0000000000
--- a/src/themes/c4.scss
+++ /dev/null
@@ -1,4 +0,0 @@
-.person {
-  stroke: $personBorder;
-  fill: $personBkg;
-}
diff --git a/src/themes/class.scss b/src/themes/class.scss
deleted file mode 100644
index 646b9a1d19..0000000000
--- a/src/themes/class.scss
+++ /dev/null
@@ -1,96 +0,0 @@
-g.classGroup text {
-  fill: $nodeBorder;
-  stroke: none;
-  font-family: 'trebuchet ms', verdana, arial;
-  font-family: var(--mermaid-font-family);
-  font-size: 10px;
-
-  .title {
-    font-weight: bolder;
-  }
-}
-
-.divider {
-  stroke: $nodeBorder;
-  stroke-width: 1;
-}
-
-g.clickable {
-  cursor: pointer;
-}
-
-g.classGroup rect {
-  fill: $nodeBkg;
-  stroke: $nodeBorder;
-}
-
-g.classGroup line {
-  stroke: $nodeBorder;
-  stroke-width: 1;
-}
-
-.classLabel .box {
-  stroke: none;
-  stroke-width: 0;
-  fill: $nodeBkg;
-  opacity: 0.5;
-}
-
-.classLabel .label {
-  fill: $nodeBorder;
-  font-size: 10px;
-}
-
-.relation {
-  stroke: $nodeBorder;
-  stroke-width: 1;
-  fill: none;
-}
-
-.dashed-line{
-  stroke-dasharray: 3;
-}
-
-@mixin composition {
-  fill: $nodeBorder !important ;
-  stroke: $nodeBorder !important ;
-  stroke-width: 1;
-}
-
-#compositionStart, .composition {
-  @include composition;
-}
-
-#compositionEnd, .composition {
-  @include composition;
-}
-
-@mixin aggregation {
-  fill: $nodeBkg !important ;
-  stroke: $nodeBorder !important ;
-  stroke-width: 1;
-}
-
-#aggregationStart, .aggregation {
-  @include aggregation;
-}
-
-#aggregationEnd, .aggregation {
-  @include aggregation;
-}
-
-#dependencyStart, .dependency {
-  @include composition;
-}
-
-#dependencyEnd, .dependency {
-  @include composition;
-}
-
-#extensionStart , .extension{
-  @include composition;
-}
-
-#extensionEnd, .extension {
-  @include composition;
-}
diff --git a/src/themes/dark/index.scss b/src/themes/dark/index.scss
deleted file mode 100644
index 856d6b9c8e..0000000000
--- a/src/themes/dark/index.scss
+++ /dev/null
@@ -1,67 +0,0 @@
-$mainBkg: #1f2020;
-$secondBkg: lighten(#1f2020, 16);
-$mainContrastColor: lightgrey;
-$darkTextColor: #fefefe;
-$lineColor: $mainContrastColor;
-$border1: #81B1DB;
-$border2: rgba(255, 255, 255, 0.25);
-$arrowheadColor: $mainContrastColor;
-
-/* Flowchart variables */
-
-$nodeBkg: $mainBkg;
-$nodeBorder: $border1;
-$clusterBkg: $secondBkg;
-$clusterBorder: $border2;
-$defaultLinkColor: $lineColor;
-$titleColor: #F9FFFE;
-$edgeLabelBackground: #e8e8e8;
-$edgeLabelcolor: #333;
-
-/* Sequence Diagram variables */
-
-$actorBorder: $border1;
-$actorBkg: $mainBkg;
-$actorTextColor: $mainContrastColor;
-$actorLineColor: $mainContrastColor;
-$signalColor: $mainContrastColor;
-$signalTextColor: $mainContrastColor;
-$labelBoxBkgColor: $actorBkg;
-$labelBoxBorderColor: $actorBorder;
-$labelTextColor: $mainContrastColor;
-$loopTextColor: $mainContrastColor;
-$noteBorderColor: $border2;
-$noteBkgColor: #fff5ad;
-$noteTextColor: $mainBkg;
-$activationBorderColor: $border1;
-$activationBkgColor: $secondBkg;
-$sequenceNumberColor: black;
-
-/* Gantt chart variables */
-
-$sectionBkgColor: rgba(255, 255, 255, 0.3);
-$altSectionBkgColor: white;
-$sectionBkgColor2: #EAE8B9;
-$taskBorderColor: rgba(255, 255, 255, 0.5);
-$taskBkgColor: $mainBkg;
-$taskTextColor: $darkTextColor;
-$taskTextLightColor: $mainContrastColor;
-$taskTextOutsideColor: $taskTextLightColor;
-$taskTextClickableColor: #003163;
-$activeTaskBorderColor: rgba(255, 255, 255, 0.5);
-$activeTaskBkgColor: #81B1DB;
-$gridColor: $mainContrastColor;
-$doneTaskBkgColor: $mainContrastColor;
-$doneTaskBorderColor: grey;
-$critBorderColor: #E83737;
-$critBkgColor: #E83737;
-$taskTextDarkColor: $darkTextColor;
-$todayLineColor: #DB5757;
-
-/* state colors */
-$labelColor: #f4f4f4;
-
-$errorBkgColor: #a44141;
-$errorTextColor: #ddd;
-
-@import '../mermaid';
diff --git a/src/themes/default/index.scss b/src/themes/default/index.scss
deleted file mode 100644
index a20f81a7d6..0000000000
--- a/src/themes/default/index.scss
+++ /dev/null
@@ -1,70 +0,0 @@
-$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;
-$edgeLabelcolor: #333;
-
-/* Sequence Diagram variables */
-
-$actorBorder: $border1;
-$actorBkg: $mainBkg;
-$actorTextColor: black;
-$actorLineColor: grey;
-$signalColor: #333;
-$signalTextColor: #333;
-$labelBoxBkgColor: $actorBkg;
-$labelBoxBorderColor: $actorBorder;
-$labelTextColor: $actorTextColor;
-$loopTextColor: $actorTextColor;
-$noteBorderColor: $border2;
-$noteBkgColor: #fff5ad;
-$noteTextColor: $actorTextColor;
-$activationBorderColor: #666;
-$activationBkgColor: #f4f4f4;
-$sequenceNumberColor: white;
-
-/* Gantt chart variables */
-
-$sectionBkgColor: rgba(102, 102, 255, 0.49);
-$altSectionBkgColor: white;
-$sectionBkgColor2: #fff400;
-$taskBorderColor: #534fbc;
-$taskBkgColor: #8a90dd;
-$taskTextLightColor: white;
-$taskTextColor: $taskTextLightColor;
-$taskTextDarkColor: black;
-$taskTextOutsideColor: $taskTextDarkColor;
-$taskTextClickableColor: #003163;
-$activeTaskBorderColor: #534fbc;
-$activeTaskBkgColor: #bfc7ff;
-$gridColor: lightgrey;
-$doneTaskBkgColor: lightgrey;
-$doneTaskBorderColor: grey;
-$critBorderColor: #ff8888;
-$critBkgColor: red;
-$todayLineColor: red;
-
-/* C4 Context Diagram variables */
-
-$personBorder: $border1;
-$personBkg: $mainBkg;
-
-/* state colors */
-$labelColor: black;
-
-$errorBkgColor: #552222;
-$errorTextColor: #552222;
-
-@import '../mermaid';
diff --git a/src/themes/flowchart.scss b/src/themes/flowchart.scss
deleted file mode 100644
index fbe9ec5a17..0000000000
--- a/src/themes/flowchart.scss
+++ /dev/null
@@ -1,78 +0,0 @@
-.label {
-  font-family: 'trebuchet ms', verdana, arial;
-  font-family: var(--mermaid-font-family);
-  fill: $titleColor;
-  color: $titleColor;
-}
-
-.label text {
-  fill: $titleColor;
-}
-
-.node rect,
-.node circle,
-.node ellipse,
-.node polygon,
-.node path {
-  fill: $mainBkg;
-  stroke: $nodeBorder;
-  stroke-width: 1px;
-}
-
-.node .label {
-  text-align: center;
-  fill: $titleColor;
-}
-.node.clickable {
-  cursor: pointer;
-}
-
-.arrowheadPath {
-  fill: $arrowheadColor;
-}
-
-.edgePath .path {
-  stroke: $lineColor;
-  stroke-width: 1.5px;
-}
-
-.flowchart-link {
-  stroke: $lineColor;
-  fill: none;
-}
-
-.edgeLabel {
-  background-color: $edgeLabelBackground;
-  rect {
-    opacity: 0.9;
-  }
-  text-align: center;
-  span {
-    color: $edgeLabelcolor;
-  }
-}
-
-.cluster rect {
-  fill: $secondBkg;
-  stroke: $clusterBorder;
-  stroke-width: 1px;
-}
-
-.cluster text {
-  fill: $titleColor;
-}
-
-div.mermaidTooltip {
-  position: absolute;
-  text-align: center;
-  max-width: 200px;
-  padding: 2px;
-  font-family: 'trebuchet ms', verdana, arial;
-  font-family: var(--mermaid-font-family);
-  font-size: 12px;
-  background: $secondBkg;
-  border: 1px solid $border2;
-  border-radius: 2px;
-  pointer-events: none;
-  z-index: 100;
-}
diff --git a/src/themes/forest/index.scss b/src/themes/forest/index.scss
deleted file mode 100644
index 0dc7079e6a..0000000000
--- a/src/themes/forest/index.scss
+++ /dev/null
@@ -1,65 +0,0 @@
-$mainBkg: #cde498;
-$secondBkg: #cdffb2;
-$lineColor: #1a3318;
-$lineColor: green;
-$border1: #13540c;
-$border2: #6eaa49;
-$arrowheadColor: green;
-
-/* Flowchart variables */
-
-$nodeBkg: $mainBkg;
-$nodeBorder: $border1;
-$clusterBkg: $secondBkg;
-$clusterBorder: $border2;
-$defaultLinkColor: $lineColor;
-$titleColor: #333;
-$edgeLabelBackground: #e8e8e8;
-$edgeLabelcolor: #333;
-/* Sequence Diagram variables */
-
-$actorBorder: $border1;
-$actorBkg: $mainBkg;
-$actorTextColor: black;
-$actorLineColor: grey;
-$signalColor: #333;
-$signalTextColor: #333;
-$labelBoxBkgColor: $actorBkg;
-$labelBoxBorderColor: #326932;
-$labelTextColor: $actorTextColor;
-$loopTextColor: $actorTextColor;
-$noteBorderColor: $border2;
-$noteBkgColor: #fff5ad;
-$noteTextColor: $actorTextColor;
-$activationBorderColor: #666;
-$activationBkgColor: #f4f4f4;
-$sequenceNumberColor: white;
-
-/* Gantt chart variables */
-
-$sectionBkgColor: #6eaa49;
-$altSectionBkgColor: white;
-$sectionBkgColor2: #6eaa49;
-$taskBorderColor: $border1;
-$taskBkgColor: #487e3a;
-$taskTextLightColor: white;
-$taskTextColor: $taskTextLightColor;
-$taskTextDarkColor: black;
-$taskTextOutsideColor: $taskTextDarkColor;
-$taskTextClickableColor: #003163;
-$activeTaskBorderColor: $taskBorderColor;
-$activeTaskBkgColor: $mainBkg;
-$gridColor: lightgrey;
-$doneTaskBkgColor: lightgrey;
-$doneTaskBorderColor: grey;
-$critBorderColor: #ff8888;
-$critBkgColor: red;
-$todayLineColor: red;
-
-/* state colors */
-$labelColor: black;
-
-$errorBkgColor: #552222;
-$errorTextColor: #552222;
-
-@import '../mermaid';
diff --git a/src/themes/gantt.scss b/src/themes/gantt.scss
deleted file mode 100644
index ec5de4fcab..0000000000
--- a/src/themes/gantt.scss
+++ /dev/null
@@ -1,258 +0,0 @@
-/** Section styling */
-
-.mermaid-main-font {
-  font-family: "trebuchet ms", verdana, arial;
-  font-family: var(--mermaid-font-family);
-}
-
-.section {
-  stroke: none;
-  opacity: 0.2;
-}
-
-.section0 {
-  fill: $sectionBkgColor;
-}
-
-.section2 {
-  fill: $sectionBkgColor2;
-}
-
-.section1,
-.section3 {
-  fill: $altSectionBkgColor;
-  opacity: 0.2;
-}
-
-.sectionTitle0 {
-  fill: $titleColor;
-}
-
-.sectionTitle1 {
-  fill: $titleColor;
-}
-
-.sectionTitle2 {
-  fill: $titleColor;
-}
-
-.sectionTitle3 {
-  fill: $titleColor;
-}
-
-.sectionTitle {
-  text-anchor: start;
-  font-size: 11px;
-  text-height: 14px;
-  font-family: 'trebuchet ms', verdana, arial;
-  font-family: var(--mermaid-font-family);
-
-}
-
-
-/* Grid and axis */
-
-.grid .tick {
-  stroke: $gridColor;
-  opacity: 0.8;
-  shape-rendering: crispEdges;
-  text {
-    font-family: 'trebuchet ms', verdana, arial;
-    font-family: var(--mermaid-font-family);
-  }
-}
-
-.grid path {
-  stroke-width: 0;
-}
-
-
-/* Today line */
-
-.today {
-  fill: none;
-  stroke: $todayLineColor;
-  stroke-width: 2px;
-}
-
-
-/* Task styling */
-
-/* Default task */
-
-.task {
-  stroke-width: 2;
-}
-
-.taskText {
-  text-anchor: middle;
-  font-family: 'trebuchet ms', verdana, arial;
-  font-family: var(--mermaid-font-family);
-}
-
-.taskText:not([font-size]) {
-  font-size: 11px;
-}
-
-.taskTextOutsideRight {
-  fill: $taskTextDarkColor;
-  text-anchor: start;
-  font-size: 11px;
-  font-family: 'trebuchet ms', verdana, arial;
-  font-family: var(--mermaid-font-family);
-
-}
-
-.taskTextOutsideLeft {
-  fill: $taskTextDarkColor;
-  text-anchor: end;
-  font-size: 11px;
-}
-
-/* Special case clickable */
-.task.clickable {
-  cursor: pointer;
-}
-.taskText.clickable {
-  cursor: pointer;
-  fill: $taskTextClickableColor !important;
-  font-weight: bold;
-}
-
-.taskTextOutsideLeft.clickable {
-  cursor: pointer;
-  fill: $taskTextClickableColor !important;
-  font-weight: bold;
-}
-
-.taskTextOutsideRight.clickable {
-  cursor: pointer;
-  fill: $taskTextClickableColor !important;
-  font-weight: bold;
-}
-
-/* Specific task settings for the sections*/
-
-.taskText0,
-.taskText1,
-.taskText2,
-.taskText3 {
-  fill: $taskTextColor;
-}
-
-.task0,
-.task1,
-.task2,
-.task3 {
-  fill: $taskBkgColor;
-  stroke: $taskBorderColor;
-}
-
-.taskTextOutside0,
-.taskTextOutside2
-{
-  fill: $taskTextOutsideColor;
-}
-
-.taskTextOutside1,
-.taskTextOutside3 {
-  fill: $taskTextOutsideColor;
-}
-
-
-/* Active task */
-
-.active0,
-.active1,
-.active2,
-.active3 {
-  fill: $activeTaskBkgColor;
-  stroke: $activeTaskBorderColor;
-}
-
-.activeText0,
-.activeText1,
-.activeText2,
-.activeText3 {
-  fill: $taskTextDarkColor !important;
-}
-
-
-/* Completed task */
-
-.done0,
-.done1,
-.done2,
-.done3 {
-  stroke: $doneTaskBorderColor;
-  fill: $doneTaskBkgColor;
-  stroke-width: 2;
-}
-
-.doneText0,
-.doneText1,
-.doneText2,
-.doneText3 {
-  fill: $taskTextDarkColor !important;
-}
-
-
-/* Tasks on the critical line */
-
-.crit0,
-.crit1,
-.crit2,
-.crit3 {
-  stroke: $critBorderColor;
-  fill: $critBkgColor;
-  stroke-width: 2;
-}
-
-.activeCrit0,
-.activeCrit1,
-.activeCrit2,
-.activeCrit3 {
-  stroke: $critBorderColor;
-  fill: $activeTaskBkgColor;
-  stroke-width: 2;
-}
-
-.doneCrit0,
-.doneCrit1,
-.doneCrit2,
-.doneCrit3 {
-  stroke: $critBorderColor;
-  fill: $doneTaskBkgColor;
-  stroke-width: 2;
-  cursor: pointer;
-  shape-rendering: crispEdges;
-}
-
-.milestone {
-  transform: rotate(45deg) scale(0.8,0.8);
-}
-
-.milestoneText {
-  font-style: italic;
-}
-.doneCritText0,
-.doneCritText1,
-.doneCritText2,
-.doneCritText3 {
-  fill: $taskTextDarkColor !important;
-}
-
-.activeCritText0,
-.activeCritText1,
-.activeCritText2,
-.activeCritText3 {
-  fill: $taskTextDarkColor !important;
-}
-
-.titleText {
-  text-anchor: middle;
-  font-size: 18px;
-  fill: $taskTextDarkColor;
-  font-family: 'trebuchet ms', verdana, arial;
-  font-family: var(--mermaid-font-family);
-}
diff --git a/src/themes/git.scss b/src/themes/git.scss
deleted file mode 100644
index 4327f6d8d8..0000000000
--- a/src/themes/git.scss
+++ /dev/null
@@ -1,8 +0,0 @@
-.commit-id,
-.commit-msg,
-.branch-label {
-  fill: lightgrey;
-  color: lightgrey;
-  font-family: 'trebuchet ms', verdana, arial;
-  font-family: var(--mermaid-font-family);
-}
diff --git a/src/themes/mermaid.scss b/src/themes/mermaid.scss
deleted file mode 100644
index 59cbcb4cba..0000000000
--- a/src/themes/mermaid.scss
+++ /dev/null
@@ -1,60 +0,0 @@
-// @import 'flowchart';
-@import 'sequence';
-@import 'gantt';
-@import 'class';
-@import 'git';
-@import 'pie';
-@import 'state';
-
-// .composit {
-//   fill: white;
-//   border-bottom: 1px
-// }
-
-:root {
-  --mermaid-font-family: '"trebuchet ms", verdana, arial';
-  font-family: '"trebuchet ms", verdana, arial';
-  font-family: var(--mermaid-font-family);
-  font-size: 16px;
-}
-
-/* Classes common for multiple diagrams */
-
-.error-icon {
-  fill: $errorBkgColor;
-}
-.error-text {
-  fill: $errorTextColor;
-  stroke: $errorTextColor;
-}
-
-.edge-thickness-normal {
-  // stroke: $lineColor;
-  stroke-width: 2px;
-}
-.edge-thickness-thick {
-  // stroke: $lineColor;
-  stroke-width: 3.5px
-}
-.edge-pattern-solid {
-  stroke-dasharray: 0;
-}
-
-.edge-pattern-dashed{
-  stroke-dasharray: 3;
-}
-.edge-pattern-dotted {
-  stroke-dasharray: 2;
-}
-
-.marker {
-  fill: $lineColor;
-}
-.marker.cross {
-  stroke: $lineColor;
-}
-
-svg {
-  font-family: var(--mermaid-font-family);
-  font-size: 24px;
-}
\ No newline at end of file
diff --git a/src/themes/neutral/index.scss b/src/themes/neutral/index.scss
deleted file mode 100644
index a037661c2e..0000000000
--- a/src/themes/neutral/index.scss
+++ /dev/null
@@ -1,70 +0,0 @@
-$mainBkg: #eee;
-$contrast: #26a;
-$secondBkg: lighten($contrast, 55%);
-$lineColor: #666;
-$border1: #999;
-$border2: $contrast;
-$note: #ffa;
-$text: #333;
-$critical: #d42;
-$done: #bbb;
-$arrowheadColor: #333333;
-
-/* Flowchart variables */
-
-$nodeBkg: $mainBkg;
-$nodeBorder: $border1;
-$clusterBkg: $secondBkg;
-$clusterBorder: $border2;
-$defaultLinkColor: $lineColor;
-$titleColor: $text;
-$edgeLabelBackground: white;
-$edgeLabelcolor: #333;
-
-/* Sequence Diagram variables */
-
-$actorBorder: $border1;
-$actorBkg: $mainBkg;
-$actorTextColor: $text;
-$actorLineColor: $lineColor;
-$signalColor: $text;
-$signalTextColor: $text;
-$labelBoxBkgColor: $actorBkg;
-$labelBoxBorderColor: $actorBorder;
-$labelTextColor: $text;
-$loopTextColor: $text;
-$noteBorderColor: darken($note, 60%);
-$noteBkgColor: $note;
-$noteTextColor: $actorTextColor;
-$activationBorderColor: #666;
-$activationBkgColor: #f4f4f4;
-$sequenceNumberColor: white;
-
-/* Gantt chart variables */
-
-$sectionBkgColor: lighten($contrast, 30%);
-$altSectionBkgColor: white;
-$sectionBkgColor2: lighten($contrast, 30%);
-$taskBorderColor: darken($contrast, 10%);
-$taskBkgColor: $contrast;
-$taskTextLightColor: white;
-$taskTextColor: $taskTextLightColor;
-$taskTextDarkColor: $text;
-$taskTextOutsideColor: $taskTextDarkColor;
-$taskTextClickableColor: #003163;
-$activeTaskBorderColor: $taskBorderColor;
-$activeTaskBkgColor: $mainBkg;
-$gridColor: lighten($border1, 30%);
-$doneTaskBkgColor: $done;
-$doneTaskBorderColor: $lineColor;
-$critBkgColor: $critical;
-$critBorderColor: darken($critBkgColor, 10%);
-$todayLineColor: $critBkgColor;
-
-/* state colors */
-$labelColor: black;
-
-$errorBkgColor: #552222;
-$errorTextColor: #552222;
-
-@import '../mermaid';
diff --git a/src/themes/pie.scss b/src/themes/pie.scss
deleted file mode 100644
index bcf6f723e0..0000000000
--- a/src/themes/pie.scss
+++ /dev/null
@@ -1,16 +0,0 @@
-.pieTitleText {
-  text-anchor: middle;
-  font-size: 25px;
-  fill: $taskTextDarkColor;
-  font-family: 'trebuchet ms', verdana, arial;
-  font-family: var(--mermaid-font-family);
-}
-.slice {
-  font-family: 'trebuchet ms', verdana, arial;
-  font-family: var(--mermaid-font-family);
-}
-.legend text {
-  font-family: 'trebuchet ms', verdana, arial;
-  font-family: var(--mermaid-font-family);
-  font-size: 17px;
-}
diff --git a/src/themes/sequence.scss b/src/themes/sequence.scss
deleted file mode 100644
index 20665adea5..0000000000
--- a/src/themes/sequence.scss
+++ /dev/null
@@ -1,96 +0,0 @@
-.actor {
-  stroke: $actorBorder;
-  fill: $actorBkg;
-}
-
-text.actor > tspan {
-  fill: $actorTextColor;
-  stroke: none;
-}
-
-.actor-line {
-  stroke: $actorLineColor;
-}
-
-.messageLine0 {
-  stroke-width: 1.5;
-  stroke-dasharray: none;
-  stroke: $signalColor;
-}
-
-.messageLine1 {
-  stroke-width: 1.5;
-  stroke-dasharray: 2, 2;
-  stroke: $signalColor;
-}
-
-#arrowhead path {
-  fill: $signalColor;
-  stroke: $signalColor;
-}
-
-.sequenceNumber {
-  fill: $sequenceNumberColor;
-}
-
-#sequencenumber {
-  fill: $signalColor;
-}
-
-#crosshead path {
-  fill: $signalColor;
-  stroke: $signalColor;
-}
-
-.messageText {
-  fill: $signalTextColor;
-  stroke: $signalTextColor;
-}
-
-.labelBox {
-  stroke: $labelBoxBorderColor;
-  fill: $labelBoxBkgColor;
-}
-
-.labelText, .labelText > tspan {
-  fill: $labelTextColor;
-  stroke: none;
-}
-
-.loopText, .loopText > tspan {
-  fill: $loopTextColor;
-  stroke: none;
-}
-
-.loopLine {
-  stroke-width: 2px;
-  stroke-dasharray: 2, 2;
-  stroke: $labelBoxBorderColor;
-  fill: $labelBoxBorderColor;
-}
-
-.note {
-  //stroke: #decc93;
-  stroke: $noteBorderColor;
-  fill: $noteBkgColor;
-}
-
-.noteText, .noteText > tspan {
-  fill: $noteTextColor;
-  stroke: none;
-}
-
-.activation0 {
-  fill: $activationBkgColor;
-  stroke: $activationBorderColor;
-}
-
-.activation1 {
-  fill: $activationBkgColor;
-  stroke: $activationBorderColor;
-}
-
-.activation2 {
-  fill: $activationBkgColor;
-  stroke: $activationBorderColor;
-}
diff --git a/src/themes/state.scss b/src/themes/state.scss
deleted file mode 100644
index f4c561f8d2..0000000000
--- a/src/themes/state.scss
+++ /dev/null
@@ -1,140 +0,0 @@
-g.stateGroup text {
-  fill: $nodeBorder;
-  stroke: none;
-  font-size: 10px;
-  font-family: 'trebuchet ms', verdana, arial;
-  font-family: var(--mermaid-font-family);
-}
-g.stateGroup text {
-  fill: $nodeBorder;
-  fill: $titleColor;
-  stroke: none;
-  font-size: 10px;
-
-}
-g.statediagram-cluster .cluster-label text {
-  fill: $titleColor;
-}
-g.stateGroup .state-title {
-  font-weight: bolder;
-  fill: $labelColor;
-}
-
-g.stateGroup rect {
-  fill: $nodeBkg;
-  stroke: $nodeBorder;
-}
-
-g.stateGroup line {
-  stroke: $nodeBorder;
-  stroke-width: 1;
-}
-
-.transition {
-  stroke: $nodeBorder;
-  stroke-width: 1;
-  fill: none;
-}
-
-.stateGroup .composit {
-  fill: white;
-  border-bottom: 1px
-}
-
-.stateGroup .alt-composit {
-  fill: #e0e0e0;
-  border-bottom: 1px
-}
-
-.state-note {
-  stroke: $noteBorderColor;
-  fill: $noteBkgColor;
-
-  text {
-    fill: black;
-    stroke: none;
-    font-size: 10px;
-  }
-}
-
-.stateLabel .box {
-  stroke: none;
-  stroke-width: 0;
-  fill: $nodeBkg;
-  opacity: 0.7;
-}
-
-.edgeLabel text {
-  fill: #333;
-}
-
-.stateLabel text {
-  fill: $labelColor;
-  font-size: 10px;
-  font-weight: bold;
-  font-family: 'trebuchet ms', verdana, arial;
-  font-family: var(--mermaid-font-family);
-}
-
-.node circle.state-start {
-  fill: black;
-  stroke: black;
-}
-.node circle.state-end {
-  fill: black;
-  stroke: white;
-  stroke-width: 1.5
-}
-#statediagram-barbEnd {
-  fill: $nodeBorder
-}
-
-.statediagram-cluster rect {
-  // fill: $nodeBkg;
-  stroke: $nodeBorder;
-  stroke-width: 1px;
-}
-.statediagram-cluster rect.outer {
-  rx: 5px;
-  ry: 5px;
-}
-.statediagram-state .divider {
-  stroke: $nodeBorder;
-}
-
-.statediagram-state .title-state {
-  rx: 5px;
-  ry: 5px;
-}
-.statediagram-cluster.statediagram-cluster .inner {
-  fill: white;
-}
-.statediagram-cluster.statediagram-cluster-alt .inner {
-  fill: #e0e0e0;
-}
-
-.statediagram-cluster .inner {
-  rx:0;
-  ry:0;
-}
-
-.statediagram-state rect.basic {
-  rx: 5px;
-  ry: 5px;
-}
-.statediagram-state rect.divider {
-  stroke-dasharray: 10,10;
-  fill: #efefef;
-}
-
-.note-edge {
-  stroke-dasharray: 5;
-}
-
-.statediagram-note rect {
-  fill: $noteBkgColor;
-  stroke: $noteBorderColor;
-  stroke-width: 1px;
-  rx: 0;
-  ry: 0;
-}