Skip to main content
Tarn Theme | Coding Theme
Home Theme VS Code Tarn Theme A dark theme inspired by a high-altitude glacial lake — deep navy, steel blue, teal functions, and light azure strings.
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 #67b8e3 activityBar.background #1e293b activityBar.border #4a5568 activityBar.foreground #94a3b8 activityBar.inactiveForeground #4a5568 activityBarBadge.background #67b8e3 tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle comment, punctuation.definition.comment #6b7a90 italic keyword, keyword.control, keyword.operator.new, keyword.other.using, storage.type, storage.modifier #67b8e3 bold keyword.operator, punctuation.operator #94a3b8 — string, string.quoted, string.template, string.interpolated #89ddff — constant.character.escape, string.escape
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
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}!`;
}
Tarn Theme — Tarn
3
Open Editors fetchUser.ts index.ts README.md fetchUser.ts
index.ts
README.md
src main*
0 1
Copilot
Ln 5, Col 12
Spaces: 2
UTF-8
LF
TypeScript
Dark+
activityBarBadge.foreground
#1e293b
badge.background #67b8e3
badge.foreground #1e293b
breadcrumb.activeSelectionForeground #67b8e3
breadcrumb.focusForeground #e2e8f0
breadcrumb.foreground #94a3b8
breadcrumbPicker.background #232e3d
button.background #67b8e3
button.foreground #1e293b
button.hoverBackground #85d4ff
button.secondaryBackground #2a3444
button.secondaryForeground #e2e8f0
button.secondaryHoverBackground #32404f
descriptionForeground #94a3b8
dropdown.background #232e3d
dropdown.border #4a5568
dropdown.foreground #e2e8f0
editor.background #1e293b
editor.foreground #e2e8f0
editor.inactiveSelectionBackground #264f7866
editor.lineHighlightBackground #2a344488
editor.selectionBackground #264f78dd
editor.wordHighlightBackground #264f7866
editor.wordHighlightStrongBackground #264f78aa
editorBracketMatch.background #32404f
editorBracketMatch.border #67b8e3
editorCursor.foreground #67b8e3
editorError.foreground #fc8181
editorGroupHeader.tabsBackground #2a3444
editorGroupHeader.tabsBorder #4a5568
editorGutter.background #1e293b
editorHint.foreground #68d391
editorHoverWidget.background #232e3d
editorHoverWidget.border #4a5568
editorIndentGuide.activeBackground1 #4a5568
editorIndentGuide.background1 #2a3444
editorInfo.foreground #67b8e3
editorLineNumber.activeForeground #94a3b8
editorLineNumber.foreground #4a5568
editorOverviewRuler.border #2a3444
editorRuler.foreground #2a3444
editorSuggestWidget.background #232e3d
editorSuggestWidget.border #4a5568
editorSuggestWidget.foreground #e2e8f0
editorSuggestWidget.highlightForeground #67b8e3
editorSuggestWidget.selectedBackground #32404f
editorWarning.foreground #f6ad55
editorWhitespace.foreground #2a3444
editorWidget.background #232e3d
editorWidget.border #4a5568
editorWidget.foreground #e2e8f0
errorForeground #fc8181
focusBorder #67b8e3
foreground #e2e8f0
gitDecoration.addedResourceForeground #68d391
gitDecoration.conflictingResourceForeground #f6ad55
gitDecoration.deletedResourceForeground #fc8181
gitDecoration.ignoredResourceForeground #4a5568
gitDecoration.modifiedResourceForeground #f6ad55
gitDecoration.untrackedResourceForeground #67b8e3
input.background #2a3444
input.border #4a5568
input.foreground #e2e8f0
input.placeholderForeground #4a5568
inputOption.activeBackground #32404f
inputOption.activeBorder #67b8e3
list.activeSelectionBackground #32404f
list.activeSelectionForeground #e2e8f0
list.focusBackground #32404f
list.focusForeground #e2e8f0
list.highlightForeground #67b8e3
list.hoverBackground #2a3444
list.inactiveSelectionBackground #2a3444
list.inactiveSelectionForeground #e2e8f0
menu.background #232e3d
menu.border #4a5568
menu.foreground #e2e8f0
menu.selectionBackground #32404f
menu.separatorBackground #4a5568
menubar.selectionBackground #2a3444
notificationLink.foreground #67b8e3
notifications.background #232e3d
notifications.border #4a5568
notifications.foreground #e2e8f0
panel.background #1e293b
panel.border #4a5568
panelTitle.activeBorder #67b8e3
panelTitle.activeForeground #e2e8f0
panelTitle.inactiveForeground #94a3b8
peekView.border #67b8e3
peekViewEditor.background #1e293b
peekViewEditor.matchHighlightBackground #264f78aa
peekViewResult.background #232e3d
peekViewResult.fileForeground #e2e8f0
peekViewResult.lineForeground #94a3b8
peekViewResult.matchHighlightBackground #264f78aa
peekViewResult.selectionBackground #264f78dd
peekViewResult.selectionForeground #e2e8f0
peekViewTitle.background #2a3444
peekViewTitleDescription.foreground #94a3b8
peekViewTitleLabel.foreground #e2e8f0
pickerGroup.border #4a5568
pickerGroup.foreground #67b8e3
progressBar.background #67b8e3
quickInput.background #232e3d
quickInput.foreground #e2e8f0
quickInputHighlightForeground #67b8e3
scrollbar.shadow #00000033
scrollbarSlider.activeBackground #4a5568
scrollbarSlider.background #4a556866
scrollbarSlider.hoverBackground #5a677888
selection.background #264f78
settings.checkboxBackground #232e3d
settings.checkboxBorder #4a5568
settings.dropdownBackground #232e3d
settings.dropdownBorder #4a5568
settings.headerForeground #e2e8f0
settings.modifiedItemIndicator #67b8e3
settings.numberInputBackground #232e3d
settings.numberInputBorder #4a5568
settings.textInputBackground #232e3d
settings.textInputBorder #4a5568
sideBar.background #1e293b
sideBar.border #4a5568
sideBar.foreground #e2e8f0
sideBarSectionHeader.background #232e3d
sideBarSectionHeader.border #4a5568
sideBarSectionHeader.foreground #94a3b8
sideBarTitle.foreground #94a3b8
statusBar.background #2a3444
statusBar.border #4a5568
statusBar.debuggingBackground #32404f
statusBar.foreground #e2e8f0
statusBar.noFolderBackground #2a3444
statusBarItem.activeBackground #32404f
statusBarItem.hoverBackground #2a3444
statusBarItem.remoteBackground #67b8e3
statusBarItem.remoteForeground #1e293b
tab.activeBackground #2a3444
tab.activeBorderTop #67b8e3
tab.activeForeground #e2e8f0
tab.border #4a5568
tab.hoverBackground #2a3444
tab.inactiveBackground #1e293b
tab.inactiveForeground #94a3b8
tab.unfocusedActiveBackground #2a3444
tab.unfocusedActiveForeground #94a3b8
terminal.ansiBlack #1e293b
terminal.ansiBlue #67b8e3
terminal.ansiBrightBlue #85d4ff
terminal.ansiBrightCyan #85d4ff
terminal.ansiBrightGreen #9ae6b4
terminal.ansiBrightMagenta #d6bcfa
terminal.ansiBrightRed #feb2b2
terminal.ansiBrightWhite #f7fafc
terminal.ansiBrightYellow #fbd38d
terminal.ansiCyan #67b8e3
terminal.ansiGreen #68d391
terminal.ansiMagenta #b794f4
terminal.ansiRed #fc8181
terminal.ansiWhite #e2e8f0
terminal.ansiYellow #f6ad55
terminal.background #1e293b
terminal.foreground #e2e8f0
terminalCursor.foreground #67b8e3
titleBar.activeBackground #2a3444
titleBar.activeForeground #e2e8f0
titleBar.border #4a5568
titleBar.inactiveBackground #2a3444
titleBar.inactiveForeground #94a3b8
widget.shadow #00000044 variable.interpolated, variable.other.interpolated, punctuation.definition.template-expression #67b8e3 —
constant.numeric, constant.other.color, constant.other.unit #de935f —
constant.language, constant.language.boolean, constant.language.null, constant.language.undefined #85d4ff —
entity.name.function, entity.name.function.call, support.function, meta.function-call entity.name.function #56d4d4 —
variable.parameter, meta.parameters variable #9cdcfe italic
variable, variable.other, variable.other.readwrite, variable.declaration #9cdcfe —
entity.name.function.selector, variable.other.property, support.type.property-name, meta.property-name #67e8f9 —
constant.other.symbol #85d4ff —
entity.name.type, entity.name.class, support.type, support.class #67b8e3 —
entity.name.type.annotation, support.type.primitive #67b8e3 italic
delimiter, punctuation.separator, punctuation.terminator, punctuation.definition.block, punctuation.section #94a3b8 —
delimiter.parenthesis, meta.brace, punctuation.definition.parameters, punctuation.definition.array #94a3b8 —
entity.name.tag, meta.tag #fc8181 —
entity.other.attribute-name #56d4d4 —
markup.heading, entity.name.section, punctuation.definition.heading #67b8e3 bold
markup.italic #e2e8f0 italic
markup.inline.raw, markup.raw.block #89ddff —
markup.underline.link, string.other.link, meta.link #67b8e3 —
markup.quote #94a3b8 italic
punctuation.definition.list.begin.markdown #67b8e3 —
invalid, invalid.deprecated #fc8181 —
fetchUser.ts Button.tsx Modal.tsx hooks utils index.ts public package.json tsconfig.json README.md Outline 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
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}!`;
}
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 $