Update light themes (#726)

This commit is contained in:
Miguel Solorio 2025-06-04 10:41:03 -07:00 committed by GitHub
parent a14aada945
commit a2f03636a5
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
8 changed files with 369 additions and 20 deletions

View File

@ -103,7 +103,7 @@ export function ThemeDialog({
width="100%"
>
{/* Left Column: Selection */}
<Box flexDirection="column" width="50%" paddingRight={2}>
<Box flexDirection="column" width="45%" paddingRight={2}>
<Text bold={focusedSection === 'theme'}>
{focusedSection === 'theme' ? '> ' : ' '}Select Theme{' '}
<Text color={Colors.SubtleComment}>{otherScopeModifiedMessage}</Text>
@ -133,13 +133,13 @@ export function ThemeDialog({
<Box marginTop={1}>
<Text color={Colors.SubtleComment}>
(Use / arrows and Enter to select, Tab to change focus)
(Use Enter to select, Tab to change focus)
</Text>
</Box>
</Box>
{/* Right Column: Preview */}
<Box flexDirection="column" width="50%" paddingLeft={3}>
<Box flexDirection="column" width="55%" paddingLeft={2}>
<Text bold>Preview</Text>
<Box
borderStyle="single"
@ -148,9 +148,11 @@ export function ThemeDialog({
flexDirection="column"
>
{colorizeCode(
`# Source code
print("Hello, World!")
`,
`def fibonacci(n):
a, b = 0, 1
for _ in range(n):
a, b = b, a + b
return a`,
'python',
)}
<Box marginTop={1} />

View File

@ -0,0 +1,119 @@
/**
* @license
* Copyright 2025 Google LLC
* SPDX-License-Identifier: Apache-2.0
*/
import { lightTheme, Theme } from './theme.js';
export const AyuLight: Theme = new Theme(
'Ayu Light',
'light',
{
hljs: {
display: 'block',
overflowX: 'auto',
padding: '0.5em',
background: '#f8f9fa',
color: '#5c6166',
},
'hljs-comment': {
color: '#787b80',
fontStyle: 'italic',
},
'hljs-quote': {
color: '#4cbf99',
fontStyle: 'italic',
},
'hljs-string': {
color: '#86b300',
},
'hljs-constant': {
color: '#4cbf99',
},
'hljs-number': {
color: '#a37acc',
},
'hljs-keyword': {
color: '#fa8d3e',
},
'hljs-selector-tag': {
color: '#fa8d3e',
},
'hljs-attribute': {
color: '#f2ae49',
},
'hljs-variable': {
color: '#5c6166',
},
'hljs-variable.language': {
color: '#55b4d4',
fontStyle: 'italic',
},
'hljs-title': {
color: '#399ee6',
},
'hljs-section': {
color: '#86b300',
fontWeight: 'bold',
},
'hljs-type': {
color: '#55b4d4',
},
'hljs-class .hljs-title': {
color: '#399ee6',
},
'hljs-tag': {
color: '#55b4d4',
},
'hljs-name': {
color: '#399ee6',
},
'hljs-builtin-name': {
color: '#f2ae49',
},
'hljs-meta': {
color: '#e6ba7e',
},
'hljs-symbol': {
color: '#f07171',
},
'hljs-bullet': {
color: '#f2ae49',
},
'hljs-regexp': {
color: '#4cbf99',
},
'hljs-link': {
color: '#55b4d4',
},
'hljs-deletion': {
color: '#ff7383',
},
'hljs-addition': {
color: '#6cbf43',
},
'hljs-emphasis': {
fontStyle: 'italic',
},
'hljs-strong': {
fontWeight: 'bold',
},
'hljs-literal': {
color: '#4cbf99',
},
'hljs-built_in': {
color: '#f07171',
},
'hljs-doctag': {
color: '#d14',
},
'hljs-template-variable': {
color: '#008080',
},
'hljs-selector-id': {
color: '#900',
},
},
lightTheme,
);

View File

@ -0,0 +1,93 @@
/**
* @license
* Copyright 2025 Google LLC
* SPDX-License-Identifier: Apache-2.0
*/
import { darkTheme, Theme } from './theme.js';
export const AyuDark: Theme = new Theme(
'Ayu',
'dark',
{
hljs: {
display: 'block',
overflowX: 'auto',
padding: '0.5em',
background: '#0b0e14',
color: '#bfbdb6',
},
'hljs-keyword': {
color: '#FF8F40',
},
'hljs-literal': {
color: '#D2A6FF',
},
'hljs-symbol': {
color: '#95E6CB',
},
'hljs-name': {
color: '#59C2FF',
},
'hljs-link': {
color: '#39BAE6',
},
'hljs-function .hljs-keyword': {
color: '#FFB454',
},
'hljs-subst': {
color: '#BFBDB6',
},
'hljs-string': {
color: '#AAD94C',
},
'hljs-title': {
color: '#FFB454',
},
'hljs-type': {
color: '#39BAE6',
},
'hljs-attribute': {
color: '#FFB454',
},
'hljs-bullet': {
color: '#FFB454',
},
'hljs-addition': {
color: '#7FD962',
},
'hljs-variable': {
color: '#BFBDB6',
},
'hljs-template-tag': {
color: '#FF8F40',
},
'hljs-template-variable': {
color: '#FF8F40',
},
'hljs-comment': {
color: '#ACB6BF8C',
fontStyle: 'italic',
},
'hljs-quote': {
color: '#95E6CB',
fontStyle: 'italic',
},
'hljs-deletion': {
color: '#F26D78',
},
'hljs-meta': {
color: '#E6B673',
},
'hljs-doctag': {
fontWeight: 'bold',
},
'hljs-strong': {
fontWeight: 'bold',
},
'hljs-emphasis': {
fontStyle: 'italic',
},
},
darkTheme,
);

View File

@ -0,0 +1,127 @@
/**
* @license
* Copyright 2025 Google LLC
* SPDX-License-Identifier: Apache-2.0
*/
import { darkTheme, Theme } from './theme.js';
export const GitHubDark: Theme = new Theme(
'GitHub',
'dark',
{
hljs: {
display: 'block',
overflowX: 'auto',
padding: '0.5em',
color: '#d1d5da',
background: '#24292e',
},
'hljs-comment': {
color: '#6A737D',
fontStyle: 'italic',
},
'hljs-quote': {
color: '#6A737D',
fontStyle: 'italic',
},
'hljs-keyword': {
color: '#F97583',
fontWeight: 'bold',
},
'hljs-selector-tag': {
color: '#F97583',
fontWeight: 'bold',
},
'hljs-subst': {
color: '#e1e4e8',
},
'hljs-number': {
color: '#79B8FF',
},
'hljs-literal': {
color: '#79B8FF',
},
'hljs-variable': {
color: '#FFAB70',
},
'hljs-template-variable': {
color: '#FFAB70',
},
'hljs-tag .hljs-attr': {
color: '#FFAB70',
},
'hljs-string': {
color: '#9ECBFF',
},
'hljs-doctag': {
color: '#9ECBFF',
},
'hljs-title': {
color: '#B392F0',
fontWeight: 'bold',
},
'hljs-section': {
color: '#B392F0',
fontWeight: 'bold',
},
'hljs-selector-id': {
color: '#B392F0',
fontWeight: 'bold',
},
'hljs-type': {
color: '#85E89D',
fontWeight: 'bold',
},
'hljs-class .hljs-title': {
color: '#85E89D',
fontWeight: 'bold',
},
'hljs-tag': {
color: '#85E89D',
},
'hljs-name': {
color: '#85E89D',
},
'hljs-attribute': {
color: '#79B8FF',
},
'hljs-regexp': {
color: '#DBEDFF',
},
'hljs-link': {
color: '#DBEDFF',
},
'hljs-symbol': {
color: '#990073',
},
'hljs-bullet': {
color: '#990073',
},
'hljs-built_in': {
color: '#79B8FF',
},
'hljs-builtin-name': {
color: '#79B8FF',
},
'hljs-meta': {
color: '#79B8FF',
fontWeight: 'bold',
},
'hljs-deletion': {
background: '#86181D',
color: '#FDAEB7',
},
'hljs-addition': {
background: '#144620',
color: '#85E89D',
},
'hljs-emphasis': {
fontStyle: 'italic',
},
'hljs-strong': {
fontWeight: 'bold',
},
},
darkTheme,
);

View File

@ -6,15 +6,15 @@
import { lightTheme, Theme } from './theme.js';
export const GitHub: Theme = new Theme(
'GitHub',
export const GitHubLight: Theme = new Theme(
'GitHub Light',
'light',
{
hljs: {
display: 'block',
overflowX: 'auto',
padding: '0.5em',
color: '#333',
color: '#24292E',
background: '#f8f8f8',
},
'hljs-comment': {

View File

@ -4,9 +4,12 @@
* SPDX-License-Identifier: Apache-2.0
*/
import { AyuDark } from './ayu.js';
import { AyuLight } from './ayu-light.js';
import { AtomOneDark } from './atom-one-dark.js';
import { Dracula } from './dracula.js';
import { GitHub } from './github.js';
import { GitHubDark } from './github-dark.js';
import { GitHubLight } from './github-light.js';
import { GoogleCode } from './googlecode.js';
import { DefaultLight } from './default-light.js';
import { DefaultDark } from './default.js';
@ -28,11 +31,14 @@ class ThemeManager {
constructor() {
this.availableThemes = [
AyuDark,
AyuLight,
AtomOneDark,
Dracula,
DefaultLight, // Light mode.
DefaultLight,
DefaultDark,
GitHub,
GitHubDark,
GitHubLight,
GoogleCode,
XCode,
ANSI,

View File

@ -28,13 +28,13 @@ export const lightTheme: ColorsTheme = {
type: 'light',
Background: '#FAFAFA',
Foreground: '#3C3C43',
LightBlue: '#ADD8E6',
LightBlue: '#89BDCD',
AccentBlue: '#3B82F6',
AccentPurple: '#8B5CF6',
AccentCyan: '#06B6D4',
AccentGreen: '#22C55E',
AccentYellow: '#EAB308',
AccentRed: '#EF4444',
AccentGreen: '#3CA84B',
AccentYellow: '#D5A40A',
AccentRed: '#DD4C4C',
SubtleComment: '#9CA3AF',
Gray: 'gray',
GradientColors: ['#4796E4', '#847ACE', '#C3677F'],

View File

@ -97,6 +97,7 @@ export function colorizeCode(
// Render the HAST tree using the adapted theme
// Apply the theme's default foreground color to the top-level Text element
const lines = codeToHighlight.split('\n');
const padWidth = String(lines.length).length; // Calculate padding width based on number of lines
const getHighlightedLines = (line: string) =>
!language || !lowlight.registered(language)
? lowlight.highlightAuto(line)
@ -107,7 +108,7 @@ export function colorizeCode(
{lines.map((line, index) => (
<Text key={index}>
<Text color={activeTheme.colors.SubtleComment}>
{`${String(index + 1).padStart(3, ' ')} `}
{`${String(index + 1).padStart(padWidth, ' ')} `}
</Text>
<Text color={activeTheme.defaultColor}>
{renderHastNode(
@ -129,14 +130,15 @@ export function colorizeCode(
// Fallback to plain text with default color on error
// Also display line numbers in fallback
const lines = codeToHighlight.split('\n');
const padWidth = String(lines.length).length; // Calculate padding width based on number of lines
return (
<Text>
{lines.map((line, index) => (
<Text key={index}>
<Text color={activeTheme.colors.SubtleComment}>
{`${String(index + 1).padStart(3, ' ')} `}
<Text color={activeTheme.defaultColor}>
{`${String(index + 1).padStart(padWidth, ' ')} `}
</Text>
<Text color={activeTheme.defaultColor}>{line}</Text>
<Text color={activeTheme.colors.SubtleComment}>{line}</Text>
{index < lines.length - 1 && '\n'}
</Text>
))}