mirrors
/
mermaid
mirror of https://github.com/mermaid-js/mermaid.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

Merge pull request #3512 from weedySeaDragon/bug/3429_er-dark-theme-attribute-colors 

fix: ER dark theme attribute colors
This commit is contained in:
Knut Sveidqvist 2022-09-28 13:18:11 +02:00 committed by GitHub
parent 66809ed972 edb30c9feb
commit e1c63139b2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 89 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
demos/er.html
View File

@ -16,18 +16,30 @@
<body> <body>
<pre class="mermaid"> <pre class="mermaid">
erDiagram erDiagram
accTitle: A very simple Entity-Relationship demo title: This is a title
accDescr: Shows the relationships between Customer, Order, Line-Item, and Delivery-Address accDescription_ Test a description
CUSTOMER ||--o{ ORDER : places CUSTOMER ||--o{ ORDER : places
ORDER ||--|{ LINE-ITEM : contains ORDER ||--|{ LINE-ITEM : contains
CUSTOMER }|..|{ DELIVERY-ADDRESS : uses CUSTOMER }|..|{ DELIVERY-ADDRESS : uses
DELIVERY-ADDRESS {
int customerId
string addressLine1
string addressLine2
string city
string county
string state
string region
string country
string postalCode
}
</pre> </pre>
<script type="module"> <script type="module">
import mermaid from '../src/mermaid'; import mermaid from '../src/mermaid';
mermaid.initialize({ mermaid.initialize({
theme: 'forest', theme: 'base',
// themeCSS: '.node rect { fill: red; }', // themeCSS: '.node rect { fill: red; }',
logLevel: 3, logLevel: 3,
securityLevel: 'loose', securityLevel: 'loose',

4
src/diagrams/er/styles.js
View File

@ -6,12 +6,12 @@ const getStyles = (options) =>
} }
.attributeBoxOdd { .attributeBoxOdd {
fill: #ffffff; fill: ${options.attributeBackgroundColorOdd};
stroke: ${options.nodeBorder}; stroke: ${options.nodeBorder};
} }
.attributeBoxEven { .attributeBoxEven {
fill: #f2f2f2; fill: ${options.attributeBackgroundColorEven};
stroke: ${options.nodeBorder}; stroke: ${options.nodeBorder};
} }

7
src/themes/erDiagram-oldHardcodedValues.ts Normal file
View File

@ -0,0 +1,7 @@
/**
* @file Values that have been hardcoded in src/diagrams/er/styles.js. These can be used by
* theme-_._ files to maintain display styles until themes, styles, renderers are revised. --
* 2022-09-22
*/
export const oldAttributeBackgroundColorOdd = '#ffffff';
export const oldAttributeBackgroundColorEven = '#f2f2f2';

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

@ -1,5 +1,10 @@
import { darken, lighten, adjust, invert } from 'khroma'; import { darken, lighten, adjust, invert } from 'khroma';
import { mkBorder } from './theme-helpers'; import { mkBorder } from './theme-helpers';
import {
oldAttributeBackgroundColorEven,
oldAttributeBackgroundColorOdd,
} from './erDiagram-oldHardcodedValues';
class Theme { class Theme {
constructor() { constructor() {
/** # Base variables */ /** # Base variables */
@ -219,6 +224,15 @@ class Theme {
this.commitLabelColor = this.commitLabelColor || this.secondaryTextColor; this.commitLabelColor = this.commitLabelColor || this.secondaryTextColor;
this.commitLabelBackground = this.commitLabelBackground || this.secondaryColor; this.commitLabelBackground = this.commitLabelBackground || this.secondaryColor;
this.commitLabelFontSize = this.commitLabelFontSize || '10px'; this.commitLabelFontSize = this.commitLabelFontSize || '10px';
/* -------------------------------------------------- */
/* EntityRelationship diagrams */
this.attributeBackgroundColorOdd =
this.attributeBackgroundColorOdd || oldAttributeBackgroundColorOdd;
this.attributeBackgroundColorEven =
this.attributeBackgroundColorEven || oldAttributeBackgroundColorEven;
/* -------------------------------------------------- */
} }
calculate(overrides) { calculate(overrides) {
if (typeof overrides !== 'object') { if (typeof overrides !== 'object') {

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

@ -1,5 +1,6 @@
import { invert, lighten, darken, rgba, adjust } from 'khroma'; import { invert, lighten, darken, rgba, adjust } from 'khroma';
import { mkBorder } from './theme-helpers'; import { mkBorder } from './theme-helpers';
class Theme { class Theme {
constructor() { constructor() {
this.background = '#333'; this.background = '#333';
@ -28,8 +29,8 @@ class Theme {
this.fontSize = '16px'; this.fontSize = '16px';
this.labelBackground = '#181818'; this.labelBackground = '#181818';
this.textColor = '#ccc'; this.textColor = '#ccc';
/* Flowchart variables */
/* Flowchart variables */
this.nodeBkg = 'calculated'; this.nodeBkg = 'calculated';
this.nodeBorder = 'calculated'; this.nodeBorder = 'calculated';
this.clusterBkg = 'calculated'; this.clusterBkg = 'calculated';
@ -218,6 +219,15 @@ class Theme {
this.commitLabelColor = this.commitLabelColor || this.secondaryTextColor; this.commitLabelColor = this.commitLabelColor || this.secondaryTextColor;
this.commitLabelBackground = this.commitLabelBackground || this.secondaryColor; this.commitLabelBackground = this.commitLabelBackground || this.secondaryColor;
this.commitLabelFontSize = this.commitLabelFontSize || '10px'; this.commitLabelFontSize = this.commitLabelFontSize || '10px';
/* -------------------------------------------------- */
/* EntityRelationship diagrams */
this.attributeBackgroundColorOdd =
this.attributeBackgroundColorOdd || lighten(this.background, 12);
this.attributeBackgroundColorEven =
this.attributeBackgroundColorEven || lighten(this.background, 2);
/* -------------------------------------------------- */
} }
calculate(overrides) { calculate(overrides) {
if (typeof overrides !== 'object') { if (typeof overrides !== 'object') {

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

@ -1,5 +1,9 @@
import { invert, lighten, rgba, adjust, darken } from 'khroma'; import { invert, lighten, rgba, adjust, darken } from 'khroma';
import { mkBorder } from './theme-helpers'; import { mkBorder } from './theme-helpers';
import {
oldAttributeBackgroundColorEven,
oldAttributeBackgroundColorOdd,
} from './erDiagram-oldHardcodedValues';
class Theme { class Theme {
constructor() { constructor() {
@ -257,6 +261,15 @@ class Theme {
this.commitLabelColor = this.commitLabelColor || this.secondaryTextColor; this.commitLabelColor = this.commitLabelColor || this.secondaryTextColor;
this.commitLabelBackground = this.commitLabelBackground || this.secondaryColor; this.commitLabelBackground = this.commitLabelBackground || this.secondaryColor;
this.commitLabelFontSize = this.commitLabelFontSize || '10px'; this.commitLabelFontSize = this.commitLabelFontSize || '10px';
/* -------------------------------------------------- */
/* EntityRelationship diagrams */
this.attributeBackgroundColorOdd =
this.attributeBackgroundColorOdd || oldAttributeBackgroundColorOdd;
this.attributeBackgroundColorEven =
this.attributeBackgroundColorEven || oldAttributeBackgroundColorEven;
/* -------------------------------------------------- */
} }
calculate(overrides) { calculate(overrides) {
if (typeof overrides !== 'object') { if (typeof overrides !== 'object') {

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

@ -1,5 +1,10 @@
import { darken, lighten, adjust, invert } from 'khroma'; import { darken, lighten, adjust, invert } from 'khroma';
import { mkBorder } from './theme-helpers'; import { mkBorder } from './theme-helpers';
import {
oldAttributeBackgroundColorEven,
oldAttributeBackgroundColorOdd,
} from './erDiagram-oldHardcodedValues';
class Theme { class Theme {
constructor() { constructor() {
/* Base vales */ /* Base vales */
@ -219,6 +224,15 @@ class Theme {
this.commitLabelColor = this.commitLabelColor || this.secondaryTextColor; this.commitLabelColor = this.commitLabelColor || this.secondaryTextColor;
this.commitLabelBackground = this.commitLabelBackground || this.secondaryColor; this.commitLabelBackground = this.commitLabelBackground || this.secondaryColor;
this.commitLabelFontSize = this.commitLabelFontSize || '10px'; this.commitLabelFontSize = this.commitLabelFontSize || '10px';
/* -------------------------------------------------- */
/* EntityRelationship diagrams */
this.attributeBackgroundColorOdd =
this.attributeBackgroundColorOdd || oldAttributeBackgroundColorOdd;
this.attributeBackgroundColorEven =
this.attributeBackgroundColorEven || oldAttributeBackgroundColorEven;
/* -------------------------------------------------- */
} }
calculate(overrides) { calculate(overrides) {
if (typeof overrides !== 'object') { if (typeof overrides !== 'object') {

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

@ -1,5 +1,9 @@
import { invert, darken, lighten, adjust } from 'khroma'; import { invert, darken, lighten, adjust } from 'khroma';
import { mkBorder } from './theme-helpers'; import { mkBorder } from './theme-helpers';
import {
oldAttributeBackgroundColorEven,
oldAttributeBackgroundColorOdd,
} from './erDiagram-oldHardcodedValues';
// const Color = require ( 'khroma/dist/color' ).default // const Color = require ( 'khroma/dist/color' ).default
// Color.format.hex.stringify(Color.parse('hsl(210, 66.6666666667%, 95%)')); // => "#EAF2FB" // Color.format.hex.stringify(Color.parse('hsl(210, 66.6666666667%, 95%)')); // => "#EAF2FB"
@ -261,6 +265,15 @@ class Theme {
this.commitLabelColor = this.commitLabelColor || this.secondaryTextColor; this.commitLabelColor = this.commitLabelColor || this.secondaryTextColor;
this.commitLabelBackground = this.commitLabelBackground || this.secondaryColor; this.commitLabelBackground = this.commitLabelBackground || this.secondaryColor;
this.commitLabelFontSize = this.commitLabelFontSize || '10px'; this.commitLabelFontSize = this.commitLabelFontSize || '10px';
/* -------------------------------------------------- */
/* EntityRelationship diagrams */
this.attributeBackgroundColorOdd =
this.attributeBackgroundColorOdd || oldAttributeBackgroundColorOdd;
this.attributeBackgroundColorEven =
this.attributeBackgroundColorEven || oldAttributeBackgroundColorEven;
/* -------------------------------------------------- */
} }
calculate(overrides) { calculate(overrides) {
if (typeof overrides !== 'object') { if (typeof overrides !== 'object') {