Skip to main content
Home Theme VS Code Alpine-Warm A warm theme with muted colors for C/C++ that doesn't hurt my eyes
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 #22262a activityBar.border #3c3836 activityBar.dropBackground #22262a activityBar.foreground #ebe2d3 activityBarBadge.background #458588 activityBarBadge.foreground #ebe2d3 tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle — #d0d0d0 — emphasis — italic strong — bold variable.parameter, variable.arguments, variable.name, module.node, meta.parameter.type.variable, variable.other, variable.local #adbeb1 — header, keyword.control, keyword.other.unit, keyword.control.module, keyword.control.less
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
badge.background
#d3869b
badge.foreground #22262a
button.background #45858880
button.foreground #ebe2d3
button.hoverBackground #45858860
debugToolBar.background #22262a
diffEditor.insertedTextBackground #00000040
diffEditor.removedTextBackground #00000040
dropdown.background #22262a
dropdown.border #3c3836
dropdown.foreground #ebe2d3
editor.background #22262a
editor.findMatchBackground #404000ff
editor.findMatchBorder #ffff00
editor.findMatchHighlightBackground #002440ff
editor.findMatchHighlightBorder #0090FFD0
editor.findRangeHighlightBackground #00000080
editor.foreground #d0d0d0
editor.hoverHighlightBackground #00000080
editor.letterSpacing 0.15
editor.lineHighlightBackground #665c5440
editor.lineHighlightBorder #665c5400
editor.selectionBackground #a9998d28
editor.selectionHighlightBackground #000000ff
editorBracketHighlight.foreground1 #c9c9c9
editorBracketHighlight.foreground2 #ffa8b8
editorBracketHighlight.foreground3 #adbeb1
editorBracketHighlight.foreground4 #e28d6c
editorBracketHighlight.foreground5 #9d8199
editorBracketHighlight.foreground6 #969b6b
editorBracketHighlight.unexpectedBracket.foreground #c9c9c9
editorBracketMatch.background #92837480
editorBracketMatch.border #22262a00
editorCodeLens.foreground #a8998490
editorCursor.foreground #ebe2d3
editorError.foreground #FF0074
editorGroup.background #3c3836
editorGroup.border #3c3836
editorGroup.dropBackground #3c383660
editorGroupHeader.noTabsBackground #3c3836
editorGroupHeader.tabsBackground #22262a
editorGroupHeader.tabsBorder #3c3836
editorGutter.addedBackground #60A040
editorGutter.background #22262a00
editorGutter.deletedBackground #D05070
editorGutter.modifiedBackground #808080
editorHoverWidget.background #22262a
editorHoverWidget.border #3c3836
editorIndentGuide.activeBackground #a8998450
editorIndentGuide.background #a8998420
editorInfo.foreground #e28d6c
editorLineNumber.foreground #665c54
editorLink.activeForeground #ebe2d3
editorOverviewRuler.addedForeground #043000
editorOverviewRuler.border #22262a00
editorOverviewRuler.commonContentForeground #928374
editorOverviewRuler.currentContentForeground #458588
editorOverviewRuler.deletedForeground #320d0d
editorOverviewRuler.errorForeground #fb4934
editorOverviewRuler.findMatchForeground #bdae93
editorOverviewRuler.incomingContentForeground #689d6a
editorOverviewRuler.infoForeground #d3869b
editorOverviewRuler.modifiedForeground #808080
editorOverviewRuler.rangeHighlightForeground #bdae93
editorOverviewRuler.selectionHighlightForeground #7d7166
editorOverviewRuler.warningForeground #d79921
editorOverviewRuler.wordHighlightForeground #7d7166
editorOverviewRuler.wordHighlightStrongForeground #7d7166
editorRuler.foreground #a8998440
editorSuggestWidget.background #22262a
editorSuggestWidget.border #3c3836
editorSuggestWidget.foreground #ebe2d3
editorSuggestWidget.highlightForeground #689d6a
editorSuggestWidget.selectedBackground #3c383660
editorWarning.foreground #d79921
editorWhitespace.foreground #a8998420
editorWidget.background #22262a
editorWidget.border #3c3836
errorForeground #fb4934
extensionButton.prominentBackground #808080
extensionButton.prominentHoverBackground #000000
focusBorder #3c3836
foreground #d0d0d0
gitDecoration.conflictingResourceForeground #b16286
gitDecoration.deletedResourceForeground #cc241d
gitDecoration.ignoredResourceForeground #7c6f64
gitDecoration.modifiedResourceForeground #d79921
gitDecoration.untrackedResourceForeground #98971a
input.background #ebe2d305
input.border #3c3836
input.foreground #ebe2d3
input.placeholderForeground #ebe2d360
inputOption.activeBorder #ebe2d360
inputValidation.errorBackground #cc241d80
inputValidation.errorBorder #fb4934
inputValidation.infoBackground #45858880
inputValidation.infoBorder #83a598
inputValidation.warningBackground #d7992180
inputValidation.warningBorder #fabd2f
list.activeSelectionBackground #3c383680
list.activeSelectionForeground #8ec07c
list.dropBackground #3c3836
list.focusBackground #3c3836
list.focusForeground #ebe2d3
list.highlightForeground #689d6a
list.hoverBackground #3c383680
list.hoverForeground #d5c4a1
list.inactiveSelectionBackground #3c383680
list.inactiveSelectionForeground #689d6a
menu.border #3c3836
merge.border #22262a00
merge.currentContentBackground #45858820
merge.currentHeaderBackground #45858840
merge.incomingContentBackground #689d6a20
merge.incomingHeaderBackground #689d6a40
notebook.cellBorderColor #3c3836
notebook.cellEditorBackground #282828
notebook.focusedCellBorder #a89984
notebook.focusedEditorBorder #3c3836
notification.background #22262a
notification.buttonBackground #665c54
notification.buttonForeground #ebe2d3
notification.buttonHoverBackground #665c5450
notification.errorBackground #fb4934
notification.errorForeground #22262a
notification.foreground #ebe2d3
notification.infoBackground #83a598
notification.infoForeground #22262a
notification.warningBackground #fabd2f
notification.warningForeground #22262a
panel.border #3c3836
panelTitle.activeForeground #ebe2d3
peekView.border #3c3836
peekViewEditor.background #3c383650
peekViewEditor.matchHighlightBackground
peekViewEditorGutter.background #3c383650
peekViewResult.background #3c383650
peekViewResult.fileForeground #ebe2d3
peekViewResult.matchHighlightBackground #8ec07c30
peekViewResult.selectionBackground #8ec07c30
peekViewResult.selectionForeground #8ec07c30
peekViewTitle.background #3c383650
peekViewTitleDescription.foreground #bdae93
peekViewTitleLabel.foreground #ebe2d3
progressBar.background #689d6a
scrollbar.shadow #22262a
scrollbarSlider.activeBackground #689d6a
scrollbarSlider.background #50494599
scrollbarSlider.hoverBackground #665c54
selection.background #689d6a80
sideBar.background #22262a
sideBar.border #3c3836
sideBar.foreground #d5c4a1
sideBarSectionHeader.background #22262a00
sideBarSectionHeader.foreground #ebe2d3
sideBarTitle.foreground #ebe2d3
statusBar.background #22262a
statusBar.border #3c3836
statusBar.debuggingBackground #e28d6c
statusBar.debuggingBorder #22262a00
statusBar.debuggingForeground #22262a
statusBar.foreground #ebe2d3
statusBar.noFolderBackground #22262a
statusBar.noFolderBorder #22262a00
statusBar.prominentBackground #689d6a
statusBar.prominentHoverBackground #689d6a70
tab.activeBackground #32302f
tab.activeBorder #689d6a
tab.activeForeground #ebe2d3
tab.border #22262a00
tab.inactiveBackground #22262a
tab.inactiveForeground #a89984
tab.unfocusedActiveBorder #22262a00
tab.unfocusedActiveForeground #a89984
tab.unfocusedInactiveForeground #928374
terminal.ansiBlack #3c3836
terminal.ansiBlue #458588
terminal.ansiBrightBlack #928374
terminal.ansiBrightBlue #83a598
terminal.ansiBrightCyan #8ec07c
terminal.ansiBrightGreen #b8bb26
terminal.ansiBrightMagenta #d3869b
terminal.ansiBrightRed #fb4934
terminal.ansiBrightWhite #d5c4a1
terminal.ansiBrightYellow #fabd2f
terminal.ansiCyan #689d6a
terminal.ansiGreen #98971a
terminal.ansiMagenta #b16286
terminal.ansiRed #cc241d
terminal.ansiWhite #a89984
terminal.ansiYellow #d79921
terminal.background #22262a
terminal.foreground #d5c4a1
textLink.activeForeground #ffffff
textLink.foreground ##0090FFD0
titleBar.activeBackground #22262a
titleBar.activeForeground #ebe2d3
titleBar.inactiveBackground #22262a
widget.shadow #22262a30 #9d8199
comment, punctuation.definition.comment #665c54 italic
constant, support.constant, variable.arguments, constant.rgb-value, meta.preprocessor, meta.preprocessor.numeric, meta.header.diff, metatag.php, entity.name.function.preprocessor #e28d6c —
entity.name.selector, entity.name.tag, punctuation.tag, entity.other.attribute-name, meta.selector, meta.preprocessor.string, support.type.property-name, support.function.git-rebase #8ec07c —
entity.static, entity.name.function, entity.name.selector, entity.name.class.static.function, storage.type.function, entity.function, entity.name.function.static, entity.name.function.function-call, support.function.builtin, entity.name.method, entity.name.method.function-call, entity.name.static.function-call #be6f6f —
string, string.tag, string.value, string.regexp, string.quasi, string.entity, string.escape, string.constant.other.placeholder, punctuation.quoted #969b6b —
entity.name.static.function-call, entity.name.class, entity.name.type, storage #fdd2ac —
storage.modifier, object, keyword, keyword.operator, keyword.operator.new, keyword.other.this.cs, meta.type.name, meta.return.type, meta.return-type, meta.cast, meta.type.annotation, support.type, storage.type.cs, variable.class, prototype, storage.type.class, punctuation.quasi, entity.name, entity.name.function.operator, entity.name.function.operator.member #ffa8b8 —
brace, punctuation #d0d0d0 —
*url*, *link*, *uri* — underline
invalid, invalid.illegal #cc241d —
invalid.deprecated #b16286 —
meta.preprocessor.string, constant.sha.git-rebase #b8bb26 —
meta.function.python, entity.name.function.python #be6f6f —
storage.type.function.python, storage.modifier.declaration, storage.type.class.python #9d8199 —
meta.function-call.generic #be6f6f —
meta.function-call.arguments #adbeb1 —
entity.name.function.decorator — bold
keyword.operator.logical #ffa8b8 —
punctuation.definition.logical-expression #e28d6c —
string.inperpolated.dollar.shell #e28d6c —
string.interpolated.dollar.shell, string.interpolated.backtick.shell #8ec07c —
keyword.control.directive #9d8199 —
support.function.C99 #be6f6f —
meta.function.cs, entity.name.function.cs, entity.name.type.namespace.cs #b8bb26 —
keyword.other.using.cs, entity.name.variable.field.cs, entity.name.variable.local.cs, variable.other.readwrite.cs #8ec07c —
keyword.other.this.cs, keyword.other.base.cs #d3869b —
meta.scope.prerequisites #fabd2f —
entity.name.function.target #b8bb26 bold
storage.modifier.import.java, storage.modifier.package.java #bdae93 —
keyword.other.import.java, keyword.other.package.java #8ec07c —
storage.type.java #fabd2f —
storage.type.annotation #83a598 bold
keyword.other.documentation.javadoc #8ec07c —
comment.block.javadoc variable.parameter.java #b8bb26 bold
source.java variable.other.object, source.java variable.other.definition.java #d0d0d0 —
meta.function-parameters.lisp #fabd2f —
markup.underline — underline
string.other.link.title.markdown #928374 underline
markup.underline.link #d3869b —
markup.heading #e28d6c bold
markup.punctuation.quote.beginning #98971a —
markup.punctuation.list.beginning #83a598 —
markup.inline.raw, markup.fenced_code.block #8ec07c —
string.quoted.double.json #83a598 —
source.json meta.structure.dictionary.json support.type.property-name.json #b8bb26 —
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json #8ec07c —
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json #d3869b —
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json #b8bb26 —
entity.other.attribute-name.css #e28d6c —
source.css meta.selector #d0d0d0 —
support.type.property-name.css #e28d6c —
entity.other.attribute-name.class #b8bb26 —
source.css support.function.transform, source.css support.function.timing-function, source.css support.function.misc #fb4934 —
support.property-value, constant.rgb-value, support.property-value.scss, constant.rgb-value.scss #d65d0e —
entity.name.tag.css — normal
punctuation.definition.tag #83a598 —
text.html entity.name.tag, text.html punctuation.tag #8ec07c bold
source.js variable.language #e28d6c —
source.ts variable.language #e28d6c —
source.go storage.type #fabd2f —
source.go entity.name.import #b8bb26 —
source.go keyword.package, source.go keyword.import #8ec07c —
source.go keyword.interface, source.go keyword.struct #83a598 —
source.go entity.name.type #d0d0d0 —
source.go entity.name.function #d3869b —
keyword.control.cucumber.table #83a598 —
source.reason string.double, source.reason string.regexp #b8bb26 —
source.reason keyword.control.less #8ec07c —
source.reason entity.name.function #83a598 —
source.reason support.property-value, source.reason entity.name.filename #e28d6c —
source.powershell variable.other.member.powershell #e28d6c —
source.powershell support.function.powershell #fabd2f —
source.powershell support.function.attribute.powershell #bdae93 —
source.powershell meta.hashtable.assignment.powershell variable.other.readwrite.powershell #e28d6c —
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*
Alpine-Warm | Coding Theme 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 } ! ` ;
}