marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-09-21 08:19:43 +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 08:12:32 +02:00
parent 6e6ced2cee
commit 529824e2b3
7 changed files with 14 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
cypress/platform/knsv.html
View File

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

10
src/diagrams/state/styles.js
View File

@@ -82,17 +82,17 @@ g.stateGroup line {
} }
.node circle.state-start { .node circle.state-start {
fill: ${options.stateBorder || options.lineColor}; fill: ${options.specialStateColor};
stroke: ${options.stateBorder || options.lineColor}; stroke: ${options.specialStateColor};
} }
.node .fork-join { .node .fork-join {
fill: ${options.stateBorder}; fill: ${options.specialStateColor};
stroke: ${options.stateBorder}; stroke: ${options.specialStateColor};
} }
.node circle.state-end { .node circle.state-end {
fill: ${options.innerEndBackground || options.primaryBorderColor}; fill: ${options.innerEndBackground};
stroke: ${options.background}; stroke: ${options.background};
stroke-width: 1.5 stroke-width: 1.5
} }

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

@@ -125,6 +125,7 @@ class Theme {
this.errorBkgColor = this.errorBkgColor || this.tertiaryColor; this.errorBkgColor = this.errorBkgColor || this.tertiaryColor;
this.errorTextColor = this.errorTextColor || this.tertiaryTextColor; this.errorTextColor = this.errorTextColor || this.tertiaryTextColor;
this.transitionColor = this.transitionColor || this.lineColor; this.transitionColor = this.transitionColor || this.lineColor;
this.specialStateColor = this.lineColor;
/* class */ /* class */
this.classText = this.classText || this.textColor; this.classText = this.classText || this.textColor;

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

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

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

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

1
src/themes/theme-forest.js
View File

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

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

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