Skip to main content
CodingTheme

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#3e3722
  • activityBar.dropBackground#2a2411
  • activityBar.foreground#d8cca7
  • activityBarBadge.background#ffd34a
  • badge.background#ffd34aab
  • button.background#a89953
  • debugExceptionWidget.background#3e3722
  • debugExceptionWidget.border#c65476
  • debugToolBar.background#3e3722
  • dropdown.background#2a2411
  • dropdown.border#79552c
  • editor.background#1c1502
  • editor.lineHighlightBackground#2a2411
  • editor.selectionBackground#2a2411
  • editor.selectionHighlightBackground#2a2411
  • editorCursor.foreground#7c929a
  • editorGroup.background#0d0900
  • editorGroup.border#3e3722
  • editorGroup.dropBackground#3e3722ab
  • editorGroupHeader.tabsBackground#3d3626
  • editorHoverWidget.background#4f4733
  • editorIndentGuide.activeBackground#4f4733
  • editorIndentGuide.background#2c2612
  • editorLineNumber.activeForeground#999999
  • editorLineNumber.foreground#333333
  • editorWhitespace.foreground#8aa0a780
  • editorWidget.background#2a2411
  • extensionButton.prominentBackground#ffd34a
  • extensionButton.prominentHoverBackground#d8cca7ab
  • focusBorder#79552c
  • input.background#3e3722
  • input.foreground#8aa0a7
  • input.placeholderForeground#8aa0a7ab
  • inputOption.activeBorder#79552c
  • list.activeSelectionBackground#776220
  • list.activeSelectionForeground#939393
  • list.focusBackground#77622066
  • list.highlightForeground#ffd34a
  • list.hoverBackground#77622045
  • list.inactiveSelectionBackground#47412e
  • notification.background#877f66
  • panel.border#3e3722
  • peekView.border#ffd34a
  • peekViewEditor.background#0d0900
  • peekViewEditor.matchHighlightBackground#8855bb40
  • peekViewResult.background#2a2411
  • peekViewTitle.background#2a2411
  • pickerGroup.border#5ed5cc99
  • pickerGroup.foreground#5ed5cc99
  • progressBar.background#ffd34a
  • selection.background#4f4733
  • sideBar.background#2a2411
  • sideBarTitle.foreground#8aa0a7
  • statusBar.background#2a2411
  • statusBar.debuggingBackground#2a2411
  • statusBar.foreground#8aa0a7
  • statusBar.noFolderBackground#2a2411
  • statusBarItem.prominentBackground#3e3722
  • statusBarItem.prominentHoverBackground#3e372299
  • tab.activeBackground#1c1502
  • tab.border#3e3722
  • tab.inactiveBackground#48402c
  • tab.inactiveForeground#8aa0a7
  • terminal.ansiBlack#bdecf8
  • terminal.ansiBlue#2d92d9
  • terminal.ansiBrightBlack#8aa0a7
  • terminal.ansiBrightBlue#697a7c
  • terminal.ansiBrightCyan#5e6c6c
  • terminal.ansiBrightGreen#8aa0a7
  • terminal.ansiBrightMagenta#3b4093
  • terminal.ansiBrightRed#e96934
  • terminal.ansiBrightWhite#777777
  • terminal.ansiBrightYellow#7c929a
  • terminal.ansiCyan#5ed5cc
  • terminal.ansiGreen#ebff66
  • terminal.ansiMagenta#c92c78
  • terminal.ansiRed#d02623
  • terminal.ansiWhite#888888
  • terminal.ansiYellow#ffd34a
  • titleBar.activeBackground#2a2411

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#666666italic
stringitalic
string, constant.language.boolean.false, constant.language.boolean.true, constant.numeric, string.regexp#988FD6
keyword.other.debugger, support.function.console.js, support.class.console.js#fe2c2d
constant.numeric#cccccc
variable.language, variable.other#cccccc
keyword#999999italic
storage#999999italic
entity.name.class, entity.name.type, entity.name.function, punctuation.definition.variable#cccccc
punctuation.section.embedded.begin, punctuation.section.embedded.end#fe2c2d
constant.language, meta.preprocessor#999999
support.function.construct, keyword.other.new#fe2c2d
constant.character, constant.other#e96934
entity.other.inherited-class
variable.parameter
entity.name.tag#cccccc
punctuation.definition.tag.begin, punctuation.definition.tag.end#999999
entity.other.attribute-name#999999
support.function#cccccc
punctuation.separator.continuation#fe2c2d
support.constant
support.type, support.class#cccccc
support.type.exception#e96934
support.other.variable
invalid
meta.diff, meta.diff.header#152212italic
markup.deleted#d02623
markup.changed#e96934
markup.inserted#6eded3
markup.quote#ccccccitalic
markup.list#cccccc
markup.bold#999999bold
markup.italic#999999italic
markup.inline.raw#5ed5cc
markup.heading#ccccccbold
markup.heading.setext#cccccc

Shiki preview

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

Loading...