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#dde0e8
  • activityBar.foreground#4a4d66
  • activityBarBadge.background#fc6008
  • activityBarBadge.foreground#f0f2f6
  • badge.background#fc6008
  • badge.foreground#f0f2f6
  • button.background#fc6008
  • button.foreground#f0f2f6
  • button.hoverBackground#e85800
  • dropdown.background#f0f2f6
  • dropdown.border#bdc2cc
  • dropdown.foreground#4a4d66
  • editor.background#f0f2f6
  • editor.foreground#4a4d66
  • editor.lineHighlightBackground#e8eaf0
  • editor.selectionBackground#bdc2cc
  • editor.selectionHighlightBackground#bdc2cc66
  • editorBracketMatch.background#bdc2cc66
  • editorBracketMatch.border#fc6008
  • editorCursor.foreground#fc6008
  • editorError.foreground#d00c36
  • editorGroupHeader.tabsBackground#dde0e8
  • editorHint.foreground#159096
  • editorIndentGuide.activeBackground1#adb2bc
  • editorIndentGuide.background1#cdd2dc
  • editorInfo.foreground#02a2e2
  • editorLineNumber.activeForeground#7084fa
  • editorLineNumber.foreground#9a9dac
  • editorWarning.foreground#dd8c1a
  • editorWhitespace.foreground#adb2bc
  • focusBorder#fc6008
  • gitDecoration.conflictingResourceForeground#d00c36
  • gitDecoration.deletedResourceForeground#d00c36
  • gitDecoration.ignoredResourceForeground#9a9dac
  • gitDecoration.modifiedResourceForeground#dd8c1a
  • gitDecoration.untrackedResourceForeground#3e9e28
  • input.background#f0f2f6
  • input.border#bdc2cc
  • input.foreground#4a4d66
  • input.placeholderForeground#8a8d9e
  • inputOption.activeBorder#fc6008
  • list.activeSelectionBackground#bdc2cc
  • list.activeSelectionForeground#4a4d66
  • list.focusBackground#bdc2cc
  • list.highlightForeground#fc6008
  • list.hoverBackground#cdd2dc
  • panel.background#e8eaf0
  • panel.border#bdc2cc
  • panelTitle.activeBorder#fc6008
  • panelTitle.activeForeground#4a4d66
  • panelTitle.inactiveForeground#8a8d9e
  • peekView.border#fc6008
  • peekViewEditor.background#e8eaf0
  • peekViewResult.background#dde0e8
  • peekViewTitle.background#dde0e8
  • scrollbarSlider.activeBackground#8a8d9e
  • scrollbarSlider.background#adb2bc88
  • scrollbarSlider.hoverBackground#9a9dacaa
  • sideBar.background#e8eaf0
  • sideBar.foreground#4a4d66
  • sideBarSectionHeader.background#dde0e8
  • sideBarTitle.foreground#4a4d66
  • statusBar.background#dde0e8
  • statusBar.foreground#4a4d66
  • statusBar.noFolderBackground#dde0e8
  • statusBarItem.hoverBackground#cdd2dc
  • tab.activeBackground#f0f2f6
  • tab.activeForeground#4a4d66
  • tab.border#dde0e8
  • tab.inactiveBackground#dde0e8
  • tab.inactiveForeground#8a8d9e
  • terminal.ansiBlack#f0f2f6
  • terminal.ansiBlue#1c64f2
  • terminal.ansiBrightBlack#adb2bc
  • terminal.ansiBrightBlue#1c64f2
  • terminal.ansiBrightCyan#159096
  • terminal.ansiBrightGreen#3e9e28
  • terminal.ansiBrightMagenta#8636ec
  • terminal.ansiBrightRed#d00c36
  • terminal.ansiBrightWhite#4a4d66
  • terminal.ansiBrightYellow#dd8c1a
  • terminal.ansiCyan#159096
  • terminal.ansiGreen#3e9e28
  • terminal.ansiMagenta#8636ec
  • terminal.ansiRed#d00c36
  • terminal.ansiWhite#4a4d66
  • terminal.ansiYellow#dd8c1a
  • terminal.background#f0f2f6
  • terminal.foreground#4a4d66
  • titleBar.activeBackground#dde0e8
  • titleBar.activeForeground#4a4d66
  • titleBar.inactiveBackground#e8eaf0

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#8a8d9eitalic
string, string.quoted#3e9e28
constant.numeric, constant.language, constant.character#fc6008
variable, variable.other#4a4d66
variable.language, variable.other.constant#d00c36
variable.parameter#e44250italic
keyword, storage.type, storage.modifier#8636ec
keyword.control#8636ec
keyword.operator#02a2e2
entity.name.function, support.function, meta.function-call#fc6008
entity.name.type, entity.name.class, support.type, support.class#dd8c1a
entity.name.tag#1c64f2
entity.other.attribute-name#dd8c1a
entity.other.inherited-class#159096
punctuation, meta.brace#8a8d9e
support.constant, constant.other#fc6008
meta.decorator, entity.name.decorator#fc6008
string.regexp#e874c8
constant.character.escape#e874c8
markup.heading#fc6008bold
markup.bold#d00c36bold
markup.italic#d00c36italic
markup.inline.raw#3e9e28
markup.quote#dd8c1aitalic
markup.list#159096
markup.inserted#3e9e28
markup.deleted#d00c36
markup.changed#dd8c1a
meta.diff.header#1c64f2