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

@@ -0,0 +1,40 @@
/**
* @license
* Copyright 2025 Google LLC
* SPDX-License-Identifier: Apache-2.0
*/
import { useState, useCallback } from 'react';
import { themeManager } from '../themes/theme-manager.js';
interface UseThemeCommandReturn {
isThemeDialogOpen: boolean;
openThemeDialog: () => void;
handleThemeSelect: (themeName: string) => void;
}
export const useThemeCommand = (): UseThemeCommandReturn => {
const [isThemeDialogOpen, setIsThemeDialogOpen] = useState(false);
const [, setForceRender] = useState(0);
const openThemeDialog = useCallback(() => {
setIsThemeDialogOpen(true);
}, []);
const handleThemeSelect = useCallback((themeName: string) => {
try {
themeManager.setActiveTheme(themeName);
setForceRender((v) => v + 1); // Trigger potential re-render
} catch (error) {
console.error(`Error setting theme: ${error}`);
} finally {
setIsThemeDialogOpen(false); // Close the dialog
}
}, []);
return {
isThemeDialogOpen,
openThemeDialog,
handleThemeSelect,
};
};