Skip to main content
NoName UI | 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.background #21252b activityBar.dropBackground #21252b activityBar.foreground #d7dae0 activityBarBadge.background #3a424c activityBarBadge.foreground #d7dae0 button.background #1C2025 tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle meta.brace, punctuation.definition.array, punctuation.definition.binding-pattern, punctuation.definition.block, punctuation.definition.dictionary, punctuation.definition.string, punctuation.definition.tag, punctuation.section, punctuation.separator, punctuation.support, punctuation.terminator #abb2bf — support.type.property-name, support.variable, variable #D2D6db — keyword.var, keyword.const, keyword.type, keyword.struct, keyword.interface, keyword.function, keyword.other.definition, markup.inline.raw, punctuation.parenthesis.named.begin.regexp, punctuation.parenthesis.named.end.regexp, punctuation.parenthesis.non-capturing.begin.regexp, punctuation.parenthesis.non-capturing.end.regexp, storage.type, support.constant, support.type, support.class #61afef — constant, keyword.other.unit
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}!`;
}
NoName UI — NoName UI main*
0 1
Copilot
Ln 5, Col 12
Spaces: 2
UTF-8
LF
TypeScript
Dark+
button.foreground
#d7dae0
button.hoverBackground #1c202599
debugToolBar.background #1c2025
dropdown.background #1c2025
dropdown.border #1c2025
editor.background #21252b
editor.findMatchBackground #42557b
editor.findMatchHighlightBackground #314365
editor.foreground #abb2bf
editor.hoverHighlightBackground #1c2025
editor.lineHighlightBackground #2c313a
editor.selectionBackground #3e4451
editor.wordHighlightBackground #00000000
editor.wordHighlightBorder #61afef
editor.wordHighlightStrongBackground #00000000
editor.wordHighlightStrongBorder #d2d6db
editorBracketMatch.border #61afef
editorCursor.foreground #abb2bf
editorError.foreground #c62d42
editorGroup.background #21252B
editorGroup.border #21252b
editorGroup.dropBackground #1c2025
editorGroupHeader.tabsBackground #21252B
editorGroupHeader.tabsBorder #1c202500
editorHoverWidget.background #1c2025
editorHoverWidget.border #1c2025
editorIndentGuide.background #3e4451
editorInfo.foreground #1b659d
editorLineNumber.activeForeground #abb2bf
editorLineNumber.foreground #3e4451
editorOverviewRuler.border #1c202500
editorOverviewRuler.currentContentForeground #1c2025
editorOverviewRuler.errorForeground #c62d42
editorOverviewRuler.incomingContentForeground #1c2025
editorOverviewRuler.infoForeground #1b659d
editorOverviewRuler.warningForeground #d4ac0d
editorRuler.foreground #3e4451
editorSuggestWidget.background #21252B
editorSuggestWidget.border #1c2025
editorSuggestWidget.selectedBackground #2c313a
editorWarning.foreground #d4ac0d
editorWhitespace.foreground #3e4451
editorWidget.background #21252b
extensionButton.prominentBackground #1C2025
extensionButton.prominentForeground #d8dee9
extensionButton.prominentHoverBackground #1c202599
focusBorder #1c202500
input.background #1c2025
input.border #1c2025
inputOption.activeBorder #61afef
inputValidation.errorBackground #c62d42
inputValidation.errorBorder #c62d42
inputValidation.infoBackground #1b659d
inputValidation.infoBorder #1b659d
inputValidation.warningBackground #d4ac0d
inputValidation.warningBorder #d4ac0d
list.activeSelectionBackground #2c313abf
list.activeSelectionForeground #d7dae0
list.focusBackground #2c313a
list.hoverBackground #2c313a
list.inactiveSelectionBackground #2c313aa0
merge.border #1c202500
notificationCenterHeader.background #21252B
notifications.background #21252B
panel.background #21252B
panel.border #21252b
panelTitle.activeBorder #d7dae0
peekView.border #61afef
peekViewEditor.background #21252B
peekViewEditor.matchHighlightBackground #314365
peekViewResult.background #21252b
peekViewResult.matchHighlightBackground #314365
peekViewResult.selectionBackground #2c313a
peekViewResult.selectionForeground #abb2bf
peekViewTitle.background #1c2025
progressBar.background #d7dae0
scrollbar.shadow #1b1e2300
scrollbarSlider.activeBackground #d2d6db77
scrollbarSlider.background #3e445177
scrollbarSlider.hoverBackground #3e4451aa
sideBar.background #21252B
sideBar.border #21252b
sideBarSectionHeader.background #1c202500
statusBar.background #21252b
statusBar.border #21252b
statusBar.debuggingBackground #21252b
statusBar.foreground #9da5b4
statusBar.noFolderBackground #1c2025
statusBarItem.hoverBackground #2c313a
statusBarItem.prominentBackground #1c2025
tab.activeBackground #21252b
tab.activeBorder #d7dae0
tab.activeForeground #d7dae0
tab.border #1c202500
tab.inactiveBackground #21252b
tab.inactiveForeground #737c8c
terminal.ansiBlack #21252b
terminal.ansiBlue #4f8bbb
terminal.ansiBrightBlack #5c6370
terminal.ansiBrightBlue #008cff
terminal.ansiBrightCyan #00afc2
terminal.ansiBrightGreen #4aab05
terminal.ansiBrightMagenta #c300ff
terminal.ansiBrightRed #ff0015
terminal.ansiBrightWhite #d2d6db
terminal.ansiBrightYellow #ac7000
terminal.ansiCyan #40929d
terminal.ansiGreen #5b9135
terminal.ansiMagenta #9753ac
terminal.ansiRed #c95f68
terminal.ansiWhite #abb2bf
terminal.ansiYellow #a27a30
terminal.foreground #abb2bf
titleBar.activeBackground #21252b
titleBar.activeForeground #9da5b4
titleBar.inactiveBackground #21252b
titleBar.inactiveForeground #6b717d
welcomePage.buttonBackground #1C2025
welcomePage.buttonHoverBackground #1c202599
widget.shadow #1b1e23 string, markup.quote, markup.bold, markup.italic #98c379 —
string.quoted.docstring, meta.brace, punctuation.definition.arguments, punctuation.definition.array, punctuation.definition.begin.bracket, punctuation.definition.binding-pattern, punctuation.definition.block, punctuation.definition.bracket, punctuation.definition.dict, punctuation.definition.dictionary, punctuation.definition.end.bracket, punctuation.definition.list, punctuation.definition.parameters, punctuation.definition.string, punctuation.definition.tag, punctuation.other.comma, punctuation.other.period, punctuation.section, punctuation.separator, punctuation.support, punctuation.terminator #737c8c —
entity.name.class, entity.name.function, entity.name.type, entity.other.attribute-name, entity.other.inherited-class, markup.heading.setext, meta.function-call.generic, support.function, support.other.escape.special.regexp #d19a66 —
entity.name.tag, storage, support.function.builtin, variable.language #e5c07b —
entity.name.section, keyword, punctuation.definition.heading, punctuation.definition.keyword #d67655 —
markup.bold.markdown, punctuation.definition.bold.markdown — bold
comment, markup.italic.markdown, punctuation.definition.italic.markdown — italic
token.error-token #f44747 —
token.debug-token #b267e6 —
Open Editors fetchUser.ts index.ts README.md My-Project src components fetchUser.ts Button.tsx Modal.tsx hooks utils index.ts public package.json tsconfig.json README.md Outline fetchUser.ts
index.ts
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
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 $
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}!`;
}