Arkku

Name: Arkku
Author: Kimmo Kulovesi

Publisher: Kimmo KulovesiThemes in package: 2

Arkku's color theme for Visual Studio Code

GitHub

Color themes

VS Code preview

Full workbench mockup using this variant's colors and tokenColors.

Arkku — Arkku (light)

fetchUser.ts

index.ts

README.md

main*

Copilot

Ln 5, Col 12

Spaces: 2

UTF-8

TypeScript

Light+

colors

Workbench UI color keys from the theme JSON colors map.

activityBar.background#F0F0F0
activityBar.border#F0F0F0
activityBar.dropBackground#D0D0D0
activityBar.foreground#403f53
activityBarBadge.background#403f53
activityBarBadge.foreground#F0F0F0
badge.background#0066cc
badge.foreground#ffffff
button.background#265a85
button.foreground#F0F0F0
debugExceptionWidget.background#F0F0F0
debugExceptionWidget.border#d9d9d9
debugToolBar.background#f0f0f0
descriptionForeground#403f53
diffEditor.insertedTextBackground#d9ffde
diffEditor.removedTextBackground#d9f0ff
dropdown.background#F0F0F0
dropdown.border#d9d9d9
dropdown.foreground#403f53
editor.background#ffffff
editor.findMatchBackground#ffe07acc
editor.findMatchHighlightBackground#ffeaa066
editor.findRangeHighlightBackground#ffcf2f66
editor.foreground#222222
editor.hoverHighlightBackground#fffde355
editor.lineHighlightBackground#f8f8f8
editor.rangeHighlightBackground#fffde355
editor.selectionBackground#E3F8FF
editor.selectionHighlightBackground#339cec33
editor.wordHighlightBackground#339cec33
editor.wordHighlightStrongBackground#007dd659
editorBracketMatch.background#d9f1ff
editorBracketMatch.border#b7e5ff
editorCodeLens.foreground#cccccc
editorCursor.background#ffffffbb
editorCursor.foreground#0061b1
editorError.border#e22e28
editorError.foreground#e22e28
editorGroup.border#e0e0e0
editorGroup.emptyBackground#f0f0f0
editorGroupHeader.noTabsBackground#e0e0e0
editorGroupHeader.tabsBackground#e0e0e0
editorGroupHeader.tabsBorder#e0e0e0
editorGutter.addedBackground#ccffd3
editorGutter.background#f8f8f8
editorGutter.deletedBackground#ffa690
editorGutter.modifiedBackground#99d3fd
editorHoverWidget.background#F0F0F0
editorHoverWidget.border#d9d9d9
editorIndentGuide.background#eeeeee
editorLineNumber.activeForeground#666666
editorLineNumber.foreground#bbbbbb
editorMarkerNavigation.background#D0D0D0
editorMarkerNavigationError.background#f76e6e
editorMarkerNavigationWarning.background#daaa01
editorOverviewRuler.errorForeground#e22e28
editorOverviewRuler.warningForeground#f78c00
editorRuler.foreground#d9d9d9
editorSuggestWidget.background#F0F0F0
editorSuggestWidget.border#d9d9d9
editorSuggestWidget.foreground#403f53
editorSuggestWidget.highlightForeground#403f53
editorSuggestWidget.selectedBackground#d3e8f8
editorWarning.border#f78c00
editorWarning.foreground#f78c00
editorWhitespace.foreground#ddf0f0
editorWidget.background#F0F0F0
editorWidget.border#d9d9d9
errorForeground#403f53
extensionButton.prominentBackground#0281cc
extensionButton.prominentForeground#ffffff
focusBorder#93A1A1
foreground#222222
input.background#F0F0F0
input.border#d9d9d9
input.foreground#403f53
input.placeholderForeground#93A1A1
inputOption.activeBorder#49d086
inputValidation.errorBackground#f76e6e
inputValidation.errorBorder#e22e28
inputValidation.infoBackground#F0F0F0
inputValidation.infoBorder#D0D0D0
inputValidation.warningBackground#daaa01
inputValidation.warningBorder#f78c00
list.activeSelectionBackground#d3e8f8
list.activeSelectionForeground#222222
list.errorForeground#e22e28
list.focusBackground#d3e8f8
list.focusForeground#403f53
list.highlightForeground#403f53
list.hoverBackground#d3e8f8
list.hoverForeground#403f53
list.inactiveSelectionBackground#E0E7EA
list.inactiveSelectionForeground#403f53
list.warningForeground#f78c00
notificationCenter.border#CCCCCC
notificationCenterHeader.background#F0F0F0
notificationCenterHeader.foreground#403f53
notificationLink.foreground#0066cc
notifications.background#F0F0F0
notifications.border#CCCCCC
notifications.foreground#403f53
notificationToast.border#CCCCCC
panel.background#f0f0f0
panel.border#d9d9d9
peekView.border#d9d9d9
peekViewEditor.background#f0f0f0
peekViewEditor.matchHighlightBackground#ffe07a
peekViewEditorGutter.background#F6F6F6
peekViewResult.background#F0F0F0
peekViewResult.fileForeground#222222
peekViewResult.lineForeground#222222
peekViewResult.matchHighlightBackground#ffe07acc
peekViewResult.selectionBackground#d3e8f8
peekViewResult.selectionForeground#222222
peekViewTitle.background#f0f0f0
peekViewTitleDescription.foreground#222222
peekViewTitleLabel.foreground#222222
pickerGroup.border#d9d9d9
pickerGroup.foreground#222222
progressBar.background#0066cc
scrollbar.shadow#CCCCCC
selection.background#E3F8FF
sideBar.background#F0F0F0
sideBar.border#F0F0F0
sideBar.foreground#403f53
sideBarTitle.foreground#403f53
statusBar.background#0281ff
statusBar.border#0281ff
statusBar.debuggingBackground#0066cc
statusBar.debuggingForeground#ffffff
statusBar.foreground#ffffff
statusBar.noFolderBackground#0281ff
statusBar.noFolderForeground#ffffff
statusBarItem.remoteBackground#0281ff
statusBarItem.remoteForeground#eeffff
tab.activeBackground#fafafa
tab.activeForeground#000000
tab.activeModifiedBorder#2396d8
tab.border#e0e0e0
tab.inactiveBackground#f0f0f0
tab.inactiveForeground#403f53
tab.inactiveModifiedBorder#cccccc
tab.unfocusedActiveModifiedBorder#cccccc
tab.unfocusedInactiveModifiedBorder#cccccc
terminal.ansiBlack#000000
terminal.ansiBlue#000099
terminal.ansiBrightBlack#333333
terminal.ansiBrightBlue#0066cc
terminal.ansiBrightCyan#0099ff
terminal.ansiBrightGreen#006600
terminal.ansiBrightMagenta#9966cc
terminal.ansiBrightRed#993300
terminal.ansiBrightWhite#ffffff
terminal.ansiBrightYellow#ff9900
terminal.ansiCyan#6699cc
terminal.ansiGreen#003300
terminal.ansiMagenta#660066
terminal.ansiRed#660000
terminal.ansiWhite#bbbbbb
terminal.ansiYellow#cc6600
terminal.background#ffffff
terminal.foreground#000000
titleBar.activeBackground#F0F0F0
widget.shadow#d9d9d9

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment	#bbbbbb	—
quote	#555555	—
string	#884466	—
string.quoted.single	#dd6600	—
string.quoted.double.json	#555555	—
string.unquoted	#555555	—
meta.preprocessor, meta.preprocessor keyword, meta.preprocessor.include string.quoted, meta.embedded.frontmatter	#006600	—
string.regexp, string.regexp keyword.other, regexp-operator, string.regexp.characterclass punctuation.definition.string.begin, string.regexp.characterclass punctuation.definition.str	#dd9900	—
constant.numeric, constant.character.numeric, constant.character.escape	#0099AA	—
support.constant, support.constant.json, support.constant.math, constant.language	#0066cc	—
constant.character, constant.other, variable.other.constant	#0041A3	—
meta.function punctuation.separator.comma	#666666	—
variable, variable.parameter, support.other.variable	#003366	—
keyword, punctuation.accessor	#000000	bold
bitwise-operator, keyword.operator	#000000
keyword.control.case, meta.conditional keyword.control	#0066cc	bold
storage, meta.var.expr, meta.class meta.method.declaration meta.var.expr storage.type.js, storage.type.property.js, storage.type.property.ts, storage.type.property.tsx	#000000	—
storage.type, storage.modifier	#000000	bold
storage.type.function.arrow.js	—
entity.name.class, support.type, support.class, meta.class entity.name.type.class	#5C2699	—
entity.other.inherited-class	—	italic
entity.name.function, support.function, meta.tag.swift	#000000	—
entity.name.tag, punctuation.definition.tag, meta.tag	#63a35c	—
entity.name.tag.custom	#5ca388	—
entity.other.attribute-name, support.type.property-name	#795da3	—
invalid, invalid.illegal, invalid.deprecated	#e22e28	—
meta.separator	#bbbbbb	—
markup.heading	—	bold
markup.raw.block	#666666	—
meta.link, meta.image	#4183c4	—
markup.underline.link, constant.other.reference	—	italic
markup.list	#444444	—
bold, markup.bold	—	bold
italic, markup.italic	—	italic
bold italic, markup.bold markup.italic, italic bold, markup.italic markup.bold	—	bold italic

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}!`;
}