MediaMetz/gemini-cli
1
0
Fork 0
mirror of https://github.com/google-gemini/gemini-cli.git synced 2026-03-10 14:10:37 -07:00
Code Issues Packages Projects Releases Wiki Activity

feat(themes): add built-in holiday theme 🎁 (#14301)

Browse Source 
Co-authored-by: jacob314 <jacob314@gmail.com>
This commit is contained in:
Jack Wotherspoon
2025-12-01 14:09:55 -05:00
committed by GitHub
parent 62f890b5aa
commit bde8b78a88
5 changed files with 244 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

61
packages/cli/src/ui/components/ThemeDialog.test.tsx
View File

@@ -4,13 +4,11 @@
* SPDX-License-Identifier: Apache-2.0
*/
import { render } from '../../test-utils/render.js';
import { renderWithProviders } from '../../test-utils/render.js';
import { waitFor } from '../../test-utils/async.js';
import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
import { ThemeDialog } from './ThemeDialog.js';
import { LoadedSettings } from '../../config/settings.js';
import { KeypressProvider } from '../contexts/KeypressContext.js';
import { SettingsContext } from '../contexts/SettingsContext.js';
import { DEFAULT_THEME, themeManager } from '../themes/theme-manager.js';
import { act } from 'react';
@@ -76,12 +74,9 @@ describe('ThemeDialog Snapshots', () => {
it('should render correctly in theme selection mode', () => {
const settings = createMockSettings();
const { lastFrame } = render(
<SettingsContext.Provider value={settings}>
<KeypressProvider>
<ThemeDialog {...baseProps} settings={settings} />
</KeypressProvider>
</SettingsContext.Provider>,
const { lastFrame } = renderWithProviders(
<ThemeDialog {...baseProps} settings={settings} />,
{ settings },
);
expect(lastFrame()).toMatchSnapshot();
@@ -89,12 +84,9 @@ describe('ThemeDialog Snapshots', () => {
it('should render correctly in scope selector mode', async () => {
const settings = createMockSettings();
const { lastFrame, stdin } = render(
<SettingsContext.Provider value={settings}>
<KeypressProvider>
<ThemeDialog {...baseProps} settings={settings} />
</KeypressProvider>
</SettingsContext.Provider>,
const { lastFrame, stdin } = renderWithProviders(
<ThemeDialog {...baseProps} settings={settings} />,
{ settings },
);
// Press Tab to switch to scope selector mode
@@ -111,16 +103,13 @@ describe('ThemeDialog Snapshots', () => {
it('should call onCancel when ESC is pressed', async () => {
const mockOnCancel = vi.fn();
const settings = createMockSettings();
const { stdin } = render(
<SettingsContext.Provider value={settings}>
<KeypressProvider>
<ThemeDialog
{...baseProps}
onCancel={mockOnCancel}
settings={settings}
/>
</KeypressProvider>
</SettingsContext.Provider>,
const { stdin } = renderWithProviders(
<ThemeDialog
{...baseProps}
onCancel={mockOnCancel}
settings={settings}
/>,
{ settings },
);
act(() => {
@@ -131,4 +120,26 @@ describe('ThemeDialog Snapshots', () => {
expect(mockOnCancel).toHaveBeenCalled();
});
});
it('should call refreshStatic when a theme is selected', async () => {
const mockRefreshStatic = vi.fn();
const settings = createMockSettings();
const { stdin } = renderWithProviders(
<ThemeDialog {...baseProps} settings={settings} />,
{
settings,
uiActions: { refreshStatic: mockRefreshStatic },
},
);
// Press Enter to select the theme
act(() => {
stdin.write('\r');
});
await waitFor(() => {
expect(mockRefreshStatic).toHaveBeenCalled();
expect(baseProps.onSelect).toHaveBeenCalled();
});
});
});

8
packages/cli/src/ui/components/ThemeDialog.tsx
View File

@@ -21,6 +21,7 @@ import { getScopeMessageForSetting } from '../../utils/dialogScopeUtils.js';
import { useKeypress } from '../hooks/useKeypress.js';
import { useAlternateBuffer } from '../hooks/useAlternateBuffer.js';
import { ScopeSelector } from './shared/ScopeSelector.js';
import { useUIActions } from '../contexts/UIActionsContext.js';
interface ThemeDialogProps {
/** Callback function when a theme is selected */
@@ -46,6 +47,7 @@ export function ThemeDialog({
terminalWidth,
}: ThemeDialogProps): React.JSX.Element {
const isAlternateBuffer = useAlternateBuffer();
const { refreshStatic } = useUIActions();
const [selectedScope, setSelectedScope] = useState<LoadableSettingScope>(
SettingScope.User,
);
@@ -93,8 +95,9 @@ export function ThemeDialog({
const handleThemeSelect = useCallback(
(themeName: string) => {
onSelect(themeName, selectedScope);
refreshStatic();
},
[onSelect, selectedScope],
[onSelect, selectedScope, refreshStatic],
);
const handleThemeHighlight = (themeName: string) => {
@@ -109,8 +112,9 @@ export function ThemeDialog({
const handleScopeSelect = useCallback(
(scope: LoadableSettingScope) => {
onSelect(highlightedThemeName, scope);
refreshStatic();
},
[onSelect, highlightedThemeName],
[onSelect, highlightedThemeName, refreshStatic],
);
const [mode, setMode] = useState<'theme' | 'scope'>('theme');

62
packages/cli/src/ui/components/__snapshots__/ThemeDialog.test.tsx.snap
View File

@@ -1,38 +1,38 @@
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
exports[`ThemeDialog Snapshots > should render correctly in scope selector mode 1`] = `
"╭──────────────────────────────────────────────────────────────────────────────────────────────────╮
│ │
│ > Apply To │
│ ● 1. User Settings │
│ 2. Workspace Settings │
│ 3. System Settings │
│ │
│ (Use Enter to apply scope, Tab to select theme, Esc to close) │
│ │
╰──────────────────────────────────────────────────────────────────────────────────────────────────╯"
"╭──────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╮
│ │
│ > Apply To │
│ ● 1. User Settings │
│ 2. Workspace Settings │
│ 3. System Settings │
│ │
│ (Use Enter to apply scope, Tab to select theme, Esc to close) │
│ │
╰──────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╯"
`;
exports[`ThemeDialog Snapshots > should render correctly in theme selection mode 1`] = `
"╭──────────────────────────────────────────────────────────────────────────────────────────────────╮
│ │
│ > Select Theme Preview │
│ ▲ ┌─────────────────────────────────────────────────┐ │
│ 1. ANSI Dark │ │ │
│ 2. Atom One Dark │ 1 # function │ │
│ 3. Ayu Dark │ 2 def fibonacci(n): │ │
│ ● 4. Default Dark │ 3 a, b = 0, 1 │ │
│ 5. Dracula Dark │ 4 for _ in range(n): │ │
│ 6. GitHub Dark │ 5 a, b = b, a + b │ │
│ 7. Shades Of Purple Dark │ 6 return a │ │
│ 8. ANSI Light Light │ │ │
│ 9. Ayu Light Light │ 1 - print("Hello, " + name) │ │
│ 10. Default Light Light │ 1 + print(f"Hello, {name}!") │ │
│ 11. GitHub Light Light │ │ │
│ 12. Google Code Light └─────────────────────────────────────────────────┘ │
│ ▼ │
│ │
│ (Use Enter to select, Tab to configure scope, Esc to close) │
│ │
╰──────────────────────────────────────────────────────────────────────────────────────────────────╯"
"╭──────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╮
│ │
│ > Select Theme Preview │
│ ▲ ┌────────────────────────────────────────────────────────────┐ │
│ 1. ANSI Dark │ │ │
│ 2. Atom One Dark │ 1 # function │ │
│ 3. Ayu Dark │ 2 def fibonacci(n): │ │
│ ● 4. Default Dark │ 3 a, b = 0, 1 │ │
│ 5. Dracula Dark │ 4 for _ in range(n): │ │
│ 6. GitHub Dark │ 5 a, b = b, a + b │ │
│ 7. Holiday Dark │ 6 return a │ │
│ 8. Shades Of Purple Dark │ │ │
│ 9. ANSI Light Light │ 1 - print("Hello, " + name) │ │
│ 10. Ayu Light Light │ 1 + print(f"Hello, {name}!") │ │
│ 11. Default Light Light │ │ │
│ 12. GitHub Light Light └────────────────────────────────────────────────────────────┘ │
│ ▼ │
│ │
│ (Use Enter to select, Tab to configure scope, Esc to close) │
│ │
╰──────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╯"
`;

169
packages/cli/src/ui/themes/holiday.ts Normal file
View File

@@ -0,0 +1,169 @@
/**
* @license
* Copyright 2025 Google LLC
* SPDX-License-Identifier: Apache-2.0
*/
import { type ColorsTheme, Theme } from './theme.js';
import { interpolateColor } from './color-utils.js';
const holidayColors: ColorsTheme = {
type: 'dark',
Background: '#00210e',
Foreground: '#F0F8FF',
LightBlue: '#B0E0E6',
AccentBlue: '#3CB371',
AccentPurple: '#FF9999',
AccentCyan: '#33F9FF',
AccentGreen: '#3CB371',
AccentYellow: '#FFEE8C',
AccentRed: '#FF6347',
DiffAdded: '#2E8B57',
DiffRemoved: '#CD5C5C',
Comment: '#8FBC8F',
Gray: '#D7F5D3',
DarkGray: interpolateColor('#D7F5D3', '#151B18', 0.5),
GradientColors: ['#FF0000', '#FFFFFF', '#008000'],
};
export const Holiday: Theme = new Theme(
'Holiday',
'dark',
{
hljs: {
display: 'block',
overflowX: 'auto',
padding: '0.5em',
background: holidayColors.Background,
color: holidayColors.Foreground,
},
'hljs-keyword': {
color: holidayColors.AccentBlue,
},
'hljs-literal': {
color: holidayColors.AccentBlue,
},
'hljs-symbol': {
color: holidayColors.AccentBlue,
},
'hljs-name': {
color: holidayColors.AccentBlue,
},
'hljs-link': {
color: holidayColors.AccentBlue,
textDecoration: 'underline',
},
'hljs-built_in': {
color: holidayColors.AccentCyan,
},
'hljs-type': {
color: holidayColors.AccentCyan,
},
'hljs-number': {
color: holidayColors.AccentGreen,
},
'hljs-class': {
color: holidayColors.AccentGreen,
},
'hljs-string': {
color: holidayColors.AccentYellow,
},
'hljs-meta-string': {
color: holidayColors.AccentYellow,
},
'hljs-regexp': {
color: holidayColors.AccentRed,
},
'hljs-template-tag': {
color: holidayColors.AccentRed,
},
'hljs-subst': {
color: holidayColors.Foreground,
},
'hljs-function': {
color: holidayColors.Foreground,
},
'hljs-title': {
color: holidayColors.Foreground,
},
'hljs-params': {
color: holidayColors.Foreground,
},
'hljs-formula': {
color: holidayColors.Foreground,
},
'hljs-comment': {
color: holidayColors.Comment,
fontStyle: 'italic',
},
'hljs-quote': {
color: holidayColors.Comment,
fontStyle: 'italic',
},
'hljs-doctag': {
color: holidayColors.Comment,
},
'hljs-meta': {
color: holidayColors.Gray,
},
'hljs-meta-keyword': {
color: holidayColors.Gray,
},
'hljs-tag': {
color: holidayColors.Gray,
},
'hljs-variable': {
color: holidayColors.AccentPurple,
},
'hljs-template-variable': {
color: holidayColors.AccentPurple,
},
'hljs-attr': {
color: holidayColors.LightBlue,
},
'hljs-attribute': {
color: holidayColors.LightBlue,
},
'hljs-builtin-name': {
color: holidayColors.LightBlue,
},
'hljs-section': {
color: holidayColors.AccentYellow,
},
'hljs-emphasis': {
fontStyle: 'italic',
},
'hljs-strong': {
fontWeight: 'bold',
},
'hljs-bullet': {
color: holidayColors.AccentYellow,
},
'hljs-selector-tag': {
color: holidayColors.AccentYellow,
},
'hljs-selector-id': {
color: holidayColors.AccentYellow,
},
'hljs-selector-class': {
color: holidayColors.AccentYellow,
},
'hljs-selector-attr': {
color: holidayColors.AccentYellow,
},
'hljs-selector-pseudo': {
color: holidayColors.AccentYellow,
},
'hljs-addition': {
backgroundColor: holidayColors.DiffAdded,
display: 'inline-block',
width: '100%',
},
'hljs-deletion': {
backgroundColor: holidayColors.DiffRemoved,
display: 'inline-block',
width: '100%',
},
},
holidayColors,
);

2
packages/cli/src/ui/themes/theme-manager.ts
View File

@@ -11,6 +11,7 @@ import { Dracula } from './dracula.js';
import { GitHubDark } from './github-dark.js';
import { GitHubLight } from './github-light.js';
import { GoogleCode } from './googlecode.js';
import { Holiday } from './holiday.js';
import { DefaultLight } from './default-light.js';
import { DefaultDark } from './default.js';
import { ShadesOfPurple } from './shades-of-purple.js';
@@ -51,6 +52,7 @@ class ThemeManager {
GitHubDark,
GitHubLight,
GoogleCode,
Holiday,
ShadesOfPurple,
XCode,
ANSI,