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 #181818 activityBar.border #2f2f2f activityBar.dropBorder #B55A26 activityBar.foreground #ebebeb activityBar.inactiveForeground #9f9f9f tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle constant.numeric, constant.numeric keyword.other.unit, constant.other.timestamp #E6CF00 — string #E68A00 — 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 — Dark Springbok
activityBarBadge.background
#B55A26
activityBarBadge.foreground #ebebeb
activityBarTop.activeBorder #B55A26
activityBarTop.background #181818
activityBarTop.foreground #ebebeb
activityBarTop.inactiveForeground #9f9f9f
activityErrorBadge.background #B52B26
activityErrorBadge.foreground #ebebeb
activityWarningBadge.background #B5A726
activityWarningBadge.foreground #ebebeb
badge.background #B55A26
badge.foreground #ebebeb
breadcrumb.activeSelectionForeground #ebebeb
breadcrumb.background #181818
breadcrumb.focusForeground #ebebeb
breadcrumb.foreground #e0e0e0
breadcrumbPicker.background #181818
button.background #8F3C0C
button.foreground #ebebeb
button.hoverBackground #B55A26
checkbox.background #8F3C0C
commandCenter.activeBackground #2f2f2f
commandCenter.activeBorder #878787
commandCenter.activeForeground #ebebeb
commandCenter.background #2f2f2f
commandCenter.border #2f2f2f
commandCenter.debuggingBackground #8F100C90
commandCenter.debuggingForeground #ebebeb
commandCenter.foreground #ebebeb
commandCenter.inactiveBackground #2f2f2f
commandCenter.inactiveBorder #2f2f2f
commandCenter.inactiveForeground #9f9f9f
diffEditor.insertedTextBackground #4AD34F20
diffEditor.removedTextBackground #D34F4A20
editor.background #080808
editor.findMatchBackground #1d5042
editor.findMatchHighlightBackground #1e332d
editor.foreground #e0e0e0
editor.hoverHighlightBackground #D3794796
editor.inactiveSelectionBackground #D3794732
editor.lineHighlightBackground #1d1d1d
editor.rangeHighlightBackground #212423
editor.selectionBackground #D3794764
editor.selectionHighlightBackground #333837
editor.symbolHighlightBackground #212423
editor.wordHighlightBackground #D3794716
editor.wordHighlightStrongBackground #D3794732
editorBracketMatch.border #eee
editorGroup.border #2f2f2f
editorGroupHeader.tabsBackground #181818
editorGutter.addedBackground #4AD34F
editorGutter.background #1a1a1a
editorGutter.commentRangeForeground #707070
editorGutter.deletedBackground #D34F4A
editorGutter.modifiedBackground #D3C64A
editorIndentGuide.activeBackground #B0BEC5A4
editorInlayHint.background #38383800
editorInlayHint.foreground #4A93D3a0
editorLineNumber.activeForeground #ebebeb
editorLineNumber.foreground #707070
editorLink.activeForeground #B55A26
editorUnnecessaryCode.opacity #000000c0
editorWhitespace.foreground #414141
errorForeground #B52B26
focusBorder #B55A26
foreground #ebebeb
git.blame.editorDecorationForeground #7b6a60
gitDecoration.addedResourceForeground #4AD34F
gitDecoration.conflictingResourceForeground #B52B26
gitDecoration.deletedResourceForeground #D34F4A
gitDecoration.modifiedResourceForeground #D3C64A
gitDecoration.untrackedResourceForeground #26B52B
icon.foreground #ebebeb
input.background #2f2f2f
input.border #2f2f2f
input.foreground #e0e0e0
inputOption.activeBackground #B55A26
inputOption.activeBorder #B55A26
inputOption.activeForeground #fefefe
inputOption.hoverBackground #7b6a60
inputValidation.errorBackground #B52B26
inputValidation.errorBorder #B52B26
inputValidation.errorForeground #ebebeb
inputValidation.infoBackground #263EB5
inputValidation.infoBorder #263EB5
inputValidation.infoForeground #ebebeb
inputValidation.warningBackground #B5A726
inputValidation.warningBorder #B5A726
inputValidation.warningForeground #ebebeb
keybindingLabel.background #D3794764
keybindingLabel.border #81818180
keybindingLabel.bottomBorder #41414190
keybindingLabel.foreground #e0e0e0
list.activeSelectionBackground #552407
list.activeSelectionForeground #ebebeb
list.dropBackground #D37947
list.filterMatchBackground #B55A26
list.focusBackground #552407
list.highlightForeground #B55A26
list.hoverBackground #332c28
list.inactiveFocusBackground #B55A26
list.inactiveSelectionBackground #552407
menu.background #181818
menu.foreground #e0e0e0
menu.selectionBackground #552407
menu.selectionForeground #ebebeb
menu.separatorBackground #2f2f2f
merge.commonContentBackground #B5A72660
merge.commonHeaderBackground #B5A72690
merge.currentContentBackground #26A2B560
merge.currentHeaderBackground #26A2B590
merge.incomingContentBackground #263EB560
merge.incomingHeaderBackground #263EB590
outputView.background #080808
panel.background #181818
panel.border #2f2f2f
panelSection.border #2f2f2f
panelTitle.activeBorder #B55A26
panelTitle.activeForeground #ebebeb
panelTitle.inactiveForeground #9f9f9f
peekView.border #8F3C0C
peekViewEditor.background #030303
peekViewEditor.matchHighlightBackground #14221e
peekViewResult.background #0F0F0F
peekViewResult.matchHighlightBackground #1e332d
peekViewResult.selectionBackground #8F3C0C
peekViewTitle.background #531412
pickerGroup.foreground #B55A26
progressBar.background #B55A26
quickInput.background #181818
quickInput.foreground #e0e0e0
scrollbar.shadow #00000033
scrollbarSlider.activeBackground #D3794763
scrollbarSlider.background #D9CAC233
scrollbarSlider.hoverBackground #D3794783
selection.background #D3794764
settings.modifiedItemIndicator #D3C64A
sideBar.background #181818
sideBar.border #2f2f2f
sideBar.foreground #ebebeb
sideBarSectionHeader.background #181818
sideBarSectionHeader.foreground #e0e0e0
sideBarTitle.background #181818
sideBarTitle.foreground #878787
sideBySideEditor.horizontalBorder #2f2f2f
sideBySideEditor.verticalBorder #2f2f2f
statusBar.background #1a1a1a
statusBar.border #2f2f2f
statusBar.debuggingBackground #8F100C
statusBar.foreground #e0e0e0
statusBar.noFolderBackground #717171
statusBarItem.remoteBackground #8F3C0C
statusBarItem.remoteForeground #D3C64A
tab.activeBackground #564a43
tab.activeForeground #ebebeb
tab.inactiveBackground #2f2f2f
tab.inactiveForeground #9f9f9f
terminal.ansiBlack #797979
terminal.ansiBlue #4A61D3
terminal.ansiBrightBlack #a0a0a0
terminal.ansiBrightBlue #0026E6
terminal.ansiBrightCyan #00C7E6
terminal.ansiBrightGreen #00E608
terminal.ansiBrightMagenta #E600C7
terminal.ansiBrightRed #E60800
terminal.ansiBrightWhite #fefefe
terminal.ansiBrightYellow #E6CF00
terminal.ansiCyan #4AC1D3
terminal.ansiGreen #4AD34F
terminal.ansiMagenta #D34AC1
terminal.ansiRed #D34F4A
terminal.ansiWhite #D7D7D7
terminal.ansiYellow #D3C64A
terminal.background #000000
terminal.foreground #F5F5F5
terminal.inactiveSelectionBackground #D3794732
terminal.selectionBackground #D3794764
textLink.activeForeground #D37947
textLink.foreground #B55A26
titleBar.activeBackground #181818
titleBar.activeForeground #e0e0e0
titleBar.border #2f2f2f
titleBar.inactiveBackground #2f2f2f
titleBar.inactiveForeground #9f9f9f
toolbar.activeBackground #B55A26
toolbar.hoverBackground #7b6a60 constant.character.escape.backslash.regexp #e5bde8 —
punctuation.definition.group.regexp, punctuation.definition.character-class.regexp #f0daf2 —
constant.language #D34F4A —
constant.other.color #ffffff —
comment, comment.block #707070 —
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 #D37947 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 #D37947 —
entity.other.attribute-name #D3C64A —
meta.object-literal.key #B57E26 —
entity.name.function.preprocessor #D34AC1 bold
entity.name.type.class #fefefe bold
entity.name.function #B488E2 bold
variable.language #D37947 bold
variable.parameter #ebebeb italic
variable.other.enummember #4A93D3 bold italic
entity.name.variable, meta.definition.variable, variable.object.property #ebebeb —
meta.import variable.other.readwrite #aaaabb —
meta.import variable.other.readwrite.alias #ddddee —
meta.definition.property #4A93D3 —
support.type.builtin, support.type.primitive, storage.type.built-in #88B8E2 bold
punctuation.definition.tag, entity.name.tag #B5A726 —
support.class.component — bold
meta.tag.attributes punctuation.section.embedded #eeeeff —
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 #B55A26 —
markup.list punctuation.definition.list.begin #B57E26 bold
source.css entity.other.attribute-name.id — bold
source.css entity.name.tag #B5A726 bold
source.css support.function #B488E2 —
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
Dark+
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 } !` ;
}