Add theming support.

- Added a number of common themes to our support matrix:
 - AtomOneDark
 - Dracula
 - VS
 - GitHub
 - GoogleCode
 - XCode
 - ... Admittedly these all were randomly picked, we could probably curate these better...
- Added a new `ThemeDialog` UI that can be accessed via `/theme`. It shows your currentlyt available themes and allows you to change them freely. It does **not**:
 - Save the theme between sessions
 - Allow you to hit escape
 - Show a preview prior to selection.
- These themes are from reacts highlight js library.

Fixes https://b.corp.google.com/issues/412797985
This commit is contained in:
Taylor Mullen
2025-04-22 18:57:47 -07:00
committed by N. Taylor Mullen
parent e163e02499
commit 4c2a5045a0
11 changed files with 876 additions and 22 deletions

View File

@@ -4,19 +4,64 @@
* SPDX-License-Identifier: Apache-2.0
*/
import { AtomOneDark } from './atom-one-dark.js';
import { Dracula } from './dracula.js';
import { GitHub } from './github.js';
import { GoogleCode } from './googlecode.js';
import { VS } from './vs.js';
import { VS2015 } from './vs2015.js';
import { XCode } from './xcode.js';
import { Theme } from './theme.js';
export interface ThemeDisplay {
name: string;
active: boolean;
}
class ThemeManager {
private static readonly DEFAULT_THEME: Theme = VS2015;
private readonly availableThemes: Theme[];
private activeTheme: Theme;
constructor() {
this.availableThemes = [VS2015];
this.availableThemes = [
AtomOneDark,
Dracula,
VS,
VS2015,
GitHub,
GoogleCode,
XCode,
];
this.activeTheme = ThemeManager.DEFAULT_THEME;
}
/**
* Returns a list of available theme names.
*/
getAvailableThemes(): ThemeDisplay[] {
return this.availableThemes.map((theme) => ({
name: theme.name,
active: theme === this.activeTheme,
}));
}
/**
* Sets the active theme.
* @param themeName The name of the theme to activate.
*/
setActiveTheme(themeName: string): void {
const foundTheme = this.availableThemes.find(
(theme) => theme.name === themeName,
);
if (foundTheme) {
this.activeTheme = foundTheme;
} else {
throw new Error(`Theme "${themeName}" not found.`);
}
}
/**
* Returns the currently active theme object.
*/