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.background#0747A6
  • activityBar.foreground#EBECF0
  • button.background#00875A
  • button.foreground#DFE1E6
  • button.hoverBackground#006644
  • dropdown.background#EBECF0
  • dropdown.foreground#2b2b2b
  • editor.background#EBECF0
  • editor.findMatchBackground#F1C232
  • editor.findMatchHighlightBackground#cadef2
  • editor.foreground#172b4d
  • editor.lineHighlightBorder#C1C7D0
  • editor.selectionBackground#cadef2
  • editorBracketMatch.background#cadef2
  • editorBracketMatch.border#0747A6
  • editorCursor.foreground#172b4d
  • editorGroupHeader.tabsBackground#C1C7D0
  • editorHoverWidget.background#EBECF0
  • editorHoverWidget.border#0747A6
  • editorLineNumber.activeForeground#BF2600
  • editorLineNumber.foreground#0747A6
  • editorSuggestWidget.background#EBECF0
  • editorSuggestWidget.foreground#172b4d
  • editorSuggestWidget.selectedBackground#DFE1E6
  • extensionButton.prominentBackground#00875A
  • extensionButton.prominentForeground#EBECF0
  • focusBorder#00000000
  • foreground#172b4d
  • gitDecoration.addedResourceForeground#36B37E
  • gitDecoration.conflictingResourceForeground#FF8F73
  • gitDecoration.deletedResourceForeground#DE350B
  • gitDecoration.modifiedResourceForeground#0065FF
  • input.background#2b2b2b
  • input.foreground#EBECF0
  • input.placeholderForeground#888
  • list.activeSelectionBackground#cadef2
  • list.activeSelectionForeground#0052cc
  • list.dropBackground#00875A
  • list.focusBackground#DFE1E6
  • list.focusForeground#172b4d
  • list.hoverBackground#EBECF0
  • list.hoverForeground#172b4d
  • list.inactiveSelectionBackground#cadef2
  • list.inactiveSelectionForeground#0052CC
  • menu.foreground#EBECF0
  • panel.background#EBECF0
  • panel.dropBackground#00875A
  • panelTitle.activeBorder#172b4d
  • panelTitle.activeForeground#172b4d
  • panelTitle.inactiveForeground#172b4d
  • sideBar.background#F4F5F7
  • sideBar.border#C1C7D0
  • sideBar.dropBackground#00875A
  • sideBar.foreground#42526E
  • sideBarSectionHeader.background#C1C7D0
  • sideBarSectionHeader.foreground#172b4d
  • sideBarTitle.foreground#42526E
  • statusBar.background#333
  • tab.activeBorder#EBECF0
  • tab.activeForeground#172b4d
  • tab.border#A5ADBA
  • tab.inactiveBackground#C1C7D0
  • tab.inactiveForeground#2a2a2a
  • terminal.ansiBlack#242728
  • terminal.ansiBlue#878487
  • terminal.ansiBrightBlack#636667
  • terminal.ansiBrightBlue#a2a5a6
  • terminal.ansiBrightCyan#b2b2b5
  • terminal.ansiBrightGreen#fff28f
  • terminal.ansiBrightMagenta#aaaaad
  • terminal.ansiBrightRed#fff69f
  • terminal.ansiBrightWhite#e1e2de
  • terminal.ansiBrightYellow#feee7f
  • terminal.ansiCyan#757372
  • terminal.ansiGreen#d3c858
  • terminal.ansiMagenta#878584
  • terminal.ansiRed#ebe055
  • terminal.ansiWhite#d0d0ca
  • terminal.ansiYellow#f6fa2a
  • terminal.background#242728
  • terminal.foreground#cccccc
  • terminal.selectionBackground#00000030
  • terminalCursor.foreground#fff
  • titleBar.activeBackground#333
  • titleBar.activeForeground#fff

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#172b4d
comment, punctuation.definition.comment#8993A4
keyword, entity.other.attribute-name, entity.other.attribute-name, doctype, punctuation.definition.keyword.css, entity.other.attribute-name.class, entity.other.attribute-name.id, entity.name.tag.style.html#0052CC
storage, variable.other.class, punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php, entity.name.tag, punctuation.definition.tag, entity.name.tag, punctuation.definition.tag#0052CC
invalid.deprecated#BF2600
invalid.illegal#BF2600
keyword.operator#000bold italic
keyword, storage#000bold italic
storage.type, support.type#000bold italic
constant.language, support.constant, variable.language#172b4dbold
variable, support.variable#172b4d
entity.name.function, support.function#0052CC
entity.name.type, entity.other.inherited-class, support.class, variable.other.readwrite.alias#0052CCbold
entity.name.exception#BF2600
entity.name.sectionbold
constant.numeric, constant.character, constant#5E6C84
string#091E42
constant.character.escape#091E42
string.regexp#AB6526
constant.other.symbol#091E42
punctuation#172b4d
support.type.property-name.jsonnone
meta.tag.sgml.doctype, meta.tag.sgml.doctype string, meta.tag.sgml.doctype entity.name.tag, meta.tag.sgml punctuation.definition.tag.html#8993A4
meta.tag, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html#0052CC
entity.name.tag#0052CCbold italic
meta.tag entity.other.attribute-name, entity.other.attribute-name.html#000bold
constant.character.entity, punctuation.definition.entity#AB6526
meta.selector, meta.selector entity, meta.selector entity punctuation, entity.name.tag.css, entity.other.attribute-name.class#0052CCbold
meta.property-name, support.type.property-name.css#000none
meta.property-value, meta.property-value constant.other, support.constant.property-value.css#172b4dnone
keyword.other.important
meta.diff.range, meta.diff.index, meta.separator#434343
meta.diff.header.from-file#434343
meta.diff.header.to-file#434343