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.activeBorder#00aaaa
  • activityBar.background#181818
  • activityBar.border#2b2b2b
  • activityBar.foreground#d7d7d7
  • activityBar.inactiveForeground#868686
  • activityBarBadge.background#007676
  • activityBarBadge.foreground#ffffff
  • badge.background#616161
  • badge.foreground#f8f8f8
  • button.background#007676
  • button.border#ffffff12
  • button.foreground#ffffff
  • button.hoverBackground#00c2c2
  • button.secondaryBackground#313131
  • button.secondaryForeground#cccccc
  • button.secondaryHoverBackground#3c3c3c
  • chat.slashCommandBackground#34414b
  • chat.slashCommandForeground#00aaaa
  • checkbox.background#313131
  • checkbox.border#3c3c3c
  • debugToolBar.background#181818
  • descriptionForeground#9d9d9d
  • dropdown.background#313131
  • dropdown.border#3c3c3c
  • dropdown.foreground#cccccc
  • dropdown.listBackground#002828
  • editor.background#002828
  • editor.findMatchBackground#9e6a03
  • editor.foreground#cccccc
  • editor.inactiveSelectionBackground#004e4e
  • editor.selectionHighlightBackground#add6ff26
  • editorBracketHighlight.foreground1#e8d000
  • editorBracketHighlight.foreground2#ff80e0
  • editorBracketHighlight.foreground3#40d0ff
  • editorBracketHighlight.foreground4#e8d000
  • editorBracketHighlight.foreground5#ff80e0
  • editorBracketHighlight.foreground6#40d0ff
  • editorBracketHighlight.unexpectedBracket.foreground#ff4040
  • editorGroup.border#ffffff17
  • editorGroupHeader.tabsBackground#181818
  • editorGroupHeader.tabsBorder#2b2b2b
  • editorGutter.addedBackground#2ea043
  • editorGutter.deletedBackground#f85149
  • editorGutter.modifiedBackground#007676
  • editorIndentGuide.activeBackground1#707070
  • editorIndentGuide.background1#404040
  • editorLineNumber.activeForeground#cccccc
  • editorLineNumber.foreground#6e7681
  • editorOverviewRuler.border#010409
  • editorWidget.background#202020
  • errorForeground#f85149
  • focusBorder#007676
  • foreground#cccccc
  • icon.foreground#cccccc
  • input.background#313131
  • input.border#3c3c3c
  • input.foreground#cccccc
  • input.placeholderForeground#818181
  • inputOption.activeBackground#2489db82
  • inputOption.activeBorder#2488db
  • keybindingLabel.foreground#cccccc
  • list.activeSelectionIconForeground#ffffff
  • list.dropBackground#383b3d
  • menu.background#002828
  • menu.border#454545
  • menu.foreground#cccccc
  • menu.separatorBackground#454545
  • notificationCenterHeader.background#002828
  • notificationCenterHeader.foreground#cccccc
  • notifications.background#002828
  • notifications.border#2b2b2b
  • notifications.foreground#cccccc
  • panel.background#181818
  • panel.border#2b2b2b
  • panelInput.border#2b2b2b
  • panelTitle.activeBorder#007676
  • panelTitle.activeForeground#cccccc
  • panelTitle.inactiveForeground#9d9d9d
  • peekViewEditor.background#002828
  • peekViewEditor.matchHighlightBackground#bb800966
  • peekViewResult.background#002828
  • peekViewResult.matchHighlightBackground#bb800966
  • pickerGroup.border#3c3c3c
  • ports.iconRunningProcessForeground#369432
  • progressBar.background#007676
  • quickInput.background#222222
  • quickInput.foreground#cccccc
  • settings.dropdownBackground#313131
  • settings.dropdownBorder#3c3c3c
  • settings.headerForeground#ffffff
  • settings.modifiedItemIndicator#bb800966
  • sideBar.background#181818
  • sideBar.border#2b2b2b
  • sideBar.foreground#cccccc
  • sideBarSectionHeader.background#181818
  • sideBarSectionHeader.border#2b2b2b
  • sideBarSectionHeader.foreground#cccccc
  • sideBarTitle.foreground#cccccc
  • statusBar.background#181818
  • statusBar.border#2b2b2b
  • statusBar.debuggingBackground#007676
  • statusBar.debuggingForeground#ffffff
  • statusBar.focusBorder#007676
  • statusBar.foreground#cccccc
  • statusBar.noFolderBackground#002828
  • statusBarItem.focusBorder#007676
  • statusBarItem.prominentBackground#6e768166
  • statusBarItem.remoteBackground#007676
  • statusBarItem.remoteForeground#ffffff
  • tab.activeBackground#002828
  • tab.activeBorder#002828
  • tab.activeBorderTop#007676
  • tab.activeForeground#ffffff
  • tab.border#2b2b2b
  • tab.hoverBackground#002828
  • tab.inactiveBackground#181818
  • tab.inactiveForeground#9d9d9d
  • tab.lastPinnedBorder#cccccc33
  • tab.unfocusedActiveBorder#002828
  • tab.unfocusedActiveBorderTop#2b2b2b
  • tab.unfocusedHoverBackground#002828
  • terminal.foreground#cccccc
  • terminal.inactiveSelectionBackground#004e4e
  • terminal.tab.activeBorder#007676
  • 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#181818
  • titleBar.activeForeground#cccccc
  • titleBar.border#2b2b2b
  • titleBar.inactiveBackground#002828
  • titleBar.inactiveForeground#9d9d9d
  • welcomePage.progress.foreground#007676
  • welcomePage.tileBackground#2b2b2b
  • widget.border#313131

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
meta.embedded, source.groovy.embedded, string meta.image.inline.markdown, variable.legacy.builtin.python#D4D4D4
emphasisitalic
strongbold
header#000080
comment#6A9955
constant.language#60A2D8
constant.numeric, variable.other.enummember, keyword.operator.plus.exponent, keyword.operator.minus.exponent#B5CEA8
constant.regexp#646695
entity.name.tag#60A2D8
entity.name.tag.css#D7BA7D
entity.other.attribute-name#90C6F0
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.underlineunderline
markup.bold#60A2D8bold
markup.heading#60A2D8bold
markup.italicitalic
markup.strikethroughstrikethrough
markup.inserted#B5CEA8
markup.deleted#CE9178
markup.changed#60A2D8
punctuation.definition.quote.begin.markdown#6A9955
punctuation.definition.list.begin.markdown#6796E6
markup.inline.raw#CE9178
punctuation.definition.tag#808080
meta.preprocessor, entity.name.function.preprocessor#60A2D8
meta.preprocessor.string#C0C0C0
meta.preprocessor.numeric#D0B880
meta.structure.dictionary.key.python#90C6F0
meta.diff.header#60A2D8
storage#60A2D8
storage.type#60A2D8
storage.modifier, keyword.operator.noexcept#60A2D8
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#60A2D8
meta.template.expression#D4D4D4
support.type.vendored.property-name, support.type.property-name, variable.css, variable.scss, variable.other.less, source.coffee.embedded#90C6F0
keyword#60A2D8
keyword.control#60A2D8
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#60A2D8
keyword.other.unit#B5CEA8
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php#60A2D8
support.function.git-rebase#90C6F0
constant.sha.git-rebase#B5CEA8
storage.modifier.import.java, variable.language.wildcard.java, storage.modifier.package.java#D4D4D4
variable.language#60A2D8
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#D088A4
variable, meta.definition.variable.name, support.variable, entity.name.variable, constant.other.placeholder#90C6F0
variable.other.constant, variable.other.enummember#4FC1FF
meta.object-literal.key#90C6F0
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#60A2D8
constant.character.escape#D7BA7D
entity.name.label#C8C8C8
constant.numeric#D0B880
variable.other.constant#D0B880
constant.character.escape#D0B880
variable.other.enummember#D0B880
variable.other.readwrite#C0C0C0
variable.parameter#C0C0C0
punctuation.separator.comma#C0C0C0
punctuation.terminator.statement#C0C0C0
punctuation.curlybrace#40d0ff
punctuation.parenthesis#ff80e0
punctuation.squarebracket#e8d000
entity.name.function#C3C393
entity.name.variable.field#90C6F0
variable.other.property#90C6F0
entity.name.type.enum#A8C278
entity.name.type.struct#84C884
entity.name.type.class#50CCA4
entity.name.type.interface#50c8d8
entity.name.namespace#C0C0C0
string#C89880
comment#7890A8
comment.documentation#8888C8
keyword.operator#C0C0C0
entity.name.function.member.overload#C0C0C0
entity.name.type.type-parameter#50c8d8
token.info-token#6796E6
token.warn-token#CD9731
token.error-token#F44747
token.debug-token#B267E6