kodex

Name: kodex
Author: Henrik Hautakoski

Publisher: Henrik HautakoskiThemes in package: 2

Dark nice theme with smooth colors

GitHub

Color themes

VS Code preview

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

kodex — Kodex Arctic

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.activeBackground#8ac6f240
activityBar.background#1f2129
activityBar.foreground#8ac6f2
activityBar.inactiveForeground#f1f1f1
activityBarBadge.background#8ac6f2
activityBarBadge.foreground#000
badge.background#383a43
badge.foreground#f1f1f1
button.background#8ac6f2
button.foreground#000
button.secondaryBackground#383a43
button.secondaryForeground#f1f1f1
checkbox.background#30323b
checkbox.border#383a43
checkbox.foreground#8ac6f2
debugConsole.errorForeground#cc817f
debugConsole.infoForeground#8ac6f2
debugConsole.warningForeground#fc9
debugIcon.breakpointCurrentStackframeForeground#fc9
debugIcon.breakpointForeground#cc817f
debugIcon.continueForeground#7ccfaf
debugIcon.pauseForeground#8ac6f2
debugIcon.restartForeground#fc9
debugIcon.startForeground#7ccfaf
debugIcon.stepBackForeground#8ac6f2
debugIcon.stepIntoForeground#8ac6f2
debugIcon.stepOutForeground#8ac6f2
debugIcon.stopForeground#cc817f
debugTokenExpression.boolean#cc817f
debugTokenExpression.name#99c
debugTokenExpression.number#cc817f
debugTokenExpression.string#99c
debugTokenExpression.value#bebebe
debugToolBar.background#20222b
debugView.valueChangedHighlight#de935f
diffEditor.diagonalFill#8ac6f233
diffEditor.insertedLineBackground#7ccfaf4d
diffEditor.insertedTextBackground#7ccfaf66
diffEditor.removedLineBackground#cc817f4d
dropdown.background#30323b
dropdown.border#383a43
dropdown.listBackground#282a33
editor.background#282a33
editor.findMatchBackground#1f688f
editor.findMatchBorder#3d7ea7
editor.findMatchHighlightBackground#1f688f
editor.foreground#f1f1f1
editor.lineHighlightBackground#30323b
editor.selectionBackground#383a43
editor.selectionHighlightBorder#f1f1f1
editor.stackFrameHighlightBackground#de935f66
editorBracketHighlight.foreground1#f1f1f1
editorBracketHighlight.foreground2#f1f1f1
editorBracketHighlight.foreground3#f1f1f1
editorBracketMatch.background#62646e
editorBracketMatch.border#383a43
editorCursor.foreground#f1f1f1
editorGroupHeader.tabsBackground#20222b
editorGutter.addedBackground#7ccfaf
editorGutter.background#24262f
editorGutter.deletedBackground#cc817f
editorGutter.modifiedBackground#fc9
editorHoverWidget.background#30323b
editorHoverWidget.border#383a43
editorHoverWidget.foreground#f1f1f1
editorIndentGuide.activeBackground#62646e
editorIndentGuide.background#383a43
editorLineNumber.activeForeground#8ac6f2
editorLineNumber.foreground#527086
editorSuggestWidget.background#30323b
editorSuggestWidget.border#383a43
editorSuggestWidget.selectedBackground#383a43
editorWarning.foreground#fc9
editorWhitespace.foreground#f1f1f11a
editorWidget.background#20222b
focusBorder#383a43
foreground#f1f1f1
gitDecoration.addedResourceForeground#7ccfaf
gitDecoration.deletedResourceForeground#cc817f
gitDecoration.ignoredResourceForeground#8e8e8e
gitDecoration.modifiedResourceForeground#fc9
gitDecoration.untrackedResourceForeground#8ac6f2
input.background#30323b
input.border#383a43
input.foreground#f1f1f1
inputOption.activeBackground#8ac6f2
inputOption.activeBorder#00000000
inputOption.activeForeground#000
inputOption.hoverBackground#50525c
inputValidation.errorBackground#68282a
inputValidation.errorBorder#803e3e
inputValidation.errorForeground#cc817f
inputValidation.infoBackground#1f688f
inputValidation.infoBorder#3d7ea7
inputValidation.infoForeground#8ac6f2
inputValidation.warningBackground#de935f
inputValidation.warningBorder#a96533
inputValidation.warningForeground#fc9
list.activeSelectionBackground#383a43
list.activeSelectionForeground#f1f1f1
list.focusBackground#30323b
list.focusForeground#f1f1f1
list.highlightForeground#f1f1f1
list.hoverBackground#30323b
list.hoverForeground#f1f1f1
list.inactiveSelectionBackground#30323b
list.inactiveSelectionForeground#f1f1f1
list.warningForeground#fc9
menu.background#20222b
menu.foreground#f1f1f1
menu.selectionBackground#282a33
menu.separatorBackground#383a43
menubar.selectionBackground#282a33
menubar.selectionForeground#f1f1f1
minimapGutter.addedBackground#7ccfaf
minimapGutter.deletedBackground#cc817f
minimapGutter.modifiedBackground#fc9
notificationCenter.border#383a43
notificationCenterHeader.background#8ac6f2
notificationCenterHeader.foreground#f1f1f1
notifications.background#30323b
notifications.foreground#f1f1f1
notificationToast.border#383a43
panel.background#282a33
panel.border#383a43
panelTitle.activeBorder#8ac6f2
peekView.border#8ac6f2
peekViewEditor.background#30323b
peekViewEditor.matchHighlightBackground#50525c
peekViewEditorGutter.background#282a33
peekViewResult.background#30323b
peekViewTitle.background#8ac6f233
peekViewTitleDescription.foreground#bebebe
peekViewTitleLabel.foreground#f1f1f1
scrollbar.shadow#7d7f89
scrollbarSlider.activeBackground#50525cb3
scrollbarSlider.background#50525cb3
scrollbarSlider.hoverBackground#50525cb3
settings.focusedRowBackground#383a43
settings.modifiedItemIndicator#8ac6f2
sideBar.background#20222b
sideBar.foreground#f1f1f1
sideBarSectionHeader.background#1d1f27
sideBarSectionHeader.foreground#f1f1f1
statusBar.background#20222b
statusBar.debuggingBackground#de935f
statusBar.debuggingBorder#00000000
statusBar.debuggingForeground#000
statusBar.focusBorder#212934
statusBar.foreground#bebebe
statusBar.noFolderBackground#21252b
statusBarItem.hoverBackground#00000033
statusBarItem.prominentBackground#8ac6f2
statusBarItem.prominentForeground#000
statusBarItem.remoteBackground#8ac6f2
statusBarItem.remoteForeground#000
tab.activeBackground#30323b
tab.activeBorder#8ac6f2
tab.activeForeground#f1f1f1
tab.border#282a33
tab.hoverBackground#2e3039
tab.inactiveBackground#282a33
terminal.ansiBlack#000
terminal.ansiBlue#8ac6f2
terminal.ansiBrightBlack#000
terminal.ansiBrightBlue#8ac6f2
terminal.ansiBrightCyan#8abeb7
terminal.ansiBrightGreen#7ccfaf
terminal.ansiBrightMagenta#99c
terminal.ansiBrightRed#cc817f
terminal.ansiBrightWhite#f1f1f1
terminal.ansiBrightYellow#fc9
terminal.ansiCyan#8abeb7
terminal.ansiGreen#7ccfaf
terminal.ansiMagenta#99c
terminal.ansiRed#cc817f
terminal.ansiWhite#f1f1f1
terminal.ansiYellow#fc9
terminal.background#282a33
terminal.border#383a43
terminal.foreground#bebebe
terminal.selectionBackground#f1f1f140
testing.iconErrored#cc817f
testing.iconFailed#cc817f
testing.iconPassed#7ccfaf
testing.message.error.lineBackground#68282a
testing.message.info.lineBackground#1f688f
textBlockQuote.background#1f2129
textBlockQuote.border#383a43
textCodeBlock.background#1f2129
textLink.foreground#a9e4ff
textPreformat.foreground#8ac6f2
titleBar.activeBackground#20222b
titleBar.activeForeground#f1f1f1
titleBar.inactiveBackground#20222b
titleBar.inactiveForeground#bebebe
tree.indentGuidesStroke#f1f1f140

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
string, variable.parameter.url	#99c	—
constant.other.symbol, constant.other.key, markup.heading, markup.inserted.git_gutter, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js, punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php	#99c	—
constant.numeric, keyword.other.unit.hexadecimal.go, keyword.other.unit.octal.go	#cc817f	—
constant.character, constant.source.cmake	#cc817f	—
storage.type, meta.type, meta.return.type, entity.name.type, keyword.interface.go, keyword.channel.go, keyword.local.lua, keyword.blade	#8ac6f2	—
comment, punctuation.definition.comment	#cc817f	—
keyword, keyword.operator.type, keyword.operator.new, keyword.operator.expression, entity.name.namespace, entity.name.tag, punctuation.definition.evaluation.parens, storage.modifier, storage.type.class, storage.type.function, storage.type.interface, storage.type.type, storage.type.namespace, support.type.property-name, storage.type.ts, storage.type.js, storage.type.rust, storage.type.trait.php	#fc9	—
keyword.operator	#f1f1f1	—
variable, punctuation.definition.variable	#7ccfaf	—
invalid, invalid.illegal	#FF0000	underline
entity.name.type.class, entity.name.type.interface, entity.name.type.module, entity.name.type.trait.php	#f1f1f1	normal

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