gilles/excalidraw
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(packages/excalidraw): export applyDarkModeFilter and simplify (#11429)

Browse Source
This commit is contained in:
David Luzar
2026-06-01 15:43:45 +02:00
committed by GitHub
parent c08be69618
commit 3372149277
9 changed files with 53 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/element/src/renderElement.ts
+12 -12
View File
@@ -422,10 +422,10 @@ const drawElementOnCanvas = (
for (const shape of shapes) {
if (typeof shape === "string") {
context.fillStyle =
renderConfig.theme === THEME.DARK
? applyDarkModeFilter(element.strokeColor)
: element.strokeColor;
context.fillStyle = applyDarkModeFilter(
element.strokeColor,
renderConfig.theme === THEME.DARK,
);
context.fill(new Path2D(shape));
} else {
rc.draw(shape);
@@ -555,10 +555,10 @@ const drawElementOnCanvas = (
context.canvas.setAttribute("dir", rtl ? "rtl" : "ltr");
context.save();
context.font = getFontString(element);
context.fillStyle =
renderConfig.theme === THEME.DARK
? applyDarkModeFilter(element.strokeColor)
: element.strokeColor;
context.fillStyle = applyDarkModeFilter(
element.strokeColor,
renderConfig.theme === THEME.DARK,
);
context.textAlign = element.textAlign as CanvasTextAlign;
// Canvas does not support multiline text by default
@@ -811,10 +811,10 @@ export const renderElement = (
context.fillStyle = "rgba(0, 0, 200, 0.04)";
context.lineWidth = FRAME_STYLE.strokeWidth / appState.zoom.value;
context.strokeStyle =
appState.theme === THEME.DARK
? applyDarkModeFilter(FRAME_STYLE.strokeColor)
: FRAME_STYLE.strokeColor;
context.strokeStyle = applyDarkModeFilter(
FRAME_STYLE.strokeColor,
appState.theme === THEME.DARK,
);
// TODO change later to only affect AI frames
if (isMagicFrameElement(element)) {
packages/element/src/shape.ts
+8 -15
View File
@@ -218,9 +218,7 @@ export const generateRoughOptions = (
fillWeight: element.strokeWidth / 2,
hachureGap: element.strokeWidth * 4,
roughness: adjustRoughness(element),
stroke: isDarkMode
? applyDarkModeFilter(element.strokeColor)
: element.strokeColor,
stroke: applyDarkModeFilter(element.strokeColor, isDarkMode),
preserveVertices:
continuousPath || element.roughness < ROUGHNESS.cartoonist,
};
@@ -234,9 +232,7 @@ export const generateRoughOptions = (
options.fillStyle = element.fillStyle;
options.fill = isTransparent(element.backgroundColor)
? undefined
: isDarkMode
? applyDarkModeFilter(element.backgroundColor)
: element.backgroundColor;
: applyDarkModeFilter(element.backgroundColor, isDarkMode);
if (element.type === "ellipse") {
options.curveFitting = 1;
}
@@ -249,9 +245,7 @@ export const generateRoughOptions = (
options.fill =
element.backgroundColor === "transparent"
? undefined
: isDarkMode
? applyDarkModeFilter(element.backgroundColor)
: element.backgroundColor;
: applyDarkModeFilter(element.backgroundColor, isDarkMode);
}
return options;
}
@@ -386,12 +380,11 @@ const getArrowheadShapes = (
return [];
}
const strokeColor = isDarkMode
? applyDarkModeFilter(element.strokeColor)
: element.strokeColor;
const backgroundFillColor = isDarkMode
? applyDarkModeFilter(canvasBackgroundColor)
: canvasBackgroundColor;
const strokeColor = applyDarkModeFilter(element.strokeColor, isDarkMode);
const backgroundFillColor = applyDarkModeFilter(
canvasBackgroundColor,
isDarkMode,
);
const cardinalityOneOrManyOffset = -0.25;
const cardinalityZeroCircleScale = 0.8;