Skip to content

feat: theme switching and configurable editor file suffix #8

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
rwoll wants to merge 4 commits into
base: main
Choose a base branch
from
Open

feat: theme switching and configurable editor file suffix #8

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
ccaae7a
feat: add system theme switching (prefers-color-scheme)
Yoyokrazy Mar 11, 2026
da11b50
feat: follow VS Code IDE theme when autoDetectColorScheme is off
Yoyokrazy Mar 11, 2026
c8696d4
feat: scope custom editor to *.spec.md files
Yoyokrazy Mar 12, 2026
14b1c36
feat: add configurable planReview.fileSuffix setting
Yoyokrazy Mar 12, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 5 additions & 5 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

10 changes: 10 additions & 0 deletions packages/core/src/components/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ import {
questionEls,
answeredCount,
markdownSource,
themeMode,
} from '../state';
import { CSS } from '../styles';
import { MarkdownRenderer } from './MarkdownRenderer';
Expand All @@ -32,6 +33,15 @@ export function App() {
const qEls = questionEls.value;
const answered = answeredCount.value;

// Apply forced theme class on <html> for CSS variable overrides
useEffect(() => {
const root = document.documentElement;
root.classList.remove('theme-light', 'theme-dark');
const mode = themeMode.value;
if (mode === 'light') root.classList.add('theme-light');
else if (mode === 'dark') root.classList.add('theme-dark');
}, [themeMode.value]);

// Scroll-spy + progress bar
useEffect(() => {
let rafId: number | null = null;
Expand Down
11 changes: 7 additions & 4 deletions packages/core/src/highlighter.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import { createHighlighterCore, type HighlighterCore } from 'shiki/core';
import { createJavaScriptRegexEngine } from 'shiki/engine/javascript';
import themeDarker from 'shiki/themes/material-theme-darker.mjs';
import themeLight from 'shiki/themes/github-light.mjs';
import langTypescript from 'shiki/langs/typescript.mjs';
import langPython from 'shiki/langs/python.mjs';
import langJavascript from 'shiki/langs/javascript.mjs';
Expand All @@ -11,11 +12,9 @@ import langCss from 'shiki/langs/css.mjs';

let highlighter: HighlighterCore | null = null;

const THEME = 'material-theme-darker';

export async function initHighlighter(): Promise<void> {
highlighter = await createHighlighterCore({
themes: [themeDarker],
themes: [themeDarker, themeLight],
langs: [langTypescript, langPython, langJavascript, langJson, langBash, langHtml, langCss],
engine: createJavaScriptRegexEngine(),
});
Expand All @@ -31,6 +30,10 @@ export function highlightCode(code: string, lang: string): string | null {

return highlighter.codeToHtml(code, {
lang: effectiveLang,
theme: THEME,
themes: {
dark: 'material-theme-darker',
light: 'github-light',
},
defaultColor: false,
});
}
22 changes: 20 additions & 2 deletions packages/core/src/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,13 +13,16 @@ import {
fileName,
markdownSource,
resetState,
themeMode,
} from './state.js';
import { App } from './components/App.js';

export type { Element, BaseElement, CodeElement, QuestionElement } from './types.js';
export type { ThemeMode } from './state.js';
export { extractElements } from './extract-elements.js';
export { highlightCode } from './highlighter.js';
export { resetState } from './state.js';
export { CSS_VARS } from './styles.js';

export interface PlanReviewOptions {
container: HTMLElement;
Expand All @@ -29,14 +32,29 @@ export interface PlanReviewOptions {
postUrl?: string;
onFeedback?: (feedback: unknown) => void;
showUpload?: boolean;
/** 'system' = follow OS prefers-color-scheme; 'light'/'dark' = forced */
themeMode?: 'system' | 'light' | 'dark';
}

/** Resolve effective light/dark given themeMode */
function isLightTheme(mode: 'system' | 'light' | 'dark'): boolean {
if (mode === 'light') return true;
if (mode === 'dark') return false;
return typeof window !== 'undefined'
&& window.matchMedia('(prefers-color-scheme: light)').matches;
}

export const PlanReview = {
async init(options: PlanReviewOptions): Promise<void> {
resetState();
await initHighlighter();
// Initialize bundled mermaid
mermaid.initialize({ startOnLoad: false, theme: 'dark' });

const mode = options.themeMode ?? 'system';
themeMode.value = mode;

// Initialize bundled mermaid with resolved theme
mermaid.initialize({ startOnLoad: false, theme: isLightTheme(mode) ? 'default' : 'dark' });

const tree = unified().use(remarkParse).use(remarkGfm).parse(options.markdown);
elements.value = extractElements(tree);
markdownSource.value = options.markdown;
Expand Down
5 changes: 5 additions & 0 deletions packages/core/src/state.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,10 @@ export const questionAnswers = signal<Record<string, QuestionAnswer>>({});
export const dismissed = signal<Record<string, boolean>>({});
export const editing = signal<Record<string, boolean>>({});

// Theme
export type ThemeMode = 'system' | 'light' | 'dark';
export const themeMode = signal<ThemeMode>('system');

// Config
export const feedbackMode = signal<'download' | 'post' | 'vscode'>('download');
export const postUrl = signal<string>('');
Expand Down Expand Up @@ -100,4 +104,5 @@ export function resetState() {
panelOpen.value = false;
outlineOpen.value = false;
fileName.value = 'PLAN.md';
themeMode.value = 'system';
}
Loading
Loading