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.activeBorder#0071CB
  • activityBar.background#E5E9EF
  • activityBar.foreground#3C4250
  • activityBar.inactiveForeground#959BA8
  • activityBarBadge.background#0071CB
  • activityBarBadge.foreground#F0F2F8
  • editor.background#F0F2F8
  • editor.findMatchBackground#D7991B66
  • editor.findMatchHighlightBackground#D7991B33
  • editor.foreground#3C4250
  • editor.inactiveSelectionBackground#BFC4CF66
  • editor.lineHighlightBackground#3C42500D
  • editor.selectionBackground#B2B7C299
  • editor.selectionHighlightBackground#BFC4CF55
  • editor.wordHighlightBackground#0071CB26
  • editor.wordHighlightStrongBackground#7B46C126
  • editorBracketMatch.background#0071CB26
  • editorBracketMatch.border#0071CB00
  • editorCursor.foreground#0071CB
  • editorError.foreground#BE3435
  • editorGroup.border#DBDFE7
  • editorGroupHeader.tabsBackground#E5E9EF
  • editorGutter.addedBackground#3A9D4C
  • editorGutter.background#E5E9EF
  • editorGutter.deletedBackground#BE3435
  • editorGutter.modifiedBackground#0071CB
  • editorIndentGuide.activeBackground1#B2B7C2
  • editorIndentGuide.background1#CDD2DB
  • editorInfo.foreground#0098B2
  • editorLineNumber.activeForeground#3C4250
  • editorLineNumber.foreground#959BA8
  • editorRuler.foreground#CDD2DB
  • editorWarning.foreground#D7991B
  • editorWhitespace.foreground#BFC4CF
  • focusBorder#0071CB
  • foreground#474D5B
  • gitDecoration.addedResourceForeground#3A9D4C
  • gitDecoration.deletedResourceForeground#BE3435
  • gitDecoration.modifiedResourceForeground#D7991B
  • gitDecoration.untrackedResourceForeground#0B8E87
  • list.activeSelectionBackground#CDD2DB
  • list.activeSelectionForeground#3C4250
  • list.highlightForeground#0071CB
  • list.hoverBackground#DBDFE7
  • list.inactiveSelectionBackground#DBDFE7
  • list.inactiveSelectionForeground#3C4250
  • panel.background#E5E9EF
  • panel.border#DBDFE7
  • panelTitle.activeForeground#3C4250
  • panelTitle.inactiveForeground#959BA8
  • selection.background#0071CB40
  • sideBar.background#E5E9EF
  • sideBar.border#DBDFE7
  • sideBar.foreground#474D5B
  • sideBarSectionHeader.background#F0F2F8
  • sideBarSectionHeader.foreground#3C4250
  • sideBarTitle.foreground#3C4250
  • statusBar.background#E5E9EF
  • statusBar.debuggingBackground#BB4759
  • statusBar.debuggingForeground#DBDFE7
  • statusBar.foreground#474D5B
  • statusBar.noFolderBackground#E5E9EF
  • tab.activeBackground#F0F2F8
  • tab.activeBorderTop#0071CB
  • tab.activeForeground#3C4250
  • tab.border#E5E9EF
  • tab.hoverBackground#CDD2DB
  • tab.inactiveBackground#E5E9EF
  • tab.inactiveForeground#959BA8
  • terminal.ansiBlack#474D5B
  • terminal.ansiBlue#0071CB
  • terminal.ansiBrightBlack#545B69
  • terminal.ansiBrightBlue#0098B2
  • terminal.ansiBrightCyan#0098B2
  • terminal.ansiBrightGreen#3A9D4C
  • terminal.ansiBrightMagenta#C85993
  • terminal.ansiBrightRed#BB4759
  • terminal.ansiBrightWhite#3C4250
  • terminal.ansiBrightYellow#D57700
  • terminal.ansiCyan#0B8E87
  • terminal.ansiGreen#3A9D4C
  • terminal.ansiMagenta#7B46C1
  • terminal.ansiRed#BE3435
  • terminal.ansiWhite#666C79
  • terminal.ansiYellow#D7991B
  • terminal.background#F0F2F8
  • terminal.foreground#474D5B
  • terminal.selectionBackground#B2B7C299
  • terminalCursor.foreground#0071CB
  • titleBar.activeBackground#E5E9EF
  • titleBar.activeForeground#3C4250
  • titleBar.inactiveBackground#E5E9EF
  • titleBar.inactiveForeground#7D8391

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#3C4250
comment, punctuation.definition.comment#808694italic
string, constant.other.symbol#3A9D4C
constant.character.escape#C85993
entity.name.function, support.function, meta.function-call#0071CB
keyword, storage#7B46C1bold
keyword.control#7B46C1bold
constant.numeric, constant.numeric.hex#D57700
constant.language, constant.language.boolean#D57700
variable, identifier, meta.definition.variable#3C4250
variable.parameter#BB4759
entity.name.type, support.type, entity.name.class, support.class#D7991B
entity.name.tag#0071CB
entity.other.attribute-name#D7991B
keyword.operator#0098B2
punctuation.separator, punctuation.terminator#989FAB
meta.decorator, punctuation.decorator, storage.type.annotation, entity.name.function.decorator#D57700
variable.other.constant, constant.other#D7991B
meta.object-literal.key, support.type.property-name#0B8E87
invalid, invalid.deprecated#BE3435
source.css.embedded, source.js.embedded#0098B2
entity.other.inherited-classunderline
markup.heading.1, heading.1.markdown entity.name.section#7B46C1bold
markup.heading.2, heading.2.markdown entity.name.section#0071CBbold
markup.heading.3, heading.3.markdown entity.name.section#0098B2bold
markup.heading.4, heading.4.markdown entity.name.section#0B8E87bold
markup.heading.5, heading.5.markdown entity.name.section#3A9D4Cbold
markup.heading.6, heading.6.markdown entity.name.section#D57700bold
markup.bold#D57700bold
markup.italic#D7991Bitalic
markup.strikethrough#808694strikethrough
markup.inline.raw, markup.fenced_code.block, markup.raw#0B8E87
markup.quote#545B69italic
markup.list, punctuation.definition.list.begin#0098B2
markup.underline.link, string.other.link, markup.link#0071CB
markup.underline.link.markdown, meta.link.inline.markdown markup.underline#0098B2underline
punctuation.definition.heading.markdown, punctuation.definition.bold.markdown, punctuation.definition.italic.markdown, punctuation.definition.quote.begin.markdown, punctuation.definition.markdown#B2B7C3
meta.separator.markdown#C6CBD4
support.type.property-name.json#0B8E87
entity.name.tag.yaml#0B8E87
string.unquoted.yaml#3A9D4C
entity.other.attribute-name.class.css#D7991B
entity.other.attribute-name.id.css#0071CB
support.type.property-name.css#0B8E87
entity.name.tag.html#0071CB
entity.other.attribute-name.html#D7991B
variable.other.normal.shell, variable.parameter.positional.shell#BB4759
support.function.builtin.shell#0071CB
markup.inserted#3A9D4C
markup.deleted#BE3435
markup.changed#D7991B