GitHub color theme (#38 closes #11)

Author: nedtwigg

browser-extension/biome.json

@@ -10,7 +10,7 @@
   },
   "files": {
     "ignoreUnknown": false,
-    "includes": [".*", "src/**", "tests/**", "!src/overtype", "!src/playgrounds"]
+    "includes": [".*", "*.config.ts", "src/**", "tests/**", "!src/overtype"]
   },
   "formatter": {
     "enabled": true,

browser-extension/playwright.config.ts

@@ -2,12 +2,11 @@
 import { defineConfig } from '@playwright/test'
 
 export default defineConfig({
+  reporter: [['html', { open: 'never' }]],
   testDir: 'tests/e2e',
   use: {
     screenshot: 'only-on-failure',
-    video: 'retain-on-failure',
     trace: 'retain-on-failure',
+    video: 'retain-on-failure',
   },
-  reporter: [['html', { open: 'never' }]],
 })
-

browser-extension/src/entrypoints/content.ts

@@ -1,8 +1,7 @@
-import { CONFIG, type ModeType } from '../lib/config'
+import { CONFIG } from '../lib/config'
 import type { CommentEvent, CommentSpot } from '../lib/enhancer'
 import { logger } from '../lib/logger'
 import { EnhancerRegistry, TextareaRegistry } from '../lib/registries'
-import { githubPrNewCommentContentScript } from '../playgrounds/github-playground'
 
 const enhancers = new EnhancerRegistry()
 const enhancedTextareas = new TextareaRegistry()
@@ -24,10 +23,6 @@ enhancedTextareas.setEventHandlers(
 
 export default defineContentScript({
   main() {
-    if ((CONFIG.MODE as ModeType) === 'PLAYGROUNDS_PR') {
-      githubPrNewCommentContentScript()
-      return
-    }
     const textAreasOnPageLoad = document.querySelectorAll<HTMLTextAreaElement>(`textarea`)
     for (const textarea of textAreasOnPageLoad) {
       enhanceMaybe(textarea)

browser-extension/src/lib/enhancers/modifyDOM.ts

@@ -9,5 +9,22 @@ export function modifyDOM(overtypeInput: HTMLTextAreaElement): HTMLElement {
   overtypeInput.placeholder = 'Add your comment here...'
   const overtypeContainer = overtypeWrapper.parentElement!.closest('div')!
   overtypeContainer.classList.add('overtype-container')
+
+  // Watch for class changes and restore if removed
+  const observer = new MutationObserver((mutations) => {
+    mutations.forEach((mutation) => {
+      if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
+        if (!overtypeContainer.classList.contains('overtype-container')) {
+          overtypeContainer.classList.add('overtype-container')
+        }
+      }
+    })
+  })
+
+  observer.observe(overtypeContainer, {
+    attributeFilter: ['class'],
+    attributes: true,
+  })
+
   return overtypeContainer.parentElement!.closest('div')!
 }

browser-extension/src/lib/registries.ts

@@ -1,4 +1,5 @@
 import type { OverTypeInstance } from 'overtype'
+import OverType from 'overtype'
 import type { CommentEnhancer, CommentSpot } from './enhancer'
 import { GitHubIssueAddCommentEnhancer } from './enhancers/github/githubIssueAddComment'
 import { GitHubPRAddCommentEnhancer } from './enhancers/github/githubPRAddComment'
@@ -19,6 +20,27 @@ export class EnhancerRegistry {
     // Register all available handlers
     this.register(new GitHubIssueAddCommentEnhancer())
     this.register(new GitHubPRAddCommentEnhancer())
+    const textColor = 'rgb(31, 35, 40)'
+    const headingColor = 'rgb(174, 52, 151)'
+    OverType.setTheme({
+      colors: {
+        blockquote: 'rgb(89, 99, 110)',
+        code: '#59636e',
+        codeBg: '#f6f8fa',
+        cursor: '#f95738',
+        em: 'rgb(126, 123, 255)',
+        h1: headingColor,
+        h2: headingColor,
+        h3: headingColor,
+        hr: '#5a7a9b',
+        link: 'rgb(9, 105, 218)',
+        selection: 'rgba(244, 211, 94, 0.4)',
+        strong: 'rgb(45, 1, 142)',
+        syntaxMarker: textColor,
+        text: textColor,
+      },
+      name: 'custom-github',
+    })
   }
 
   private register<T extends CommentSpot>(enhancer: CommentEnhancer<T>): void {

browser-extension/src/playgrounds/github-playground.ts

@@ -1,5 +1,12 @@
 import { vi } from 'vitest'
 
+// Mock MutationObserver for tests
+global.MutationObserver = vi.fn().mockImplementation(() => ({
+  disconnect: vi.fn(),
+  observe: vi.fn(),
+  takeRecords: vi.fn(() => []),
+}))
+
 // Mock the OverType editor component
 vi.mock('overtype', () => {
   const mockConstructor = vi.fn().mockImplementation(() => [
@@ -15,6 +22,7 @@ vi.mock('overtype', () => {
     },
   ])
   ;(mockConstructor as any).setCodeHighlighter = vi.fn()
+  ;(mockConstructor as any).setTheme = vi.fn()
   return {
     default: mockConstructor,
   }

browser-extension/tests/har-fixture.ts

@@ -5,7 +5,7 @@ export default defineConfig({
   plugins: [WxtVitest()],
   test: {
     environment: 'node',
-    pool: 'threads',
     globals: true,
+    pool: 'threads',
   },
 })