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 #ebe6e2 activityBar.activeBorder #84661b activityBar.background #d9d3cc activityBar.border #00000000 activityBar.foreground #84661b activityBar.inactiveForeground #a39984 tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle comment, punctuation.definition.comment, string.comment #a0aabb italic punctuation, punctuation.definition.tag, punctuation.definition.typeparameters, meta.brace, delimiter #a0aabb — keyword, storage, storage.type, storage.modifier #ba7f27 — keyword.operator, keyword.operator.assignment, keyword.operator.relational, keyword.operator.type #686e7a —
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 Light main*
0 1
Copilot
Ln 5, Col 12
Spaces: 2
UTF-8
LF
TypeScript
Light+
activityBarBadge.background
#b8a888
activityBarBadge.foreground #686e7a
badge.background #b8a888
badge.foreground #686e7a
breadcrumb.background #efecea
breadcrumb.focusForeground #686e7a
breadcrumb.foreground #a39984
breadcrumbPicker.background #efecea
button.background #7a6a45
button.foreground #efecea
button.hoverBackground #8b7a52
chat.linesAddedForeground #2e8f53c5
chat.linesRemovedForeground #a04545c7
diffEditor.insertedTextBackground #2e8f5330
diffEditor.removedTextBackground #a0454530
dropdown.background #efecea
dropdown.border #00000000
dropdown.foreground #686e7a
dropdown.listBackground #ebe6e2
editor.background #efecea
editor.findMatchBackground #7a6a4544
editor.findMatchHighlightBackground #7a6a4522
editor.foldBackground #7a6a4510
editor.foreground #686e7a
editor.lineHighlightBackground #ebe6e2
editor.selectionBackground #7a6a4540
editor.selectionHighlightBackground #7a6a4522
editor.wordHighlightBackground #7a6a4522
editor.wordHighlightStrongBackground #7a6a4533
editorBracketHighlight.foreground1 #a0aabb
editorBracketHighlight.foreground2 #ac8c71
editorBracketHighlight.foreground3 #a89878
editorBracketHighlight.foreground4 #a0aabb
editorBracketHighlight.foreground5 #ac8c71
editorBracketHighlight.foreground6 #a89878
editorBracketHighlight.unexpectedBracket.foreground #a04545
editorBracketMatch.background #7a6a4540
editorBracketMatch.border #7a6a45
editorCursor.foreground #84661b
editorError.foreground #a04545
editorGroup.border #00000000
editorGroupHeader.tabsBackground #ebe6e2
editorGroupHeader.tabsBorder #00000000
editorGutter.addedBackground #2e8f53
editorGutter.commentRangeForeground #a39984
editorGutter.deletedBackground #a04545
editorGutter.foldingControlForeground #a39984
editorGutter.modifiedBackground #7a6a45
editorHint.foreground #2e8f53
editorHoverWidget.background #ebe6e2
editorHoverWidget.border #7a6a4540
editorIndentGuide.activeBackground1 #a8987860
editorIndentGuide.background1 #a8987820
editorInfo.foreground #7a6a45
editorInlayHint.background #ebe6e2
editorInlayHint.foreground #a0aabb
editorLineNumber.activeForeground #84661b
editorLineNumber.foreground #a39984
editorOverviewRuler.bracketMatchForeground #a89878
editorStickyScroll.background #ebe6e2
editorStickyScroll.border #a8987840
editorStickyScroll.shadow #00000000
editorStickyScrollHover.background #ebe6e2
editorSuggestWidget.background #ebe6e2
editorSuggestWidget.border #7a6a4540
editorWarning.foreground #84661b
editorWhitespace.foreground #a8987820
editorWidget.background #ebe6e2
editorWidget.border #00000000
focusBorder #c4b89c
foreground #686e7a
gitDecoration.addedResourceForeground #2e8f53
gitDecoration.conflictingResourceForeground #84661b
gitDecoration.deletedResourceForeground #a04545
gitDecoration.ignoredResourceForeground #a3998475
gitDecoration.modifiedResourceForeground #7a6a45
gitDecoration.submoduleResourceForeground #a39984
gitDecoration.untrackedResourceForeground #2e8a80
input.background #c1c9d1
input.border #00000000
input.foreground #686e7a
input.placeholderForeground #a39984
list.activeSelectionBackground #dcd0b8
list.activeSelectionForeground #84661b
list.focusBackground #ebe6e2
list.highlightForeground #7a6a45
list.hoverBackground #ebe6e2
list.hoverForeground #686e7a
list.inactiveSelectionBackground #dcd0b880
list.inactiveSelectionForeground #686e7a
menu.background #efecea
menu.foreground #686e7a
menu.separatorBackground #00000000
notifications.background #efecea
notifications.border #00000000
notifications.foreground #686e7a
notificationsErrorIcon.foreground #a04545
notificationsInfoIcon.foreground #7a6a45
notificationsWarningIcon.foreground #84661b
panel.background #efecea
panel.border #c4b89c
panelTitle.activeBorder #7a6a45
panelTitle.activeForeground #84661b
panelTitle.inactiveForeground #a89878
pickerGroup.border #00000000
pickerGroup.foreground #686e7a
problemsErrorIcon.foreground #a04545
problemsInfoIcon.foreground #7a6a45
problemsWarningIcon.foreground #84661b
quickInput.background #ebe6e2
quickInput.foreground #84661b
quickInputList.focusBackground #c4b89c
scrollbar.shadow #00000000
scrollbarSlider.activeBackground #a89878
scrollbarSlider.background #a8987840
scrollbarSlider.hoverBackground #a8987880
sideBar.background #ebe6e2
sideBar.border #00000000
sideBar.foreground #84661b
sideBarSectionHeader.background #efecea
sideBarSectionHeader.border #00000000
sideBarSectionHeader.foreground #686e7a
sideBarTitle.foreground #a39984
statusBar.background #d9d3cc
statusBar.border #00000000
statusBar.debuggingBackground #d9d3cc
statusBar.debuggingForeground #84661b
statusBar.foreground #84661b
statusBar.noFolderBackground #d9d3cc
tab.activeBackground #efecea
tab.activeBorderTop #7a6a45
tab.activeForeground #686e7a
tab.border #7a6a4540
tab.hoverBackground #ebe6e2
tab.inactiveBackground #efecea
tab.inactiveForeground #a39984
terminal.ansiBlack #d9d3cc
terminal.ansiBlue #36568a
terminal.ansiBrightBlack #888376
terminal.ansiBrightBlue #2c4670
terminal.ansiBrightCyan #1a5b54
terminal.ansiBrightGreen #1a6b3a
terminal.ansiBrightMagenta #5e3a8a
terminal.ansiBrightRed #b06548
terminal.ansiBrightWhite #383a3d
terminal.ansiBrightYellow #6e5a2a
terminal.ansiCyan #2c7a72
terminal.ansiGreen #2c7a4a
terminal.ansiMagenta #8a3a6a
terminal.ansiRed #8a3535
terminal.ansiWhite #686e7a
terminal.ansiYellow #8a6f30
terminal.foreground #686e7a
terminalCommandGuide.foreground #7a6a45
terminalStickyScroll.background #ebe6e2
terminalStickyScroll.border #ebe6e2
terminalStickyScrollHover.background #ebe6e2
textLink.activeForeground #84661b
textLink.foreground #7a6a45
titleBar.activeBackground #d9d3cc
titleBar.activeForeground #84661b
titleBar.border #00000000
titleBar.inactiveBackground #d9d3cc
titleBar.inactiveForeground #a39984
tree.indentGuidesStroke #a8987840 string, constant.other.symbol, attribute.value
punctuation.definition.string #87a89777 —
constant.numeric, constant.language, constant.character, constant.character.escape, number #b35c46 —
constant.language.boolean #b35c46 —
entity.name.function, support.function, meta.function-call, variable.function #6d9331 —
entity.name.type, entity.name.class, support.type, support.class, support.class.component, type.identifier #ad592f96 —
variable, identifier, variable.parameter #686e7a —
variable.other.readwrite.alias, variable.other.enummember, constant, entity.name.constant, variable.language #b35c46 —
entity.name.tag, tag.html #ba7f27 —
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 #b5a78e —
source.regexp, string.regexp #2e8a80 —
invalid, invalid.illegal #a04545 —
invalid.deprecated #a04545 italic
markup.heading, markup.heading entity.name #7a6a45 bold
markup.italic #686e7a italic
markup.deleted, meta.diff.header.from-file, punctuation.definition.deleted #a04545 —
markup.inserted, meta.diff.header.to-file, punctuation.definition.inserted #2e8f53 —
markup.changed, punctuation.definition.changed #84661b —
markup.underline.link.markdown, markup.underline.link.image.markdown #a39984 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}!`;
}