marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-09-18 06:49:47 +02:00
Code Issues Packages Projects Releases Wiki Activity

#2088 Add the possibility to theme forks and joins using theme variables

Browse Source
This commit is contained in:
Knut Sveidqvist
2021-05-23 10:42:07 +02:00
parent 529824e2b3
commit bf21aa8cd6
5 changed files with 10 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
cypress/platform/knsv.html
View File

@@ -10,7 +10,7 @@
<style>
body {
/* background: rgb(221, 208, 208); */
background:#333;
/* background:#333; */
font-family: 'Arial';
/* font-size: 18px !important; */
}
@@ -66,14 +66,16 @@ stateDiagram-v2
</div>
<div class="mermaid" style="width: 100%; height: 20%;">
%%{init:{"theme":"neutral", "themeVariables": {
"specialStateColor":"red", "innerEndBackground":"lightgreen"
%%{init:{"theme":"forest", "themeVariables": {
}}}%%
%% "specialStateColor":"red", "innerEndBackground":"lightgreen"
stateDiagram-v2
state fork [[fork]]
state join [[join]]
[*] --> fork
fork --> join
fork --> Test
Test --> join
join --> [*]
</div>
<script src="./mermaid.js"></script>

2
src/themes/theme-base.js
View File

@@ -121,7 +121,7 @@ class Theme {
this.altBackground = this.altBackground || this.tertiaryColor;
this.compositeTitleBackground = this.compositeTitleBackground || this.mainBkg;
this.compositeBorder = this.compositeBorder || this.nodeBorder;
this.innerEndBackground = this.primaryBorderColor;
this.innerEndBackground = this.nodeBorder;
this.errorBkgColor = this.errorBkgColor || this.tertiaryColor;
this.errorTextColor = this.errorTextColor || this.tertiaryTextColor;
this.transitionColor = this.transitionColor || this.lineColor;

2
src/themes/theme-dark.js
View File

@@ -137,7 +137,7 @@ class Theme {
this.compositeTitleBackground = this.compositeTitleBackground || this.mainBkg;
this.compositeBorder = this.compositeBorder || this.nodeBorder;
this.innerEndBackground = this.primaryBorderColor;
this.specialStateColor = this.lineColor;
this.specialStateColor = '#f4f4f4'; // this.lineColor;
this.errorBkgColor = this.errorBkgColor || this.tertiaryColor;
this.errorTextColor = this.errorTextColor || this.tertiaryTextColor;

2
src/themes/theme-default.js
View File

@@ -149,7 +149,7 @@ class Theme {
this.altBackground = this.altBackground || '#f0f0f0';
this.compositeTitleBackground = this.compositeTitleBackground || this.mainBkg;
this.compositeBorder = this.compositeBorder || this.nodeBorder;
this.innerEndBackground = this.primaryBorderColor;
this.innerEndBackground = this.nodeBorder;
this.specialStateColor = this.lineColor;
this.errorBkgColor = this.errorBkgColor || this.tertiaryColor;

2
src/themes/theme-neutral.js
View File

@@ -157,7 +157,7 @@ class Theme {
this.compositeTitleBackground = this.compositeTitleBackground || this.mainBkg;
this.stateBorder = this.stateBorder || '#000';
this.innerEndBackground = this.primaryBorderColor;
this.specialStateColor = this.lineColor;
this.specialStateColor = '#222';
this.errorBkgColor = this.errorBkgColor || this.tertiaryColor;
this.errorTextColor = this.errorTextColor || this.tertiaryTextColor;