Skip to main content
ikuma-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.activeBackground #31353a activityBar.activeBorder #ece4d4 activityBar.background #242629 activityBar.border #00000000 activityBar.foreground #ece4d4 activityBar.inactiveForeground #aba294 tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle comment, punctuation.definition.comment, string.comment #949ba7 italic punctuation, punctuation.definition.tag, punctuation.definition.typeparameters, meta.brace, delimiter #949ba7 — keyword, storage, storage.type, storage.modifier #e1cb99 — keyword.operator, keyword.operator.assignment, keyword.operator.relational, keyword.operator.type #b0b5be —
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}!`;
}
ikuma-theme — Ikuma Theme Dark main*
0 1
Copilot
Ln 5, Col 12
Spaces: 2
UTF-8
LF
TypeScript
Dark+
activityBarBadge.background
#63564a
activityBarBadge.foreground #b0b5be
badge.background #63564a
badge.foreground #b0b5be
breadcrumb.background #393e46
breadcrumb.focusForeground #b0b5be
breadcrumb.foreground #aba294
breadcrumbPicker.background #393e46
button.background #ad9f7d
button.foreground #393e46
button.hoverBackground #c2b491
chat.linesAddedForeground #59b57cc5
chat.linesRemovedForeground #c56565c7
diffEditor.insertedTextBackground #59b57c30
diffEditor.removedTextBackground #c5656530
dropdown.background #393e46
dropdown.border #00000000
dropdown.foreground #b0b5be
dropdown.listBackground #31353a
editor.background #393e46
editor.findMatchBackground #ad9f7d44
editor.findMatchHighlightBackground #ad9f7d22
editor.foldBackground #ad9f7d10
editor.foreground #b0b5be
editor.lineHighlightBackground #31353a
editor.selectionBackground #ad9f7d40
editor.selectionHighlightBackground #ad9f7d22
editor.wordHighlightBackground #ad9f7d22
editor.wordHighlightStrongBackground #ad9f7d33
editorBracketHighlight.foreground1 #949ba7
editorBracketHighlight.foreground2 #ac8c71
editorBracketHighlight.foreground3 #867b64
editorBracketHighlight.foreground4 #949ba7
editorBracketHighlight.foreground5 #ac8c71
editorBracketHighlight.foreground6 #867b64
editorBracketHighlight.unexpectedBracket.foreground #c56565
editorBracketMatch.background #ad9f7d40
editorBracketMatch.border #ad9f7d
editorCursor.foreground #ece4d4
editorError.foreground #c56565
editorGroup.border #00000000
editorGroupHeader.tabsBackground #31353a
editorGroupHeader.tabsBorder #00000000
editorGutter.addedBackground #59b57c
editorGutter.commentRangeForeground #aba294
editorGutter.deletedBackground #c56565
editorGutter.foldingControlForeground #aba294
editorGutter.modifiedBackground #ad9f7d
editorHint.foreground #59b57c
editorHoverWidget.background #31353a
editorHoverWidget.border #ad9f7d40
editorIndentGuide.activeBackground1 #867b6460
editorIndentGuide.background1 #867b6420
editorInfo.foreground #ad9f7d
editorInlayHint.background #31353a
editorInlayHint.foreground #949ba7
editorLineNumber.activeForeground #ece4d4
editorLineNumber.foreground #aba294
editorOverviewRuler.bracketMatchForeground #867b64
editorStickyScroll.background #31353a
editorStickyScroll.border #867b6440
editorStickyScroll.shadow #00000000
editorStickyScrollHover.background #31353a
editorSuggestWidget.background #31353a
editorSuggestWidget.border #ad9f7d40
editorWarning.foreground #ece4d4
editorWhitespace.foreground #867b6420
editorWidget.background #31353a
editorWidget.border #00000000
focusBorder #5c5346
foreground #b0b5be
gitDecoration.addedResourceForeground #59b57c
gitDecoration.conflictingResourceForeground #ece4d4
gitDecoration.deletedResourceForeground #c56565
gitDecoration.ignoredResourceForeground #aba29475
gitDecoration.modifiedResourceForeground #ad9f7d
gitDecoration.submoduleResourceForeground #aba294
gitDecoration.untrackedResourceForeground #59b5ac
input.background #454c58
input.border #00000000
input.foreground #b0b5be
input.placeholderForeground #aba294
list.activeSelectionBackground #453f39
list.activeSelectionForeground #ece4d4
list.focusBackground #31353a
list.highlightForeground #ad9f7d
list.hoverBackground #31353a
list.hoverForeground #b0b5be
list.inactiveSelectionBackground #453f3980
list.inactiveSelectionForeground #b0b5be
menu.background #393e46
menu.foreground #b0b5be
menu.separatorBackground #00000000
notifications.background #393e46
notifications.border #00000000
notifications.foreground #b0b5be
notificationsErrorIcon.foreground #c56565
notificationsInfoIcon.foreground #ad9f7d
notificationsWarningIcon.foreground #ece4d4
panel.background #393e46
panel.border #5c5346
panelTitle.activeBorder #ad9f7d
panelTitle.activeForeground #ece4d4
panelTitle.inactiveForeground #867b64
pickerGroup.border #00000000
pickerGroup.foreground #b0b5be
problemsErrorIcon.foreground #c56565
problemsInfoIcon.foreground #ad9f7d
problemsWarningIcon.foreground #ece4d4
quickInput.background #31353a
quickInput.foreground #ece4d4
quickInputList.focusBackground #5c5346
scrollbar.shadow #00000000
scrollbarSlider.activeBackground #867b64
scrollbarSlider.background #867b6440
scrollbarSlider.hoverBackground #867b6480
sideBar.background #31353a
sideBar.border #00000000
sideBar.foreground #ece4d4
sideBarSectionHeader.background #393e46
sideBarSectionHeader.border #00000000
sideBarSectionHeader.foreground #b0b5be
sideBarTitle.foreground #aba294
statusBar.background #242629
statusBar.border #00000000
statusBar.debuggingBackground #242629
statusBar.debuggingForeground #ece4d4
statusBar.foreground #ece4d4
statusBar.noFolderBackground #242629
tab.activeBackground #393e46
tab.activeBorderTop #ad9f7d
tab.activeForeground #b0b5be
tab.border #ad9f7d40
tab.hoverBackground #31353a
tab.inactiveBackground #393e46
tab.inactiveForeground #aba294
terminal.ansiBlack #242629
terminal.ansiBlue #6987b8
terminal.ansiBrightBlack #6c7079
terminal.ansiBrightBlue #8aa6d0
terminal.ansiBrightCyan #82d6cd
terminal.ansiBrightGreen #82ba92
terminal.ansiBrightMagenta #9771bd
terminal.ansiBrightRed #d48b70
terminal.ansiBrightWhite #cccfd5
terminal.ansiBrightYellow #e0cb96
terminal.ansiCyan #5fb5a8
terminal.ansiGreen #59b57c
terminal.ansiMagenta #c9699e
terminal.ansiRed #c56565
terminal.ansiWhite #b0b5be
terminal.ansiYellow #cdb57b
terminal.foreground #b0b5be
terminalCommandGuide.foreground #ad9f7d
terminalStickyScroll.background #31353a
terminalStickyScroll.border #31353a
terminalStickyScrollHover.background #31353a
textLink.activeForeground #ece4d4
textLink.foreground #ad9f7d
titleBar.activeBackground #242629
titleBar.activeForeground #ece4d4
titleBar.border #00000000
titleBar.inactiveBackground #242629
titleBar.inactiveForeground #aba294
tree.indentGuidesStroke #867b6440 string, constant.other.symbol, attribute.value
punctuation.definition.string #89a19577 —
constant.numeric, constant.language, constant.character, constant.character.escape, number #b8a099 —
constant.language.boolean #b8a099 —
entity.name.function, support.function, meta.function-call, variable.function #a8b891 —
entity.name.type, entity.name.class, support.type, support.class, support.class.component, type.identifier #a87d62 —
variable, identifier, variable.parameter #b0b5be —
variable.other.readwrite.alias, variable.other.enummember, constant, entity.name.constant, variable.language #b8a099 —
entity.name.tag, tag.html #e1cb99 —
entity.other.attribute-name, support.type.property-name, meta.object-literal.key, meta.property-name, entity.name.tag.yaml, entity.name.tag.toml, support.type.property-name.toml, attribute.name, property #b8aa8b —
source.regexp, string.regexp #59b5ac —
invalid, invalid.illegal #c56565 —
invalid.deprecated #c56565 italic
markup.heading, markup.heading entity.name #ad9f7d bold
markup.italic #b0b5be italic
markup.deleted, meta.diff.header.from-file, punctuation.definition.deleted #c56565 —
markup.inserted, meta.diff.header.to-file, punctuation.definition.inserted #59b57c —
markup.changed, punctuation.definition.changed #ece4d4 —
markup.underline.link.markdown, markup.underline.link.image.markdown #aba294 underline
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}!`;
}