Idris git catpuccin mocha

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): 6 themes (Dracula, GitHub Dark, Nord, Solarized, Tokyo
-  Night, Monokai), 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.
 

e2e/styling.spec.ts

@@ -26,10 +26,16 @@ test.describe('Style panel', () => {
   })
 
   test('changing the theme recolours the rendered preview', async ({ page }) => {
+    // The preview draws to a WebGL <canvas>, 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 }) => {

src/lib/themes.ts

@@ -151,6 +151,54 @@ 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',
+    },
+  },
+  {
+    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 {