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.activeBorder#D73C7D
  • activityBar.background#f8f8f8
  • activityBar.border#0000001a
  • activityBar.foreground#1f1f1f
  • activityBar.inactiveForeground#0000009e
  • activityBarBadge.background#007ACC
  • activityBarBadge.foreground#ffffff
  • badge.background#D73C7D
  • badge.foreground#ffffff
  • button.background#D73C7D
  • button.border#0000001a
  • button.foreground#ffffff
  • button.hoverBackground#D73C7De6
  • button.secondaryBackground#0000001a
  • button.secondaryForeground#3b3b3b
  • button.secondaryHoverBackground#00000034
  • checkbox.background#f8f8f8
  • checkbox.border#919191
  • descriptionForeground#3b3b3b
  • diffEditor.insertedLineBackground#23863633
  • diffEditor.insertedTextBackground#2386364d
  • diffEditor.removedLineBackground#da363333
  • diffEditor.removedTextBackground#da36334d
  • dropdown.background#ffffff
  • dropdown.border#CECECE
  • dropdown.foreground#3b3b3b
  • dropdown.listBackground#ffffff
  • editor.background#FFFFFF
  • editor.foreground#000000
  • editor.inactiveSelectionBackground#E5EBF1
  • editor.selectionHighlightBackground#ADD6FF80
  • editorBracketHighlight.foreground1#3294b4
  • editorBracketHighlight.foreground2#777cd7
  • editorBracketHighlight.foreground3#cc7acc
  • editorBracketHighlight.foreground4#4eb1b4
  • editorBracketHighlight.foreground5#da73bd
  • editorGroup.border#0000001a
  • editorGroupHeader.tabsBackground#f8f8f8
  • editorGroupHeader.tabsBorder#0000001a
  • editorGutter.addedBackground#2ea043
  • editorGutter.deletedBackground#f85149
  • editorGutter.modifiedBackground#D73C7D
  • editorIndentGuide.activeBackground#939393
  • editorIndentGuide.background#D3D3D3
  • editorInlayHint.background#8b949e33
  • editorInlayHint.foreground#8b949e
  • editorInlayHint.typeBackground#8b949e33
  • editorInlayHint.typeForeground#8b949e
  • editorLineNumber.activeForeground#171184
  • editorLineNumber.foreground#6e7681
  • editorOverviewRuler.border#0000001a
  • editorSuggestWidget.background#F3F3F3
  • editorWidget.background#ffffff
  • errorForeground#f85149
  • focusBorder#D73C7D
  • foreground#3b3b3b
  • icon.foreground#3b3b3b
  • input.background#ffffff
  • input.border#CECECE
  • input.foreground#3b3b3b
  • input.placeholderForeground#767676
  • inputOption.activeBackground#D73C7D41
  • inputOption.activeBorder#D73C7D
  • inputOption.activeForeground#000000
  • keybindingLabel.foreground#3b3b3b
  • list.activeSelectionBackground#e8e8e8
  • list.activeSelectionForeground#000000
  • list.activeSelectionIconForeground#FFF
  • list.focusAndSelectionOutline#90C2F9
  • list.hoverBackground#E8E8E8
  • menu.border#D4D4D4
  • notebook.cellBorderColor#E8E8E8
  • notebook.selectedCellBackground#c8ddf150
  • notificationCenterHeader.background#ffffff
  • notificationCenterHeader.foreground#3b3b3b
  • notifications.background#ffffff
  • notifications.border#0000001a
  • notifications.foreground#3b3b3b
  • panel.background#f8f8f8
  • panel.border#0000001a
  • panelInput.border#0000001a
  • panelTitle.activeBorder#D73C7D
  • panelTitle.activeForeground#3b3b3b
  • panelTitle.inactiveForeground#3b3b3b
  • peekViewEditor.matchHighlightBackground#bb800966
  • peekViewResult.background#ffffff
  • peekViewResult.matchHighlightBackground#bb800966
  • pickerGroup.border#0000001a
  • pickerGroup.foreground#8b949e
  • ports.iconRunningProcessForeground#369432
  • progressBar.background#D73C7D
  • quickInput.background#ffffff
  • quickInput.foreground#3b3b3b
  • scrollbar.shadow#484f5833
  • scrollbarSlider.activeBackground#6e768187
  • scrollbarSlider.background#6e768133
  • scrollbarSlider.hoverBackground#6e768145
  • searchEditor.textInputBorder#CECECE
  • settings.dropdownBackground#ffffff
  • settings.dropdownBorder#CECECE
  • settings.headerForeground#1f1f1f
  • settings.modifiedItemIndicator#bb800966
  • settings.numberInputBorder#CECECE
  • settings.textInputBorder#CECECE
  • sideBar.background#f8f8f8
  • sideBar.border#0000001a
  • sideBar.foreground#3b3b3b
  • sideBarSectionHeader.background#0000
  • sideBarSectionHeader.border#61616130
  • sideBarSectionHeader.foreground#3b3b3b
  • sideBarTitle.foreground#6F6F6F
  • statusBar.background#f8f8f8
  • statusBar.border#0000001a
  • statusBar.debuggingBackground#fd716c
  • statusBar.debuggingForeground#000000
  • statusBar.focusBorder#D73C7D
  • statusBar.foreground#3b3b3b
  • statusBar.noFolderBackground#f8f8f8
  • statusBarItem.errorBackground#c72e0f
  • statusBarItem.focusBorder#D73C7D
  • statusBarItem.prominentBackground#6e768166
  • statusBarItem.remoteBackground#16825D
  • statusBarItem.remoteForeground#FFF
  • tab.activeBackground#ffffff
  • tab.activeBorder#f8f8f8
  • tab.activeBorderTop#D73C7D
  • tab.activeForeground#3b3b3b
  • tab.border#0000001a
  • tab.hoverBackground#ffffff
  • tab.inactiveBackground#f8f8f8
  • tab.inactiveForeground#00000080
  • tab.lastPinnedBorder#61616130
  • tab.unfocusedActiveBorder#f8f8f8
  • tab.unfocusedActiveBorderTop#00000015
  • tab.unfocusedHoverBackground#6e76811a
  • terminal.foreground#3b3b3b
  • terminal.inactiveSelectionBackground#E5EBF1
  • terminal.tab.activeBorder#D73C7D
  • terminalCursor.foreground#D73C7D
  • textBlockQuote.background#f8f8f8
  • textBlockQuote.border#0000001a
  • textCodeBlock.background#6e768166
  • textLink.activeForeground#D73C7D
  • textLink.foreground#D73C7D
  • textSeparator.foreground#21262d
  • titleBar.activeBackground#f8f8f8
  • titleBar.activeForeground#1e1e1e
  • titleBar.border#0000001a
  • titleBar.inactiveBackground#f8f8f8
  • titleBar.inactiveForeground#8b949e
  • welcomePage.tileBackground#f3f3f3
  • widget.border#d4d4d4

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
entity.name.function, support.function, support.constant.handlebars, source.powershell variable.other.member, entity.name.operator.custom-literal#b62251
support.class, support.type, entity.name.type, entity.name.namespace, entity.other.attribute, entity.name.scope-resolution, entity.name.class, storage.type.numeric.go, storage.type.byte.go, storage.type.boolean.go, storage.type.string.go, storage.type.uintptr.go, storage.type.error.go, storage.type.rune.go, storage.type.cs, storage.type.generic.cs, storage.type.modifier.cs, storage.type.variable.cs, storage.type.annotation.java, storage.type.generic.java, storage.type.java, storage.type.object.array.java, storage.type.primitive.array.java, storage.type.primitive.java, storage.type.token.java, storage.type.groovy, storage.type.annotation.groovy, storage.type.parameters.groovy, storage.type.generic.groovy, storage.type.object.array.groovy, storage.type.primitive.array.groovy, storage.type.primitive.groovy#267f99
meta.type.cast.expr, meta.type.new.expr, support.constant.math, support.constant.dom, support.constant.json, entity.other.inherited-class#267f99
keyword.control, source.cpp keyword.operator.new, source.cpp keyword.operator.delete, keyword.other.using, keyword.other.operator, entity.name.operator#AF00DB
variable, meta.definition.variable.name, support.variable, entity.name.variable, constant.other.placeholder#001080
variable.other.constant, variable.other.enummember#0070C1
meta.object-literal.key#001080
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
punctuation.definition.group.regexp, punctuation.definition.group.assertion.regexp, punctuation.definition.character-class.regexp, punctuation.character.set.begin.regexp, punctuation.character.set.end.regexp, keyword.operator.negation.regexp, support.other.parenthesis.regexp#d16969
constant.character.character-class.regexp, constant.other.character-class.set.regexp, constant.other.character-class.regexp, constant.character.set.regexp#811f3f
keyword.operator.quantifier.regexp#000000
keyword.operator.or.regexp, keyword.control.anchor.regexp#EE0000
constant.character, constant.other.option#0000ff
constant.character.escape#EE0000
entity.name.label#000000
entity.name.function, support.function, support.constant.handlebars, source.powershell variable.other.member, entity.name.operator.custom-literal#b62251
support.class, support.type, entity.name.type, entity.name.namespace, entity.other.attribute, entity.name.scope-resolution, entity.name.class, storage.type.numeric.go, storage.type.byte.go, storage.type.boolean.go, storage.type.string.go, storage.type.uintptr.go, storage.type.error.go, storage.type.rune.go, storage.type.cs, storage.type.generic.cs, storage.type.modifier.cs, storage.type.variable.cs, storage.type.annotation.java, storage.type.generic.java, storage.type.java, storage.type.object.array.java, storage.type.primitive.array.java, storage.type.primitive.java, storage.type.token.java, storage.type.groovy, storage.type.annotation.groovy, storage.type.parameters.groovy, storage.type.generic.groovy, storage.type.object.array.groovy, storage.type.primitive.array.groovy, storage.type.primitive.groovy#267f99
meta.type.cast.expr, meta.type.new.expr, support.constant.math, support.constant.dom, support.constant.json, entity.other.inherited-class#267f99
keyword.control, source.cpp keyword.operator.new, source.cpp keyword.operator.delete, keyword.other.using, keyword.other.operator, entity.name.operator#AF00DB
variable, meta.definition.variable.name, support.variable, entity.name.variable, constant.other.placeholder#001080
variable.other.constant, variable.other.enummember#0070C1
meta.object-literal.key#001080
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
punctuation.definition.group.regexp, punctuation.definition.group.assertion.regexp, punctuation.definition.character-class.regexp, punctuation.character.set.begin.regexp, punctuation.character.set.end.regexp, keyword.operator.negation.regexp, support.other.parenthesis.regexp#d16969
constant.character.character-class.regexp, constant.other.character-class.set.regexp, constant.other.character-class.regexp, constant.character.set.regexp#811f3f
keyword.operator.quantifier.regexp#000000
keyword.operator.or.regexp, keyword.control.anchor.regexp#EE0000
constant.character, constant.other.option#0000ff
constant.character.escape#EE0000
entity.name.label#000000
meta.embedded, source.groovy.embedded, string meta.image.inline.markdown#000000ff
emphasisitalic
strongbold
meta.diff.header#000080
comment#008000
constant.language#0000ff
constant.numeric, variable.other.enummember, keyword.operator.plus.exponent, keyword.operator.minus.exponent#096786
constant.regexp#811f3f
entity.name.tag#008cff
entity.name.selector#008cff
entity.other.attribute-name#e222b4
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#008cff
invalid#cd3131
markup.underlineunderline
markup.bold#000080bold
markup.heading#008cffbold
markup.italicitalic
markup.strikethroughstrikethrough
markup.inserted#096786
markup.deleted#a31567
markup.changed#0451a5
punctuation.definition.quote.begin.markdown, punctuation.definition.list.begin.markdown#0451a5
markup.inline.raw#008cff
punctuation.definition.tag#008cff
meta.preprocessor, entity.name.function.preprocessor#0000ff
meta.preprocessor.string#a31567
meta.preprocessor.numeric#096786
meta.structure.dictionary.key.python#0451a5
storage#0000ff
storage.type#0000ff
storage.modifier, keyword.operator.noexcept#0000ff
string, meta.embedded.assembly#a31567
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#e222b4
support.type.property-name.json#0451a5
keyword#0000ff
keyword.control#0000ff
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#096786
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php#008cff
support.function.git-rebase#0451a5
constant.sha.git-rebase#096786
storage.modifier.import.java, variable.language.wildcard.java, storage.modifier.package.java#000000
variable.language#0000ff
bubblecum by vaaski - VS Code Theme