Skip to main content
Coding Theme

Color themes

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.background#DDD6C1
  • activityBar.foreground#584c27
  • activityBarBadge.background#B58900
  • badge.background#B58900AA
  • button.background#AC9D57
  • debugExceptionWidget.background#DDD6C1
  • debugExceptionWidget.border#AB395B
  • debugToolBar.background#DDD6C1
  • dropdown.border#D3AF86
  • editor.background#ffffff
  • editor.hoverHighlightBackground#eae4e3CC
  • editor.lineHighlightBorder#FFFFFF
  • editorCursor.foreground#657B83
  • editorGroup.border#DDD6C1
  • editorGroup.dropBackground#DDD6C1AA
  • editorGroupHeader.tabsBackground#D9D2C2
  • editorHoverWidget.background#eae4e3
  • editorIndentGuide.activeBackground1#081E2580
  • editorLineNumber.activeForeground#000000
  • editorWhitespace.foreground#586E7580
  • editorWidget.background#EEE8D5
  • extensionButton.prominentBackground#b58900
  • extensionButton.prominentHoverBackground#584c27aa
  • focusBorder#b49471
  • input.background#DDD6C1
  • input.foreground#586E75
  • input.placeholderForeground#586E75AA
  • inputOption.activeBorder#D3AF86
  • list.activeSelectionBackground#DFCA88
  • list.activeSelectionForeground#6C6C6C
  • list.highlightForeground#B58900
  • list.hoverBackground#dc88df44
  • list.inactiveSelectionBackground#D1CBB8
  • notebook.cellEditorBackground#FFFFFF
  • panel.border#DDD6C1
  • ports.iconRunningProcessForeground#2AA19899
  • progressBar.background#B58900
  • quickInputList.focusBackground#DFCA8866
  • scrollbarSlider.activeBackground#B58900
  • scrollbarSlider.background#EEE8D5
  • scrollbarSlider.hoverBackground#EEE8D5
  • selection.background#94a1eb
  • statusBar.background#EEE8D5
  • statusBar.debuggingBackground#EEE8D5
  • statusBar.foreground#586E75
  • statusBar.noFolderBackground#EEE8D5
  • statusBarItem.prominentBackground#DDD6C1
  • statusBarItem.prominentHoverBackground#d413b499
  • statusBarItem.remoteBackground#AC9D57
  • tab.activeBackground#FDF6E3
  • tab.activeModifiedBorder#cb4b16
  • tab.border#DDD6C1
  • tab.inactiveBackground#D3CBB7
  • tab.inactiveForeground#586E75
  • tab.lastPinnedBorder#FDF6E3
  • terminal.ansiBlack#073642
  • terminal.ansiBlue#268bd2
  • terminal.ansiBrightBlack#002b36
  • terminal.ansiBrightBlue#839496
  • terminal.ansiBrightCyan#93a1a1
  • terminal.ansiBrightGreen#586e75
  • terminal.ansiBrightMagenta#6c71c4
  • terminal.ansiBrightRed#cb4b16
  • terminal.ansiBrightWhite#fdf6e3
  • terminal.ansiBrightYellow#657b83
  • terminal.ansiCyan#2aa198
  • terminal.ansiGreen#859900
  • terminal.ansiMagenta#d33682
  • terminal.ansiRed#dc322f
  • terminal.ansiWhite#eee8d5
  • terminal.ansiYellow#b58900
  • terminal.background#FFFFFF
  • titleBar.activeBackground#f7f3e8
  • titleBar.activeForeground#584c27
  • titleBar.inactiveBackground#EEE8D5
  • titleBar.inactiveForeground#586E75
  • walkThrough.embeddedEditorBackground#00000014

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#0530c4
constant.language, meta.preprocessor#0b0b0bbold
meta.embedded, source.groovy.embedded, string meta.image.inline.markdown, variable.legacy.builtin.python#657B83
comment#4595aeitalic
string#191919
string.regexp#DC322F
constant.numeric#0b0b0bbold
variable.language, variable.other#130a87
keyword#000000
storage#586E75bold
entity.name.class, entity.name.type, entity.name.namespace, entity.name.scope-resolution#CB4B16
punctuation.definition.variable#859900
punctuation.section.embedded.begin, punctuation.section.embedded.end#DC322F
support.function.construct, keyword.other.new#CB4B16
constant.character, constant.other#CB4B16
entity.other.inherited-class#6C71C4
variable.parameter
entity.name.tag#268BD2
punctuation.definition.tag#93A1A1
entity.other.attribute-name#93A1A1
support.function#0b0b0bbold
entity.name.function#2347cc
symbol.unrecognized#0530c4bold
variable.function.#0530c4bold
punctuation.separator.continuation#DC322F
support.constant, support.variable
support.type, support.class#859900
support.type.exception#CB4B16
support.other.variable
invalid#DC322F
meta.diff, meta.diff.header#268BD2italic
markup.deleted#DC322F
markup.changed#CB4B16
markup.inserted#859900
markup.quote#859900
markup.list#B58900
markup.bold, markup.italic#D33682
markup.boldbold
markup.italicitalic
markup.strikethroughstrikethrough
markup.inline.raw#2AA198
markup.heading#268BD2bold
markup.heading.setext#268BD2

Shiki preview

TypeScript sample highlighted with this variant's colors and tokenColors.

Loading...