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#2488d8
  • activityBar.background#171717
  • activityBar.border#ffffff15
  • activityBar.foreground#ffffffc5
  • activityBar.inactiveForeground#ffffff80
  • activityBarBadge.background#2488d8
  • activityBarBadge.foreground#000000
  • badge.background#2488d8
  • badge.foreground#000000
  • button.background#2488d8
  • button.border#ffffff12
  • button.foreground#000000
  • button.hoverBackground#2488d8e6
  • button.secondaryBackground#FFFFFF0F
  • button.secondaryForeground#ffffffc5
  • button.secondaryHoverBackground#ffffff15
  • checkbox.background#313131
  • checkbox.border#ffffff15
  • descriptionForeground#8b949e
  • diffEditor.insertedLineBackground#23863633
  • diffEditor.insertedTextBackground#2386364d
  • diffEditor.removedLineBackground#da363333
  • diffEditor.removedTextBackground#da36334d
  • dropdown.background#313131
  • dropdown.border#ffffff17
  • dropdown.foreground#ffffffc5
  • dropdown.listBackground#313131
  • editor.background#1d1d1d
  • editor.findMatchBackground#9e6a03
  • editor.foreground#a3a3a3
  • editorCursor.foreground#2488d8
  • editorGroup.border#ffffff17
  • editorGroupHeader.tabsBackground#171717
  • editorGroupHeader.tabsBorder#ffffff15
  • editorGutter.addedBackground#2ea04366
  • editorGutter.deletedBackground#f8514966
  • editorGutter.modifiedBackground#bb800966
  • editorIndentGuide.activeBackground#c9d1d93d
  • editorIndentGuide.background#c9d1d921
  • editorInlayHint.background#8b949e33
  • editorInlayHint.foreground#8b949e
  • editorInlayHint.typeBackground#8b949e33
  • editorInlayHint.typeForeground#8b949e
  • editorLineNumber.activeForeground#737373
  • editorLineNumber.foreground#525252
  • editorOverviewRuler.border#060109
  • editorOverviewRuler.errorForeground#00000000
  • editorOverviewRuler.infoForeground#00000000
  • editorOverviewRuler.warningForeground#00000000
  • editorWhitespace.foreground#484f58
  • editorWidget.background#262626
  • errorForeground#f85149
  • focusBorder#2488d8
  • foreground#ffffffc5
  • icon.foreground#ffffffc5
  • input.background#ffffff0f
  • input.border#ffffff17
  • input.foreground#ffffffc5
  • input.placeholderForeground#ffffff79
  • keybindingLabel.foreground#ffffffc5
  • list.activeSelectionBackground#ffffff0f
  • list.activeSelectionForeground#ffffff
  • list.activeSelectionIconForeground#ffffff
  • menu.background#262626
  • notificationCenterHeader.background#262626
  • notificationCenterHeader.foreground#ffffffc5
  • notifications.background#262626
  • notifications.border#ffffff15
  • notifications.foreground#ffffffc5
  • panel.background#262626
  • panel.border#ffffff15
  • panelInput.border#ffffff15
  • panelTitle.activeBorder#2488d8
  • panelTitle.activeForeground#ffffffc5
  • panelTitle.inactiveForeground#8b949e
  • peekViewEditor.background#6e76811a
  • peekViewEditor.matchHighlightBackground#bb800966
  • peekViewResult.background#262626
  • peekViewResult.matchHighlightBackground#bb800966
  • pickerGroup.border#ffffff15
  • pickerGroup.foreground#8b949e
  • progressBar.background#2488d8
  • quickInput.background#262626
  • quickInput.foreground#ffffffc5
  • scrollbar.shadow#484f5833
  • scrollbarSlider.activeBackground#6e768187
  • scrollbarSlider.background#6e768133
  • scrollbarSlider.hoverBackground#6e768145
  • settings.dropdownBackground#313131
  • settings.dropdownBorder#ffffff17
  • settings.headerForeground#ffffff
  • settings.modifiedItemIndicator#bb800966
  • sideBar.background#171717
  • sideBar.border#ffffff15
  • sideBar.foreground#ffffffc5
  • sideBarSectionHeader.background#171717
  • sideBarSectionHeader.border#ffffff15
  • sideBarSectionHeader.foreground#ffffffc5
  • sideBarTitle.foreground#ffffffc5
  • statusBar.background#171717
  • statusBar.border#ffffff15
  • statusBar.debuggingBackground#fd716c
  • statusBar.debuggingForeground#000000
  • statusBar.foreground#ffffffc5
  • statusBar.noFolderBackground#262626
  • statusBarItem.activeBackground#ffffff
  • statusBarItem.focusBorder#2488d8
  • statusBarItem.hoverBackground#c9d1d914
  • statusBarItem.prominentBackground#6e768166
  • statusBarItem.remoteBackground#2488d8
  • statusBarItem.remoteForeground#000000
  • tab.activeBackground#262626
  • tab.activeBorder#262626
  • tab.activeBorderTop#2488d8
  • tab.activeForeground#ffffffc5
  • tab.border#ffffff15
  • tab.hoverBackground#262626
  • tab.inactiveBackground#171717
  • tab.inactiveForeground#ffffff80
  • tab.unfocusedActiveBorder#262626
  • tab.unfocusedActiveBorderTop#ffffff15
  • tab.unfocusedHoverBackground#6e76811a
  • terminal.foreground#ffffffc5
  • textBlockQuote.background#010409
  • textBlockQuote.border#ffffff14
  • textCodeBlock.background#6e768166
  • textLink.activeForeground#8bb6f7
  • textLink.foreground#8bb6f7
  • textPreformat.foreground#8b949e
  • textSeparator.foreground#d4d4d4
  • titleBar.activeBackground#171717
  • titleBar.activeForeground#a3a3a3
  • titleBar.border#ffffff15
  • titleBar.inactiveBackground#171717
  • titleBar.inactiveForeground#737373
  • welcomePage.tileBackground#ffffff0f

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
meta.embedded, source.groovy.embedded#a3a3a3
emphasisitalic
strongbold
header#000080
comment#6e6e6eitalic
constant.language#FF7171
constant.numeric, variable.other.enummember, keyword.operator.plus.exponent, keyword.operator.minus.exponent#FF7171
constant.regexp#646695
entity.name.tag#60a5fa
entity.name.tag.css#60a5fa
entity.other.attribute-name#ffedd5f0
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#60a5fa
invalid#f44747
markup.underlineunderline
markup.bold#60a5fabold
markup.heading#60a5fabold
markup.italicitalic
markup.inserted#b5cea8
markup.deleted#d9f99d
markup.changed#60a5fa
punctuation.definition.quote.begin.markdown#6A9955
punctuation.definition.list.begin.markdown#6796e6
markup.inline.raw#d9f99d
punctuation.definition.tag#a3a3a3
meta.preprocessor, entity.name.function.preprocessor#60a5fa
meta.preprocessor.string#d9f99d
meta.preprocessor.numeric#b5cea8
meta.structure.dictionary.key.python#e5e5e5
meta.diff.header#60a5fa
storage#60a5fa
storage.type#d680d2
storage.modifier, keyword.operator.noexcept#d680d2
string, meta.embedded.assembly#d9f99d
string.tag#d9f99d
string.value#d9f99d
string.regexp#d16969
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded#60a5fa
meta.template.expression#d4d4d4
support.type.vendored.property-name, support.type.property-name, variable.css, variable.scss, variable.other.less, source.coffee.embedded#e5e5e5
keyword#60a5fa
keyword.control#d680d2
keyword.operator#e5e5e5
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#d680d2
keyword.other.unit#b5cea8
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php#60a5fa
support.function.git-rebase#e5e5e5
constant.sha.git-rebase#b5cea8
storage.modifier.import.java, variable.language.wildcard.java, storage.modifier.package.java#d4d4d4
variable.language#60a5fa
entity.name.function, support.function, support.constant.handlebars, source.powershell variable.other.member, entity.name.operator.custom-literal#60a5fa
meta.return-type, 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#4EC9B0
meta.type.cast.expr, meta.type.new.expr, support.constant.math, support.constant.dom, support.constant.json, entity.other.inherited-class#60a5fa
keyword.control, source.cpp keyword.operator.new, keyword.operator.delete, keyword.other.using, keyword.other.operator, entity.name.operator#d680d2
variable, meta.definition.variable.name, support.variable, entity.name.variable, constant.other.placeholder#e5e5e5
variable.other.constant, variable.other.enummember#e5e5e5
meta.object-literal.key#e5e5e5
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#d9f99d
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#d9f99d
constant.character.character-class.regexp, constant.other.character-class.set.regexp, constant.other.character-class.regexp, constant.character.set.regexp#d16969
keyword.operator.or.regexp, keyword.control.anchor.regexp#60a5fa
keyword.operator.quantifier.regexp#FFB45E
constant.character#60a5fa
constant.character.escape#60a5fa
entity.name.label#C8C8C8
punctuation#a3a3a3
comment, punctuation.definition.comment#737373
text.html.markdown, meta.jsx.children, text.html.derivative#e5e5e5