Add textDecorationColor property for Text nodes

When set, underline and line-through decorations use this color
instead of the text fill color. Falls back to existing behavior
(gradient or fill) when not set.

Addresses #2037

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: rcoenen

src/shapes/Text.ts

@@ -71,6 +71,7 @@ export interface TextConfig extends ShapeConfig {
   fontVariant?: string;
   textDecoration?: string;
   underlineOffset?: number;
+  textDecorationColor?: string;
   align?: string;
   verticalAlign?: string;
   padding?: number;
@@ -242,6 +243,7 @@ export class Text extends Shape<TextConfig> {
       fill = this.fill(),
       textDecoration = this.textDecoration(),
       underlineOffset = this.underlineOffset(),
+      textDecorationColor = this.textDecorationColor(),
       shouldUnderline = textDecoration.indexOf('underline') !== -1,
       shouldLineThrough = textDecoration.indexOf('line-through') !== -1,
       n;
@@ -318,8 +320,12 @@ export class Text extends Shape<TextConfig> {
         // just /15 looks good enough
         context.lineWidth = fontSize / 15;
 
-        const gradient = this._getLinearGradient();
-        context.strokeStyle = gradient || fill;
+        if (textDecorationColor) {
+          context.strokeStyle = textDecorationColor;
+        } else {
+          const gradient = this._getLinearGradient();
+          context.strokeStyle = gradient || fill;
+        }
         context.stroke();
         context.restore();
       }
@@ -405,8 +411,12 @@ export class Text extends Shape<TextConfig> {
           translateY + lineTranslateY + yOffset
         );
         context.lineWidth = fontSize / 15;
-        const gradient = this._getLinearGradient();
-        context.strokeStyle = gradient || fill;
+        if (textDecorationColor) {
+          context.strokeStyle = textDecorationColor;
+        } else {
+          const gradient = this._getLinearGradient();
+          context.strokeStyle = gradient || fill;
+        }
         context.stroke();
         context.restore();
       }
@@ -771,6 +781,7 @@ export class Text extends Shape<TextConfig> {
   lineHeight: GetSet<number, this>;
   textDecoration: GetSet<string, this>;
   underlineOffset: GetSet<number, this>;
+  textDecorationColor: GetSet<string, this>;
   text: GetSet<string, this>;
   wrap: GetSet<string, this>;
   ellipsis: GetSet<boolean, this>;
@@ -1078,6 +1089,22 @@ Factory.addGetterSetter(
   getNumberValidator()
 );
 
+/**
+ * get/set text decoration color. When set, underline and line-through decorations
+ * use this color instead of the text fill color.
+ * @name Konva.Text#textDecorationColor
+ * @method
+ * @param {String} textDecorationColor
+ * @returns {String}
+ * @example
+ * // get text decoration color
+ * var color = text.textDecorationColor();
+ *
+ * // set text decoration color
+ * text.textDecorationColor('#18A0FB');
+ */
+Factory.addGetterSetter(Text, 'textDecorationColor', '');
+
 /**
  * get/set per-character render hook. The callback is invoked for each grapheme before drawing.
  * It can mutate the provided context (e.g. translate, rotate, change styles) and should return void.