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

#1542 Setting up base theme for custom theming

Browse Source
This commit is contained in:
Knut Sveidqvist
2020-07-27 10:01:34 +02:00
parent 4e12f959fc
commit 5a7d770a58
10 changed files with 547 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,53 +1,74 @@
import { darken, lighten, adjust } from 'khroma';
import { darken, lighten, adjust, invert } from 'khroma';
const mkBorder = (col, darkMode) =>
darkMode ? adjust(col, { s: -40, l: 10 }) : adjust(col, { s: -40, l: -10 });
class Theme {
constructor() {
/* Base variables */
this.primaryColor = '#9f33be';
this.secondaryColor = '#b20238';
this.tertiaryColor = lighten(this.primaryColor, 30);
this.relationColor = '#000';
/** # 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.background = '#f4f4f4';
// this.background = '#0c0c0c';
/** * darkMode -In darkMode the color generation deduces other colors from the primary colors */
this.darkMode = false;
// this.darkMode = true;
// this.primaryColor = '#1f1f00';
this.noteBkgColor = '#fff5ad';
this.noteTextColor = '#333';
// this.primaryColor = '#9f33be';
this.primaryColor = '#f0fff0';
// this.primaryColor = '#fa255e';
// this.primaryColor = '#ECECFF';
// this.secondaryColor = '#c39ea0';
// this.tertiaryColor = '#f8e5e5';
// this.primaryColor = '#ECECFF';
// this.secondaryColor = '#ffffde';
// this.tertiaryColor = '#ffffde';
this.secondaryColor = '#dfdfde';
this.tertiaryColor = '#CCCCFF';
this.background = 'white';
this.lineColor = '#333333';
this.border1 = '#9370DB';
this.arrowheadColor = '#333333';
this.fontFamily = '"trebuchet ms", verdana, arial';
this.fontSize = '16px';
this.labelBackground = '#e8e8e8';
this.textColor = '#333';
this.noteBkgColor = '#fff5ad';
this.noteBorderColor = '#aaaa33';
this.updateColors();
this.relationColor = '#000';
}
updateColors() {
this.secondBkg = this.tertiaryColor;
/* Main */
this.secondaryColor = adjust(this.primaryColor, { h: 120 });
this.tertiaryColor = adjust(this.primaryColor, { h: -160 });
this.primaryBorderColor = mkBorder(this.primaryColor, this.darkMode);
this.secondaryBorderColor = mkBorder(this.secondaryColor, this.darkMode);
this.tertiaryBorderColor = mkBorder(this.tertiaryColor, this.darkMode);
this.noteBorderColor = mkBorder(this.noteBkgColor, this.darkMode);
this.primaryTextColor = invert(this.primaryColor);
this.secondaryTextColor = invert(this.secondaryColor);
this.tertiaryTextColor = invert(this.tertiaryColor);
this.lineColor = invert(this.background);
this.textColor = invert(this.background);
/* Flowchart variables */
this.nodeBkg = this.primaryColor;
this.mainBkg = this.primaryColor;
this.nodeBorder = darken(this.primaryColor, 23); // border 1
this.nodeBorder = this.primaryBorderColor;
this.clusterBkg = this.tertiaryColor;
this.clusterBorder = darken(this.tertiaryColor, 30);
this.clusterBorder = this.tertiaryBorderColor;
this.defaultLinkColor = this.lineColor;
this.titleColor = this.textColor;
this.titleColor = this.tertiaryTextColor;
this.edgeLabelBackground = this.labelBackground;
/* Sequence Diagram variables */
// this.actorBorder = lighten(this.border1, 0.5);
this.actorBorder = lighten(this.border1, 23);
this.actorBorder = this.primaryBorderColor;
this.actorBkg = this.mainBkg;
this.actorTextColor = 'black';
this.actorTextColor = this.primaryTextColor;
this.actorLineColor = 'grey';
this.labelBoxBkgColor = this.actorBkg;
this.signalColor = this.textColor;
@@ -55,29 +76,21 @@ class Theme {
this.labelBoxBorderColor = this.actorBorder;
this.labelTextColor = this.actorTextColor;
this.loopTextColor = this.actorTextColor;
this.noteBorderColor = this.border2;
this.noteTextColor = this.actorTextColor;
// this.noteTextColor = this.actorTextColor;
this.activationBorderColor = darken(this.secondaryColor, 10);
this.activationBkgColor = this.secondaryColor;
this.sequenceNumberColor = 'white';
/* Gantt chart variables */
this.taskTextColor = this.taskTextLightColor;
this.taskTextOutsideColor = this.taskTextDarkColor;
this.sectionBkgColor = this.tertiaryColor;
this.altSectionBkgColor = 'white';
this.sectionBkgColor = this.secondaryColor;
this.sectionBkgColor2 = this.tertiaryColor;
this.altSectionBkgColor = 'white';
this.sectionBkgColor2 = this.primaryColor;
this.taskBorderColor = lighten(this.primaryColor, 23);
this.taskBorderColor = this.primaryBorderColor;
this.taskBkgColor = this.primaryColor;
this.taskTextLightColor = 'white';
this.taskTextColor = 'calculated';
this.taskTextDarkColor = 'black';
this.taskTextOutsideColor = 'calculated';
this.taskTextClickableColor = '#003163';
this.activeTaskBorderColor = this.primaryColor;
this.activeTaskBkgColor = lighten(this.primaryColor, 23);
this.gridColor = 'lightgrey';
@@ -86,9 +99,17 @@ class Theme {
this.critBorderColor = '#ff8888';
this.critBkgColor = 'red';
this.todayLineColor = 'red';
this.taskTextColor = this.textColor;
this.taskTextOutsideColor = this.textColor;
this.taskTextLightColor = this.textColor;
this.taskTextColor = this.primaryTextColor;
this.taskTextDarkColor = this.textColor;
this.taskTextOutsideColor = 'calculated';
this.taskTextClickableColor = '#003163';
/* state colors */
this.labelColor = 'black';
this.labelColor = this.primaryTextColor;
this.altBackground = this.tertiaryColor;
this.errorBkgColor = '#552222';
this.errorTextColor = '#552222';