From 4c2a5045a0d209cfda5723a4dc84fe59670b558e Mon Sep 17 00:00:00 2001 From: Taylor Mullen Date: Tue, 22 Apr 2025 18:57:47 -0700 Subject: 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 --- packages/cli/src/ui/themes/atom-one-dark.ts | 122 ++++++++++++++++++++++++++++ 1 file changed, 122 insertions(+) create mode 100644 packages/cli/src/ui/themes/atom-one-dark.ts (limited to 'packages/cli/src/ui/themes/atom-one-dark.ts') diff --git a/packages/cli/src/ui/themes/atom-one-dark.ts b/packages/cli/src/ui/themes/atom-one-dark.ts new file mode 100644 index 00000000..316b9048 --- /dev/null +++ b/packages/cli/src/ui/themes/atom-one-dark.ts @@ -0,0 +1,122 @@ +/** + * @license + * Copyright 2025 Google LLC + * SPDX-License-Identifier: Apache-2.0 + */ + +import { Theme } from './theme.js'; + +export const AtomOneDark: Theme = new Theme('Atom One Dark', { + hljs: { + display: 'block', + overflowX: 'auto', + padding: '0.5em', + color: '#abb2bf', + background: '#282c34', + }, + 'hljs-comment': { + color: '#5c6370', + fontStyle: 'italic', + }, + 'hljs-quote': { + color: '#5c6370', + fontStyle: 'italic', + }, + 'hljs-doctag': { + color: '#c678dd', + }, + 'hljs-keyword': { + color: '#c678dd', + }, + 'hljs-formula': { + color: '#c678dd', + }, + 'hljs-section': { + color: '#e06c75', + }, + 'hljs-name': { + color: '#e06c75', + }, + 'hljs-selector-tag': { + color: '#e06c75', + }, + 'hljs-deletion': { + color: '#e06c75', + }, + 'hljs-subst': { + color: '#e06c75', + }, + 'hljs-literal': { + color: '#56b6c2', + }, + 'hljs-string': { + color: '#98c379', + }, + 'hljs-regexp': { + color: '#98c379', + }, + 'hljs-addition': { + color: '#98c379', + }, + 'hljs-attribute': { + color: '#98c379', + }, + 'hljs-meta-string': { + color: '#98c379', + }, + 'hljs-built_in': { + color: '#e6c07b', + }, + 'hljs-class .hljs-title': { + color: '#e6c07b', + }, + 'hljs-attr': { + color: '#d19a66', + }, + 'hljs-variable': { + color: '#d19a66', + }, + 'hljs-template-variable': { + color: '#d19a66', + }, + 'hljs-type': { + color: '#d19a66', + }, + 'hljs-selector-class': { + color: '#d19a66', + }, + 'hljs-selector-attr': { + color: '#d19a66', + }, + 'hljs-selector-pseudo': { + color: '#d19a66', + }, + 'hljs-number': { + color: '#d19a66', + }, + 'hljs-symbol': { + color: '#61aeee', + }, + 'hljs-bullet': { + color: '#61aeee', + }, + 'hljs-link': { + color: '#61aeee', + textDecoration: 'underline', + }, + 'hljs-meta': { + color: '#61aeee', + }, + 'hljs-selector-id': { + color: '#61aeee', + }, + 'hljs-title': { + color: '#61aeee', + }, + 'hljs-emphasis': { + fontStyle: 'italic', + }, + 'hljs-strong': { + fontWeight: 'bold', + }, +}); -- cgit v1.2.3