Skip to main content
Springbok Theme | Coding Theme
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.activeBorder #B55A26 activityBar.background #fefefe activityBar.border #F6E7DE activityBar.dropBorder #B55A26 activityBar.foreground #383838 activityBar.inactiveForeground #707070 tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle constant.numeric, constant.numeric keyword.other.unit, constant.other.timestamp #BAA804 — string #BA7104 — constant.character.escape #ff6a14 — punctuation.definition.template-expression #ff6a14 — meta.template.expression
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
Springbok Theme — Light Springbok
activityBarBadge.background
#B55A26
activityBarBadge.foreground #ebebeb
activityBarTop.activeBorder #B55A26
activityBarTop.background #fefefe
activityBarTop.foreground #383838
activityBarTop.inactiveForeground #707070
activityErrorBadge.background #912723
activityErrorBadge.foreground #ebebeb
activityWarningBadge.background #918623
activityWarningBadge.foreground #ebebeb
badge.background #B55A26
badge.foreground #ebebeb
breadcrumb.activeSelectionForeground #383838
breadcrumb.background #fefefe
breadcrumb.focusForeground #383838
breadcrumb.foreground #2f2f2f
breadcrumbPicker.background #fefefe
button.background #8F3C0C
button.foreground #ebebeb
button.hoverBackground #B55A26
checkbox.background #8F3C0C
commandCenter.activeBackground #e0a88a
commandCenter.activeBorder #e0a88a
commandCenter.activeForeground #080808
commandCenter.background #F6E7DE
commandCenter.border #F6E7DE
commandCenter.debuggingBackground #8F100C90
commandCenter.debuggingForeground #ebebeb
commandCenter.foreground #383838
commandCenter.inactiveBackground #9f9f9f
commandCenter.inactiveBorder #9f9f9f
commandCenter.inactiveForeground #707070
diffEditor.insertedTextBackground #34BD3820
diffEditor.removedTextBackground #BD383420
editor.background #fefefe
editor.findMatchBackground #1d504241
editor.findMatchHighlightBackground #1e332d41
editor.foreground #707070
editor.hoverHighlightBackground #D9CAC296
editor.inactiveSelectionBackground #D9CAC232
editor.lineHighlightBackground #f0f0f0
editor.rangeHighlightBackground #21242321
editor.selectionBackground #D9CAC264
editor.selectionHighlightBackground #33383721
editor.symbolHighlightBackground #21242321
editor.wordHighlightBackground #F6E7DE16
editor.wordHighlightStrongBackground #F6E7DE32
editorBracketMatch.border #444
editorGroup.border #2f2f2f
editorGroupHeader.tabsBackground #fefefe
editorGutter.addedBackground #34BD38
editorGutter.background #D7D7D7
editorGutter.commentRangeForeground #9f9f9f
editorGutter.deletedBackground #BD3834
editorGutter.modifiedBackground #BDB034
editorIndentGuide.activeBackground #B0BEC5A4
editorInlayHint.background #38383800
editorInlayHint.foreground #347DBDa0
editorLineNumber.activeForeground #474747
editorLineNumber.foreground #9f9f9f
editorLink.activeForeground #D37947
editorUnnecessaryCode.opacity #000000c0
editorWhitespace.foreground #dfdfdf
errorForeground #912723
focusBorder #B55A26
foreground #383838
git.blame.editorDecorationForeground #9f9f9f
gitDecoration.addedResourceForeground #239127
gitDecoration.conflictingResourceForeground #6C0F0B
gitDecoration.deletedResourceForeground #912723
gitDecoration.modifiedResourceForeground #918623
gitDecoration.untrackedResourceForeground #0B6C0F
icon.foreground #383838
input.background #fefefe
input.border #D9CAC2
input.foreground #181818
inputOption.activeBackground #e0a88a
inputOption.activeBorder #e0a88a
inputOption.activeForeground #080808
inputOption.hoverBackground #D9CAC2
inputValidation.errorBackground #912723
inputValidation.errorBorder #912723
inputValidation.errorForeground #ebebeb
inputValidation.infoBackground #233691
inputValidation.infoBorder #233691
inputValidation.infoForeground #ebebeb
inputValidation.warningBackground #918623
inputValidation.warningBorder #918623
inputValidation.warningForeground #ebebeb
keybindingLabel.background #D9CAC264
keybindingLabel.border #81818180
keybindingLabel.bottomBorder #41414190
keybindingLabel.foreground #e0e0e0
list.activeSelectionBackground #F6E7DE
list.activeSelectionForeground #383838
list.dropBackground #D37947
list.filterMatchBackground #B55A26
list.focusBackground #F6E7DE
list.highlightForeground #B55A26
list.hoverBackground #D9CAC2
list.inactiveFocusBackground #D37947
list.inactiveSelectionBackground #F6E7DE
menu.background #fefefe
menu.foreground #2f2f2f
menu.selectionBackground #552407
menu.selectionForeground #383838
menu.separatorBackground #2f2f2f
merge.commonContentBackground #91862360
merge.commonHeaderBackground #91862390
merge.currentContentBackground #23839160
merge.currentHeaderBackground #23839190
merge.incomingContentBackground #23369160
merge.incomingHeaderBackground #23369190
outputView.background #fefefe
panel.background #fefefe
panel.border #F6E7DE
panelSection.border #F6E7DE
panelTitle.activeBorder #B55A26
panelTitle.activeForeground #383838
panelTitle.inactiveForeground #707070
peekView.border #8F3C0C
peekViewEditor.background #F3F3F3
peekViewEditor.matchHighlightBackground #D9CAC2
peekViewResult.background #fefefe
peekViewResult.matchHighlightBackground #1e332d31
peekViewResult.selectionBackground #D9CAC2
peekViewTitle.background #531412
pickerGroup.foreground #B55A26
progressBar.background #B55A26
quickInput.background #fefefe
quickInput.foreground #2f2f2f
scrollbar.shadow #55555533
scrollbarSlider.activeBackground #D3794763
scrollbarSlider.background #D9CAC233
scrollbarSlider.hoverBackground #D3794783
selection.background #D9CAC264
settings.modifiedItemIndicator #BDB034
sideBar.background #fefefe
sideBar.border #F6E7DE
sideBar.foreground #383838
sideBarSectionHeader.background #fefefe
sideBarSectionHeader.foreground #2f2f2f
sideBarTitle.background #fefefe
sideBarTitle.foreground #707070
sideBySideEditor.horizontalBorder #F6E7DE
sideBySideEditor.verticalBorder #F6E7DE
statusBar.background #1a1a1a
statusBar.border #2f2f2f
statusBar.debuggingBackground #8F100C
statusBar.foreground #e0e0e0
statusBar.noFolderBackground #717171
statusBarItem.remoteBackground #8F3C0C
statusBarItem.remoteForeground #BDB034
tab.activeBackground #F6E7DE
tab.activeForeground #383838
tab.inactiveBackground #ebebeb
tab.inactiveForeground #707070
terminal.ansiBlack #797979
terminal.ansiBlue #344BBD
terminal.ansiBrightBlack #a0a0a0
terminal.ansiBrightBlue #0422BA
terminal.ansiBrightCyan #04A2BA
terminal.ansiBrightGreen #04BA0A
terminal.ansiBrightMagenta #BA04A2
terminal.ansiBrightRed #BA0A04
terminal.ansiBrightWhite #fefefe
terminal.ansiBrightYellow #BAA804
terminal.ansiCyan #34ABBD
terminal.ansiGreen #34BD38
terminal.ansiMagenta #BD34AB
terminal.ansiRed #BD3834
terminal.ansiWhite #D7D7D7
terminal.ansiYellow #BDB034
terminal.background #000000
terminal.foreground #F5F5F5
terminal.inactiveSelectionBackground #D9CAC232
terminal.selectionBackground #D9CAC264
textLink.activeForeground #B55A26
textLink.foreground #D37947
titleBar.activeBackground #fefefe
titleBar.activeForeground #2f2f2f
titleBar.border #F6E7DE
titleBar.inactiveBackground #9f9f9f
titleBar.inactiveForeground #707070
toolbar.activeBackground #e0a88a
toolbar.hoverBackground #D9CAC2 constant.character.escape.backslash.regexp #e5bde8 —
punctuation.definition.group.regexp, punctuation.definition.character-class.regexp #f0daf2 —
constant.language #BD3834 —
constant.other.color #000000 —
comment, comment.block #9f9f9f —
comment.block.documentation #6A8759 —
storage.type.class.jsdoc, punctuation.definition.block.tag.jsdoc #6A8759 bold underline
variable.other.jsdoc #629755 italic
storage.type, storage.modifier #B55A26 bold
storage.modifier — bold italic
keyword, keyword.operator, keyword.operator.new, keyword.operator.expression, keyword.operator.cast, keyword.operator.sizeof, keyword.operator.logical.python, keyword.control #B55A26 —
entity.other.attribute-name #6C630B —
meta.object-literal.key #B57E26 —
entity.name.function.preprocessor #BD34AB bold
entity.name.type.class — bold
entity.name.function #7634BD bold
variable.language #B55A26 bold
variable.parameter #383838 italic
variable.other.enummember #235E91 bold italic
entity.name.variable, meta.definition.variable, variable.object.property #383838 —
meta.import variable.other.readwrite #383838 —
meta.import variable.other.readwrite.alias #383838 —
meta.definition.property #235E91 —
support.type.builtin, support.type.primitive, storage.type.built-in #347DBD bold
punctuation.definition.tag, entity.name.tag #918623 —
support.class.component — bold
meta.tag.attributes punctuation.section.embedded #111100 —
meta.jsx.children punctuation.section.embedded, meta.tag.attributes meta.jsx.children punctuation.section.embedded #ff6a14 —
support.type.property-name #B57E26 —
variable.other.env #B57E26 —
markup.heading #D37947 bold
markup.underline — underline
markup.underline.link #D37947 —
markup.list punctuation.definition.list.begin #B57E26 bold
source.css entity.other.attribute-name.id — bold
source.css entity.name.tag #918623 bold
source.css support.function #7634BD —
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 } !` ;
}
Ln 5, Col 12
Spaces: 2
UTF-8
LF
TypeScript
Light+
fetchUser.ts
index.ts
README.md
src
components
fetchUser.ts
Button.tsx
Modal.tsx
hooks
utils
index.ts
public
README.md
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
31
32
33
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 $
package.json
tsconfig.json
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 } !` ;
}