From b74ec267e2bcfd1c3582958cf7be29fff29cbd80 Mon Sep 17 00:00:00 2001
From: Daniel Imms <2193314+Tyriar@users.noreply.github.com>
Date: Fri, 20 Dec 2024 07:37:12 -0800
Subject: [PATCH] Blend cursor with background to support alpha in webgl

Fixes #5241
---
 demo/client.ts                         | 4 ++--
 src/browser/services/ThemeService.ts   | 2 +-
 test/playwright/SharedRendererTests.ts | 8 ++++++++
 3 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/demo/client.ts b/demo/client.ts
index 6e0be22f..02b9f7be 100644
--- a/demo/client.ts
+++ b/demo/client.ts
@@ -16,7 +16,7 @@ if ('WebAssembly' in window) {
   ImageAddon = imageAddon.ImageAddon;
 }
 
-import { Terminal, ITerminalOptions, type IDisposable } from '@xterm/xterm';
+import { Terminal, ITerminalOptions, type IDisposable, type ITheme } from '@xterm/xterm';
 import { AttachAddon } from '@xterm/addon-attach';
 import { ClipboardAddon } from '@xterm/addon-clipboard';
 import { FitAddon } from '@xterm/addon-fit';
@@ -131,7 +131,7 @@ const xtermjsTheme = {
   brightCyan: '#72F0FF',
   white: '#F8F8F8',
   brightWhite: '#FFFFFF'
-};
+} satisfies ITheme;
 function setPadding(): void {
   term.element.style.padding = parseInt(paddingElement.value, 10).toString() + 'px';
   addons.fit.instance.fit();
diff --git a/src/browser/services/ThemeService.ts b/src/browser/services/ThemeService.ts
index 88ffd99d..0dc7fcbf 100644
--- a/src/browser/services/ThemeService.ts
+++ b/src/browser/services/ThemeService.ts
@@ -82,7 +82,7 @@ export class ThemeService extends Disposable implements IThemeService {
     const colors = this._colors;
     colors.foreground = parseColor(theme.foreground, DEFAULT_FOREGROUND);
     colors.background = parseColor(theme.background, DEFAULT_BACKGROUND);
-    colors.cursor = parseColor(theme.cursor, DEFAULT_CURSOR);
+    colors.cursor = color.blend(colors.background, parseColor(theme.cursor, DEFAULT_CURSOR));
     colors.cursorAccent = parseColor(theme.cursorAccent, DEFAULT_CURSOR_ACCENT);
     colors.selectionBackgroundTransparent = parseColor(theme.selectionBackground, DEFAULT_SELECTION);
     colors.selectionBackgroundOpaque = color.blend(colors.background, colors.selectionBackgroundTransparent);
diff --git a/test/playwright/SharedRendererTests.ts b/test/playwright/SharedRendererTests.ts
index 4a1798ce..b0c5c499 100644
--- a/test/playwright/SharedRendererTests.ts
+++ b/test/playwright/SharedRendererTests.ts
@@ -1248,6 +1248,14 @@ export function injectSharedRendererTests(ctx: ISharedRendererTestContext): void
       await ctx.value.proxy.scrollLines(-2);
       await pollFor(ctx.value.page, () => getCellColor(ctx.value, 1, 1), [0, 0, 0, 255]);
     });
+    test('#5241 cursor with alpha should blend color with background color', async () => {
+      const theme: ITheme = {
+        cursor: '#FF000080'
+      };
+      await ctx.value.page.evaluate(`window.term.options.theme = ${JSON.stringify(theme)};`);
+      await ctx.value.proxy.focus();
+      await pollFor(ctx.value.page, () => getCellColor(ctx.value, 1, 1), [128, 0, 0, 255]);
+    });
   });
 }