marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-09-18 14:59:53 +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 layoutRenderer = await layoutDefinition.loader();
const { useGradient, gradientStart, gradientStop } = data4Layout.config.themeVariables;
const { theme, themeVariables } = data4Layout.config;
const { useGradient, gradientStart, gradientStop } = themeVariables;
svg
.append('defs')
@@ -70,7 +71,7 @@ export const render = async (data4Layout: LayoutData, svg: SVG, positions?: any)
.attr('dy', '4')
.attr('stdDeviation', 0)
.attr('flood-opacity', '0.06')
.attr('flood-color', '#000000');
.attr('flood-color', `${theme === 'redux' ? '#000000' : '#FFFFFF'}`);
svg
.append('defs')
@@ -83,7 +84,7 @@ export const render = async (data4Layout: LayoutData, svg: SVG, positions?: any)
.attr('dy', '2')
.attr('stdDeviation', 0)
.attr('flood-opacity', '0.06')
.attr('flood-color', '#000000');
.attr('flood-color', `${theme === 'redux' ? '#000000' : '#FFFFFF'}`);
if (useGradient) {
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');
}
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)');
}

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);
}
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)');
}

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);
}
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)');
}

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

@@ -23,7 +23,7 @@ class Theme {
this.secondaryTextColor = invert(this.secondaryColor);
this.tertiaryTextColor = invert(this.tertiaryColor);
this.mainBkg = '#2a2020';
this.mainBkg = '#111113';
this.secondBkg = 'calculated';
this.mainContrastColor = 'lightgrey';
this.darkTextColor = lighten(invert('#323D47'), 10);
@@ -32,14 +32,14 @@ class Theme {
this.arrowheadColor = invert(this.background);
this.fontFamily = '"Recursive Variable", arial, sans-serif';
this.fontSize = '14px';
this.labelBackground = '#181818';
this.labelBackground = '#111113';
this.textColor = '#ccc';
this.THEME_COLOR_LIMIT = 12;
this.radius = 3;
this.radius = 12;
this.strokeWidth = 2;
this.noteBkgColor = '#fff5ad';
this.noteTextColor = '#333';
this.noteTextColor = '#FFFFFF';
this.THEME_COLOR_LIMIT = 12;
// dark
@@ -47,13 +47,13 @@ class Theme {
this.fontSize = '14px';
// Neo-specific
// this.nodeBorder = 'none';
// this.stateBorder = 'none';
this.nodeBorder = '#FFFFFF';
this.stateBorder = '#FFFFFF';
this.useGradient = true;
this.useGradient = false;
this.gradientStart = '#0042eb';
this.gradientStop = '#eb0042';
this.dropShadow = 'drop-shadow( 1px 2px 2px rgba(185,185,185,0.2))';
this.dropShadow = 'url(#drop-shadow)';
/* Architecture Diagram variables */
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
/* 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.tertiaryColor = this.tertiaryColor || adjust(this.primaryColor, { h: 180, l: 5 });
@@ -77,7 +77,7 @@ class Theme {
this.tertiaryBorderColor || mkBorder(this.tertiaryColor, this.darkMode);
this.noteBorderColor = this.noteBorderColor || mkBorder(this.noteBkgColor, this.darkMode);
this.noteBkgColor = this.noteBkgColor || '#fff5ad';
this.noteTextColor = this.noteTextColor || '#333';
this.noteTextColor = this.noteTextColor || '#FFFFFF';
this.secondaryTextColor = this.secondaryTextColor || invert(this.secondaryColor);
this.tertiaryTextColor = this.tertiaryTextColor || invert(this.tertiaryColor);