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

#1590 Theme base tweaked for custom theming

Browse Source
This commit is contained in:
Knut Sveidqvist
2020-07-30 19:18:18 +02:00
parent dbe6b9dacb
commit 5565aab488
12 changed files with 302 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -4,18 +4,21 @@ class Theme {
constructor() {
/** # Base variables */
/** * background - used to know what the background color is of the diagram. This is used for deducing colors for istance line color. Defaulr value is #f4f4f4. */
this.primaryColor = '#fff4dd';
this.primaryTextColor = this.darkMode ? '#ddd' : '#333'; // invert(this.primaryColor);
this.background = '#f4f4f4';
// this.background = '#0c0c0c';
// this.darkMode = true;
this.primaryColor = '#fff4dd';
// this.background = '#0c0c0c';
/** * darkMode -In darkMode the color generation deduces other colors from the primary colors */
this.darkMode = false;
// this.primaryColor = '#1f1f00';
// this.darkMode = true;
this.noteBkgColor = '#fff5ad';
this.noteTextColor = '#333';
// dark
// this.primaryColor = '#034694';
// this.primaryColor = '#f2ee7e';
// this.primaryColor = '#9f33be';
// this.primaryColor = '#f0fff0';
@@ -32,7 +35,6 @@ class Theme {
this.arrowheadColor = '#333333';
this.fontFamily = '"trebuchet ms", verdana, arial';
this.fontSize = '16px';
this.textColor = '#333';
this.updateColors();
this.relationColor = '#000';
}
@@ -40,6 +42,7 @@ class Theme {
this.secondBkg = this.tertiaryColor;
/* Main */
this.primaryTextColor = this.darkMode ? '#ddd' : '#333'; // invert(this.primaryColor);
this.secondaryColor = adjust(this.primaryColor, { h: -120 });
this.tertiaryColor = adjust(this.primaryColor, { h: 180, l: 5 });
@@ -51,7 +54,7 @@ class Theme {
this.secondaryTextColor = invert(this.secondaryColor);
this.tertiaryTextColor = invert(this.tertiaryColor);
this.lineColor = invert(this.background);
this.textColor = invert(this.background);
this.textColor = this.primaryTextColor;
/* Flowchart variables */
@@ -63,7 +66,9 @@ class Theme {
this.clusterBorder = this.tertiaryBorderColor;
this.defaultLinkColor = this.lineColor;
this.titleColor = this.tertiaryTextColor;
this.edgeLabelBackground = this.secondaryColor;
this.edgeLabelBackground = this.darkMode
? darken(this.secondaryColor, 30)
: this.secondaryColor;
/* Sequence Diagram variables */
@@ -81,7 +86,7 @@ class Theme {
// this.noteTextColor = this.actorTextColor;
this.activationBorderColor = darken(this.secondaryColor, 10);
this.activationBkgColor = this.secondaryColor;
this.sequenceNumberColor = 'white';
this.sequenceNumberColor = invert(this.lineColor);
/* Gantt chart variables */