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#ffffffef
  • activityBar.background#262626
  • activityBar.border#262626
  • activityBar.foreground#ffffffdf
  • activityBarBadge.background#c6c6c6
  • activityBarBadge.foreground#000000e7
  • badge.background#ffffffcf
  • badge.foreground#000000cf
  • banner.background#444444
  • banner.foreground#ffffff
  • breadcrumb.foreground#666666
  • button.background#ffffffdb
  • button.foreground#000000
  • button.hoverBackground#FFFFFF
  • commandCenter.activeBackground#262626
  • commandCenter.background#262626
  • commandCenter.border#262626
  • diffEditor.border#ffffff12
  • diffEditor.diagonalFill#ffffff12
  • diffEditor.insertedLineBackground#66b39530
  • diffEditor.insertedTextBackground#66b39530
  • diffEditor.removedLineBackground#ff878730
  • diffEditor.removedTextBackground#ff878730
  • disabledForeground#777777
  • dropdown.background#262626
  • dropdown.border#303030
  • dropdown.foreground#c5c5c5
  • editor.background#262626
  • editor.findMatchBackground#5d61e4a3
  • editor.findMatchBorder#5d61e4
  • editor.findMatchHighlightBackground#6369ff56
  • editor.findMatchHighlightBorder#5d61e4c5
  • editor.foreground#dddddd
  • editor.hoverHighlightBackground#6369ff56
  • editor.lineHighlightBackground#00000032
  • editor.selectionBackground#6369ff56
  • editor.selectionHighlightBorder#5d61e4
  • editor.wordHighlightBackground#5d61e464
  • editor.wordHighlightStrongBackground#5d61e464
  • editorBracketHighlight.foreground1#5a7aaa
  • editorBracketHighlight.foreground2#5e9c84
  • editorBracketHighlight.foreground3#8e7395
  • editorBracketHighlight.foreground4#b5a165
  • editorCodeLens.foreground#8888885d
  • editorCursor.foreground#1781b5
  • editorError.foreground#ec8aa4
  • editorGroupHeader.tabsBackground#262626
  • editorGroupHeader.tabsBorder#262626
  • editorGutter.addedBackground#66b395af
  • editorGutter.deletedBackground#ff8787af
  • editorGutter.modifiedBackground#7098d4af
  • editorHoverWidget.background#303030
  • editorHoverWidget.border#404040
  • editorHoverWidget.statusBarBackground#303030
  • editorIndentGuide.activeBackground1#ffffff3f
  • editorIndentGuide.background1#ffffff12
  • editorInfo.foreground#7098d4
  • editorInlayHint.background#ffffff10
  • editorInlayHint.foreground#ffffff6f
  • editorLineNumber.activeForeground#dedede
  • editorLineNumber.foreground#666666
  • editorLink.activeForeground#ef82a0
  • editorStickyScrollHover.background#303030
  • editorSuggestWidget.background#262626
  • editorSuggestWidget.selectedBackground#303030
  • editorWarning.foreground#e7d38f
  • editorWhitespace.foreground#ffffff12
  • editorWidget.background#262626
  • focusBorder#a4a4a4
  • foreground#a5a5a5
  • gitDecoration.addedResourceForeground#66b395
  • gitDecoration.conflictingResourceForeground#dd9a6a
  • gitDecoration.deletedResourceForeground#ff8787
  • gitDecoration.ignoredResourceForeground#ffffff3f
  • gitDecoration.modifiedResourceForeground#6ab8c0
  • gitDecoration.renamedResourceForeground#e7d38f
  • input.background#303030
  • input.border#ffffff10
  • inputOption.activeBackground#ffffffef
  • inputOption.activeBorder#ffffffef
  • inputOption.activeForeground#000000e7
  • list.activeSelectionBackground#303030
  • list.activeSelectionForeground#ffffff
  • list.dropBackground#ffffff12
  • list.filterMatchBackground#ffffff3b
  • list.filterMatchBorder#ffffff00
  • list.focusBackground#ffffff12
  • list.focusHighlightForeground#5cb3cc
  • list.focusOutline#ffffff3c
  • list.highlightForeground#5cb4ccc6
  • list.hoverBackground#303030
  • list.inactiveSelectionBackground#404040
  • menu.background#262626
  • menu.foreground#cccccc
  • menu.separatorBackground#ffffff12
  • merge.currentContentBackground#66b3953f
  • merge.currentHeaderBackground#66b3957f
  • merge.incomingContentBackground#7098d43f
  • merge.incomingHeaderBackground#7098d47f
  • minimap.background#303030
  • minimap.errorHighlight#ff8787
  • minimap.findMatchHighlight#66b3959f
  • minimap.selectionHighlight#7098d49f
  • minimapSlider.activeBackground#ffffff3f
  • minimapSlider.background#ffffff12
  • minimapSlider.hoverBackground#ffffff2f
  • panel.background#262626
  • peekView.border#262626
  • peekViewEditor.background#303030
  • peekViewEditor.matchHighlightBackground#5d61e486
  • peekViewEditor.matchHighlightBorder#5d61e4
  • peekViewResult.background#303030
  • peekViewResult.matchHighlightBackground#52515135
  • peekViewResult.selectionBackground#52515135
  • peekViewTitle.background#222222
  • pickerGroup.foreground#a7a7a7
  • progressBar.background#ffffffcf
  • quickInput.background#262626
  • sash.hoverBorder#ffffffb0
  • scrollbar.shadow#303030
  • scrollbarSlider.activeBackground#ffffff20
  • scrollbarSlider.background#ffffff12
  • scrollbarSlider.hoverBackground#ffffff16
  • searchEditor.findMatchBorder#5d61e499
  • selection.background#ffffff20
  • sideBar.background#262626
  • sideBar.border#151515
  • sideBarSectionHeader.background#262626
  • sideBarSectionHeader.border#ffffff12
  • statusBar.background#262626
  • statusBar.border#262626
  • statusBar.debuggingBackground#66b395
  • statusBar.debuggingForeground#000000
  • statusBar.focusBorder#00000000
  • statusBar.foreground#999999
  • statusBar.noFolderBackground#303030
  • statusBar.noFolderForeground#999999
  • statusBarItem.errorBackground#ff8787
  • statusBarItem.errorForeground#000000
  • statusBarItem.prominentBackground#ffffff
  • statusBarItem.prominentForeground#000000
  • statusBarItem.remoteBackground#ffffff
  • statusBarItem.remoteForeground#000000
  • statusBarItem.warningBackground#d8b544
  • statusBarItem.warningForeground#000000
  • tab.activeBackground#363636
  • tab.activeBorder#ffffffef
  • tab.border#262626
  • tab.inactiveBackground#262626
  • terminal.ansiBlack#333333
  • terminal.ansiBlue#7098d4
  • terminal.ansiBrightBlack#666666
  • 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#262626
  • terminal.foreground#c0c0c0
  • terminal.selectionBackground#444444
  • terminal.tab.activeBorder#66b395
  • textCodeBlock.background#45b78816
  • textLink.activeForeground#45b787
  • textLink.foreground#45b788b6
  • titleBar.activeBackground#262626
  • titleBar.border#262626
  • titleBar.inactiveBackground#303030
  • toolbar.hoverBackground#ffffff1f
  • widget.shadow#00000045

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#ffffff4fitalic
punctuation.definition, punctuation.definition.quote.begin.markdown, punctuation.definition.tag, punctuation.section.embedded#ffffff5f
constant.language#ebafaf
constant.numeric, variable.other.enummember, keyword.operator.plus.exponent, keyword.operator.minus.exponent#7bc1c2
constant.regexp#f6c177
entity.name.tag, entity.name.tag.css, support.class.component#87d3b3
entity.other.attribute-name#eec489
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#6cbe9f
invalid#6cbe9f
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#8abcd1
meta.preprocessor.string#74ccaa
meta.preprocessor.numeric#f6c177
meta.structure.dictionary.key.python#a0a5d6
meta.diff.header#5fb5be
storage#E3CBEB
storage.type#D2CCFFitalic bold
punctuation.separator#B8D7F9CC
storage.modifier, keyword.operator.noexcept#FFCCE0bold
string, meta.embedded.assembly, punctuation.definition.string#A4DFAE
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#e0c966
keyword.control#B8DCF9
keyword.operator#B8DCF9
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#E3CBEB
keyword.other.unit#E3CBEB
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php#E3CBEB
support.function.git-rebase#5fb5be
constant.sha.git-rebase#e3b26e
storage.modifier.import.java, variable.language.wildcard.java, storage.modifier.package.java#77d1af
variable.language#e4b36fitalic
entity.name.function, support.function, support.constant.handlebars, source.powershell variable.other.member, entity.name.operator.custom-literal#8fc7ff
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#ffcce0italic
meta.type.cast.expr, meta.type.new.expr, support.constant.math, support.constant.dom, support.constant.json, entity.other.inherited-class#ef9c72
keyword.control, source.cpp keyword.operator.new, keyword.operator.delete, keyword.other.using, keyword.other.operator, entity.name.operator#E3CBEB
entity.name.type.module,entity.name.package,variable.other.property,variable.other.object.property,variable.other.constant.property,entity.name.type.option,entity.name.label,variable.other.object.property.cs,entity.name.variable.tuple-element.cs,meta.object-literal.key,meta.object-literal.key string.quoted,variable.object.property,support.type.map.key,meta.at-rule.each.scss,meta.attribute.python,support.variable.dom,support.variable.property,support.variable.property.dom,storage.modifier.import,constant.other.php,entity.name.type.namespace,variable.other.member.c,meta.using-namespace-declaration.cpp entity.name.type.cpp,meta.class-struct-block.cpp meta.namespace-block.cpp entity.name.type.cpp,variable.other.source.dart,entity.name.namespace,entity.name.module,entity.name.type.result.rust,entity.name.scope-resolution.namespace,support.class.console,meta.use.rust,keyword.other.preprocessor.extension,entity.other.attribute-name.pseudo-element.css,entity.name.section.markdown,markup.heading,source.json meta.structure.dictionary.json > string.quoted.json,support.type.property-name.json,support.function.section.latex,meta.object-literal.key punctuation.definition.string,variable.other.constant.object.property,source.cs storage.type.accessor,entity.other.attribute,#ded6cf
variable.other,support.variable,meta.definition.variable,variable.other.object,variable.other.readwrite,entity.name.type.enum,meta.method.body,entity.name.variable,meta.block.c,meta.class-struct-block,meta.item-access.python,meta.function-call.arguments.python,meta.item-access.arguments.python,variable.parameter.keyframe-list.css,meta.property-value.css,meta.property-value.scss,entity.name.tag.custom,entity.name.function.scss,variable,meta.function-call.c,meta.parens,support.constant.color.w3c-standard-color-name,support.constant.color.w3c-extended-color-name,constant.other.color.rgb-value.hex,constant.other.rgb-value,support.constant.color.w3c-extended-color-name.css,text.tex.latex constant.other.math.tex,constant.other.general.math.tex,constant.other.general.math.tex,constant.character.math.tex,constant.other.reference.citation.latex,code-runner.output,entity.name.function.preprocessor,entity.name.type.enum,entity.name.variable.tuple-element,#EECFA0
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#00ff9d
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#ff9500
constant.character.escape#5fb5be
entity.name.label#C8C8C8