Skip to content

refactor: extract score-dark Monaco theme to scoreEditorTheme.ts #133

Description

@bwyard

Summary

CodeEditorPanel.tsx (~444 lines) contains the full score-dark Monaco theme definition inline — a large pure-data blob (~100 lines of color token rules) mixed into the component file.

Task

Extract the theme config to a standalone file:

packages/gui/src/renderer/lib/scoreEditorTheme.ts

Export a typed const:

import type * as MonacoNS from 'monaco-editor'

export const SCORE_DARK_THEME: MonacoNS.editor.IStandaloneThemeData = {
  base: 'vs-dark',
  inherit: true,
  rules: [ ... ],
  colors: { ... },
}

Then import it in CodeEditorPanel.tsx:

import { SCORE_DARK_THEME } from '../../lib/scoreEditorTheme.js'
// ...
monaco.editor.defineTheme('score-dark', SCORE_DARK_THEME)

Acceptance

  • No visual change to the editor theme
  • CodeEditorPanel.tsx shrinks by ~100 lines
  • scoreEditorTheme.ts has a TSDoc block and is the single source of truth for the theme
  • Types pass (pnpm typecheck)

Metadata

Metadata

Assignees

No one assigned

    Labels

    good first issueGood for newcomersrefactorCode refactoring — no behaviour change

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions