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#ff8787
  • activityBar.background#191624
  • activityBar.border#f8f2fd12
  • activityBar.foreground#c8c2dd
  • activityBarBadge.background#66b395
  • activityBarBadge.foreground#221e30
  • badge.background#f8f2fd12
  • badge.foreground#c8c2dd
  • banner.background#48425d
  • banner.foreground#f8f2fd
  • breadcrumb.foreground#655f7e
  • button.background#ff87877f
  • button.hoverBackground#ff8787aa
  • commandCenter.activeBackground#f8f2fd10
  • commandCenter.border#f8f2fd2a
  • diffEditor.border#f8f2fd12
  • diffEditor.diagonalFill#f8f2fd12
  • diffEditor.insertedLineBackground#66b39530
  • diffEditor.insertedTextBackground#66b39530
  • diffEditor.removedLineBackground#ff878730
  • diffEditor.removedTextBackground#ff878730
  • disabledForeground#78728d
  • dropdown.background#191624
  • dropdown.border#f8f2fd12
  • editor.background#221e30
  • editor.findMatchBackground#66b3954f
  • editor.findMatchBorder#66b395
  • editor.findMatchHighlightBackground#66b3952f
  • editor.findMatchHighlightBorder#66b3955f
  • editor.foreground#ddd8e4
  • editor.hoverHighlightBackground#f8f2fd10
  • editor.lineHighlightBackground#2d2a3e
  • editor.selectionBackground#f8f2fd1f
  • editor.selectionHighlightBorder#f8f2fd3f
  • editor.wordHighlightBackground#f8f2fd1f
  • editor.wordHighlightStrongBackground#f8f2fd1f
  • editorBracketHighlight.foreground1#b5a165
  • editorBracketHighlight.foreground2#5e9c84
  • editorBracketHighlight.foreground3#8e7395
  • editorBracketHighlight.foreground4#5a7aaa
  • editorCodeLens.foreground#68627d
  • editorCursor.foreground#ff8787
  • editorError.foreground#ff8787
  • editorGroupHeader.tabsBackground#191624
  • editorGroupHeader.tabsBorder#f8f2fd12
  • editorGutter.addedBackground#66b395af
  • editorGutter.deletedBackground#ff8787af
  • editorGutter.modifiedBackground#7098d4af
  • editorHoverWidget.statusBarBackground#48425d
  • editorIndentGuide.activeBackground#f8f2fd3f
  • editorIndentGuide.background#f8f2fd12
  • editorInfo.foreground#7098d4
  • editorInlayHint.background#f8f2fd10
  • editorInlayHint.foreground#f8f2fd6f
  • editorLineNumber.activeForeground#c8c2dd
  • editorLineNumber.foreground#68627d
  • editorLink.activeForeground#ff8787
  • editorStickyScrollHover.background#2d2a3e
  • editorSuggestWidget.background#2d2a3e
  • editorSuggestWidget.selectedBackground#48425d
  • editorWarning.foreground#e7d38f
  • editorWhitespace.foreground#f8f2fd12
  • editorWidget.background#2d2a3e
  • focusBorder#f8f2fd3f
  • foreground#9892ad
  • gitDecoration.addedResourceForeground#66b395
  • gitDecoration.conflictingResourceForeground#dd9a6a
  • gitDecoration.deletedResourceForeground#ff8787
  • gitDecoration.ignoredResourceForeground#f8f2fd3f
  • gitDecoration.modifiedResourceForeground#e7d38f
  • gitDecoration.renamedResourceForeground#6ab8c0
  • input.background#221e30
  • input.border#f8f2fd10
  • inputOption.activeBackground#48425d
  • inputOption.activeBorder#78728d
  • inputOption.activeForeground#f8f2fd
  • list.activeSelectionBackground#221e30
  • list.dropBackground#f8f2fd12
  • list.filterMatchBackground#66b39530
  • list.filterMatchBorder#66b395
  • list.focusBackground#f8f2fd12
  • list.focusHighlightForeground#66b395
  • list.focusOutline#f8f2fd12
  • list.highlightForeground#66b395
  • list.hoverBackground#221e30
  • list.inactiveSelectionBackground#221e30
  • menu.background#191624
  • menu.foreground#cccccc
  • menu.separatorBackground#f8f2fd12
  • merge.currentContentBackground#66b3953f
  • merge.currentHeaderBackground#66b3957f
  • merge.incomingContentBackground#7098d43f
  • merge.incomingHeaderBackground#7098d47f
  • minimap.background#262235
  • minimap.errorHighlight#ff8787
  • minimap.findMatchHighlight#66b3959f
  • minimap.selectionHighlight#7098d49f
  • minimapSlider.activeBackground#f8f2fd3f
  • minimapSlider.background#f8f2fd12
  • minimapSlider.hoverBackground#f8f2fd2f
  • panel.background#191624
  • peekView.border#68627d
  • peekViewEditor.background#2d2a3e
  • peekViewEditor.matchHighlightBackground#66b3953f
  • peekViewEditor.matchHighlightBorder#66b395
  • peekViewEditorStickScroll.background#2d2a3e
  • peekViewResult.background#282539
  • peekViewResult.matchHighlightBackground#66b3953f
  • peekViewResult.selectionBackground#66b3953f
  • peekViewTitle.background#2d2a3e
  • pickerGroup.foreground#66b395
  • progressBar.background#ff8787
  • quickInput.background#191624
  • sash.hoverBorder#b290ba
  • scrollbar.shadow#191624
  • scrollbarSlider.activeBackground#f8f2fd3f
  • scrollbarSlider.background#f8f2fd12
  • scrollbarSlider.hoverBackground#f8f2fd2f
  • searchEditor.findMatchBorder#66b395
  • selection.background#48425d
  • sideBar.background#191624
  • sideBar.border#f8f2fd12
  • sideBarSectionHeader.background#191624
  • sideBarSectionHeader.border#f8f2fd12
  • statusBar.background#191624
  • statusBar.border#f8f2fd12
  • statusBar.debuggingBackground#66b395
  • statusBar.debuggingForeground#000000
  • statusBar.focusBorder#00000000
  • statusBar.foreground#9892ad
  • statusBar.noFolderBackground#221e30
  • statusBar.noFolderForeground#9892ad
  • statusBarItem.errorBackground#ff8787
  • statusBarItem.errorForeground#000000
  • statusBarItem.prominentBackground#66b395
  • statusBarItem.prominentForeground#000000
  • statusBarItem.remoteBackground#66b395
  • statusBarItem.remoteForeground#000000
  • statusBarItem.warningBackground#d8b544
  • statusBarItem.warningForeground#000000
  • tab.activeBackground#221e30
  • tab.activeBorder#ff8787
  • tab.inactiveBackground#191624
  • terminal.ansiBlack#38324d
  • terminal.ansiBlue#7098d4
  • terminal.ansiBrightBlack#68627d
  • terminal.ansiBrightBlue#80a8e4
  • terminal.ansiBrightCyan#7ac8d0
  • terminal.ansiBrightGreen#76c3a5
  • terminal.ansiBrightMagenta#c2a0ca
  • terminal.ansiBrightRed#f48484
  • terminal.ansiBrightWhite#f6f6f6
  • terminal.ansiBrightYellow#f2d98e
  • terminal.ansiCyan#6ab8c0
  • terminal.ansiGreen#66b395
  • terminal.ansiMagenta#b290ba
  • terminal.ansiRed#e47474
  • terminal.ansiWhite#dddddd
  • terminal.ansiYellow#e2c97e
  • terminal.background#191624
  • terminal.foreground#c0c0c0
  • terminal.selectionBackground#48425d
  • terminal.tab.activeBorder#66b395
  • textCodeBlock.background#48425d
  • textLink.activeForeground#ff8787
  • textLink.foreground#ff8787cc
  • titleBar.activeBackground#191624
  • titleBar.border#f8f2fd10
  • titleBar.inactiveBackground#221e30
  • toolbar.hoverBackground#48425d
  • widget.shadow#00000033

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
meta.embedded, source.groovy.embedded, string meta.image.inline.markdown#d4d4d4
emphasisitalic
strongbold
header#5fb5be
comment, punctuation.definition.comment#F8F2FD4F
punctuation.definition, punctuation.definition.quote.begin.markdown, punctuation.definition.tag, punctuation.section.embedded#ffffff5f
constant.numeric, variable.other.enummember, keyword.operator.plus.exponent, keyword.operator.minus.exponent#f6c177
constant.regexp#f6c177
entity.name.tag, entity.name.tag.css#ed9cc2
support.class.component#5fb5be
entity.other.attribute-name#a0a5d6
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#5fb5be
invalid#e47474
markup.underlineunderline
string.other.link#5fb5be
markup.underline.link#808080
markup.bold#a0a5d6bold
markup.heading#74ccaabold
markup.italic#a0a5d6italic
markup.strikethroughstrikethrough
markup.quote#a0a0a0italic
markup.inserted#74ccaa
markup.deleted#ff8787
markup.changed#5fb5be
punctuation.definition.list.begin.markdown#5fb5be
markup.inline.raw#f6c177
meta.preprocessor, entity.name.function.preprocessor#5fb5be
meta.preprocessor.string#74ccaa
meta.preprocessor.numeric#f6c177
meta.structure.dictionary.key.python#a0a5d6
meta.diff.header#5fb5be
storage#ed9cc2
storage.type#a0a5d6
storage.modifier, keyword.operator.noexcept#ed9cc2
string, meta.embedded.assembly, punctuation.definition.string#74ccaa
string.tag#74ccaa
string.value#74ccaa
string.regexp#f6c177
meta.template.expression#d4d4d4
support.type.vendored.property-name, support.type.property-name, variable.css, variable.scss, variable.other.less, source.coffee.embedded#a0a5d6
keyword#ed9cc2
keyword.control#ed9cc2
keyword.operator#ed9cc2
keyword.operator.new, 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#ed9cc2
support.class.error, keyword.operator.expression.delete, keyword.operator.expression.void, keyword.operator.void, keyword.operator.delete, constant.language, constant.language.null, constant.language.boolean.false, constant.language.boolean.true, constant.language.undefined#f6c177italic
keyword.other.unit#ed9cc2
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php#ed9cc2
support.function.git-rebase#5fb5be
constant.sha.git-rebase#f6c177
storage.modifier.import.java, variable.language.wildcard.java, storage.modifier.package.java#74ccaa
variable.language#ed9cc2italic
entity.name.function, support.function, support.constant.handlebars, source.powershell variable.other.member, entity.name.operator.custom-literal#5fb5be
support.class, support.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#A0C0D6
entity.name.type#A0C0D6
meta.type.cast.expr, meta.type.new.expr, support.constant.math, support.constant.dom, support.constant.json, entity.other.inherited-class#f3a580
keyword.control, source.cpp keyword.operator.new, keyword.operator.delete, keyword.other.using, keyword.other.operator, entity.name.operator#ed9cc2
variable, meta.definition.variable.name, support.variable, entity.name.variable, constant.other.placeholder#dcdde4
variable.parameter#f3a580
variable.other.constant, variable.other.enummember#dcdde4
meta.object-literal.key#dcdde4
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#74ccaa
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#74ccaa
constant.character.character-class.regexp, constant.other.character-class.set.regexp, constant.other.character-class.regexp, constant.character.set.regexp#f6c177
keyword.operator.or.regexp, keyword.control.anchor.regexp#5fb5be
keyword.operator.quantifier.regexp#5fb5be
constant.character#f6c177
constant.character.escape#5fb5be
entity.name.label#C8C8C8