From fbe4d5ff59de5c2a1986859c27914ac5ce1201a8 Mon Sep 17 00:00:00 2001 From: Idris Gadi Date: Mon, 10 Aug 2026 10:44:12 +0530 Subject: [PATCH 1/2] feat: add catpuccin mocha theme --- README.md | 4 ++-- e2e/styling.spec.ts | 2 ++ src/lib/themes.ts | 24 ++++++++++++++++++++++++ 3 files changed, 28 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index e10cb90..4027b18 100644 --- a/README.md +++ b/README.md @@ -58,8 +58,8 @@ npm run test:e2e:ui The window auto-scales to fit the canvas. - **Playback bar**: play/pause/restart/loop, scrubbable timeline, duration and speed controls. Space = play/pause, R = restart. -- **Style panel** (right): 6 themes (Dracula, GitHub Dark, Nord, Solarized, Tokyo - Night, Monokai), background gradients + custom color, window chrome + title, +- **Style panel** (right): 7 themes (Dracula, GitHub Dark, Nord, Solarized, Tokyo + Night, Monokai, Catppuccin Mocha), background gradients + custom color, window chrome + title, line numbers, corner radius, shadow, padding, font family/size. - **Export bar** (top): 16:9 / 1:1 / 9:16 aspect presets, MP4 / GIF / WebM format buttons, and a mocked export modal with phased progress. diff --git a/e2e/styling.spec.ts b/e2e/styling.spec.ts index 2952565..4276a87 100644 --- a/e2e/styling.spec.ts +++ b/e2e/styling.spec.ts @@ -38,6 +38,8 @@ test.describe('Style panel', () => { await expect(codeBox(page)).toHaveCSS('color', 'rgb(248, 248, 242)') // Dracula fg await page.getByRole('button', { name: 'GitHub Dark' }).click() await expect(codeBox(page)).toHaveCSS('color', 'rgb(230, 237, 243)') // GitHub Dark fg + await page.getByRole('button', { name: 'Catppuccin Mocha' }).click() + await expect(codeBox(page)).toHaveCSS('color', 'rgb(205, 214, 244)') // Catppuccin Mocha text }) test('changing the font family updates the rendered code', async ({ page }) => { diff --git a/src/lib/themes.ts b/src/lib/themes.ts index 2995abc..73c9278 100644 --- a/src/lib/themes.ts +++ b/src/lib/themes.ts @@ -151,6 +151,30 @@ export const THEMES: CodeTheme[] = [ attr: '#a6e22e', }, }, + { + id: 'catppuccin-mocha', + name: 'Catppuccin Mocha', + bg: '#1e1e2e', + fg: '#cdd6f4', + chromeBg: '#181825', + lineNumber: '#45475a', + caret: '#f5e0dc', + swatch: ['#1e1e2e', '#cba6f7', '#89b4fa'], + colors: { + keyword: '#cba6f7', + string: '#a6e3a1', + comment: '#9399b2', + number: '#fab387', + function: '#89b4fa', + type: '#f9e2af', + constant: '#fab387', + property: '#89b4fa', + operator: '#89dceb', + punct: '#9399b2', + tag: '#89b4fa', + attr: '#f9e2af', + }, + }, ] export interface Background { From 21f9479f24e724ff30d39e1edcd4732956a9b6e9 Mon Sep 17 00:00:00 2001 From: Eddie Jaoude Date: Sat, 15 Aug 2026 08:57:40 +0100 Subject: [PATCH 2/2] feat: add Vaporwave theme; fix broken theme e2e test MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Add a wild Vaporwave palette (neon-on-violet) as an 8th theme, making the theme count even. Also fix the theme e2e test, which referenced an undefined `codeBox` helper and asserted DOM CSS colours — the preview is WebGL-only, so theme changes show up as canvas pixels, not DOM colour. Restore the frame-signature diff (expectPreviewChanges) and extend it to cover the newest themes. Co-Authored-By: Claude Opus 4.8 (1M context) --- README.md | 7 ++++--- e2e/styling.spec.ts | 17 +++++++++++------ src/lib/themes.ts | 24 ++++++++++++++++++++++++ 3 files changed, 39 insertions(+), 9 deletions(-) diff --git a/README.md b/README.md index 3762217..2d5baf2 100644 --- a/README.md +++ b/README.md @@ -58,9 +58,10 @@ npm run test:e2e:ui The window auto-scales to fit the canvas. - **Playback bar**: play/pause/restart/loop, scrubbable timeline, duration and speed controls. Space = play/pause, R = restart. -- **Style panel** (right): 7 themes (Dracula, GitHub Dark, Nord, Solarized, Tokyo - Night, Monokai, Catppuccin Mocha), background gradients + custom color, window chrome + title, - line numbers, corner radius, shadow, padding, font family/size. +- **Style panel** (right): 8 themes (Dracula, GitHub Dark, Nord, Solarized, Tokyo + Night, Monokai, Catppuccin Mocha, Vaporwave), background gradients + custom color, + window chrome + title, line numbers, corner radius, shadow, padding, font + family/size. - **Export bar** (top): 16:9 / 1:1 / 9:16 aspect presets, MP4 / GIF / WebM format buttons, and a mocked export modal with phased progress. diff --git a/e2e/styling.spec.ts b/e2e/styling.spec.ts index 792148e..a98d361 100644 --- a/e2e/styling.spec.ts +++ b/e2e/styling.spec.ts @@ -25,12 +25,17 @@ test.describe('Style panel', () => { ) }) - test('changing the theme recolours the rendered code', async ({ page }) => { - await expect(codeBox(page)).toHaveCSS('color', 'rgb(248, 248, 242)') // Dracula fg - await page.getByRole('button', { name: 'GitHub Dark' }).click() - await expect(codeBox(page)).toHaveCSS('color', 'rgb(230, 237, 243)') // GitHub Dark fg - await page.getByRole('button', { name: 'Catppuccin Mocha' }).click() - await expect(codeBox(page)).toHaveCSS('color', 'rgb(205, 214, 244)') // Catppuccin Mocha text + test('changing the theme recolours the rendered preview', async ({ page }) => { + // The preview draws to a WebGL , so a theme swap shows up as pixels, + // not DOM colour — compare frame signatures. Covers the newest theme too. + await pausePreview(page) + await expectPreviewChanges(page, () => + page.getByRole('button', { name: 'GitHub Dark' }).click(), + ) + await expectPreviewChanges(page, () => + page.getByRole('button', { name: 'Catppuccin Mocha' }).click(), + ) + await expectPreviewChanges(page, () => page.getByRole('button', { name: 'Vaporwave' }).click()) }) test('the font family is selectable', async ({ page }) => { diff --git a/src/lib/themes.ts b/src/lib/themes.ts index 73c9278..d25b89a 100644 --- a/src/lib/themes.ts +++ b/src/lib/themes.ts @@ -175,6 +175,30 @@ export const THEMES: CodeTheme[] = [ attr: '#f9e2af', }, }, + { + id: 'vaporwave', + name: 'Vaporwave', + bg: '#2b1055', + fg: '#f4eaff', + chromeBg: 'rgba(255,110,247,0.10)', + lineNumber: '#7b5ea7', + caret: '#36f9f6', + swatch: ['#2b1055', '#ff6ec7', '#36f9f6'], + colors: { + keyword: '#fe4450', + string: '#72f1b8', + comment: '#8b7bab', + number: '#ff8b39', + function: '#36f9f6', + type: '#fede5d', + constant: '#ff8b39', + property: '#ff6ec7', + operator: '#f97e72', + punct: '#c7b3ff', + tag: '#fe4450', + attr: '#fede5d', + }, + }, ] export interface Background {