marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-09-18 23:09:49 +02:00
Code Issues Packages Projects Releases Wiki Activity

updated redux-dark theme

Browse Source
This commit is contained in:
omkarht
2025-01-28 17:17:27 +05:30
parent 7513d0e39a
commit b3a2794f1f
5 changed files with 17 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
packages/mermaid/src/rendering-util/render.ts
View File

@@ -57,7 +57,8 @@ export const render = async (data4Layout: LayoutData, svg: SVG, positions?: any)
const layoutDefinition = layoutAlgorithms[data4Layout.layoutAlgorithm]; const layoutDefinition = layoutAlgorithms[data4Layout.layoutAlgorithm];
const layoutRenderer = await layoutDefinition.loader(); const layoutRenderer = await layoutDefinition.loader();
const { useGradient, gradientStart, gradientStop } = data4Layout.config.themeVariables; const { theme, themeVariables } = data4Layout.config;
const { useGradient, gradientStart, gradientStop } = themeVariables;
svg svg
.append('defs') .append('defs')
@@ -70,7 +71,7 @@ export const render = async (data4Layout: LayoutData, svg: SVG, positions?: any)
.attr('dy', '4') .attr('dy', '4')
.attr('stdDeviation', 0) .attr('stdDeviation', 0)
.attr('flood-opacity', '0.06') .attr('flood-opacity', '0.06')
.attr('flood-color', '#000000'); .attr('flood-color', `${theme === 'redux' ? '#000000' : '#FFFFFF'}`);
svg svg
.append('defs') .append('defs')
@@ -83,7 +84,7 @@ export const render = async (data4Layout: LayoutData, svg: SVG, positions?: any)
.attr('dy', '2') .attr('dy', '2')
.attr('stdDeviation', 0) .attr('stdDeviation', 0)
.attr('flood-opacity', '0.06') .attr('flood-opacity', '0.06')
.attr('flood-color', '#000000'); .attr('flood-color', `${theme === 'redux' ? '#000000' : '#FFFFFF'}`);
if (useGradient) { if (useGradient) {
const gradient = svg const gradient = svg

2
packages/mermaid/src/rendering-util/rendering-elements/shapes/filledCircle.ts
View File

@@ -61,7 +61,7 @@ export function filledCircle<T extends SVGGraphicsElement>(
filledCircle.attr('class', 'outer-path'); filledCircle.attr('class', 'outer-path');
} }
if (node.width < 25 && theme === 'redux' && node.look !== 'handDrawn') { if (node.width < 25 && theme?.includes('redux') && node.look !== 'handDrawn') {
filledCircle.attr('style', 'filter:url(#drop-shadow-small)'); filledCircle.attr('style', 'filter:url(#drop-shadow-small)');
} }

2
packages/mermaid/src/rendering-util/rendering-elements/shapes/stateEnd.ts
View File

@@ -80,7 +80,7 @@ export function stateEnd<T extends SVGGraphicsElement>(
circle.selectAll('path').attr('style', nodeStyles); circle.selectAll('path').attr('style', nodeStyles);
} }
if (node.width < 25 && theme === 'redux' && node.look !== 'handDrawn') { if (node.width < 25 && theme?.includes('redux') && node.look !== 'handDrawn') {
circle.attr('style', 'filter:url(#drop-shadow-small)'); circle.attr('style', 'filter:url(#drop-shadow-small)');
} }

2
packages/mermaid/src/rendering-util/rendering-elements/shapes/stateStart.ts
View File

@@ -62,7 +62,7 @@ export function stateStart<T extends SVGGraphicsElement>(
.attr('height', node.height ?? 14); .attr('height', node.height ?? 14);
} }
if (node.width < 25 && theme === 'redux' && node.look !== 'handDrawn') { if (node.width < 25 && theme?.includes('redux') && node.look !== 'handDrawn') {
circle.attr('style', 'filter:url(#drop-shadow-small)'); circle.attr('style', 'filter:url(#drop-shadow-small)');
} }

20
packages/mermaid/src/themes/theme-redux-dark.js
View File

@@ -23,7 +23,7 @@ class Theme {
this.secondaryTextColor = invert(this.secondaryColor); this.secondaryTextColor = invert(this.secondaryColor);
this.tertiaryTextColor = invert(this.tertiaryColor); this.tertiaryTextColor = invert(this.tertiaryColor);
this.mainBkg = '#2a2020'; this.mainBkg = '#111113';
this.secondBkg = 'calculated'; this.secondBkg = 'calculated';
this.mainContrastColor = 'lightgrey'; this.mainContrastColor = 'lightgrey';
this.darkTextColor = lighten(invert('#323D47'), 10); this.darkTextColor = lighten(invert('#323D47'), 10);
@@ -32,14 +32,14 @@ class Theme {
this.arrowheadColor = invert(this.background); this.arrowheadColor = invert(this.background);
this.fontFamily = '"Recursive Variable", arial, sans-serif'; this.fontFamily = '"Recursive Variable", arial, sans-serif';
this.fontSize = '14px'; this.fontSize = '14px';
this.labelBackground = '#181818'; this.labelBackground = '#111113';
this.textColor = '#ccc'; this.textColor = '#ccc';
this.THEME_COLOR_LIMIT = 12; this.THEME_COLOR_LIMIT = 12;
this.radius = 3; this.radius = 12;
this.strokeWidth = 2; this.strokeWidth = 2;
this.noteBkgColor = '#fff5ad'; this.noteBkgColor = '#fff5ad';
this.noteTextColor = '#333'; this.noteTextColor = '#FFFFFF';
this.THEME_COLOR_LIMIT = 12; this.THEME_COLOR_LIMIT = 12;
// dark // dark
@@ -47,13 +47,13 @@ class Theme {
this.fontSize = '14px'; this.fontSize = '14px';
// Neo-specific // Neo-specific
// this.nodeBorder = 'none'; this.nodeBorder = '#FFFFFF';
// this.stateBorder = 'none'; this.stateBorder = '#FFFFFF';
this.useGradient = true; this.useGradient = false;
this.gradientStart = '#0042eb'; this.gradientStart = '#0042eb';
this.gradientStop = '#eb0042'; this.gradientStop = '#eb0042';
this.dropShadow = 'drop-shadow( 1px 2px 2px rgba(185,185,185,0.2))'; this.dropShadow = 'url(#drop-shadow)';
/* Architecture Diagram variables */ /* Architecture Diagram variables */
this.archEdgeColor = 'calculated'; this.archEdgeColor = 'calculated';
@@ -66,7 +66,7 @@ class Theme {
// The || is to make sure that if the variable has been defined by a user override that value is to be used // The || is to make sure that if the variable has been defined by a user override that value is to be used
/* Main */ /* Main */
this.primaryTextColor = this.primaryTextColor || (this.darkMode ? '#eee' : '#333'); // invert(this.primaryColor); this.primaryTextColor = this.primaryTextColor || (this.darkMode ? '#eee' : '#FFFFFF'); // invert(this.primaryColor);
this.secondaryColor = this.secondaryColor || adjust(this.primaryColor, { h: -120 }); this.secondaryColor = this.secondaryColor || adjust(this.primaryColor, { h: -120 });
this.tertiaryColor = this.tertiaryColor || adjust(this.primaryColor, { h: 180, l: 5 }); this.tertiaryColor = this.tertiaryColor || adjust(this.primaryColor, { h: 180, l: 5 });
@@ -77,7 +77,7 @@ class Theme {
this.tertiaryBorderColor || mkBorder(this.tertiaryColor, this.darkMode); this.tertiaryBorderColor || mkBorder(this.tertiaryColor, this.darkMode);
this.noteBorderColor = this.noteBorderColor || mkBorder(this.noteBkgColor, this.darkMode); this.noteBorderColor = this.noteBorderColor || mkBorder(this.noteBkgColor, this.darkMode);
this.noteBkgColor = this.noteBkgColor || '#fff5ad'; this.noteBkgColor = this.noteBkgColor || '#fff5ad';
this.noteTextColor = this.noteTextColor || '#333'; this.noteTextColor = this.noteTextColor || '#FFFFFF';
this.secondaryTextColor = this.secondaryTextColor || invert(this.secondaryColor); this.secondaryTextColor = this.secondaryTextColor || invert(this.secondaryColor);
this.tertiaryTextColor = this.tertiaryTextColor || invert(this.tertiaryColor); this.tertiaryTextColor = this.tertiaryTextColor || invert(this.tertiaryColor);