Skip to main content
Coding Theme

VS Code preview

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

Loading...

colors

Workbench UI color keys from the theme JSON colors map.

  • activityBar.activeBorder#E1E2E4
  • activityBar.activeFocusBorder#1B1C1E
  • activityBar.background#29293d
  • activityBar.border#1B1C1E
  • activityBar.inactiveForeground#6D7179
  • activityBarBadge.background#E1E2E4
  • activityBarBadge.foreground#29293d
  • badge.background#515182
  • badge.foreground#E1E2E4
  • button.foreground#E1E2E4
  • button.secondaryBackground#515182
  • button.secondaryForeground#E1E2E4
  • descriptionForeground#C4C6CA
  • diffEditor.insertedTextBorder#aee8a3
  • diffEditor.removedTextBorder#ff8e9a
  • dropdown.background#29293d
  • dropdown.foreground#E1E2E4
  • editor.background#29293d
  • editor.foldBackground#29293d
  • editor.foreground#f3f5fa
  • editor.inactiveSelectionBackground#74aeff26
  • editor.lineHighlightBackground#46476999
  • editor.selectionBackground#74aeff40
  • editor.wordHighlightBackground#58667E
  • editorBracketMatch.border#C8DCFF
  • editorCursor.foreground#C8DCFF
  • editorError.foreground#FF5C6C
  • editorGroup.border#ffffff00
  • editorGroup.dropBackground#1B1C1E80
  • editorGroup.dropIntoPromptBackground#1B1C1E80
  • editorGroup.dropIntoPromptBorder#1B1C1E80
  • editorGroup.dropIntoPromptForeground#1B1C1E80
  • editorGutter.addedBackground#aee8a3
  • editorGutter.deletedBackground#ff8e9a
  • editorGutter.modifiedBackground#bea1f7
  • editorIndentGuide.background#505359
  • editorLineNumber.activeForeground#E1E2E4
  • editorLineNumber.foreground#6D7179
  • editorOverviewRuler.border#ffffff00
  • editorWidget.background#29293d
  • editorWidget.foreground#E1E2E4
  • editorWidget.resizeBorder#515182
  • errorForeground#FF5C6C
  • focusBorder#58667E
  • foreground#E1E2E4
  • gitDecoration.addedResourceForeground#aee8a3
  • gitDecoration.conflictingResourceForeground#DBB300
  • gitDecoration.deletedResourceForeground#ff8e9a
  • gitDecoration.ignoredResourceForeground#E1E2E4
  • gitDecoration.modifiedResourceForeground#bea1f7
  • gitDecoration.submoduleResourceForeground#E1E2E4
  • gitDecoration.untrackedResourceForeground#bea1f7
  • icon.foreground#C4C6CA
  • input.background#29293d
  • input.foreground#E1E2E4
  • input.placeholderForeground#6D7179
  • list.activeSelectionForeground#E1E2E4
  • list.focusBackground#1B1C1E
  • list.focusForeground#E1E2E4
  • list.focusOutline#505359
  • list.hoverBackground#4647691F
  • list.hoverForeground#E1E2E4
  • list.inactiveSelectionForeground#E1E2E4
  • notificationCenterHeader.foreground#C4C6CA
  • notificationLink.foreground#DBB300
  • notifications.border#29293d
  • notificationsErrorIcon.foreground#ff8e9a
  • notificationsInfoIcon.foreground#DBB300
  • notificationsWarningIcon.foreground#DBB300
  • notificationToast.#29293d
  • notificationToast.border#35373B
  • panel.background#29293d
  • panel.border#1B1C1E
  • panelTitle.activeBorder#E1E2E4
  • panelTitle.activeForeground#E1E2E4
  • panelTitle.inactiveForeground#6D7179
  • quickInput.background#29293d
  • quickInput.foreground#E1E2E4
  • quickInputList.focusBackground#464769
  • quickInputList.focusForeground#E1E2E4
  • scrollbar.shadow#29293d
  • settings.modifiedItemIndicator#bea1f7
  • sideBar.background#29293d
  • sideBar.border#1B1C1E
  • sideBar.dropBackground#DBB300
  • sideBar.foreground#E1E2E4
  • sideBarSectionHeader.background#29293d
  • sideBarSectionHeader.border#29293d
  • sideBarSectionHeader.foreground#6D7179
  • sideBarTitle.foreground#6D7179
  • statusBar.background#29293d
  • statusBar.border#29293d
  • statusBar.debuggingBackground#DBB300
  • statusBar.debuggingForeground#29293d
  • statusBar.foreground#6D7179
  • statusBar.noFolderBackground#29293d
  • terminal.ansiBlue#74aeff
  • terminal.ansiBrightBlack#58667E
  • terminal.ansiBrightBlue#317ace
  • terminal.ansiBrightCyan#5CF1FF
  • terminal.ansiBrightGreen#73d783
  • terminal.ansiBrightMagenta#9D72F3
  • terminal.ansiBrightRed#FF5C6C
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#FFDA6B
  • terminal.ansiCyan#8cf6ff
  • terminal.ansiGreen#aee8a3
  • terminal.ansiMagenta#bea1f7
  • terminal.ansiRed#ff8e9a
  • terminal.ansiWhite#E1E2E4
  • terminal.ansiYellow#DBB300
  • terminal.foreground#E1E2E4
  • terminal.selectionBackground#74aeff26
  • terminalCursor.background#515182
  • terminalCursor.foreground#E1E2E4
  • titleBar.activeBackground#29293d
  • titleBar.activeForeground#E1E2E4
  • titleBar.inactiveBackground#29293d
  • titleBar.inactiveForeground#E1E2E4

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
support.type#ffadeb
keyword.control#bec7e3
storage.type.function#bec7e3
storage.type.class.jsdoc#a6cebe
storage.type.interface#ffadeb
storage.type.type#bec7e3
storage.type#C4C6CA
support.type.property-name#bec7e3
support.type.property-name.json#f3f5fa
constant.language.json#ff9a7b
string#aee8a3
constant.numeric#ff9a7b
constant.language.null, constant.language.undefined#ff9a7b
constant.language.boolean#ff9a7b
comment#a6cebe
entity.other.attribute-name#C4C6CA
variable.language#C4C6CA
punctuation.definition.heading.markdown, punctuation.definition.quote.begin.markdown, punctuation.definition.bold.markdown, punctuation.definition.italic.markdown, punctuation.definition.list.begin.markdown, punctuation.definition.markdown#C4C6CA
koha-theme-vscode by mskri - VS Code Theme