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#262626
  • 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#c7b076
constant.numeric, variable.other.enummember, keyword.operator.plus.exponent, keyword.operator.minus.exponent#e4a0c0
constant.regexp#f6c177
entity.name.tag, entity.name.tag.css, support.class.component#e6787e
entity.other.attribute-name#d3b080
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#5fb5be
meta.preprocessor.string#74ccaa
meta.preprocessor.numeric#f6c177
meta.structure.dictionary.key.python#a0a5d6
meta.diff.header#5fb5be
storage#e4a0c0
storage.type#e6787e
storage.modifier, keyword.operator.noexcept#e6787e
string, meta.embedded.assembly, punctuation.definition.string#75bf9d
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#e4a0c0
keyword.operator#e4a0c0
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#e4a0c0
keyword.other.unit#e4a0c0
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php#e4a0c0
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#73b9c1
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#e99f7aitalic
meta.type.cast.expr, meta.type.new.expr, support.constant.math, support.constant.dom, support.constant.json, entity.other.inherited-class#e99f7a
keyword.control, source.cpp keyword.operator.new, keyword.operator.delete, keyword.other.using, keyword.other.operator, entity.name.operator#dc92b4
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,#ceaefff3
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,#a6abff
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