Skip to main content
Works for Me | 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.
actionBar.toggledBackground #383a49 activityBar.background #1e1e1e activityBarBadge.background #0e639c badge.background #0e639c checkbox.border #6B6B6B editor.background #121212 tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle markup.italic, emphasis — italic markup.bold, strong — bold markup.underline — underline markup.strikethrough — strikethrough keyword, storage.type, storage.modifier, keyword.operator.alignas, keyword.operator.alignof, keyword.operator.cast, keyword.operator.expression, keyword.operator.instanceof, keyword.operator.new, keyword.operator.sizeof, keyword.operator.ternary, keyword.operator.typeid, keyword.operator.wordlike, source.json constant.language, source.yaml constant.language, text.html entity.name.tag, text.html.markdown punctuation.definition.quote, text.html.markdown meta.link.inline, text.xml entity.name.tag, source.z80asm meta.preprocessor.flag.z80asm, source.css entity.name.tag, source.css support.constant, source.css support.function, source.java storage.type.primitive, source.makefile variable.language, source.makefile constant.other.placeholder, source.shell support.function.builtin, source.ts support.type.builtin, source.ts support.type.primitive, source.tsx support.type.builtin, source.tsx support.type.primitive
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}!`;
}
Works for Me — Works for Me
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+
editor.foreground
#d4d4d4
editor.inactiveSelectionBackground #3A3D41
editor.lineHighlightBackground #1e1e1e
editor.lineHighlightBorder #0000
editor.selectionHighlightBackground #ADD6FF26
editor.wordHighlightBackground #00a7cc60
editorError.background #f14c4c60
editorGroup.border #454545
editorGroupHeader.noTabsBackground #1e1e1e
editorGroupHeader.tabsBackground #1e1e1e
editorGutter.foldingControlForeground #d4d4d480
editorIndentGuide.activeBackground1 #707070
editorIndentGuide.background1 #404040
editorInlayHint.background #07314e
editorInlayHint.foreground #d4d4d4
editorLineNumber.activeForeground #d4d4d460
editorLineNumber.foreground #d4d4d420
editorRuler.foreground #d4d4d420
editorWarning.background #cca70060
editorWhitespace.foreground #d4d4d440
editorWidget.background #252526
editorWidget.resizeBorder #0e639c
input.placeholderForeground #A6A6A6
list.activeSelectionIconForeground #FFF
list.dropBackground #383B3D
listFilterWidget.background #252526
menu.background #252526
menu.border #454545
menu.foreground #CCCCCC
menu.selectionBackground #0078d4
menu.separatorBackground #454545
panel.background #1e1e1e
panel.border #454545
panelTitle.activeBorder #0098ff
ports.iconRunningProcessForeground #369432
quickInput.background #252526
sideBar.background #1e1e1e
sideBarSectionHeader.background #0000
sideBarSectionHeader.border #454545
sideBarTitle.foreground #BBBBBB
statusBar.background #0e639c
statusBar.debuggingBackground #cc6633
statusBar.focusBorder #0000
statusBar.foreground #ffffff
statusBar.noFolderBackground #68217a
statusBarItem.remoteBackground #16825d
statusBarItem.remoteForeground #FFF
tab.activeBackground #121212
tab.activeBorderTop #0098ff
tab.border #0000
tab.inactiveBackground #1e1e1e
tab.lastPinnedBorder #454545
tab.selectedBackground #222222
tab.selectedForeground #ffffffa0
tab.unfocusedActiveBorderTop #454545
terminal.ansiBlack #000000
terminal.ansiBlue #204dbe
terminal.ansiBrightBlack #808080
terminal.ansiBrightBlue #2f6aff
terminal.ansiBrightCyan #00e1f0
terminal.ansiBrightGreen #58ea51
terminal.ansiBrightMagenta #fc74ff
terminal.ansiBrightRed #ff3e30
terminal.ansiBrightWhite #ffffff
terminal.ansiBrightYellow #ffc944
terminal.ansiCyan #00a7b2
terminal.ansiGreen #3fae3a
terminal.ansiMagenta #bb54be
terminal.ansiRed #be2c21
terminal.ansiWhite #bebebe
terminal.ansiYellow #be9a4a
terminal.background #000000
terminal.border #0000
terminal.foreground #bebebe
terminal.inactiveSelectionBackground #3A3D41
terminal.selectionBackground #92a4fd
terminal.tab.activeBorder #0098ff
titleBar.activeBackground #1e1e1e
titleBar.inactiveBackground #1e1e1e
widget.border #303031 constant.language, variable.language #569cd6 italic
constant, string, text.html meta.attribute.id string, text.html meta.attribute.name string, text.html constant.character.entity.named, source.batchfile variable, source.css entity.other.attribute-name.class, source.css entity.other.attribute-name.class punctuation, source.makefile variable #b5cea8
keyword.other.unit, source.json string constant, source.c string constant.character.escape.c, source.c string constant.other.placeholder.c, source.cpp string constant.character.escape.cpp, source.js string.template punctuation.definition.template-expression, source.js string.template meta.template.expression, source.js string.regexp keyword.control, source.js string.regexp keyword.operator, source.js string.regexp punctuation.definition.character-class, source.js string.regexp punctuation.definition.group, source.makefile string.interpolated.makefile, source.makefile string.interpolated.makefile variable, source.ts string.template punctuation.definition.template-expression, source.ts string.template meta.template.expression, source.ts string.template meta.template.expression keyword.operator, source.ts string.template meta.template.expression keyword.operator.ternary, source.ts string.regexp keyword.control, source.ts string.regexp keyword.operator, source.ts string.regexp punctuation.definition.character-class, source.ts string.regexp punctuation.definition.group, source.tsx string.template punctuation.definition.template-expression, source.tsx string.template meta.template.expression, source.tsx string.template meta.template.expression keyword.operator, source.tsx string.template meta.template.expression keyword.operator.ternary, source.tsx string.regexp keyword.control, source.tsx string.regexp keyword.operator, source.tsx string.regexp punctuation.definition.character-class, source.tsx string.regexp punctuation.definition.group #ce9178
source.ts string.template meta.template.expression constant.language, source.ts string.template meta.template.expression variable.language, source.tsx string.template meta.template.expression constant.language, source.tsx string.template meta.template.expression variable.language #ce9178 italic
source.json punctuation.definition.array, source.yaml punctuation.definition.block.sequence, text.html.markdown heading, text.html.markdown punctuation.definition.heading.markdown, source.z80asm entity.name.function.z80asm, source.batchfile keyword.operator.conditional, source.makefile entity.name.function.target.makefile, source.shell punctuation.separator.statement.and, source.shell punctuation.separator.statement.or #f4f4f4
source.z80asm keyword.control, source.cpp entity.name.scope-resolution, source.cpp meta.template storage.type.template, source.cpp meta.template entity.name.type.template, source.cpp punctuation.section.angle-brackets.begin.template.definition.cpp, source.cpp punctuation.section.angle-brackets.end.template.definition.cpp, source.java meta.declaration.annotation, source.java meta.declaration.annotation constant.other.key.java, source.java punctuation.bracket.angle.java, source.java storage.type.annotation, source.java storage.type.generic, source.ts entity.name.type.module, source.ts meta.type.parameters, source.tsx entity.name.type.module, source.tsx meta.type.parameters #b4b4b4 italic
punctuation.terminator.statement, source.json punctuation.definition.dictionary, text.html string, text.html.markdown entity.name.tag, text.html.markdown fenced_code.block.language, text.html.markdown meta.image.inline, text.xml string, source.c punctuation.separator.pointer-access, source.c punctuation.separator.scope-resolution, source.cpp punctuation.separator.pointer-access, source.cpp punctuation.separator.scope-resolution, source.cpp storage.modifier.pointer.cpp, source.cpp storage.modifier.reference.cpp, source.java punctuation.terminator.java, source.ts keyword.operator.optional.ts, source.ts keyword.operator.spread.ts, source.ts keyword.operator.type.ts, source.ts punctuation.accessor.optional.ts, source.tsx meta.tag meta.tag.attributes entity.other.attribute-name, source.tsx meta.tag punctuation, source.tsx meta.tag keyword.operator.assignment, source.tsx keyword.operator.optional.tsx, source.tsx keyword.operator.spread.tsx, source.tsx keyword.operator.type.tsx, source.tsx punctuation.accessor.optional.tsx #b4b4b4
comment, source.batchfile keyword.command.rem #797981 italic
source.java keyword.other.documentation.javadoc, source.ts storage.type.class.jsdoc #797981 italic bold
punctuation.definition.string, source.json punctuation, source.yaml punctuation, source.yaml keyword, text.html constant.character.entity.named.nbsp, text.html meta.tag, text.html meta.tag.inline.br entity.name.tag, text.html punctuation, text.html.markdown string.other.link.description, text.xml meta.tag, text.xml punctuation, source.batchfile constant.character.escape, source.batchfile keyword.operator.at, source.c constant.character.escape.line-continuation.c, source.css punctuation, source.js meta.objectliteral.js punctuation.separator.comma.js, source.js meta.objectliteral.js punctuation.separator.key-value.js, source.makefile constant.character.escape.continuation.makefile #797981
keyword.operator, source.css keyword, source.java storage.modifier.package.java, source.java storage.modifier.import.java, source.java storage.type, source.json support.type.property-name.json, source.yaml entity.name.tag.yaml, source.js meta.object-literal.key.js string, text.html.markdown string.other.link.title, text.html.markdown punctuation.definition.list, source.css punctuation.definition.keyword, source.css punctuation.definition.entity #d4d4d4
source.diff meta.diff.header #f4f4f4
source.diff meta.diff.index, source.diff meta.diff.range #797981
source.diff meta.diff.header.from-file, source.diff meta.diff.header.to-file #569cd6
source.diff markup.inserted #b5cea8
source.diff markup.deleted #ce9178 strikethrough
source.diff markup.changed #569cd6
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 $
