Add DarkGray to the ColorTheme. (#12420)

This commit is contained in:
Jacob Richman
2025-11-01 16:50:51 -07:00
committed by GitHub
parent e3262f8766
commit d7243fb81f
20 changed files with 147 additions and 4 deletions
+17 -3
View File
@@ -6,7 +6,7 @@
import type { CSSProperties } from 'react';
import type { SemanticColors } from './semantic-tokens.js';
import { resolveColor } from './color-utils.js';
import { resolveColor, interpolateColor } from './color-utils.js';
export type ThemeType = 'light' | 'dark' | 'ansi' | 'custom';
@@ -25,6 +25,7 @@ export interface ColorsTheme {
DiffRemoved: string;
Comment: string;
Gray: string;
DarkGray: string;
GradientColors?: string[];
}
@@ -74,13 +75,14 @@ export interface CustomTheme {
DiffRemoved?: string;
Comment?: string;
Gray?: string;
DarkGray?: string;
GradientColors?: string[];
}
export const lightTheme: ColorsTheme = {
type: 'light',
Background: '#FAFAFA',
Foreground: '',
Foreground: '#383A42',
LightBlue: '#89BDCD',
AccentBlue: '#3B82F6',
AccentPurple: '#8B5CF6',
@@ -92,13 +94,14 @@ export const lightTheme: ColorsTheme = {
DiffRemoved: '#FFCCCC',
Comment: '#008000',
Gray: '#97a0b0',
DarkGray: interpolateColor('#97a0b0', '#FAFAFA', 0.5),
GradientColors: ['#4796E4', '#847ACE', '#C3677F'],
};
export const darkTheme: ColorsTheme = {
type: 'dark',
Background: '#1E1E2E',
Foreground: '',
Foreground: '#CDD6F4',
LightBlue: '#ADD8E6',
AccentBlue: '#89B4FA',
AccentPurple: '#CBA6F7',
@@ -110,6 +113,7 @@ export const darkTheme: ColorsTheme = {
DiffRemoved: '#430000',
Comment: '#6C7086',
Gray: '#6C7086',
DarkGray: interpolateColor('#6C7086', '#1E1E2E', 0.5),
GradientColors: ['#4796E4', '#847ACE', '#C3677F'],
};
@@ -128,6 +132,7 @@ export const ansiTheme: ColorsTheme = {
DiffRemoved: 'red',
Comment: 'gray',
Gray: 'gray',
DarkGray: 'gray',
};
export class Theme {
@@ -176,6 +181,7 @@ export class Theme {
ui: {
comment: this.colors.Gray,
symbol: this.colors.AccentCyan,
dark: this.colors.DarkGray,
gradient: this.colors.GradientColors,
},
status: {
@@ -267,6 +273,13 @@ export function createCustomTheme(customTheme: CustomTheme): Theme {
customTheme.background?.diff?.removed ?? customTheme.DiffRemoved ?? '',
Comment: customTheme.ui?.comment ?? customTheme.Comment ?? '',
Gray: customTheme.text?.secondary ?? customTheme.Gray ?? '',
DarkGray:
customTheme.DarkGray ??
interpolateColor(
customTheme.text?.secondary ?? customTheme.Gray ?? '',
customTheme.background?.primary ?? customTheme.Background ?? '',
0.5,
),
GradientColors: customTheme.ui?.gradient ?? customTheme.GradientColors,
};
@@ -429,6 +442,7 @@ export function createCustomTheme(customTheme: CustomTheme): Theme {
ui: {
comment: customTheme.ui?.comment ?? colors.Comment,
symbol: customTheme.ui?.symbol ?? colors.Gray,
dark: colors.DarkGray,
gradient: customTheme.ui?.gradient ?? colors.GradientColors,
},
status: {