marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-12-03 19:17:00 +01:00
Code Issues Packages Projects Releases Wiki Activity

Added theming support for gitgraph

Browse Source
This commit is contained in:
Knut Sveidqvist
2022-03-17 20:07:27 +01:00
parent 9f7130a3e6
commit b78b371025
14 changed files with 456 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -42,7 +42,7 @@ class Theme {
// The || is to make sure that if the variable has been defiend by a user override that value is to be used
/* Main */
this.primaryTextColor = this.primaryTextColor || (this.darkMode ? '#ddd' : '#333'); // invert(this.primaryColor);
this.primaryTextColor = this.primaryTextColor || (this.darkMode ? '#eee' : '#333'); // invert(this.primaryColor);
this.secondaryColor = this.secondaryColor || adjust(this.primaryColor, { h: -120 });
this.tertiaryColor = this.tertiaryColor || adjust(this.primaryColor, { h: 180, l: 5 });
@@ -214,6 +214,16 @@ class Theme {
this.gitInv5 = invert(this.git5);
this.gitInv6 = invert(this.git6);
this.gitInv7 = invert(this.git7);
this.branchLabelColor =
this.branchLabelColor || (this.darkMode ? 'black' : this.labelTextColor);
this.gitBranchLabel0 = this.gitBranchLabel0 || this.branchLabelColor;
this.gitBranchLabel1 = this.gitBranchLabel1 || this.branchLabelColor;
this.gitBranchLabel2 = this.gitBranchLabel2 || this.branchLabelColor;
this.gitBranchLabel3 = this.gitBranchLabel3 || this.branchLabelColor;
this.gitBranchLabel4 = this.gitBranchLabel4 || this.branchLabelColor;
this.gitBranchLabel5 = this.gitBranchLabel5 || this.branchLabelColor;
this.gitBranchLabel6 = this.gitBranchLabel6 || this.branchLabelColor;
this.gitBranchLabel7 = this.gitBranchLabel7 || this.branchLabelColor;
}
calculate(overrides) {
if (typeof overrides !== 'object') {

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

@@ -187,6 +187,24 @@ class Theme {
this.relationLabelBackground ||
(this.darkMode ? darken(this.secondaryColor, 30) : this.secondaryColor);
this.relationLabelColor = this.relationLabelColor || this.actorTextColor;
/* git */
this.git0 = lighten(this.secondaryColor, 20);
this.git1 = lighten(this.pie2 || this.secondaryColor, 20);
this.git2 = lighten(this.pie3 || this.tertiaryColor, 20);
this.git3 = lighten(this.pie4 || adjust(this.primaryColor, { h: -30 }), 20);
this.git4 = lighten(this.pie5 || adjust(this.primaryColor, { h: -60 }), 20);
this.git5 = lighten(this.pie6 || adjust(this.primaryColor, { h: -90 }), 10);
this.git6 = lighten(this.pie7 || adjust(this.primaryColor, { h: +60 }), 10);
this.git7 = lighten(this.pie8 || adjust(this.primaryColor, { h: +120 }), 20);
this.gitInv0 = invert(this.git0);
this.gitInv1 = invert(this.git1);
this.gitInv2 = invert(this.git2);
this.gitInv3 = invert(this.git3);
this.gitInv4 = invert(this.git4);
this.gitInv5 = invert(this.git5);
this.gitInv6 = invert(this.git6);
this.gitInv7 = invert(this.git7);
}
calculate(overrides) {
if (typeof overrides !== 'object') {

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

@@ -1,4 +1,4 @@
import { invert, lighten, rgba, adjust } from 'khroma';
import { invert, lighten, rgba, adjust, darken } from 'khroma';
import { mkBorder } from './theme-helpers';
class Theme {
@@ -199,6 +199,51 @@ class Theme {
this.relationColor = this.relationColor || this.lineColor;
this.relationLabelBackground = this.relationLabelBackground || this.labelBackground;
this.relationLabelColor = this.relationLabelColor || this.actorTextColor;
/* git */
this.git0 = this.git0 || this.primaryColor;
this.git1 = this.git1 || this.secondaryColor;
this.git2 = this.git2 || this.tertiaryColor;
this.git3 = this.git3 || adjust(this.primaryColor, { h: -30 });
this.git4 = this.git4 || adjust(this.primaryColor, { h: -60 });
this.git5 = this.git5 || adjust(this.primaryColor, { h: -90 });
this.git6 = this.git6 || adjust(this.primaryColor, { h: +60 });
this.git7 = this.git7 || adjust(this.primaryColor, { h: +120 });
if (this.darkMode) {
this.git0 = lighten(this.git0, 25);
this.git1 = lighten(this.git1, 25);
this.git2 = lighten(this.git2, 25);
this.git3 = lighten(this.git3, 25);
this.git4 = lighten(this.git4, 25);
this.git5 = lighten(this.git5, 25);
this.git6 = lighten(this.git6, 25);
this.git7 = lighten(this.git7, 25);
} else {
this.git0 = darken(this.git0, 25);
this.git1 = darken(this.git1, 25);
this.git2 = darken(this.git2, 25);
this.git3 = darken(this.git3, 25);
this.git4 = darken(this.git4, 25);
this.git5 = darken(this.git5, 25);
this.git6 = darken(this.git6, 25);
this.git7 = darken(this.git7, 25);
}
this.gitInv0 = invert(this.git0);
this.gitInv1 = invert(this.git1);
this.gitInv2 = invert(this.git2);
this.gitInv3 = invert(this.git3);
this.gitInv4 = invert(this.git4);
this.gitInv5 = invert(this.git5);
this.gitInv6 = invert(this.git6);
this.gitInv7 = invert(this.git7);
this.gitBranchLabel0 = invert(this.labelTextColor);
this.gitBranchLabel1 = this.labelTextColor;
this.gitBranchLabel2 = this.labelTextColor;
this.gitBranchLabel3 = invert(this.labelTextColor);
this.gitBranchLabel4 = this.labelTextColor;
this.gitBranchLabel5 = this.labelTextColor;
this.gitBranchLabel6 = this.labelTextColor;
this.gitBranchLabel7 = this.labelTextColor;
}
calculate(overrides) {
if (typeof overrides !== 'object') {

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

@@ -169,6 +169,43 @@ class Theme {
this.relationColor = this.relationColor || this.lineColor;
this.relationLabelBackground = this.relationLabelBackground || this.edgeLabelBackground;
this.relationLabelColor = this.relationLabelColor || this.actorTextColor;
/* git */
this.git0 = this.git0 || this.primaryColor;
this.git1 = this.git1 || this.secondaryColor;
this.git2 = this.git2 || this.tertiaryColor;
this.git3 = this.git3 || adjust(this.primaryColor, { h: -30 });
this.git4 = this.git4 || adjust(this.primaryColor, { h: -60 });
this.git5 = this.git5 || adjust(this.primaryColor, { h: -90 });
this.git6 = this.git6 || adjust(this.primaryColor, { h: +60 });
this.git7 = this.git7 || adjust(this.primaryColor, { h: +120 });
if (this.darkMode) {
this.git0 = lighten(this.git0, 25);
this.git1 = lighten(this.git1, 25);
this.git2 = lighten(this.git2, 25);
this.git3 = lighten(this.git3, 25);
this.git4 = lighten(this.git4, 25);
this.git5 = lighten(this.git5, 25);
this.git6 = lighten(this.git6, 25);
this.git7 = lighten(this.git7, 25);
} else {
this.git0 = darken(this.git0, 25);
this.git1 = darken(this.git1, 25);
this.git2 = darken(this.git2, 25);
this.git3 = darken(this.git3, 25);
this.git4 = darken(this.git4, 25);
this.git5 = darken(this.git5, 25);
this.git6 = darken(this.git6, 25);
this.git7 = darken(this.git7, 25);
}
this.gitInv0 = invert(this.git0);
this.gitInv1 = invert(this.git1);
this.gitInv2 = invert(this.git2);
this.gitInv3 = invert(this.git3);
this.gitInv4 = invert(this.git4);
this.gitInv5 = invert(this.git5);
this.gitInv6 = invert(this.git6);
this.gitInv7 = invert(this.git7);
}
calculate(overrides) {
if (typeof overrides !== 'object') {

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

@@ -219,6 +219,35 @@ class Theme {
this.relationColor = this.relationColor || this.lineColor;
this.relationLabelBackground = this.relationLabelBackground || this.edgeLabelBackground;
this.relationLabelColor = this.relationLabelColor || this.actorTextColor;
/* git */
this.git0 = darken(this.pie1, 25) || this.primaryColor;
this.git1 = this.pie2 || this.secondaryColor;
this.git2 = this.pie3 || this.tertiaryColor;
this.git3 = this.pie4 || adjust(this.primaryColor, { h: -30 });
this.git4 = this.pie5 || adjust(this.primaryColor, { h: -60 });
this.git5 = this.pie6 || adjust(this.primaryColor, { h: -90 });
this.git6 = this.pie7 || adjust(this.primaryColor, { h: +60 });
this.git7 = this.pie8 || adjust(this.primaryColor, { h: +120 });
this.gitInv0 = invert(this.git0);
this.gitInv1 = invert(this.git1);
this.gitInv2 = invert(this.git2);
this.gitInv3 = invert(this.git3);
this.gitInv4 = invert(this.git4);
this.gitInv5 = invert(this.git5);
this.gitInv6 = invert(this.git6);
this.gitInv7 = invert(this.git7);
this.branchLabelColor = this.branchLabelColor || this.labelTextColor;
this.gitBranchLabel0 = this.branchLabelColor;
this.gitBranchLabel1 = 'white';
this.gitBranchLabel2 = this.branchLabelColor;
this.gitBranchLabel3 = 'white';
this.gitBranchLabel4 = this.branchLabelColor;
this.gitBranchLabel5 = this.branchLabelColor;
this.gitBranchLabel6 = this.branchLabelColor;
this.gitBranchLabel7 = this.branchLabelColor;
}
calculate(overrides) {
if (typeof overrides !== 'object') {