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 (dark)

fetchUser.ts

index.ts

README.md

main*

Copilot

Ln 5, Col 12

Spaces: 2

UTF-8

TypeScript

Dark+

colors

Workbench UI color keys from the theme JSON colors map.

activityBar.background#282c34
activityBar.border#202930
activityBar.dropBackground#080811
activityBar.foreground#d7dae0
activityBarBadge.background#1748aa
activityBarBadge.foreground#f8fafd
badge.background#282c34
badge.foreground#ffffff
button.background#404754
button.foreground#F0F0FF
debugExceptionWidget.background#202033
debugExceptionWidget.border#222238
debugToolBar.background#1d0955
debugToolBar.border#1d0955
descriptionForeground#99999a
diffEditor.insertedTextBackground#00809b33
dropdown.background#21252b
dropdown.border#21252b
dropdown.foreground#aaaaaa
editor.background#080811
editor.findMatchBackground#42559b
editor.findMatchBorder#ffffff11
editor.findMatchHighlightBackground#6199ff2f
editor.findRangeHighlightBackground#6199ff44
editor.foreground#aaabac
editor.hoverHighlightBackground#22bbff44
editor.lineHighlightBackground#2c313c
editor.rangeHighlightBackground#22bbff44
editor.selectionBackground#67769660
editor.selectionHighlightBackground#ccffff18
editor.selectionHighlightBorder#9999aa
editor.wordHighlightBackground#d2e0ff2f
editor.wordHighlightBorder#7f848e
editor.wordHighlightStrongBackground#abb2bf26
editor.wordHighlightStrongBorder#7f848e
editorBracketMatch.background#515a6b
editorBracketMatch.border#515a6b
editorCodeLens.foreground#333333
editorCursor.background#f1fcffb9
editorCursor.foreground#00bb48
editorError.border#660000
editorError.foreground#8d0700
editorGroup.border#181a1f
editorGroup.emptyBackground#151522
editorGroupHeader.noTabsBackground#151522
editorGroupHeader.tabsBackground#151522
editorGroupHeader.tabsBorder#151522
editorGutter.addedBackground#0c1d04
editorGutter.background#151522
editorGutter.deletedBackground#270505
editorGutter.modifiedBackground#0c1430
editorHoverWidget.background#21252b
editorHoverWidget.border#181a1f
editorIndentGuide.activeBackground#333539
editorIndentGuide.background#141422
editorLineNumber.activeForeground#666666
editorLineNumber.foreground#444444
editorMarkerNavigation.background#21252b
editorMarkerNavigationError.background#9e2a2a
editorMarkerNavigationWarning.background#b96300
editorOverviewRuler.errorForeground#b4201b
editorOverviewRuler.warningForeground#d36308
editorRuler.foreground#abb2bf26
editorSuggestWidget.background#21252b
editorSuggestWidget.border#181a1f
editorSuggestWidget.foreground#99999a
editorSuggestWidget.highlightForeground#bbbbbc
editorSuggestWidget.selectedBackground#2c313a
editorWarning.border#883600
editorWarning.foreground#c55f00
editorWhitespace.foreground#220066
editorWidget.background#21252b
editorWidget.border#444444
errorForeground#cc0000
extensionButton.prominentBackground#0249cc
extensionButton.prominentForeground#ffffff
focusBorder#464646
foreground#aaaaaa
input.background#1d1f23
input.border#1d2025
input.foreground#cccccd
input.placeholderForeground#66666a
inputOption.activeBorder#ffffff40
list.activeSelectionBackground#2c313a
list.activeSelectionForeground#d7dae0
list.errorForeground#af2b43
list.focusBackground#383e4a
list.focusForeground#ffffff
list.highlightForeground#c5c5c5
list.hoverBackground#292d35
list.hoverForeground#3bb6be
list.inactiveSelectionBackground#2c313a
list.inactiveSelectionForeground#d7dae0
list.warningForeground#9e5f24
menu.foreground#c8c8c8
minimap.findMatchHighlight#306ba7
minimap.selectionHighlight#003399
panel.background#191925
panel.border#222229
peekView.border#282828
peekViewEditor.background#1b1d23
peekViewEditor.matchHighlightBackground#29244b
peekViewEditorGutter.background#222427
peekViewResult.background#22262b
peekViewResult.fileForeground#999999
peekViewResult.lineForeground#777777
peekViewResult.matchHighlightBackground#6199ff35
peekViewResult.selectionBackground#0e337c
peekViewTitle.background#222427
peekViewTitleDescription.foreground#777777
peekViewTitleLabel.foreground#cccccc
pickerGroup.border#333333
pickerGroup.foreground#dddddf
progressBar.background#0066cc
scrollbar.shadow#000003
scrollbarSlider.activeBackground#747d9180
scrollbarSlider.background#4e566660
scrollbarSlider.hoverBackground#5a637580
selection.background#003399
sideBar.background#21252b
sideBar.border#21262d
sideBar.foreground#bbbbbb
sideBarSectionHeader.background#282c34
sideBarTitle.foreground#dddddf
statusBar.background#090a55
statusBar.border#090a55
statusBar.debuggingBackground#1d0955
statusBar.debuggingBorder#400f49
statusBar.debuggingForeground#ddddee
statusBar.foreground#ddddee
statusBar.noFolderBackground#090a55
statusBar.noFolderForeground#ddddee
statusBarItem.hoverBackground#090a55
statusBarItem.remoteBackground#090a55
statusBarItem.remoteForeground#eeffff
tab.activeBackground#282c34
tab.activeForeground#dcdcdc
tab.activeModifiedBorder#333537
tab.border#181a1f
tab.hoverBackground#323842
tab.inactiveBackground#21252b
tab.inactiveForeground#666669
tab.inactiveModifiedBorder#22262d
tab.unfocusedActiveModifiedBorder#333537
tab.unfocusedHoverBackground#323842
tab.unfocusedInactiveModifiedBorder#22262d
terminal.ansiBlack#000000
terminal.ansiBlue#0033cc
terminal.ansiBrightBlack#333333
terminal.ansiBrightBlue#0099ff
terminal.ansiBrightCyan#00ccff
terminal.ansiBrightGreen#00cc33
terminal.ansiBrightMagenta#cc33ff
terminal.ansiBrightRed#ff6633
terminal.ansiBrightWhite#ffffff
terminal.ansiBrightYellow#ff9900
terminal.ansiCyan#6699cc
terminal.ansiGreen#009900
terminal.ansiMagenta#aa00aa
terminal.ansiRed#cc0000
terminal.ansiWhite#bbbbbb
terminal.ansiYellow#cc6600
terminal.background#080811
terminal.foreground#aaaaaa
textLink.foreground#61afef
titleBar.activeBackground#282c34
titleBar.activeForeground#ffffff
titleBar.inactiveBackground#21252b
titleBar.inactiveForeground#6b717d
widget.shadow#000003

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment	#666666	—
quote	#888888	—
string	#cc99cc	—
string.quoted.single	#cc88bb	—
string.quoted.double.json	#888888	—
string.unquoted	#888888	—
meta.preprocessor, meta.preprocessor keyword, meta.preprocessor.include string.quoted, meta.embedded.frontmatter	#00aa33	—
string.regexp, string.regexp keyword.other, regexp-operator, string.regexp.characterclass punctuation.definition.string.begin, string.regexp.characterclass punctuation.definition.str	#dd9900	—
constant, support.constant, support.constant.json, support.constant.math, constant.language	#00aadd	—
constant.character, constant.other, variable.other.constant	#00bbdd	—
constant.numeric, constant.character.numeric, constant.character.escape	#00bbdd	—
meta.function punctuation.separator.comma	#888888	—
variable, variable.parameter, support.other.variable	#33aacc	—
keyword, punctuation.accessor	#f0f0ff	bold
bitwise-operator, keyword.operator	#ffffff
keyword.control.case, meta.conditional keyword.control	#33cc99	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	#ffffff	—
storage.type, storage.modifier	#f0f0f0	bold
storage.type.function.arrow.js	—
entity.name.class, support.type, support.class, meta.class entity.name.type.class	#aaaabb	—
entity.other.inherited-class	—	italic
entity.name.function, support.function, meta.tag.swift	#f0f0f0	—
entity.name.tag, punctuation.definition.tag, meta.tag	#99ccaa	—
entity.name.tag.custom	#aabbbb	—
entity.other.attribute-name, support.type.property-name	#bbaabb	—
invalid, invalid.illegal, invalid.deprecated	#ee1133	—
meta.separator	#444444	—
markup.heading	—	bold
markup.raw.block	#888888	—
meta.link, meta.image	#99bbff	—
markup.underline.link, constant.other.reference	—	italic
markup.list	#999999	—
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}!`;
}