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.background#353535
  • activityBar.foreground#ffffff
  • activityBarBadge.background#3655b5
  • button.background#565656
  • dropdown.background#525252
  • editor.background#1e1e1e
  • editor.findMatchHighlightBackground#501f36
  • editor.foreground#c5c8c6
  • editor.lineHighlightBackground#303030
  • editor.selectionBackground#676b7180
  • editor.selectionHighlightBackground#575b6180
  • editor.wordHighlightBackground#4747a180
  • editor.wordHighlightStrongBackground#6767ce80
  • editorBracketMatch.background#036128
  • editorBracketMatch.border#00ff0000
  • editorCursor.foreground#c07020
  • editorGroup.border#27537c8f
  • editorGroupHeader.tabsBackground#282828
  • editorGutter.foldingControlForeground#db8d33
  • editorIndentGuide.activeBackground#707057
  • editorIndentGuide.background#505037
  • editorLineNumber.activeForeground#FE8100
  • editorWhitespace.foreground#505037
  • editorWidget.resizeBorder#21d42ace
  • focusBorder#3655b5
  • inputOption.activeBorder#3655b5
  • list.activeSelectionBackground#707070
  • list.highlightForeground#e58520
  • list.hoverBackground#444444
  • list.inactiveSelectionBackground#4e4e4e
  • menu.background#272727
  • menu.foreground#CCCCCC
  • minimap.selectionHighlight#676b7180
  • panelTitle.activeForeground#ffffff
  • peekView.border#3655b5
  • pickerGroup.foreground#b0b0b0
  • ports.iconRunningProcessForeground#CCCCCC
  • quickInputList.focusBackground#707070
  • sideBar.background#272727
  • sideBarSectionHeader.background#505050
  • statusBar.background#505050
  • statusBar.debuggingBackground#505050
  • statusBar.noFolderBackground#505050
  • statusBarItem.remoteBackground#3655b5
  • tab.activeBorder#ff8d03
  • tab.border#303030
  • tab.hoverBackground#293238
  • tab.inactiveBackground#404040
  • tab.inactiveForeground#d8d8d8
  • tab.lastPinnedBorder#505050
  • tab.unfocusedActiveBackground#2b323b
  • tab.unfocusedActiveBorder#97a7c8
  • terminal.ansiBlack#1e1e1e
  • terminal.ansiBlue#6A7EC8
  • terminal.ansiBrightBlack#666666
  • terminal.ansiBrightBlue#819aff
  • terminal.ansiBrightCyan#66D9EF
  • terminal.ansiBrightGreen#A6E22E
  • terminal.ansiBrightMagenta#AE81FF
  • terminal.ansiBrightRed#f92672
  • terminal.ansiBrightWhite#f8f8f2
  • terminal.ansiBrightYellow#e2e22e
  • terminal.ansiCyan#56ADBC
  • terminal.ansiGreen#86B42B
  • terminal.ansiMagenta#8C6BC8
  • terminal.ansiRed#C4265E
  • terminal.ansiWhite#e3e3dd
  • terminal.ansiYellow#B3B42B
  • titleBar.activeBackground#505050

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#C5C8C6
meta.embedded, source.groovy.embedded#C5C8C6
meta.template.expression#C5C8C6
comment#9A9B99
constant.language#408080
constant.character, constant.other#8080FF
entity.name.class, entity.name.type, entity.name.namespace, entity.name.scope-resolution#38978a
entity.name.function#bb950c
variable.language#c7444a
punctuation.section.embedded -(source string source punctuation.section.embedded), meta.brace.erb.html#008200
invalid#D1221A
variable.language.js#CC555A
keyword.other.special-method.ruby#D9B700
meta.diff, meta.diff.header#E0EDDDitalic
markup.deleted#dc322f
markup.changed#cb4b16
markup.inserted#219186
markup.inline.raw#d82780
markup.heading.markdownbold
markup.quote.markdownitalic
markup.bold.markdownbold
string.other.link.title.markdown,string.other.link.description.markdown#AE81FF
markup.underline.link.markdown,markup.underline.link.image.markdown
markup.italic.markdownitalic
markup.list.unnumbered.markdown, markup.list.numbered.markdown
punctuation.definition.list.begin.markdown
token.info-token#6796e6
token.warn-token#cd9731
token.error-token#f44747
token.debug-token#b267e6
constant.numeric#6089B4
variable.parameter#6089B4
keyword#6089B4
variable.other, variable.js, punctuation.separator.variable#6089B4
variable.other.php, variable.other.normal#6089B4
entity.name.tag#6089B4
meta.tag string -source -punctuation, text source text meta.tag string -punctuation#6089B4
punctuation.definition.tag.html, punctuation.definition.tag.begin, punctuation.definition.tag.end#6089B4
markup.bold, markup.italic#6089B4
support#C7444A
entity.other.inherited-class#C7444A
meta.property-group support.constant.property-value.css, meta.property-value support.constant.property-value.css#C7444A
keyword#9A9B99
support.type.property-name.css#5f8fc2
source.php.embedded.line.html#9A9B99
storage#9872A2
entity.other.attribute-name#9872A2
support.function#9872A2
meta.function-call.object#9872A2
variable.other.property#9872A2
keyword.control, keyword.operator.new.cpp, keyword.operator.delete.cpp, keyword.other.using, keyword.other.operator#9872A2
meta.tag.other, entity.name.tag.style, entity.name.tag.script, meta.tag.block.script, source.js.embedded punctuation.definition.tag.html, source.css.embedded punctuation.definition.tag.html#9872A2
meta.selector.css entity.other.attribute-name.id#9872A2
markup.quote#9872A2
string#9AA83A
meta.toc-list.id#9AA83A
string.quoted.double.html, punctuation.definition.string.begin.html, punctuation.definition.string.end.html#9AA83A
meta.doctype, meta.tag.sgml-declaration.doctype, meta.tag.sgml.doctype#9AA83A
meta.tag.inline source, text.html.php.source#9AA83A
punctuation.definition.string.end.php, punctuation.definition.string.begin.php#9AA83A
constant.other.symbol.ruby#9AA83A
markup.list#9AA83A
meta.tag#D0B344
entity.other.attribute-name, meta.tag punctuation.definition.string#D0B344
punctuation.section.embedded -(source string source punctuation.section.embedded), meta.brace.erb.html#D0B344
meta.function-call.object.php#D0B344
variable.language.ruby#D0B344
keyword.other.DML.sql#D0B344
markup.heading#D0B344
markup.heading.setext#D0B344
punctuation.definition.template-expression, punctuation.section.embedded.coffee#D08442
string source#D08442
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php#D08442
punctuation.section.embedded.begin.ruby, punctuation.section.embedded.end.ruby#D08442
support.type.vendored.property-name, support.type.property-name.css, source.coffee.embedded#5f8fc2
variable, variable.css, variable.scss, variable.other.less#38978a
storage.type#CC7190
entity.name.function, support.function, support.constant.handlebars, source.powershell variable.other.member, entity.name.operator.custom-literal#bb950c
meta.definition.variable.name, support.variable, entity.name.variable#C24248
variable.other.constant, variable.other.enummember, keyword.other.unit#4582bb
keyword.other.unit#9F70A5
keyword.control, source.cpp keyword.operator.new, keyword.operator.delete, keyword.other.using, keyword.other.operator, entity.name.operator#c57724
keyword.operator#949292
keyword.operator.assignment#949292
source.js, source.cs#afaeae
text.html.derivative#a5b5c4
entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css#CC7190
meta.property-group support.constant.property-value.css, meta.property-value support.constant.property-value.css#C76E8C
constant.numeric#76A76F
constant.other.color.rgb-value, constant.other.rgb-value#639b94
entity.name.label#C0A649
variable.language#C24248
entity.name.class, entity.name.type, entity.name.namespace, entity.name.scope-resolution#38978a
constant.language#3f9696

Shiki preview

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

Loading...