Skip to main content
Home Theme VS Code CHPastel 8 colours scheme that tries to find a balance between 2 big boys Solarized and Dracula colour schemes.
VS Code preview Full workbench mockup using this variant's colors and tokenColors.
colors Workbench UI color keys from the theme JSON colors map.
activityBar.background #282c34 activityBarBadge.background #c68ed7 activityBarBadge.foreground #282c34 badge.background #c68ed7 badge.foreground #282c34 button.background #d6ab6399 tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle — #a2a2a2 — meta.embedded, source.groovy.embedded #d6ab63 — comment #7a92777e italic bold string.quoted.docstring.multi.python #7a92777e italic bold string
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
debugExceptionWidget.background
#282c34
debugExceptionWidget.border #c63957
debugToolBar.background #282c34
diffEditor.border #c68ed760
diffEditor.diagonalFill #c68ed760
diffEditor.insertedTextBackground #5cbb5b20
diffEditor.removedTextBackground #c6395720
dropdown.background #282c34
dropdown.border #5c77a2
editor.background #282c34
editor.findMatchBackground #c68ed760
editor.findMatchHighlightBackground #c68ed760
editor.lineHighlightBackground #202329
editor.selectionBackground #c68ed760
editor.selectionHighlightBackground #c68ed760
editor.wordHighlightBackground #d6ab6327
editor.wordHighlightBorder #d6ab63b6
editor.wordHighlightStrongBackground #495d7eaa
editorCursor.foreground #c63957
editorGroup.border #282c34
editorGroup.dropBackground #495d7e44
editorGroup.emptyBackground #282c34
editorGroupHeader.tabsBackground #282c34
editorGutter.background #202329
editorHoverWidget.background #202329
editorHoverWidget.border #5cbb5b
editorLineNumber.foreground #495d7e
editorLink.activeForeground #d6ab63
editorMarkerNavigationError.background #c63957
editorMarkerNavigationWarning.background #d6ab63
editorSuggestWidget.background #202329
editorSuggestWidget.border #c68ed760
editorSuggestWidget.foreground #d6ab63
editorSuggestWidget.highlightForeground #46aeb9
editorSuggestWidget.selectedBackground #c68ed760
editorWhitespace.foreground #d6ab6380
editorWidget.background #282c34
errorForeground #d6ab63
focusBorder #495d7e99
gitDecoration.addedResourceForeground #5cbb5b
gitDecoration.conflictingResourceForeground #c68ed7
gitDecoration.deletedResourceForeground #c63957
gitDecoration.ignoredResourceForeground #727475
gitDecoration.modifiedResourceForeground #d6ab63
gitDecoration.untrackedResourceForeground #46aeb9
input.background #282c34
input.foreground #a2a2a2
input.placeholderForeground #d6ab63aa
inputOption.activeBorder #495d7e99
inputValidation.errorBackground #c63957
inputValidation.errorBorder #c94f6a
inputValidation.errorForeground #495d7e
inputValidation.infoBackground #648cdd
inputValidation.infoBorder #75a6d6
inputValidation.warningBackground #d6ab63
inputValidation.warningBorder #d6ab63
list.activeSelectionBackground #495d7e
list.dropBackground #495d7e
list.focusBackground #495d7e
list.hoverBackground #495d7eaa
list.inactiveSelectionBackground #495d7e
panel.border #c68ed750
peekView.border #648cdd
peekViewEditor.matchHighlightBackground #d6ab6340
peekViewEditorGutter.background #282c34
peekViewResult.background #282c34
peekViewTitle.background #282c34
pickerGroup.border #495d7e99
pickerGroup.foreground #495d7e99
progressBar.background #282c34
selection.background #c68ed760
sideBar.background #282c34
sideBar.border #c68ed750
sideBarTitle.foreground #d6ab63
statusBar.background #282c34
statusBar.debuggingBackground #282c34
statusBar.foreground #d6ab63
statusBar.noFolderBackground #282c34
statusBarItem.prominentBackground #282c34
statusBarItem.prominentHoverBackground #282c34
tab.activeBackground #282c34
tab.activeForeground #a2a2a2
tab.border #282c34
tab.inactiveBackground #293548
tab.inactiveForeground #a2a2a2
terminal.ansiBlack #495d7e
terminal.ansiBlue #648cdd
terminal.ansiBrightBlack #495d7e
terminal.ansiBrightBlue #648cdd
terminal.ansiBrightCyan #46aeb9
terminal.ansiBrightGreen #5cbb5b
terminal.ansiBrightMagenta #c68ed7
terminal.ansiBrightRed #c63957
terminal.ansiBrightWhite #a2a2a2
terminal.ansiBrightYellow #d6ab63
terminal.ansiCyan #46aeb9
terminal.ansiGreen #5cbb5b
terminal.ansiMagenta #c68ed7
terminal.ansiRed #c63957
terminal.ansiWhite #a2a2a2
terminal.ansiYellow #d6ab63
terminal.foreground #a2a2a2
terminal.selectionBackground #c68ed760
welcomePage.background #282c34 #648cdd
variable.language, variable.other #d6ab63 —
entity.name.class, entity.name.type #c63957
entity.name.function #d6ab63 —
punctuation.definition.variable #5cbb5b —
punctuation.section.embedded.begin, punctuation.section.embedded.end #c63957 —
constant.language, meta.preprocessor #d6ab63 —
support.function.construct, keyword.other.new #c63957 —
constant.character, constant.other #c63957 —
entity.other.inherited-class #c68ed7 —
punctuation.definition.tag #796137 —
entity.other.attribute-name #d6ab63 —
punctuation.separator.continuation #c63957 —
support.type, support.class #5cbb5b —
support.type.exception #c63957 —
meta.diff, meta.diff.header #5cbb5b italic
markup.bold, markup.italic #c68ed7 —
markup.heading.setext #d6ab63
token.error-token #c63957 —
token.debug-token #c68ed7 —
variable.object.property #d6ab63 —
variable.parameter #d6ab63 —
entity.other.inherited-class #d6ab63 —
storage.modifier #5cbb5bff
keyword.control.import #c68ed7 —
storage.modifier.async #5cbb5bff
meta.function-call #d6ab63 —
entity.name.function #d6ab63 —
storage.modifier.tsx #5cbb5b —
entity.name.type.class.python #d6ab63 —
support.type.python #d6ab63 —
keyword.control.import #c63957 —
keyword.control.from #c63957 —
constant.language.python #648cdd —
entity.name.function.python #46aeb9 —
punctuation.separator.dictionary.key-value.json, punctuation.separator.array.json, punctuation.separator.dictionary.pair.json #d6ab63 —
support.type.primitive #d6ab63 —
punctuation.definition.dictionary.begin.json, punctuation.definition.dictionary.end.json, punctuation.definition.array.begin.json, punctuation.definition.array.end.json #c68ed7 —
export interface User {
id : string;
name : string;
role : "admin" | "member" ;
tags : string[];
}
/**
* Fetch user data by ID
* @param id
* @returns User object or null if ID is invalid
*/
export async function fetchUser(id : string) : Promise<User | null > {
if ( ! id) {
return null;
}
const response = await fetch( `/api/users/${ id }` , {
method: "GET" ,
headers: { Accept: "application/json" },
});
if ( ! response.ok) {
throw new Error( `HTTP ${ response.status }` );
}
return ( await response.json()) as User;
}
function greet(user : User) : string {
// Simple greeting function that uses the user's name
return `Hello, ${ user.name }!` ;
}
fetchUser.ts
index.ts
README.md
src
components
fetchUser.ts
src
components
fetchUser.ts
fetchUser 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
Problems1
Output
Debug Console
Terminal
Ports
~/my-project $ pnpm dev
▲ Next.js ready on http://localhost:3000
✓ compiled client and server successfully in 412ms
wait - compiling /theme/vscode...
~/my-project
main*
Button.tsx
31
$
export interface User {
id : string;
name : string;
role : "admin" | "member" ;
tags : string[];
}
/**
* Fetch user data by ID
* @param id
* @returns User object or null if ID is invalid
*/
export async function fetchUser(id : string) : Promise<User | null > {
if ( ! id) {
return null;
}
const response = await fetch( `/api/users/${ id }` , {
method: "GET" ,
headers: { Accept: "application/json" },
});
if ( ! response.ok) {
throw new Error( `HTTP ${ response.status }` );
}
return ( await response.json()) as User;
}
function greet(user : User) : string {
// Simple greeting function that uses the user's name
return `Hello, ${ user.name }!` ;
}
CHPastel | Coding Theme