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.

  • actionBar.toggledBackground#383a49
  • activityBar.activeBackground#a8bcfc50
  • activityBar.activeBorder#a8bcfc
  • activityBar.activeFocusBorder#ff0000
  • activityBar.background#01030a
  • activityBar.border#01030a
  • activityBar.foreground#a8bcfc
  • activityBar.inactiveForeground#a8bcfc50
  • activityBarBadge.background#a8bcfc
  • activityBarBadge.foreground#01030a
  • badge.background#616161
  • badge.foreground#f8f8f8
  • button.background#0078d4
  • button.border#ffffff12
  • button.foreground#ffffff
  • button.hoverBackground#026ec1
  • button.secondaryBackground#313131
  • button.secondaryForeground#cccccc
  • button.secondaryHoverBackground#3c3c3c
  • chat.slashCommandBackground#34414b
  • chat.slashCommandForeground#40a6ff
  • checkbox.background#313131
  • checkbox.border#3c3c3c
  • debugToolBar.background#181818
  • descriptionForeground#9d9d9d
  • dropdown.background#313131
  • dropdown.border#3c3c3c
  • dropdown.foreground#cccccc
  • dropdown.listBackground#1f1f1f
  • editor.background#01030a
  • editor.findMatchBackground#a8bcfc00
  • editor.findMatchBorder#a8bcfc20
  • editor.findMatchHighlightBackground#a1aed828
  • editor.foreground#cccccc
  • editor.inactiveSelectionBackground#3a3d41
  • editor.lineHighlightBackground#a8bcfc1a
  • editor.lineHighlightBorder#a8bcfc08
  • editor.selectionBackground#a8bcfc28
  • editor.selectionHighlightBackground#add6ff26
  • editor.selectionHighlightBorder#a8bcfc20
  • editor.wordHighlightBackground#a8bcfc28
  • editor.wordHighlightBorder#a8bcfc20
  • editorGroup.border#ffffff17
  • editorGroupHeader.border#a8bcfc20
  • editorGroupHeader.tabsBackground#01030a
  • editorGroupHeader.tabsBorder#a8bcfc20
  • editorGutter.addedBackground#2ea043
  • editorGutter.deletedBackground#f85149
  • editorGutter.modifiedBackground#0078d4
  • editorIndentGuide.activeBackground1#707070
  • editorIndentGuide.background1#404040
  • editorLineNumber.activeForeground#a8bcfc
  • editorLineNumber.foreground#a8bcfc50
  • editorOverviewRuler.border#010409
  • editorWidget.background#202020
  • errorForeground#f85149
  • focusBorder#0078d4
  • foreground#cccccc
  • icon.foreground#a8bcfc
  • input.background#313131
  • input.border#3c3c3c
  • input.foreground#cccccc
  • input.placeholderForeground#818181
  • inputOption.activeBackground#2489db82
  • inputOption.activeBorder#2488db
  • keybindingLabel.foreground#cccccc
  • list.activeSelectionBackground#a8bcfc28
  • list.activeSelectionIconForeground#ffffff
  • list.dropBackground#383b3d
  • list.focusOutline#a8bcfc87
  • list.inactiveSelectionBackground#a8bcfc28
  • menu.background#1f1f1f
  • menu.border#454545
  • menu.foreground#cccccc
  • menu.separatorBackground#454545
  • notificationCenterHeader.background#1f1f1f
  • notificationCenterHeader.foreground#cccccc
  • notifications.background#1f1f1f
  • notifications.border#2b2b2b
  • notifications.foreground#cccccc
  • panel.background#01030a
  • panel.border#a8bcfc
  • panelInput.border#a8bcfc55
  • panelSection.border#a8bcfc55
  • panelSection.dropBackground#a8bcfc50
  • panelTitle.activeBorder#a8bcfc
  • panelTitle.activeForeground#cccccc
  • panelTitle.inactiveForeground#9d9d9d
  • peekViewEditor.background#1f1f1f
  • peekViewEditor.matchHighlightBackground#bb800966
  • peekViewResult.background#1f1f1f
  • peekViewResult.matchHighlightBackground#bb800966
  • pickerGroup.border#3c3c3c
  • ports.iconRunningProcessForeground#369432
  • progressBar.background#0078d4
  • quickInput.background#222222
  • quickInput.foreground#cccccc
  • settings.dropdownBackground#313131
  • settings.dropdownBorder#3c3c3c
  • settings.headerForeground#ffffff
  • settings.modifiedItemIndicator#bb800966
  • sideBar.background#01030a
  • sideBar.border#01030a
  • sideBar.foreground#cccccc
  • sideBarSectionHeader.background#a8bcfc28
  • sideBarSectionHeader.border#a8bcfc20
  • sideBarSectionHeader.foreground#a8bcfc
  • sideBarTitle.foreground#a8bcfc85
  • statusBar.background#090b10
  • statusBar.border#2b2b2b
  • statusBar.debuggingBackground#0078d4
  • statusBar.debuggingForeground#ffffff
  • statusBar.focusBorder#0078d4
  • statusBar.foreground#cccccc
  • statusBar.noFolderBackground#1f1f1f
  • statusBarItem.focusBorder#0078d4
  • statusBarItem.prominentBackground#6e768166
  • statusBarItem.remoteBackground#0078d4
  • statusBarItem.remoteForeground#ffffff
  • tab.activeBackground#a8bcfc28
  • tab.activeBorder#1f1f1f
  • tab.activeBorderTop#a8bcfc
  • tab.activeForeground#ffffff
  • tab.border#a8bcfc20
  • tab.hoverBackground#1f1f1f
  • tab.inactiveBackground#01030a
  • tab.inactiveForeground#9d9d9d
  • tab.lastPinnedBorder#cccccc33
  • tab.unfocusedActiveBorder#1f1f1f
  • tab.unfocusedActiveBorderTop#a8bcfc85
  • tab.unfocusedHoverBackground#1f1f1f
  • terminal.foreground#cccccc
  • terminal.inactiveSelectionBackground#3a3d41
  • terminal.tab.activeBorder#0078d4
  • textBlockQuote.background#2b2b2b
  • textBlockQuote.border#616161
  • textCodeBlock.background#2b2b2b
  • textLink.activeForeground#4daafc
  • textLink.foreground#4daafc
  • textPreformat.background#3c3c3c
  • textPreformat.foreground#d0d0d0
  • textSeparator.foreground#21262d
  • titleBar.activeBackground#010102
  • titleBar.activeForeground#cccccc
  • titleBar.border#2b2b2b
  • titleBar.inactiveBackground#1c1e26
  • titleBar.inactiveForeground#8f93a2
  • welcomePage.progress.foreground#0078d4
  • welcomePage.tileBackground#2b2b2b
  • widget.border#313131

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
emphasisitalic
strongbold
markup.underlineunderline
markup.italicitalic
markup.strikethroughstrikethrough
meta.embedded, source.groovy.embedded, string meta.image.inline.markdown, variable.legacy.builtin.python#D4D4D4
header#000080
comment#a1add8b3italic
constant.language#569CD6
constant.numeric, variable.other.enummember, keyword.operator.plus.exponent, keyword.operator.minus.exponent#B5CEA8
constant.regexp#646695
entity.name.tag#569CD6
entity.name.tag.css#D7BA7D
entity.other.attribute-name#9CDCFE
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#D7BA7D
invalid#F44747
markup.bold#569CD6bold
markup.heading#569CD6bold
markup.inserted#B5CEA8
markup.deleted#CE9178
markup.changed#569CD6
markup.inline.raw#CE9178
punctuation.definition.tag#808080
meta.preprocessor, entity.name.function.preprocessor#569CD6
meta.preprocessor.string#CE9178
meta.preprocessor.numeric#B5CEA8
meta.structure.dictionary.key.python#9CDCFE
meta.diff.header#569CD6
storage#569CD6
storage.type#569CD6
storage.modifier, keyword.operator.noexcept#569CD6
string, meta.embedded.assembly#CE9178
string.tag#CE9178
string.value#CE9178
string.regexp#D16969
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded#569CD6
meta.template.expression#D4D4D4
support.type.vendored.property-name, support.type.property-name, variable.css, variable.scss, variable.other.less, source.coffee.embedded#9CDCFE
keyword#569CD6
keyword.control#569CD6
keyword.operator#D4D4D4
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#569CD6
keyword.other.unit#B5CEA8
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php#569CD6
support.function.git-rebase#9CDCFE
constant.sha.git-rebase#B5CEA8
storage.modifier.import.java, variable.language.wildcard.java, storage.modifier.package.java#D4D4D4
variable.language#569CD6
entity.name.function, support.function, support.constant.handlebars, source.powershell variable.other.member, entity.name.operator.custom-literal#DCDCAA
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#4EC9B0
keyword.control, source.cpp keyword.operator.new, keyword.operator.delete, keyword.other.using, keyword.other.directive.using, keyword.other.operator, entity.name.operator#C586C0
variable, meta.definition.variable.name, support.variable, entity.name.variable, constant.other.placeholder#9CDCFE
variable.other.constant, variable.other.enummember#4FC1FF
variable.parameter#FC7E9BE6
meta.object-literal.key#9CDCFE
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#CE9178
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#CE9178
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#DCDCAA
keyword.operator.quantifier.regexp#D7BA7D
constant.character, constant.other.option#569CD6
constant.character.escape#D7BA7D
entity.name.label#C8C8C8
constant#FFB1A3E6
constant.character.escape#25B0BCE6
entity.name#FAC29AE6
entity.name.function#02BBCCE6
entity.name.tag#E95678E6
entity.name.type, storage.type.cs#FAC29AE6
entity.other.attribute-name#F09483E6italic
entity.other.inherited-class#FAB795E6
entity.other.attribute-name.id#25B0BCE6
entity.other.attribute-name.pseudo-element, entity.other.attribute-name.pseudo-class#FAB795E6
entity.name.variable, variable#E95678E6
keyword#D993FFE6italic
keyword.operator#BBBBBB
keyword.operator.new, keyword.operator.expression, keyword.operator.logical, keyword.operator.delete#B877DBE6
keyword.other.unit#F09483E6
markup.quote#FAB795B3italic
markup.heading, entity.name.section#E95678E6
markup.bold#B877DBE6bold
markup.italic#25B0BCE6italic
markup.inline.raw, markup.fenced_code.block#F09483E6
markup.underline.link#FAB795E6
storage#B877DBE6italic
string.quoted, string.template#FAB795E6
string.regexp#F09483E6
string.other.link#F09483E6
support#FAC29AE6
support.function#25B0BCE6
support.variable#E95678E6
support.type.property-name, meta.object-literal.key#E95678E6
support.type.property-name.css#BBBBBB
variable.language#FAC29AE6italic
variable.parameteritalic
string.template meta.embedded#BBBBBB
punctuation.definition.tag#E95678B3
punctuation.separator#BBBBBB
punctuation.definition.template-expression#B877DBE6
punctuation.section.embedded#B877DBE6
punctuation.definition.list#F09483E6
token.info-token#6796E6
token.warn-token#CD9731
token.error-token#F44747
token.debug-token#B267E6
punctuation.definition.variable.shell#6a283c
punctuation.definition.evaluation.arithmetic.begin.shell, punctuation.definition.evaluation.arithmetic.end.shell#B5CEA8
punctuation.definition.evaluation.parens.begin.shell, punctuation.definition.evaluation.parens.end.shell#F9C859
entity.name.command.shell#4EC9B0
meta.parameter-expansion#FC7E9BE6
markup.heading.markdown#d24e6dbold
punctuation.definition.heading.markdown#e956784d
text.html.markdown, meta.paragraph.markdown#d9d9da
markup.italic.markdown#d9d9daitalic
punctuation.definition.italic.markdown#67686c
markup.bold.markdown#e6e6e7bold
punctuation.definition.bold.markdown#67686c
markup.strikethrough.markdown#999a9dstrikethrough
punctuation.definition.strikethrough.markdown#67686c
markup.quote.markdown, punctuation.definition.quote.begin.markdown#6B99559A
punctuation.definition.list.begin.markdown#6796E6
markup.raw.block.markdown, markup.inline.raw.string.markdown, markup.fenced_code.block.markdown, markup.math.inline.markdown, markup.math.block.markdown#F09483E6
punctuation.definition.raw.markdown, punctuation.definition.markdown#F0938357
punctuation.definition.table.markdown, punctuation.separator.table.markdown#2D456B
meta.separator.markdown#2D456B
meta.link.inline.markdown#F09483E6
string.other.link.title.markdown#FAB795E6
markup.underline.link.markdown#F09483E6
string.other.link.description.title.markdown#FAB795E6
punctuation.definition.metadata.markdown#FAB7953D
punctuation.definition.link.title.begin.markdown, punctuation.definition.link.title.end.markdown#FAB7953D
punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown#FAB7953D
string.other.link.description.markdown#FFE998E6
punctuation.definition.link.description.begin.markdown, punctuation.definition.link.description.end.markdown#FAB7953D
constant.other.reference.link.markdown#5F8387
punctuation.definition.constant.markdown, punctuation.definition.constant.begin.markdown, punctuation.definition.constant.end.markdown, punctuation.separator.key-value.markdown#5F838756
punctuation.support.type.property-name.begin.json, punctuation.support.type.property-name.end.json#522030
punctuation.definition.string.begin.json, punctuation.definition.string.end.json#58423b