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.

  • editor.background#ffffff
  • editor.foreground#272727
  • editor.inactiveSelectionBackground#ededed
  • editor.lineHighlightBackground#00bbff15
  • editor.selectionBackground#c2e8ff
  • editor.selectionHighlightBackground#ffffff00
  • editor.selectionHighlightBorder#222222
  • editorCursor.foreground#00bbff
  • editorLineNumber.activeForeground#333
  • editorLineNumber.foreground#aaa
  • editorSuggestWidget.focusHighlightForeground#6700b9
  • editorSuggestWidget.highlightForeground#7653c1
  • editorSuggestWidget.selectedBackground#b8e9ff
  • editorSuggestWidget.selectedForeground#7653c1
  • editorWhitespace.foreground#e0e0e0
  • list.focusHighlightForeground#fff
  • quickInputList.focusBackground#3976ff
  • quickInputList.focusForeground#fff
  • selection.background#c2e8ff
  • terminal.ansiBlack#222222
  • terminal.ansiBlue#0099d0
  • terminal.ansiBrightBlack#222222
  • terminal.ansiBrightBlue#0099d0
  • terminal.ansiBrightCyan#00a6b2
  • terminal.ansiBrightGreen#5b9d4e
  • terminal.ansiBrightMagenta#66008d
  • terminal.ansiBrightRed#e45024
  • terminal.ansiBrightWhite#777777
  • terminal.ansiBrightYellow#f9ae02
  • terminal.ansiCyan#00a6b2
  • terminal.ansiGreen#5b9d4e
  • terminal.ansiMagenta#66008d
  • terminal.ansiRed#e45024
  • terminal.ansiWhite#777777
  • terminal.ansiYellow#f9ae02
  • terminal.foreground#222222
  • terminal.selectionBackground#c1ddff
  • terminalCursor.foreground#1998e0

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
source.ruby punctuation.separator.key-value#4c8fc7
markup.inserted.diff, markup.inserted.git-commit, punctuation.definition.inserted.diff, punctuation.definition.to-file.diff, meta.diff.header.to-file#61862f
markup.deleted.diff, punctuation.definition.deleted.diff, meta.diff.header.from-file, punctuation.definition.from-file.diff, markup.deleted.git-commit#d4420dc2
meta.diff.header.git, meta.diff.range, punctuation.definition.range.diff#4c8fc7
meta.diff.index.git, markup.changed.git-commit#bc670f
comment, comment punctuation#adadad
comment.block.preprocessor#adadad
comment.documentation, comment.block.documentation#bc670f
invalid.deprecateditalic underline
keyword.operator#626fc9
keyword, storage#61862f
storage.type, support.type#6700b9
constant.language, support.constant, variable.language#7653c1
variable, support.variable, meta.at-rule.include.scss, punctuation.definition.variable.less#4c8fc7
entity.name.function, support.function, entity#61862f
entity.name.type, entity.other.inherited-class, support.class#3a1d72
entity.name.exception#f93232
entity.name.section
constant.numeric, constant#7653c1
constant.character, string, meta.attribute-selector.scss#bc670f
string punctuation#e69a4c
constant.character.escapebold
string.regexp#699d36
markup.italicitalic
markup.error#f9f2ce
markup.output, markup.raw#7f7f7f
markup.prompt#555555
markup.headingbold
markup.boldbold
markup.traceback#f93232
markup.underlineunderline
meta.tag.sgml.doctype#7f7f7f
entity.name.tag#2f6f9f
meta.tag string punctuation#5fafef
punctuation.definition.tag#4f9fcf
entity.other.attribute-name#4c8fc7
meta.tag string.quoted, meta.tag string.quoted constant.character.entity#d44950
text.pug meta.tag string.quoted#bc670f
entity.name.tag.pug#61862f
entity.other.attribute-name.tag.pug#2f6f9f
entity.name.function.pug#9c27b0
entity.other.attribute-name.class.pug#4f9fcf
text.pug variable.other.readwrite.js, variable.control.import.include.pug#268bd2
string.comment.buffered.block.pug#777
meta.property-name, support.type.property-name#d4430d
meta.selector, meta.selector entity, meta.selector entity punctuation#3a77bf
entity.other.attribute-name, entity.other.attribute-name.parent-selector-suffix.css punctuation.definition.entity.css#4f9fcf
constant.other.color.rgb-value.hex.css, constant.other.color.rgb-value.hex.css punctuation.definition.constant.css#43a202
entity.name.tag.css, entity.name.tag.less#2f6f9f
meta.property-value constant.numeric, meta.property-value constant, meta.property-value keyword, keyword.other.unit.px.css, keyword.other.unit.s.css, constant.numeric.css, meta.definition.variable.scss keyword.other.unit.percentage.css, constant.numeric.less, constant.other.color.rgb-value.less punctuation.definition.constant.less#43a202
entity.other.attribute-name.class.css punctuation.definition.entity.css, entity.other.attribute-name.class.less punctuation.definition.entity.less#4c8fc7
entity.other.attribute-name.pseudo-element.css, entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.less, entity.other.attribute-name.pseudo-class.less#4c8fc7
punctuation.definition.entity.css, punctuation.definition.entity.less#4c8fc7
support.function.misc.css, support.function.misc.scss, support.function.transform.css, support.function.transform.less, support.function.gradient.css, support.function.gradient.less, entity.name.function.scss, support.function.color.less#61862f
punctuation.definition.keyword.css, punctuation.definition.keyword.scss, punctuation.definition.keyword.less#61862f
keyword.other.important.css, keyword.other.important.scss, keyword.other.important.less, keyword.other.important.less punctuation.separator.less#d33682
meta.at-rule.extend.scss, meta.at-rule.extend.scss support.constant.mathematical-symbols.scss#4f9fcf
source.css.scss entity.other.attribute-name.placeholder.css punctuation.definition.entity.css#4f9fcf
meta.function-call.less#7653c1
keyword.other.pseudo-class.less#7653c1
meta.embedded.line#272727