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#8a9a5b
  • activityBar.background#f8f7f3
  • activityBar.border#66666615
  • activityBar.foreground#4a4a4a
  • activityBarBadge.background#8a9a5b
  • activityBarBadge.foreground#ffffff
  • badge.background#8a9a5b
  • badge.foreground#ffffff
  • banner.background#f0f0f0
  • banner.foreground#4a4a4a
  • breadcrumb.foreground#666666
  • button.background#8a9a5b7f
  • button.hoverBackground#8a9a5baa
  • commandCenter.activeBackground#6666660a
  • commandCenter.activeBorder#66666615
  • commandCenter.border#66666615
  • diffEditor.border#66666615
  • diffEditor.diagonalFill#66666615
  • diffEditor.insertedLineBackground#8a9a5b25
  • diffEditor.insertedTextBackground#8a9a5b25
  • diffEditor.removedLineBackground#b87c7c25
  • diffEditor.removedTextBackground#b87c7c25
  • disabledForeground#666666
  • dropdown.background#fdfcf8
  • dropdown.border#666666
  • editor.background#fdfcf8
  • editor.findMatchBackground#8a9a5b3f
  • editor.findMatchBorder#8a9a5b
  • editor.findMatchHighlightBackground#8a9a5b2f
  • editor.findMatchHighlightBorder#8a9a5b4f
  • editor.foreground#3a3a3a
  • editor.hoverHighlightBackground#6666660a
  • editor.lineHighlightBackground#f5f5f5
  • editor.selectionBackground#66666615
  • editor.selectionHighlightBorder#6666662a
  • editor.wordHighlightBackground#66666615
  • editor.wordHighlightBorder#8a9a5b
  • editor.wordHighlightStrongBackground#66666615
  • editor.wordHighlightStrongBorder#8a9a5b
  • editorBracketHighlight.foreground1#8a9a5b
  • editorBracketHighlight.foreground2#6b8c9d
  • editorBracketHighlight.foreground3#9a8a5b
  • editorBracketHighlight.foreground4#8a6b9d
  • editorBracketHighlight.foreground5#b87c7c
  • editorBracketHighlight.foreground6#9d8a6b
  • editorCodeLens.foreground#666666
  • editorCursor.foreground#8a9a5b
  • editorError.foreground#b87c7c
  • editorGroupHeader.tabsBackground#f8f7f3
  • editorGroupHeader.tabsBorder#66666615
  • editorGutter.addedBackground#8a9a5baf
  • editorGutter.deletedBackground#b87c7caf
  • editorGutter.modifiedBackground#6b8c9daf
  • editorIndentGuide.activeBackground1#6666662a
  • editorIndentGuide.background1#6666660a
  • editorInfo.foreground#6b8c9d
  • editorInlayHint.background#6666660a
  • editorInlayHint.foreground#6666665f
  • editorLineNumber.activeForeground#3a3a3a
  • editorLineNumber.foreground#666666
  • editorLink.activeForeground#8a9a5b
  • editorStickyScrollHover.background#f0f0f0
  • editorSuggestWidget.background#ffffff
  • editorSuggestWidget.selectedBackground#f0f0f0
  • editorWarning.foreground#b8a76b
  • editorWhitespace.foreground#66666615
  • editorWidget.background#fafafa
  • focusBorder#8a9a5b
  • foreground#3a3a3a
  • gitDecoration.addedResourceForeground#8a9a5b
  • gitDecoration.conflictingResourceForeground#b89d6b
  • gitDecoration.deletedResourceForeground#b87c7c
  • gitDecoration.ignoredResourceForeground#6666663f
  • gitDecoration.modifiedResourceForeground#b8a76b
  • gitDecoration.renamedResourceForeground#6b9d9d
  • input.background#f8f7f3
  • input.border#666666
  • inputOption.activeBackground#8a9a5b3a
  • inputOption.activeBorder#666666
  • inputOption.activeForeground#3a3a3a
  • list.activeSelectionBackground#f0f0f0
  • list.activeSelectionForeground#3a3a3a
  • list.dropBackground#66666615
  • list.filterMatchBackground#8a9a5b25
  • list.filterMatchBorder#8a9a5b
  • list.focusBackground#66666615
  • list.focusHighlightForeground#8a9a5b
  • list.focusOutline#66666615
  • list.highlightForeground#8a9a5b
  • list.hoverBackground#f0f0f0
  • list.inactiveSelectionBackground#f0f0f0
  • menu.background#fdfcf8
  • menu.foreground#4a4a4a
  • menu.separatorBackground#66666610
  • merge.currentContentBackground#8a9a5b3f
  • merge.currentHeaderBackground#8a9a5b7f
  • merge.incomingContentBackground#6b8c9d3f
  • merge.incomingHeaderBackground#6b8c9d7f
  • minimap.background#fafafa
  • minimap.errorHighlight#b87c7c
  • minimap.findMatchHighlight#8a9a5b8f
  • minimap.selectionHighlight#6b8c9d8f
  • minimapSlider.activeBackground#6666662a
  • minimapSlider.background#66666615
  • minimapSlider.hoverBackground#66666625
  • panel.background#f8f7f3
  • peekView.border#666666
  • peekViewEditor.background#f5f5f5
  • peekViewEditor.matchHighlightBackground#8a9a5b3f
  • peekViewEditor.matchHighlightBorder#8a9a5b
  • peekViewResult.background#fafafa
  • peekViewResult.matchHighlightBackground#8a9a5b3f
  • peekViewResult.selectionBackground#8a9a5b3f
  • peekViewTitle.background#f5f5f5
  • pickerGroup.foreground#8a9a5b
  • progressBar.background#8a9a5b
  • quickInput.background#fdfcf8
  • sash.hoverBorder#8a9a5b
  • scrollbar.shadow#ffffff
  • scrollbarSlider.activeBackground#6666662a
  • scrollbarSlider.background#66666615
  • scrollbarSlider.hoverBackground#66666625
  • searchEditor.findMatchBorder#8a9a5b
  • selection.background#8a9a5b3a
  • sideBar.background#f8f7f3
  • sideBar.border#66666615
  • sideBarSectionHeader.background#f0f0f0
  • sideBarSectionHeader.border#66666615
  • statusBar.background#f0f0f0
  • statusBar.border#66666615
  • statusBar.debuggingBackground#8a9a5b
  • statusBar.debuggingForeground#ffffff
  • statusBar.focusBorder#00000000
  • statusBar.foreground#4a4a4a
  • statusBar.noFolderBackground#f0f0f0
  • statusBar.noFolderForeground#4a4a4a
  • statusBarItem.errorBackground#b87c7c
  • statusBarItem.errorForeground#ffffff
  • statusBarItem.prominentBackground#8a9a5b
  • statusBarItem.prominentForeground#ffffff
  • statusBarItem.remoteBackground#8a9a5b
  • statusBarItem.remoteForeground#ffffff
  • statusBarItem.warningBackground#b8a76b
  • statusBarItem.warningForeground#ffffff
  • tab.activeBackground#fdfcf8
  • tab.activeBorder#8a9a5b
  • tab.border#66666610
  • tab.inactiveBackground#f8f7f3
  • terminal.ansiBlack#1e1e1e
  • terminal.ansiBlue#6b8c9d
  • terminal.ansiBrightBlack#1e1e1e
  • terminal.ansiBrightBlue#6b8c9d
  • terminal.ansiBrightCyan#6b9d9d
  • terminal.ansiBrightGreen#8a9a5b
  • terminal.ansiBrightMagenta#9d6b9d
  • terminal.ansiBrightRed#b87c7c
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#b8a76b
  • terminal.ansiCyan#6b9d9d
  • terminal.ansiGreen#8a9a5b
  • terminal.ansiMagenta#9d6b9d
  • terminal.ansiRed#b87c7c
  • terminal.ansiWhite#ffffff
  • terminal.ansiYellow#b8a76b
  • terminal.background#fdfcf8
  • terminal.foreground#3a3a3a
  • terminal.selectionBackground#8a9a5b3a
  • terminal.tab.activeBorder#8a9a5b
  • textCodeBlock.background#f5f5f5
  • textLink.activeForeground#8a9a5b
  • textLink.foreground#8a9a5bcc
  • titleBar.activeBackground#f5f5f5
  • titleBar.border#6666660a
  • titleBar.inactiveBackground#fafafa
  • toolbar.hoverBackground#f0f0f0
  • widget.shadow#00000022

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
meta.embedded, source.groovy.embedded, string meta.image.inline.markdown#3a3a3a
emphasisitalic
strongbold
header#4d8080
comment, punctuation.definition.comment#5a8047
punctuation.definition, punctuation.definition.quote.begin.markdown, punctuation.definition.tag, punctuation.section.embedded#808080
constant.language#b8a857
constant.numeric, variable.other.enummember, keyword.operator.plus.exponent, keyword.operator.minus.exponent#b8a857
constant.regexp#c77c35
entity.name.tag, entity.name.tag.css, support.class.component#c85a5a
entity.other.attribute-name#4d8080
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#4d8080
invalid#c85a5a
markup.underlineunderline
string.other.link#4d8080
markup.underline.link#808080
markup.bold#8a8f5bbold
markup.heading#7d8f50bold
markup.italic#8a8f5bitalic
markup.strikethroughstrikethrough
markup.quote#808080italic
markup.inserted#7d8f50
markup.deleted#c85a5a
markup.changed#4d8080
punctuation.definition.list.begin.markdown#4d8080
markup.inline.raw#b8a857
meta.preprocessor, entity.name.function.preprocessor#4d8080
meta.preprocessor.string#7d8f50
meta.preprocessor.numeric#b8a857
meta.structure.dictionary.key.python#8a8f5b
meta.diff.header#4d8080
storage#c85a5a
storage.type#c85a5a
storage.modifier, keyword.operator.noexcept#c85a5a
string, meta.embedded.assembly, punctuation.definition.string#7d8f50
string.tag#7d8f50
string.value#7d8f50
string.regexp#c77c35
meta.template.expression#3a3a3a
support.type.vendored.property-name, support.type.property-name, variable.css, variable.scss, variable.other.less, source.coffee.embedded#8a8f5b
keyword#c85a5a
keyword.control#c85a5a
keyword.operator#c85a5a
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#c85a5a
keyword.other.unit#c85a5a
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php#c85a5a
support.function.git-rebase#4d8080
constant.sha.git-rebase#b8a857
storage.modifier.import.java, variable.language.wildcard.java, storage.modifier.package.java#7d8f50
variable.language#c85a5aitalic
entity.name.function, support.function, support.constant.handlebars, source.powershell variable.other.member, entity.name.operator.custom-literal#4d8080
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#b8a857
meta.type.cast.expr, meta.type.new.expr, support.constant.math, support.constant.dom, support.constant.json, entity.other.inherited-class#b8a857
keyword.control, source.cpp keyword.operator.new, keyword.operator.delete, keyword.other.using, keyword.other.operator, entity.name.operator#c85a5a
variable, meta.definition.variable.name, support.variable, entity.name.variable, constant.other.placeholder#8a8f5b
variable.other.constant, variable.other.enummember#8a8f5b
meta.object-literal.key#8a8f5b
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#7d8f50
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#7d8f50
constant.character.character-class.regexp, constant.other.character-class.set.regexp, constant.other.character-class.regexp, constant.character.set.regexp#b8a857
keyword.operator.or.regexp, keyword.control.anchor.regexp#4d8080
keyword.operator.quantifier.regexp#4d8080
constant.character#b8a857
constant.character.escape#4d8080
entity.name.label#3a3a3a