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#2B2B2B
  • activityBar.foreground#a9b7c6
  • activityBarBadge.background#3875d6
  • badge.background#2B2B2B
  • badge.foreground#a9b7c6
  • breadcrumb.activeSelectionForeground#eee
  • breadcrumb.focusForeground#eee
  • breadcrumb.foreground#bbbbbb
  • button.background#2B2B2B
  • button.foreground#a9b7c6
  • checkbox.background#2B2B2B
  • checkbox.foreground#a9b7c6
  • contrastBorder#444
  • descriptionForeground#bbbbbb
  • dropdown.foreground#a9b7c6
  • editor.background#2B2B2B
  • editor.foreground#a9b7c6
  • editor.lineHighlightBackground#333
  • editor.lineHighlightBorder#333
  • editor.selectionBackground#ADD6FF26
  • editor.selectionHighlightBackground#ADf6FF26
  • editorCodeLens.foreground#444
  • editorCursor.background#000
  • editorCursor.foreground#ffffff
  • editorGroup.border#444
  • editorGroupHeader.tabsBackground#444
  • editorGroupHeader.tabsBorder#444
  • editorIndentGuide.activeBackground#939393
  • editorIndentGuide.background#555
  • editorLineNumber.activeForeground#000
  • editorLineNumber.foreground#606366
  • editorRuler.foreground#444
  • editorSuggestWidget.background#363636
  • editorSuggestWidget.foreground#a9b7c6
  • editorSuggestWidget.selectedBackground#222
  • editorWidget.background#363636
  • editorWidget.foreground#a9b7c6
  • extensionButton.prominentForeground#bbb
  • foreground#bbbbbb
  • gitDecoration.addedResourceForeground#629755
  • gitDecoration.conflictingResourceForeground#DA4939
  • gitDecoration.modifiedResourceForeground#BBB529
  • gitDecoration.untrackedResourceForeground#789667
  • icon.foreground#bbbbbb
  • input.background#2B2B2B
  • input.foreground#a9b7c6
  • input.placeholderForeground#767676
  • list.activeSelectionBackground#2B61CD
  • list.errorForeground#DA4939
  • list.focusBackground#2B61CD
  • list.focusForeground#fff
  • list.hoverBackground#555555
  • list.inactiveSelectionBackground#1d3a69e3
  • list.invalidItemForeground#DA4939
  • list.warningForeground#BBB529
  • listFilterWidget.background#333
  • listFilterWidget.outline#DA4939
  • menu.background#2B2B2B
  • menu.foreground#a9b7c6
  • notification.foreground#bbb
  • panelTitle.activeForeground#bbb
  • pickerGroup.foreground#a9b7c6
  • scrollbarSlider.background#363636
  • scrollbarSlider.foreground#a9b7c6
  • settings.headerForeground#a9b7c6
  • settings.numberInputBorder#CECECE
  • settings.textInputBorder#CECECE
  • sideBar.background#363636
  • sideBar.border#444
  • sideBar.foreground#BBBBBB
  • sideBarSectionHeader.background#2B2B2B
  • sideBarTitle.foreground#BBBBBB
  • statusBar.background#363636
  • statusBar.border#444
  • statusBar.debuggingBackground#363636
  • statusBar.debuggingBorder#444
  • statusBar.debuggingForeground#BBBBBB
  • statusBar.foreground#BBBBBB
  • statusBar.noFolderBackground#363636
  • statusBar.noFolderBorder#444
  • statusBar.noFolderForeground#BBBBBB
  • tab.activeForeground#BBBBBB
  • tab.border#444
  • tab.inactiveBackground#363636
  • tab.inactiveForeground#BBBBBB
  • tab.unfocusedInactiveForeground#444
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#417ab3
  • terminal.ansiBrightBlack#676965
  • terminal.ansiBrightBlue#83afd8
  • terminal.ansiBrightCyan#91c5c7
  • terminal.ansiBrightGreen#98e342
  • terminal.ansiBrightMagenta#bc93b6
  • terminal.ansiBrightRed#e06155
  • terminal.ansiBrightWhite#f1f1ef
  • terminal.ansiBrightYellow#d0d040
  • terminal.ansiCyan#00a7aa
  • terminal.ansiGreen#5da602
  • terminal.ansiMagenta#88658d
  • terminal.ansiRed#C16160
  • terminal.ansiWhite#dbded8
  • terminal.ansiYellow#cfad00
  • terminal.foreground#bbb
  • textPreformat.foreground#789667
  • textSeparator.foreground#789667
  • tree.indentGuidesStroke#555
  • walkThrough.embeddedEditorBackground#363636

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
meta.embedded, source.groovy.embedded#000000ff
emphasisitalic
strongbold
meta.diff.header#CC7832
comment#777
constant.language#CC7832
constant.numeric#6897BB
constant.regexp#811f3f
entity.name.tag#E8BF6A
entity.name.selector#800000
entity.other.attribute-name#C16160
invalid#cd3131
markup.underlineunderline
markup.bold#CC7832bold
markup.heading#A9B7C6bold
markup.italicitalic
markup.inserted#09885a
markup.deleted#a31515
markup.changed#A9B7C6
punctuation.definition.quote.begin.markdown, punctuation.definition.list.begin.markdown#A9B7C6
markup.inline.raw#A9B7C6
markup#bbb
markup.inline.raw#A9B7C6
punctuation.definition.tag#A9B7C6
meta.preprocessor#0000ff
meta.preprocessor.string#629755
meta.preprocessor.numeric#09885a
meta.structure.dictionary.key.python#A9B7C6
storage#0000ff
storage.type#cc7832
storage.modifier#0000ff
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#7D9869
string.regexp#811f3f
string#789667
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded#A9B7C6
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#CC7832bold
support.type.vendored.property-name, support.type.property-name, variable.css, variable.scss, variable.other.less, source.coffee.embedded#a9b7c6
support.type.property-name.json#a9b7c6
keyword#CC7832
keyword.control#CC7832
keyword.operator#a9b7c6
keyword.operator.new, keyword.operator.expression, keyword.operator.cast, keyword.operator.sizeof, keyword.operator.instanceof, keyword.operator.logical.python#CC7832
keyword.other.unit#629755
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php#cc7832bold
support.function.git-rebase#A9B7C6
constant.sha.git-rebase#09885a
storage.modifier.import.java, variable.language.wildcard.java, storage.modifier.package.java#000000
variable.language#CC7832
keyword.operator.new#CC7832
keyword.control#CC7832
entity.name.function#ffc662
variable.language#CC7832
storage.modifier#CC7832
entity.name.tag#E8BF6A
punctuation.definition.tag#E8BF6A
entity.other.attribute-name#C16160
string.quoted.double.html#A5C261
support.type.property-name#a9b7c6
support.constant.property-value#CC7832
variable#9876AA
entity.other.attribute-name, 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.attribute.scss, entity.other.attribute-name.scss#e1a170
entity.other.attribute-name.class.css#ffc662
variable.scss#CC7832bold
support.class, entity.name.class, entity.name.type.class, meta.class#C7AF3F
comment, punctuation.definition.comment, ts.block.class.method.declaration.comment.line.double-slash, ts.punctuation.definition.decorator.objectliteral.object.member.array.literal.comment.line.double-slash, ts.class.comment.line.double-slash, js.function.punctuation.definition.block.object.objectliteral.member.comment.line.double-slash, meta.function.punctuation.definition.block.comment.line.double-slash, comment.block.html#808080
constant#9876AA
constant.character, constant.other, punctuation.definition.entity.html#6D9CBE
none#dedede
entity.name.function, meta.require, support.function.any-method, support.function#ffc765
meta.function-call#a9b7c7
constant.numeric#6897BB
keyword#ce7827
keyword.other.special-method#8fa1b3
keyword.operator#c0c5ce
keyword.operator.expression.typeof#ce7827
storage, ts.class.storage.modifier.declaration.method.parameters#9FB3C2
storage.type#e1a170
string, constant.other.symbol, constant.character.escape, constant.character.escape.scss, constant.character.escape.css, invalid.illegal.bad-ampersand.html, ts.block.string.quoted.single, scss.meta.set.variable.string.quoted.single, meta.string.quoted.embedded.line.php.source.single.string-contents, string.quoted.single, string.quoted.double.json, string.quoted.single.scss, string.quoted.single.css #7D9869
support.constant, support.type, support.class#C7AF3F
support.class.console#FF8843
support.function.console#FFD24A
variable, punctuation.definition.variable.php, variable.other.php#9876AA
variable.parameter#A98AAB
meta.object-literal.key, meta.object.member.object-literal.key, meta.object-literal.key entity.name.function #9975ab
function.storage.type.block#ce7827
support.function.dom#9975ab
keyword.control.export, keyword.control.flow#ce7827
storage.modifier#C16160
entity.name.function, punctuation.decorator#ffc662
support.type.class.declaration.method.return.primitive, type.annotation.support.class.declaration.method.parameters.primitive #abdee8
variable.language.this#C16160
block.variable.other.object.class.declaration.property.method, block.variable.other.object.class.declaration.method, block.variable.other.object.array.literal.class.declaration.method.var.expr, block.variable.class.declaration.method.parameter.arrow, ts.block.variable.other.class.declaration.property.method #a9b7c7
block.variable.other.object.class.declaration.method, block.variable.other.object.array.literal.class.declaration.method.var.expr block.variable.class.declaration.method.parameter.arrow, block.variable.other.class.declaration.property.method #9975ab
ts.block.class.declaration.method.constant.numeric.decimal#6696bd
ts.entity.name.class.type.method.declaration.parameters.return, ts.punctuation.definition.begin.class.type.method.declaration.parameters.return.typeparameters, ts.punctuation.definition.end.class.type.method.declaration.parameters.return.typeparameters, ts.block.entity.name.class.type.method.declaration.parameters.new.expr, ts.block.punctuation.definition.begin.class.type.method.declaration.parameters.typeparameters.new.expr, ts.block.punctuation.definition.end.class.type.method.declaration.parameters.typeparameters.new.expr, ts.block.objectliteral.object.member.object-literal.key.class.declaration.method#9975ab
ts.keyword.control.block.class.method.declaration.flow#a0b3c1
ts.string.quoted.single.class.field.declaration#698857
ts.block.objectliteral.object.member.class.declaration.method.language.constant.boolean#e1a170
ts.block.variable.class.declaration.method.parameter.arrow#a9b7c7
meta.selector, entity.other.attribute-name.class.css, entity.other.attribute-name.parent-selector-suffix.scss #E8BF6A
entity.scss.meta.property-list.punctuation.other.attribute-name.class.css.definition, entity.punctuation.other.attribute-name.class.css.definition, punctuation.definition.entity.css, meta.selector.css#a9b7c7
entity.name.tag.scss, entity.name.tag.css#CC7832
support.type.property-name.css, support.type.property-name.scss, support.type.property-name.sass, meta.property-list.css meta.property-name.css, meta.property-list.scss meta.property-name.scss, entity.name.tag.custom.scss, meta.property-list.scss meta.property-name.sass, entity.name.tag.custom.sass#BABABA
meta.property-group support.constant.property-value.css, meta.property-list.css meta.property-value.css, meta.property-value support.constant.property-value.css, meta.property-group support.constant.property-value.scss, meta.property-group support.constant.property-value.sass, meta.property-value support.constant.property-value.scss, meta.property-value support.constant.property-value.sass, constant.numeric.css, constant.numeric.scss, constant.numeric.sass, .variable.parameter.misc.css, parameter.less.data-uri comment markup.raw, source.less meta.property-value.css, scss.meta.set.variable.constant.support.font-name, meta.property-value.scss#A5C261
support.constant.named-color, meta.property-value constant, keyword.other.unit, constant.other.color.rgb-value, constant.other.rgb-value.css, constant.other.color, constant.numeric.color.hex-value.scss, constant.numeric.color.hex-value.scss punctuation.definition.constant.scss#6897BB
meta.constructor.argument.css, meta.constructor.argument.sass#8F9D6A
source.scss entity.other.attribute-name.placeholder.scss, source.scss entity.other.attribute-name.placeholder.scss punctuation.definition.entity.scss, source.sass entity.other.attribute-name.placeholder.sass, source.sass entity.other.attribute-name.placeholder.sass punctuation.definition.entity.sass, entity.other.attribute-name.placeholder.scss#95C1CA
meta.preprocessor.at-rule keyword.control.at-rule, meta.at-rule.import, keyword.control.at-rule#8693A5
keyword.other.important, token.literal.sass#C16160
meta.at-rule.constant.numeric.media, meta.property-list.property-value.constant.numeric, scss.meta.property-list.at-rule.media, property-list.scss.constant.numeric.variable.set, meta.scss.set.variable.constant.numeric.map, scss.meta.set.variable.constant.numeric, scss.meta.at-rule.property-list.constant.numeric.media, constant.numeric.scss#6897BB
meta.at-rule.keyword.other.unit.media, property-list.scss.set.variable.keyword.unit, other.meta.scss.set.variable.keyword.unit.map, scss.meta.set.variable.keyword.other.unit, scss.meta.at-rule.keyword.property-list.other.unit.media, meta.scss.keyword.other.unit.property-list.property-value, keyword.other.unit.scss, keyword.other.unit.css, keyword.other.unit.scss#a4c35b
entity.property-list.other.attribute-name.pseudo-element.css, entity.property-list.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css#C16160
entity.other.attribute-name.attribute.scss#C16160
string.quoted.double.attribute-value.scss#82A66D
support.function.misc.scss, keyword.control.at-rule.function.scss, keyword.control.at-rule.function.scss punctuation.definition, entity.name.function.scss #ffc765
keyword.control.at-rule.import, keyword.control.at-rule.import punctuation.definition#CC7832
meta.at-rule.return.scss, meta.at-rule.return.scss punctuation.definition, meta.at-rule.else.scss, meta.at-rule.else.scss punctuation.definition, meta.at-rule.if.scss, meta.at-rule.if.scss punctuation.definition, #CC7832
keyword.control.at-rule.media, keyword.control.at-rule.media punctuation.definition#A48BBD
support.type.property-name.media#BABABA
scss.meta.at-rule.import.string.quoted.single#82A66D
keyword.control.at-rule.mixin.scss, keyword.control.at-rule.mixin.scss punctuation.definition#6D9CBE
keyword.control.at-rule.include, keyword.control.at-rule.include punctuation.definition#6D9CBE
keyword.control.at-rule.font-face, keyword.control.at-rule.font-face punctuation.definition#6D9CBE
keyword.control.at-rule.keyframes.scss, keyword.control.at-rule.keyframes.scss punctuation.definition#9084BE
meta.at-rule.keyframes.scss entity.other.attribute-name.scss#6897BB
keyword.control.content.scss, keyword.control.content.scss punctuation.definition#A5C261
variable.scss#9975ab
punctuation.definition.interpolation.begin.bracket.curly.scss, punctuation.definition.interpolation.end.bracket.curly.scss#A5C261
entity.name.tag.reference.scss#A5C261
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php, punctuation.section.embedded.begin.metatag.php, punctuation.section.embedded.end.metatag.php#CC7832
string.regexp#96b5b4
meta.block.embedded.php.source.comment.documentation.phpdoc#ACB5B5
constant.character.escape#96b5b4
punctuation.section.embedded, variable.interpolation#9975ab
meta.tag.any.html.string.quoted.double.embedded.line.php.source.constant.language.inline, meta.embedded.line.php.source.constant.language#C16160
constant.numeric.php#6696bd
punctuation.terminator.expression.php#CC7832
keyword.control.php#C16160
invalid.illegal#F8F8F0
invalid.deprecated#F8F8F0
string.quoted.double.html invalid.illegal.bad-ampersand.html#d0c39b
markup.heading punctuation.definition.heading, entity.name.section#BF93B5
markup.bold#ebcb8b
markup.italic#B4B378
markup.raw.inline#a3be8c
string.other.link#bf616a
meta.link, meta.paragraph.inline.link.underline.detected-link#B2885F
markup.list#ababab
markup.quote#d08770
meta.separator#c0c5ce
punctuation.definition, punctuation.section.function, punctuation.separator, punctuation.support.type.property-name, punctuation.accessor, meta.brace.round, meta.brace.square, meta.type.annotation, support.constant.mathematical-symbols, block.brace.array.literal.square, block.brace.round, block.punctuation, brace.array.literal.square, brace.type.square, punctuation.decorator.objectliteral.object.member.accessor, #a9b7c7
punctuation.terminator#CC7832
keyword.operator.comparison, keyword.operator.logical#C0B27D
support.type.property-name.json#A9B7C6
meta.structure.dictionary.value.json, string.quoted.double.json#82A66D
constant.language.json#C16160
constant.numeric.json#6897BB
entity.name.tag, punctuation.definition.tag, keyword.control.html.elements, entity.name.tag.inline.any.html, entity.name.tag.block.any.html#E8BF6A
meta.tag.any.html entity.other.attribute-name.html, meta.tag.block.any.html entity.other.attribute-name.html, meta.tag.inline.any.html entity.other.attribute-name.html, meta.tag.other.html entity.other.attribute-name.html, source.embedded.html entity.other.attribute-name.html #cacaca
string.quoted.double.html, meta.template string.quoted.double#A5C261
entity.other.attribute-name.id#8AB8A2
comment.block.documentation, comment.block.documentation punctuation.definition.comment #859A90
token.info-token#6796e6
token.warn-token#cd9731
token.error-token#f44747
token.debug-token#b267e6
keyword.operator.other.elixir#81bb24
variable.other.constant.elixir#E6DA00bold
constant.other.symbol.elixir#9876AA
parameter.variable.function.elixir#8547FF
comment.documentation.heredoc.elixir#8A653B
source.elixir.embedded.source#CC7832
variable.other.anonymous.elixir#34e7de
parameter.variable.function.elixir#E047FF
keyword.control.elixir#CC7832bold italic
punctuation.section.function.elixir#E6E649
constant.character.escape.elixir#80529C
string.quoted.double.elixir#70B347
support.function.variable.quoted.single.elixir#6A8759
punctuation.section.regexp.begin.elixir#47A6B3
string.regexp.interpolated.elixir#47A6B3
string.regexp.literal.elixir#47A6B3
punctuation.section.list.begin.elixir#47A6B3
punctuation.definition.string.begin.elixir#70B347
string.quoted.double.interpolated.elixir#70B347
constant.language.elixir#CC7832bold
constant.language#C16160bold
comment.documentation.string#8A653B
keyword.other.special-method.elixir#CC7832bold
entity.name.type.module.elixir#E6DA00bold
keyword.operator.assignment.elixir#97E649
punctuation.definition.variable.elixir#a9b7c7
variable#a9b7c7
entity.name.type#C7AF3F
variable.parameter#a9b7c7
variable.other.object#a9b7c7
meta.object-literal.key#e1a170

Shiki preview

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

Loading...