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#FFAA00
  • activityBar.background#181818
  • activityBar.border#ffffff15
  • activityBar.foreground#d7d7d7
  • activityBar.inactiveForeground#ffffff80
  • activityBarBadge.background#FFAA00
  • activityBarBadge.foreground#ffffff
  • badge.background#FFAA00
  • badge.foreground#ffffff
  • button.background#FFAA00
  • button.border#ffffff12
  • button.foreground#ffffff
  • button.hoverBackground#FFAA00
  • button.secondaryBackground#ffffff0f
  • button.secondaryForeground#cccccc
  • button.secondaryHoverBackground#ffffff15
  • checkbox.background#313131
  • checkbox.border#ffffff1f
  • debugToolBar.background#181818
  • descriptionForeground#8b949e
  • diffEditor.insertedLineBackground#23863633
  • diffEditor.insertedTextBackground#2386364d
  • diffEditor.removedLineBackground#da363333
  • diffEditor.removedTextBackground#da36334d
  • dropdown.background#313131
  • dropdown.border#ffffff1f
  • dropdown.foreground#cccccc
  • dropdown.listBackground#313131
  • editor.background#191919
  • editor.findMatchBackground#9e6a03
  • editor.foreground#cccccc
  • editor.inactiveSelectionBackground#3a3d41
  • editor.selectionHighlightBackground#add6ff26
  • editorGroup.border#ffffff17
  • editorGroupHeader.tabsBackground#181818
  • editorGroupHeader.tabsBorder#ffffff15
  • editorGutter.addedBackground#2ea043
  • editorGutter.deletedBackground#f85149
  • editorGutter.modifiedBackground#FFAA00
  • editorIndentGuide.activeBackground#707070
  • editorIndentGuide.background#404040
  • editorInlayHint.background#8b949e33
  • editorInlayHint.foreground#8b949e
  • editorInlayHint.typeBackground#8b949e33
  • editorInlayHint.typeForeground#8b949e
  • editorLineNumber.activeForeground#cccccc
  • editorLineNumber.foreground#6e7681
  • editorOverviewRuler.border#010409
  • editorWidget.background#1f1f1f
  • errorForeground#f85149
  • focusBorder#FFAA00
  • foreground#cccccc
  • icon.foreground#FFAA00
  • input.background#2a2a2a
  • input.border#ffffff1f
  • input.foreground#cccccc
  • input.placeholderForeground#ffffff79
  • inputOption.activeBackground#2489db82
  • inputOption.activeBorder#2488db
  • keybindingLabel.foreground#cccccc
  • list.activeSelectionBackground#323232
  • list.activeSelectionForeground#ffffff
  • list.activeSelectionIconForeground#ffffff
  • list.dropBackground#383b3d
  • menu.background#1f1f1f
  • menu.border#454545
  • menu.foreground#cccccc
  • menu.separatorBackground#454545
  • notificationCenterHeader.background#1f1f1f
  • notificationCenterHeader.foreground#cccccc
  • notifications.background#1f1f1f
  • notifications.border#ffffff15
  • notifications.foreground#cccccc
  • panel.background#181818
  • panel.border#ffffff15
  • panelInput.border#ffffff15
  • panelTitle.activeBorder#FFAA00
  • panelTitle.activeForeground#cccccc
  • panelTitle.inactiveForeground#8b949e
  • peekViewEditor.background#1f1f1f
  • peekViewEditor.matchHighlightBackground#bb800966
  • peekViewResult.background#1f1f1f
  • peekViewResult.matchHighlightBackground#bb800966
  • pickerGroup.border#ffffff15
  • pickerGroup.foreground#8b949e
  • ports.iconRunningProcessForeground#369432
  • progressBar.background#FFAA00
  • quickInput.background#1f1f1f
  • quickInput.foreground#cccccc
  • scrollbar.shadow#484f5833
  • scrollbarSlider.activeBackground#6e768187
  • scrollbarSlider.background#6e768133
  • scrollbarSlider.hoverBackground#6e768145
  • settings.dropdownBackground#313131
  • settings.dropdownBorder#ffffff1f
  • settings.headerForeground#ffffff
  • settings.modifiedItemIndicator#bb800966
  • sideBar.background#181818
  • sideBar.border#ffffff15
  • sideBar.foreground#cccccc
  • sideBarSectionHeader.background#181818
  • sideBarSectionHeader.border#ffffff15
  • sideBarSectionHeader.foreground#cccccc
  • sideBarTitle.foreground#cccccc
  • statusBar.background#b77b02
  • statusBar.border#ffffff15
  • statusBar.debuggingBackground#b77b02
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#ffffff
  • statusBar.noFolderBackground#1f1f1f
  • statusBarItem.focusBorder#ffdd00
  • statusBarItem.prominentBackground#6e768166
  • statusBarItem.remoteBackground#FFAA00
  • statusBarItem.remoteForeground#ffffff
  • tab.activeBackground#1f1f1f
  • tab.activeBorder#1f1f1f
  • tab.activeBorderTop#FFAA00
  • tab.activeForeground#ffffff
  • tab.border#ffffff15
  • tab.hoverBackground#1f1f1f
  • tab.inactiveBackground#181818
  • tab.inactiveForeground#ffffff80
  • tab.lastPinnedBorder#cccccc33
  • tab.unfocusedActiveBorder#1f1f1f
  • tab.unfocusedActiveBorderTop#ffffff15
  • tab.unfocusedHoverBackground#6e76811a
  • terminal.foreground#cccccc
  • terminal.inactiveSelectionBackground#3a3d41
  • terminal.tab.activeBorder#FFAA00
  • textBlockQuote.background#010409
  • textBlockQuote.border#ffffff14
  • textCodeBlock.background#81816e66
  • textLink.activeForeground#FFAA00
  • textLink.foreground#FFAA00
  • textSeparator.foreground#21262d
  • titleBar.activeBackground#181818
  • titleBar.activeForeground#cccccc
  • titleBar.border#ffffff15
  • titleBar.inactiveBackground#1f1f1f
  • titleBar.inactiveForeground#8b949e
  • welcomePage.progress.foreground#FFAA00
  • welcomePage.tileBackground#ffffff0f
  • widget.border#ffffff15

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
entity.name.function, meta.require, support.function.any-method, variable.function, source.carbon#FFFF55
meta#9CDCFE
meta.embedded, source.groovy.embedded, string meta.image.inline.markdown#ffffff
emphasisitalic
strongbold
header#000080
comment#AAAAAA
constant.language#FFAA00
keyword.operator.arithmetic#ffffff
constant.numeric, variable.other.enummember, keyword.operator.plus.exponent, keyword.operator.minus.exponent#9CDCFE
constant.regexp#646695
entity.name.tag#FFAA00
entity.name.tag.css#9CDCFE
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#9CDCFE
invalid#F44747
markup.underlineunderline
markup.bold#FFAA00bold
markup.heading#FFAA00bold
markup.italicitalic
markup.strikethroughstrikethrough
markup.inserted#9CDCFE
markup.deleted#1aff88
markup.changed#FFAA00
punctuation.definition.quote.begin.markdown#6A9955
punctuation.definition.list.begin.markdown#6796E6
punctuation.separator#FFAA00
markup.inline.raw#1aff88
punctuation.definition.tag#808080
meta.preprocessor, entity.name.function.preprocessor#FFAA00
meta.preprocessor.string#1aff88
meta.preprocessor.numeric#9CDCFE
meta.structure.dictionary.key.python#9cdcfe
meta.diff.header#FFAA00
storage#FFAA00
storage.type#FFAA00
storage.modifier, keyword.operator.noexcept#FFAA00
string, meta.embedded.assembly#1aff88
string.tag#1aff88
string.value#1aff88
string.regexp#D16969
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded#FFAA00
meta.template.expression#ffffff
support.type.vendored.property-name, support.type.property-name, variable.css, variable.scss, variable.other.less, source.coffee.embedded, source.python#9cdcfe
keyword#FFAA00
keyword.control#FFAA00bold
keyword.operator#ffffff
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#FFAA00
keyword.other.unit#9CDCFE
punctuation.terminator#ffffff
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php#FFAA00
support.function.git-rebase#9cdcfe
constant.sha.git-rebase#9CDCFE
storage.modifier.import.java, variable.language.wildcard.java, storage.modifier.package.java#ffffff
variable.language#FFAA00
support.function, support.constant.handlebars, source.powershell variable.other.member, entity.name.operator.custom-literal#FFFF55
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#33BBFF
meta.type.cast.expr, meta.type.new.expr, support.constant.math, support.constant.dom, support.constant.json, entity.other.inherited-class#FFFF55
keyword.control, source.cpp keyword.operator.new, keyword.operator.delete, keyword.other.using, keyword.other.operator, entity.name.operator#FFAA00
variable, meta.definition.variable.name, support.variable, entity.name.variable, constant.other.placeholder#9cdcfe
variable.parameter#9cdcfeitalic
variable.other.constant, variable.other.enummember#55FFFF
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#1aff88
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#1aff88
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#9CDCFE
constant.character, constant.other.option#FFAA00
constant.character.escape#33BBFF
entity.name.label#C8C8C8
token.info-token#6796E6
token.warn-token#CD9731
token.error-token#F44747
token.debug-token#33BBFF

Shiki preview

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

Loading...