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 Themes tweaked

Browse Source
This commit is contained in:
Knut Sveidqvist
2020-07-30 15:28:46 +02:00
parent dd866718b9
commit dbe6b9dacb
10 changed files with 90 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,30 +1,32 @@
import { darken, lighten, adjust, invert } from 'khroma';
const mkBorder = (col, darkMode) =>
darkMode ? adjust(col, { s: -40, l: 10 }) : adjust(col, { s: -40, l: -10 });
import { mkBorder } from './theme-helpers';
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';
/** * darkMode -In darkMode the color generation deduces other colors from the primary colors */
this.darkMode = false;
// this.darkMode = true;
// this.primaryColor = '#1f1f00';
// this.darkMode = true;
this.noteBkgColor = '#fff5ad';
this.noteTextColor = '#333';
// this.primaryColor = '#f2ee7e';
// this.primaryColor = '#9f33be';
this.primaryColor = '#f0fff0';
// this.primaryColor = '#f0fff0';
// this.primaryColor = '#fa255e';
// this.primaryColor = '#ECECFF';
// this.secondaryColor = '#c39ea0';
// this.tertiaryColor = '#f8e5e5';
this.secondaryColor = '#dfdfde';
this.tertiaryColor = '#CCCCFF';
// this.secondaryColor = '#dfdfde';
// this.tertiaryColor = '#CCCCFF';
this.border1 = '#9370DB';
this.arrowheadColor = '#333333';
@@ -38,15 +40,14 @@ class Theme {
this.secondBkg = this.tertiaryColor;
/* Main */
this.secondaryColor = adjust(this.primaryColor, { h: 120 });
this.tertiaryColor = adjust(this.primaryColor, { h: -160 });
console.warn('primary color', this.primaryColor, 'tertiary - color', this.tertiaryColor);
this.secondaryColor = adjust(this.primaryColor, { h: -120 });
this.tertiaryColor = adjust(this.primaryColor, { h: 180, l: 5 });
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);
@@ -62,7 +63,7 @@ class Theme {
this.clusterBorder = this.tertiaryBorderColor;
this.defaultLinkColor = this.lineColor;
this.titleColor = this.tertiaryTextColor;
this.edgeLabelBackground = this.labelBackground;
this.edgeLabelBackground = this.secondaryColor;
/* Sequence Diagram variables */