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#0063a5
  • activityBarBadge.background#007ACC
  • button.background#2B3C5D
  • debugExceptionWidget.border#AB395B
  • diffEditor.insertedTextBackground#31958A55
  • diffEditor.removedTextBackground#892F4688
  • editor.background#d8d8d8
  • editor.findMatchBackground#FFFF00
  • editor.findMatchBorder#3bfdea
  • editor.findMatchHighlightBackground#eeee44
  • editor.findMatchHighlightBorder#00000030
  • editor.foreground#302f2f
  • editor.inactiveSelectionBackground#E5EBF1
  • editor.lineHighlightBackground#ffe19b
  • editor.selectionBackground#FFFF00
  • editor.selectionHighlightBackground#caca58
  • editorCursor.foreground#ff0000
  • editorGroup.border#2b2b4a
  • editorGroup.dropBackground#25375daa
  • editorGroupHeader.tabsBackground#ECECEC
  • editorHoverWidget.background#ffe19b
  • editorHoverWidget.border#34aa57
  • editorIndentGuide.activeBackground#747272
  • editorIndentGuide.background#c7c7c7
  • editorLineNumber.foreground#A0A0A0
  • editorLink.activeForeground#34aa57
  • editorSuggestWidget.background#F3F3F3
  • editorWhitespace.foreground#103050
  • editorWidget.background#ffe19b
  • extensionButton.prominentBackground#5f8b3b
  • extensionButton.prominentHoverBackground#5f8b3bbb
  • focusBorder#0063A5
  • input.placeholderForeground#767676
  • inputOption.activeBorder#1D4A87
  • inputValidation.errorBackground#A22D44
  • inputValidation.errorBorder#AB395B
  • inputValidation.infoBorder#384078
  • inputValidation.warningBackground#5B7E7A
  • inputValidation.warningBorder#5B7E7A
  • list.activeSelectionBackground#0063A5
  • list.activeSelectionForeground#ffffff
  • list.dropBackground#041D52
  • list.focusBackground#a8aab8
  • list.highlightForeground#0063a5
  • list.hoverBackground#E8E8E8
  • list.inactiveSelectionBackground#CCCEDB
  • notebook.cellBorderColor#E8E8E8
  • panel.background#eeeeee
  • peekViewEditor.background#EBD8B0
  • peekViewEditor.matchHighlightBackground#eeee33
  • peekViewResult.background#EBD8B0
  • peekViewResult.matchHighlightBackground#eeee44
  • pickerGroup.border#596F99
  • pickerGroup.foreground#596F99
  • progressBar.background#0063a5
  • settings.numberInputBorder#CECECE
  • settings.textInputBorder#CECECE
  • sideBarSectionHeader.background#0000
  • sideBarSectionHeader.border#61616130
  • sideBarTitle.foreground#6F6F6F
  • statusBar.background#0063a5
  • statusBar.debuggingBackground#10192c
  • statusBar.noFolderBackground#0063a5
  • statusBarItem.errorBackground#c72e0f
  • statusBarItem.prominentBackground#0063a5
  • statusBarItem.prominentHoverBackground#0063a5dd
  • statusBarItem.remoteForeground#FFF
  • tab.lastPinnedBorder#61616130
  • terminal.ansiBlack#111111
  • terminal.ansiBlue#bbdaff
  • terminal.ansiBrightBlack#333333
  • terminal.ansiBrightBlue#80baff
  • terminal.ansiBrightCyan#78ffff
  • terminal.ansiBrightGreen#b8f171
  • terminal.ansiBrightMagenta#d778ff
  • terminal.ansiBrightRed#ff7882
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#ffe580
  • terminal.ansiCyan#99ffff
  • terminal.ansiGreen#d1f1a9
  • terminal.ansiMagenta#ebbbff
  • terminal.ansiRed#ff9da4
  • terminal.ansiWhite#cccccc
  • terminal.ansiYellow#ffeead
  • terminal.background#5a5242
  • terminal.foreground#CCCCCC

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
entity.name, support.type, support.class, support.orther.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types#ff0000
function, entity.name.function, variable.function, support.function, keyword.other.special-method#0000ff
entity.name.function.call#0000ff
support.method#0000ff
meta.function entity.name.function
meta.embedded, source.groovy.embedded#000000ff
emphasisitalic
constant.other.php, variable.other.constant, constant.other.property, entity.name.constant#ab9df2
variable.language.arguments#64f070
strongbold
meta.diff.header#000080
constant.language#0000ff
constant.numeric, variable.other.enummember, keyword.operator.plus.exponent, keyword.operator.minus.exponent#098658
constant.regexp#811f3f
entity.name.tag#800000
entity.name.selector#800000
entity.other.attribute-name#ff0000
entity.other.attribute-name.class.css, entity.other.attribute-name.class.mixin.css, entity.other.attribute-name.id.css, entity.other.attribute-name.parent-selector.css, entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css, source.css.less entity.other.attribute-name.id, entity.other.attribute-name.scss#800000
invalid#cd3131
markup.underlineunderline
markup.bold#000080bold
markup.heading#800000bold
markup.italicitalic
markup.inserted#098658
markup.deleted#a31515
markup.changed#0451a5
punctuation.definition.quote.begin.markdown, punctuation.definition.list.begin.markdown#0451a5
markup.inline.raw#800000
punctuation.definition.tag#800000
meta.preprocessor, entity.name.function.preprocessor#0000ff
meta.preprocessor.string#a31515
meta.preprocessor.numeric#098658
meta.structure.dictionary.key.python#0451a5
storage, storage.type, storage.modifier#0000ff
keyword, keyword.control#0066CC
storage.modifier, keyword.operator.noexcept#ff00ff
constant.numeric, constant.language, support.constant, constant.character, constant.escape#FF9900
string.comment.buffered.block.pug, string.quoted.pug, string.interpolated.pug, string.unquoted.plain.in.yaml, string.unquoted.plain.out.yaml, string.unquoted.block.yaml, string.quoted.single.yaml, string.quoted.double.xml, string.quoted.single.xml, string.unquoted.cdata.xml, string.quoted.double.html, string.quoted.single.html, string.unquoted.html, string.quoted.single.handlebars, string.quoted.double.handlebars#0000ff
string.regexp#811f3f
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded#0000ff
meta.template.expression#000000
support.constant.property-value, support.constant.font-name, support.constant.media-type, support.constant.media, constant.other.color.rgb-value, constant.other.rgb-value, support.constant.color#0451a5
support.type.vendored.property-name, support.type.property-name, variable.css, variable.scss, variable.other.less, source.coffee.embedded#ff0000
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#E53935
support.type.property-name.json#0451a5
keyword.operator#000000
keyword.operator.new, keyword.operator.expression, keyword.operator.cast, keyword.operator.sizeof, keyword.operator.alignof, keyword.operator.typeid, keyword.operator.alignas, keyword.operator.instanceof, keyword.operator.logical.python, keyword.operator.wordlike#0000ff
keyword.other.unit#098658
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php#800000
support.function.git-rebase#0451a5
constant.sha.git-rebase#098658
storage.modifier.import.java, variable.language.wildcard.java, storage.modifier.package.java#000000
variable.language#0000ff
entity.name, support.type, support.class, support.orther.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types#ff0000
function, entity.name.function, variable.function, support.function, keyword.other.special-method#0000ff
entity.name.function.call#0000ff
support.method#0000ff
meta.function entity.name.function
meta.embedded, source.groovy.embedded#000000ff
emphasisitalic
constant.other.php, variable.other.constant, constant.other.property, entity.name.constant#ab9df2
variable.language.arguments#64f070
strongbold
meta.diff.header#000080
constant.language#0000ff
constant.numeric, variable.other.enummember, keyword.operator.plus.exponent, keyword.operator.minus.exponent#098658
constant.regexp#811f3f
entity.name.tag#800000
entity.name.selector#800000
entity.other.attribute-name#ff0000
entity.other.attribute-name.class.css, entity.other.attribute-name.class.mixin.css, entity.other.attribute-name.id.css, entity.other.attribute-name.parent-selector.css, entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css, source.css.less entity.other.attribute-name.id, entity.other.attribute-name.scss#800000
invalid#cd3131
markup.underlineunderline
markup.bold#000080bold
markup.heading#800000bold
markup.italicitalic
markup.inserted#098658
markup.deleted#a31515
markup.changed#0451a5
punctuation.definition.quote.begin.markdown, punctuation.definition.list.begin.markdown#0451a5
markup.inline.raw#800000
punctuation.definition.tag#800000
meta.preprocessor, entity.name.function.preprocessor#0000ff
meta.preprocessor.string#a31515
meta.preprocessor.numeric#098658
meta.structure.dictionary.key.python#0451a5
storage, storage.type, storage.modifier#0000ff
keyword, keyword.control#0066CC
storage.modifier, keyword.operator.noexcept#ff00ff
constant.numeric, constant.language, support.constant, constant.character, constant.escape#FF9900
string.comment.buffered.block.pug, string.quoted.pug, string.interpolated.pug, string.unquoted.plain.in.yaml, string.unquoted.plain.out.yaml, string.unquoted.block.yaml, string.quoted.single.yaml, string.quoted.double.xml, string.quoted.single.xml, string.unquoted.cdata.xml, string.quoted.double.html, string.quoted.single.html, string.unquoted.html, string.quoted.single.handlebars, string.quoted.double.handlebars#0000ff
string.regexp#811f3f
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded#0000ff
meta.template.expression#000000
support.constant.property-value, support.constant.font-name, support.constant.media-type, support.constant.media, constant.other.color.rgb-value, constant.other.rgb-value, support.constant.color#0451a5
support.type.vendored.property-name, support.type.property-name, variable.css, variable.scss, variable.other.less, source.coffee.embedded#ff0000
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#E53935
support.type.property-name.json#0451a5
keyword.operator#000000
keyword.operator.new, keyword.operator.expression, keyword.operator.cast, keyword.operator.sizeof, keyword.operator.alignof, keyword.operator.typeid, keyword.operator.alignas, keyword.operator.instanceof, keyword.operator.logical.python, keyword.operator.wordlike#0000ff
keyword.other.unit#098658
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php#800000
support.function.git-rebase#0451a5
constant.sha.git-rebase#098658
storage.modifier.import.java, variable.language.wildcard.java, storage.modifier.package.java#000000
variable.language#0000ff
comment#979797italic
keyword.other.unit, keyword.other#5c5c5c
function#0000ff
string, meta.embedded.assembly#a31515
variable#008080
constant#FF9900
number#098658
keyword#0087a1

Shiki preview

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

Loading...