theme

Author: alexanderkirtzel

apps/explorer/src/components/atoms/code-static.tsx

@@ -4,6 +4,10 @@ import {
   type Highlighter,
   type BundledLanguage,
 } from 'shiki';
+import { palenightTheme } from '../../themes/palenight';
+import { lighthouseTheme } from '../../themes/lighthouse';
+import { monacoThemeToShiki } from '../../themes/shiki-adapter';
+import { ELB_THEME_DARK, ELB_THEME_LIGHT } from '../../themes/names';
 
 export interface CodeStaticProps {
   code: string;
@@ -26,12 +30,29 @@ const LANGS: readonly BundledLanguage[] = [
   'markdown',
 ];
 
+// Derive Shiki themes from the same Monaco theme objects CodeBox uses,
+// so CodeView (Shiki) and CodeBox (Monaco) render identical colors.
+// Names match Monaco's `monaco.editor.setTheme(...)` keys.
+const ELB_SHIKI_LIGHT = monacoThemeToShiki(lighthouseTheme, {
+  name: ELB_THEME_LIGHT,
+  type: 'light',
+  defaultBackground: '#ffffff',
+  defaultForeground: '#24292E',
+});
+
+const ELB_SHIKI_DARK = monacoThemeToShiki(palenightTheme, {
+  name: ELB_THEME_DARK,
+  type: 'dark',
+  defaultBackground: '#292d3e',
+  defaultForeground: '#bfc7d5',
+});
+
 let highlighterPromise: Promise<Highlighter> | null = null;
 
 function getHighlighter(): Promise<Highlighter> {
   if (!highlighterPromise) {
     highlighterPromise = createHighlighter({
-      themes: ['dark-plus', 'light-plus'],
+      themes: [ELB_SHIKI_LIGHT, ELB_SHIKI_DARK],
       langs: [...LANGS],
     });
   }
@@ -85,7 +106,7 @@ export function CodeStatic({
       if (cancelled) return;
       const rendered = highlighter.codeToHtml(code, {
         lang: resolveLang(language),
-        theme: activeTheme === 'dark' ? 'dark-plus' : 'light-plus',
+        theme: activeTheme === 'dark' ? ELB_THEME_DARK : ELB_THEME_LIGHT,
       });
       setHtml(rendered);
     });
@@ -94,7 +115,9 @@ export function CodeStatic({
     };
   }, [code, language, activeTheme]);
 
+  const wrapperClass = `elb-code-static${className ? ` ${className}` : ''}`;
+
   return (
-    <div className={className} dangerouslySetInnerHTML={{ __html: html }} />
+    <div className={wrapperClass} dangerouslySetInnerHTML={{ __html: html }} />
   );
 }

apps/explorer/src/components/atoms/code.tsx

@@ -7,7 +7,11 @@ import React, {
 } from 'react';
 import { Editor, loader } from '@monaco-editor/react';
 import type { editor } from 'monaco-editor';
-import { registerAllThemes } from '../../themes';
+import {
+  registerAllThemes,
+  ELB_THEME_DARK,
+  ELB_THEME_LIGHT,
+} from '../../themes';
 import {
   configureMonacoTypeScript,
   registerWalkerOSAmbients,
@@ -261,7 +265,7 @@ export function Code({
         dataTheme === 'dark' ||
         (dataTheme === null &&
           window.matchMedia('(prefers-color-scheme: dark)').matches);
-      const newTheme = isDark ? 'elbTheme-dark' : 'elbTheme-light';
+      const newTheme = isDark ? ELB_THEME_DARK : ELB_THEME_LIGHT;
 
       setMonacoTheme(newTheme);
     };
@@ -389,7 +393,7 @@ export function Code({
       dataTheme === 'dark' ||
       (dataTheme === null &&
         window.matchMedia('(prefers-color-scheme: dark)').matches);
-    const themeName = isDark ? 'elbTheme-dark' : 'elbTheme-light';
+    const themeName = isDark ? ELB_THEME_DARK : ELB_THEME_LIGHT;
     monaco.editor.setTheme(themeName);
 
     // Register walkerOS IntelliSense providers for JSON

apps/explorer/src/styles/index.scss

@@ -22,6 +22,7 @@
 @use './components/atoms/button';
 @use './components/atoms/button-link';
 @use './components/atoms/code';
+@use './components/atoms/code-static';
 @use './components/atoms/mdx-code';
 @use './components/atoms/toggle';
 @use './components/atoms/spinner';

apps/explorer/src/themes/index.ts

@@ -13,6 +13,13 @@ import { registerLighthouseTheme } from './lighthouse';
 export { palenightTheme, registerPalenightTheme } from './palenight';
 export { lighthouseTheme, registerLighthouseTheme } from './lighthouse';
 
+// Theme name constants — use these instead of hard-coded string literals
+export { ELB_THEME_DARK, ELB_THEME_LIGHT } from './names';
+export type { ElbThemeName } from './names';
+
+// Unified scope → color grouping (drives Monaco + Shiki from one source)
+export type { TokenGroup } from './token-groups';
+
 // Theme types (for documentation and TypeScript support)
 export type { ExplorerTheme } from './types';