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#252525
  • editor.background#FFFFFF
  • editor.findMatchBackground#BFDFFF90
  • editor.findMatchHighlightBackground#BFDFFF00
  • editor.findMatchHighlightBorder#00000080
  • editor.findRangeHighlightBackground#BFDFFF40
  • editor.foreground#000000
  • editor.inactiveSelectionBackground#BFDFFF90
  • editor.lineHighlightBackground#FFFFD0EE
  • editor.selectionBackground#BFDFFF
  • editor.selectionHighlightBackground#BFDFFF40
  • editorGroupHeader.tabsBackground#cccccc
  • editorLineNumber.foreground#999999
  • list.activeSelectionBackground#4B83CD
  • list.activeSelectionForeground#eee
  • list.activeSelectionIconForeground#fff
  • list.focusHighlightForeground#fff
  • sideBar.background#f0f0f0
  • statusBar.background#555555
  • statusBar.foreground#dddddd
  • tab.activeBackground#ffffff
  • tab.activeBorder#ffffff
  • tab.activeForeground#707070
  • tab.border#bbbbbb
  • tab.inactiveBackground#e0e0e0
  • tab.inactiveForeground#707070
  • titleBar.activeBackground#444444
  • titleBar.activeForeground#dddddd

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#008080
string#686868
constant.numeric#ff0000
support.function#804040
variable, meta.definition.variable entity.name.function#FF8000
entity.name.type.classbold
meta.function entity.name.function, meta.function support.functionbold
meta.function-call entity.name.function, meta.function-call support.function
variable.other.global, constant, support.constant, storage, keyword#0000ff
constant.regexp#4B83CD
keyword.operator, storage.modifier#008000
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php#A16A94
support.function.construct.php
punctuation.definition.tag, punctuation.definition.tag.begin, punctuation.definition.tag.end, entity.name.tag, entity.name.tag.block.any, entity.name.tag.inline.any#0000FF
entity.other.attribute-name#FF0000
entity.name.tag.css, entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#0000FF
meta.property-value.css keyword.other.unit, meta.at-rule.media.header.css keyword.other.unit#FF0000
meta.property-value.css support.constant, meta.property-value.css constant#FF8000
meta.property-value.css support.function
punctuation.support.type.property-name.begin.json, punctuation.support.type.property-name.end.json#686868
support.type.property-name.json#FF8000
string.quoted.double.json#686868
constant.numeric.json#FF0000
constant.language.json#0000FF
punctuation.definition.dictionary.begin.json, punctuation.definition.dictionary.end.json, punctuation.definition.array.begin.json, punctuation.definition.array.end.json#008000
keyword.other.sql, keyword.other.create.sql, keyword.other.DML.sql, keyword.other.DML.II.sql, keyword.other.postgres, keyword.other.sql.postgres, keyword.control.postgres#FF8000

Shiki preview

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

Loading...