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.background#121212
  • activityBar.border#121212
  • activityBar.dropBackground#787878
  • activityBar.foreground#787878
  • activityBarBadge.background#555555
  • activityBarBadge.foreground#ffffff
  • badge.background#787878
  • badge.foreground#ffffff
  • breadcrumb.activeSelectionForeground#ffffff
  • breadcrumb.focusForeground#ffffff
  • breadcrumb.foreground#a6a6a6
  • breadcrumbPicker.background#0e0e0e
  • button.background#6f6f6fcc
  • button.foreground#ffffffcc
  • button.hoverBackground#6f6f6f
  • chat.editedFileForeground#787878
  • chat.slashCommandBackground#3e3e3e66
  • chat.slashCommandForeground#cecece
  • contrastBorder#272727
  • debugExceptionWidget.background#121212
  • debugExceptionWidget.border#787878
  • debugToolBar.background#121212
  • diffEditor.insertedTextBackground#a6a6a623
  • diffEditor.removedTextBackground#81818133
  • dropdown.background#121212
  • dropdown.border#787878
  • dropdown.foreground#ffffffcc
  • editor.background#121212
  • editor.findMatchBackground#78787879
  • editor.findMatchHighlightBackground#6868685d
  • editor.foreground#dddddd
  • editor.hoverHighlightBackground#6f6f6f5a
  • editor.inactiveSelectionBackground#6f6f6f5a
  • editor.lineHighlightBackground#5c5c5c29
  • editor.linkedEditingBackground#6f6f6f5a
  • editor.rangeHighlightBackground#6f6f6f5a
  • editor.selectionBackground#353535
  • editor.selectionHighlightBackground#78787879
  • editor.symbolHighlightBackground#6f6f6f5a
  • editor.wordHighlightBackground#d1d1d133
  • editor.wordHighlightStrongBackground#bebebe33
  • editorBracketHighlight.foreground1#787878
  • editorBracketHighlight.foreground2#787878
  • editorBracketHighlight.foreground3#787878
  • editorBracketHighlight.foreground4#787878
  • editorBracketHighlight.foreground5#787878
  • editorBracketHighlight.foreground6#787878
  • editorBracketHighlight.unexpectedBracket.foreground#787878
  • editorBracketPairGuide.activeBackground1#92929266
  • editorBracketPairGuide.activeBackground2#92929266
  • editorBracketPairGuide.activeBackground3#92929266
  • editorBracketPairGuide.activeBackground4#92929266
  • editorBracketPairGuide.activeBackground5#92929266
  • editorBracketPairGuide.activeBackground6#92929266
  • editorBracketPairGuide.background1#7f7f7f40
  • editorBracketPairGuide.background2#7f7f7f40
  • editorBracketPairGuide.background3#7f7f7f40
  • editorBracketPairGuide.background4#7f7f7f40
  • editorBracketPairGuide.background5#7f7f7f40
  • editorBracketPairGuide.background6#7f7f7f40
  • editorBracketPairGuide.unexpectedBracket.background#7f7f7f40
  • editorCodeLens.foreground#808080b4
  • editorCursor.foreground#9d9d9d
  • editorError.foreground#818181
  • editorGroup.border#121212
  • editorGroup.dropBackground#6f6f6f73
  • editorGroup.emptyBackground#121212
  • editorGroupHeader.noTabsBackground#121212
  • editorGroupHeader.tabsBackground#121212
  • editorGroupHeader.tabsBorder#2b2b2b
  • editorGutter.addedBackground#b2b2b2
  • editorGutter.background#121212
  • editorGutter.deletedBackground#818181
  • editorGutter.modifiedBackground#b7b7b7
  • editorHoverWidget.background#121212
  • editorHoverWidget.border#787878
  • editorIndentGuide.activeBackground#929292
  • editorIndentGuide.background#7f7f7f52
  • editorInlayHint.background#00000000
  • editorInlayHint.foreground#959595
  • editorLineNumber.activeForeground#dedede
  • editorLineNumber.foreground#5f5f5f
  • editorMarkerNavigation.background#232323
  • editorMarkerNavigationError.background#818181
  • editorMarkerNavigationWarning.background#c7c7c7
  • editorMinimap.inlineChatInserted#a8a8a852
  • editorOverviewRuler.commonContentForeground#6f6f6f
  • editorOverviewRuler.currentContentForeground#6f6f6f
  • editorOverviewRuler.incomingContentForeground#6f6f6f
  • editorOverviewRuler.inlineChatInserted#a8a8a852
  • editorOverviewRuler.inlineChatRemoved#81818152
  • editorRuler.foreground#7f7f7f52
  • editorSuggestWidget.background#313131
  • editorSuggestWidget.border#303030
  • editorSuggestWidget.foreground#dddddd
  • editorSuggestWidget.highlightForeground#ffffff
  • editorSuggestWidget.selectedBackground#787878
  • editorWarning.foreground#979797
  • editorWidget.background#0f0f0f
  • editorWidget.border#787878
  • errorForeground#818181
  • extensionButton.prominentBackground#6f6f6fcc
  • extensionButton.prominentForeground#ffffffcc
  • extensionButton.prominentHoverBackground#6f6f6f
  • focusBorder#272727
  • foreground#dddddd
  • gitDecoration.conflictingResourceForeground#e7e7e7cc
  • gitDecoration.deletedResourceForeground#81818190
  • gitDecoration.ignoredResourceForeground#535353
  • gitDecoration.modifiedResourceForeground#bdbdbd
  • gitDecoration.untrackedResourceForeground#cececeff
  • inlineChat.background#121212
  • inlineChat.border#787878
  • inlineChat.foreground#dddddd
  • inlineChat.shadow#090909
  • inlineChatDiff.inserted#a6a6a623
  • inlineChatDiff.removed#81818133
  • inlineChatInput.background#202020
  • inlineChatInput.border#787878
  • inlineChatInput.focusBorder#272727
  • inlineChatInput.placeholderForeground#787878
  • input.background#202020
  • input.border#787878
  • input.foreground#ffffffcc
  • input.placeholderForeground#787878
  • inputOption.activeBorder#ffffffcc
  • inputValidation.errorBackground#353535f2
  • inputValidation.errorBorder#818181
  • inputValidation.infoBackground#464646f2
  • inputValidation.infoBorder#a4a4a4
  • inputValidation.warningBackground#525252f2
  • inputValidation.warningBorder#c7c7c7
  • list.activeSelectionBackground#4444448c
  • list.activeSelectionForeground#ffffff
  • list.dropBackground#121212
  • list.focusAndSelectionOutline#272727
  • list.focusBackground#0b0b0b
  • list.focusForeground#ffffff
  • list.focusHighlightForeground#ffffff
  • list.focusOutline#272727
  • list.highlightForeground#ffffff
  • list.hoverBackground#121212
  • list.hoverForeground#ffffff
  • list.inactiveFocusOutline#272727
  • list.inactiveSelectionBackground#232323
  • list.inactiveSelectionForeground#787878
  • list.invalidItemForeground#767676
  • merge.currentHeaderBackground#787878
  • merge.incomingHeaderBackground#6f6f6f5a
  • meta.objectliteral.js#a8a8a8
  • minimap.chatEditHighlight#6f6f6f52
  • notificationCenter.border#2b2b2b
  • notificationLink.foreground#b4b4b4
  • notifications.background#0e0e0e
  • notifications.border#2b2b2b
  • notifications.foreground#ffffffcc
  • notificationToast.border#2b2b2b
  • panel.background#121212
  • panel.border#787878
  • panelTitle.activeBorder#787878
  • panelTitle.activeForeground#ffffffcc
  • panelTitle.inactiveForeground#dddddd80
  • peekView.border#787878
  • peekViewEditor.background#121212
  • peekViewEditor.matchHighlightBackground#6f6f6f5a
  • peekViewResult.background#121212
  • peekViewResult.fileForeground#787878
  • peekViewResult.lineForeground#787878
  • peekViewResult.matchHighlightBackground#ffffffcc
  • peekViewResult.selectionBackground#343434
  • peekViewResult.selectionForeground#787878
  • peekViewTitle.background#121212
  • peekViewTitleDescription.foreground#727272
  • peekViewTitleLabel.foreground#787878
  • pickerGroup.border#121212
  • pickerGroup.foreground#bfbfbf
  • progress.background#6f6f6f
  • punctuation.definition.generic.begin.html#818181f2
  • scrollbar.shadow#090909
  • scrollbarSlider.activeBackground#3e3e3e80
  • scrollbarSlider.background#3e3e3e80
  • scrollbarSlider.hoverBackground#3e3e3e80
  • selection.background#6e6e6e
  • sideBar.background#121212
  • sideBar.border#121212
  • sideBar.foreground#9f9f9f
  • sideBarSectionHeader.background#121212
  • sideBarSectionHeader.border#121212
  • sideBarSectionHeader.foreground#787878
  • sideBarStickyScroll.background#121212
  • sideBarStickyScroll.border#121212
  • sideBarStickyScroll.shadow#090909
  • sideBarTitle.foreground#787878
  • source.elm#787878
  • statusBar.background#121212
  • statusBar.border#2b2b2b
  • statusBar.debuggingBackground#242424
  • statusBar.debuggingBorder#232323
  • statusBar.foreground#787878
  • statusBar.noFolderBackground#121212
  • statusBar.noFolderBorder#2a2a2a
  • statusBarItem.activeBackground#242424
  • statusBarItem.hoverBackground#242424
  • statusBarItem.prominentBackground#242424
  • statusBarItem.prominentHoverBackground#242424
  • string.quoted.single.js#ffffff
  • tab.activeBackground#232323
  • tab.activeBorder#2b2b2b
  • tab.activeForeground#dbdbdb
  • tab.border#2c2c2c
  • tab.inactiveBackground#0e0e0e
  • tab.inactiveForeground#787878
  • tab.unfocusedActiveBorder#2b2b2b
  • tab.unfocusedActiveForeground#787878
  • tab.unfocusedInactiveForeground#787878
  • terminal.ansiBlack#121212
  • terminal.ansiBlue#a8a8a8
  • terminal.ansiBrightBlack#565656
  • terminal.ansiBrightBlue#a8a8a8
  • terminal.ansiBrightCyan#bebebe
  • terminal.ansiBrightGreen#979797
  • terminal.ansiBrightMagenta#acacac
  • terminal.ansiBrightRed#818181
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#e7e7e7
  • terminal.ansiCyan#929292
  • terminal.ansiGreen#979797
  • terminal.ansiMagenta#acacac
  • terminal.ansiRed#818181
  • terminal.ansiWhite#ffffff
  • terminal.ansiYellow#cecece
  • terminal.selectionBackground#7676764d
  • terminalCursor.background#444444
  • textCodeBlock.background#4f4f4f
  • titleBar.activeBackground#121212
  • titleBar.activeForeground#f1f1f1
  • titleBar.inactiveBackground#0b0b0b
  • walkThrough.embeddedEditorBackground#121212
  • welcomePage.buttonBackground#121212
  • welcomePage.buttonHoverBackground#121212
  • widget.shadow#121212

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
markup.changed, meta.diff.header.git, meta.diff.header.from-file, meta.diff.header.to-file#bdbdbd
markup.deleted.diff#81818190
markup.inserted.diff#cececeff
Global settings#dddddd
comment, punctuation.definition.comment#717171
string#cacaca
string.quoted, variable.other.readwrite.js#cacaca
support.constant.math#cecece
constant.numeric, constant.character.numeric#a8a8a8
constant.language, punctuation.definition.constant, variable.other.constant#a8a8a8
constant.character, constant.other#a8a8a8
constant.character.escape#a8a8a8
string.regexp, string.regexp keyword.other#989898
meta.function punctuation.separator.comma#787878
variable#cecece
punctuation.accessor, keyword#acacac
storage, meta.var.expr, meta.class meta.method.declaration meta.var.expr storage.type.js, storage.type.property.js, storage.type.property.ts, storage.type.property.tsx#acacac
storage.type#acacac
storage.type.function.arrow.js
entity.name.class, meta.class entity.name.type.class#d3d3d3
entity.other.inherited-class#cecece
entity.name.function#acacac
punctuation.definition.tag, meta.tag#bebebe
entity.name.tag, meta.tag.other.html, meta.tag.other.js, meta.tag.other.tsx, entity.name.tag.tsx, entity.name.tag.js, entity.name.tag, meta.tag.js, meta.tag.tsx, meta.tag.html#e1e1e1
entity.other.attribute-name#cecece
entity.name.tag.custom#cecece
support.function, support.constant#a8a8a8
support.constant.meta.property-value#bebebe
support.type, support.class#cecece
support.variable.dom#cecece
invalid#ffffff
invalid.deprecated#ffffff
keyword.operator#bebebe
keyword.operator.relational#acacac
keyword.operator.assignment#acacac
keyword.operator.arithmetic#acacac
keyword.operator.bitwise#acacac
keyword.operator.increment#acacac
keyword.operator.ternary#acacac
comment.line.double-slash#717171
object#e3e3e3
constant.language.null#8d8d8d
meta.brace#dddddd
meta.delimiter.period#acacac
punctuation.definition.string#eaeaea
punctuation.definition.string.begin.markdown#8d8d8d
constant.language.boolean#8d8d8d
object.comma#ffffff
variable.parameter.function#bebebe
support.type.vendor.property-name, support.constant.vendor.property-value, support.type.property-name, meta.property-list entity.name.tag#b4b4b4
meta.property-list entity.name.tag.reference#bfbfbf
constant.other.color.rgb-value punctuation.definition.constant#a8a8a8
constant.other.color#e7e7e7
keyword.other.unit#e7e7e7
meta.selector#acacac
entity.other.attribute-name.id#cdcdcd
meta.property-name#b4b4b4
entity.name.tag.doctype, meta.tag.sgml.doctype#acacac
punctuation.definition.parameters#eaeaea
keyword.control.operator#bebebe
keyword.operator.logical#acacac
variable.language.this.js#b6b6b6italic
variable.instance, variable.other.instance, variable.readwrite.instance, variable.other.readwrite.instance, variable.other.property#bebebe
variable.other.object.property#ececec
variable.other.object.js
entity.name.function#a8a8a8
keyword.control.conditional.js, keyword.operator.comparison, keyword.control.flow.js, keyword.control.flow.ts, keyword.control.flow.tsx, keyword.control.ruby, keyword.control.def.ruby, keyword.control.loop.js, keyword.control.loop.ts, keyword.control.import.js, keyword.control.import.ts, keyword.control.import.tsx, keyword.control.from.js, keyword.control.from.ts, keyword.control.from.tsx, keyword.control.conditional.js, keyword.control.conditional.ts, keyword.control.switch.js, keyword.control.switch.ts, keyword.operator.instanceof.js, keyword.operator.expression.instanceof.ts, keyword.operator.expression.instanceof.tsx#acacac
support.constant, keyword.other.special-method, keyword.other.new, keyword.other.debugger, keyword.control#bebebe
support.function#cecece
invalid.broken#0b0b0b
invalid.unimplemented#ffffff
invalid.illegal#ffffff
variable.language#bebebe
support.variable.property#bebebe
variable.function#a8a8a8
variable.interpolation#8a8a8a
meta.function-call#a8a8a8
punctuation.section.embedded#6d6d6d
punctuation.terminator.expression, punctuation.definition.arguments, punctuation.definition.array, punctuation.section.array, meta.array#dddddd
punctuation.definition.list.begin, punctuation.definition.list.end, punctuation.separator.arguments, punctuation.definition.list#eaeaea
string.template meta.template.expression#6d6d6d
string.template punctuation.definition.string#dddddd
italic#acacacitalic
bold#cececebold
quote#727272
raw#b4b4b4
variable.assignment.coffee#aeaeae
variable.parameter.function.coffee#dddddd
variable.assignment.coffee#bebebe
variable.other.readwrite.cs#dddddd
entity.name.type.class.cs, storage.type.cs#d3d3d3
entity.name.type.namespace.cs#c5c5c5
string.unquoted.preprocessor.message.cs#dddddd
punctuation.separator.hash.cs, keyword.preprocessor.region.cs, keyword.preprocessor.endregion.cs#d3d3d3bold
variable.other.object.cs#c5c5c5
entity.name.type.enum.cs#cecece
string.interpolated.single.dart, string.interpolated.double.dart#d3d3d3
support.class.dart#d3d3d3
entity.name.tag.css, entity.name.tag.less, entity.name.tag.custom.css, support.constant.property-value.css#929292
entity.name.tag.wildcard.css, entity.name.tag.wildcard.less, entity.name.tag.wildcard.scss, entity.name.tag.wildcard.sass#bebebe
keyword.other.unit.css#e7e7e7
meta.attribute-selector.css entity.other.attribute-name.attribute, variable.other.readwrite.js#a8a8a8
source.elixir support.type.elixir, source.elixir meta.module.elixir entity.name.class.elixir#a8a8a8
source.elixir entity.name.function#cecece
source.elixir constant.other.symbol.elixir, source.elixir constant.other.keywords.elixir#a8a8a8
source.elixir punctuation.definition.string#cecece
source.elixir variable.other.readwrite.module.elixir, source.elixir variable.other.readwrite.module.elixir punctuation.definition.variable.elixir#cecece
source.elixir .punctuation.binary.elixir#acacac
constant.keyword.clojure#bebebe
source.go meta.function-call.go#dddddd
source.go keyword.package.go, source.go keyword.import.go, source.go keyword.function.go, source.go keyword.type.go, source.go keyword.struct.go, source.go keyword.interface.go, source.go keyword.const.go, source.go keyword.var.go, source.go keyword.map.go, source.go keyword.channel.go, source.go keyword.control.go#acacac
source.go constant.language.go, source.go constant.other.placeholder.go#8d8d8d
entity.name.function.preprocessor.cpp, entity.scope.name.cpp#bebebeff
meta.namespace-block.cpp#dcdcdc
storage.type.language.primitive.cpp#8d8d8d
meta.preprocessor.macro.cpp#dddddd
variable.parameter#d3d3d3
variable.other.readwrite.powershell#a8a8a8
support.function.powershell#bebebeff
entity.other.attribute-name.id.html#cecece
punctuation.definition.tag.html#c4c4c4
meta.tag.sgml.doctype.html#acacac
meta.class entity.name.type.class.js#d3d3d3
meta.method.declaration storage.type.js#a8a8a8
terminator.js#dddddd
meta.js punctuation.definition.js#dddddd
entity.name.type.instance.jsdoc, entity.name.type.instance.phpdoc#787878
variable.other.jsdoc, variable.other.phpdoc#b7b7b7
variable.other.meta.import.js, meta.import.js variable.other, variable.other.meta.export.js, meta.export.js variable.other#dddddd
variable.parameter.function.js#8d8d8d
variable.other.object.js, variable.other.object.jsx, variable.object.property.js, variable.object.property.jsx#dddddd
variable.js, variable.other.js#dddddd
entity.name.type.js, entity.name.type.module.js#d3d3d3
support.class.js#dddddd
support.type.property-name.json#bebebe
support.constant.json#cecece
meta.structure.dictionary.value.json string.quoted.double#a4a4a4
string.quoted.double.json punctuation.definition.string.json#b4b4b4
meta.structure.dictionary.json meta.structure.dictionary.value constant.language#8d8d8d
variable.other.object.js#bebebe
variable.other.ruby#dddddd
entity.name.type.class.ruby#cacaca
constant.language.symbol.hashkey.ruby#bebebe
entity.name.tag.less#bebebe
keyword.other.unit.css#e7e7e7
meta.attribute-selector.less entity.other.attribute-name.attribute#a8a8a8
markup.heading, markup.heading.setext.1, markup.heading.setext.2#acacac
markup.italic#acacacitalic
markup.bold#cececebold
markup.quote#727272
markup.inline.raw#b4b4b4
markup.underline.link, markup.underline.link.image#acacac
string.other.link.title.markdown, string.other.link.description.markdown#dddddd
punctuation.definition.string.markdown, punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown, meta.link.inline.markdown punctuation.definition.string#acacac
punctuation.definition.metadata.markdown#bebebe
beginning.punctuation.definition.list.markdown#acacac
markup.inline.raw.string.markdown#cecece
variable.other.php#c5c5c5
support.class.php#d3d3d3
meta.function-call.php punctuation#dddddd
variable.other.global.php#cecece
variable.other.global.php punctuation.definition.variable#cecece
constant.language.python#8d8d8d
variable.parameter.function.python, meta.function-call.arguments.python#a8a8a8
meta.function-call.python, meta.function-call.generic.python#c5c5c5
punctuation.python#dddddd
entity.name.function.decorator.python#cecece
source.python variable.language.special#a9a9a9
keyword.control#acacac
variable.scss, variable.sass, variable.parameter.url.scss, variable.parameter.url.sass#cecece
source.css.scss meta.at-rule variable, source.css.sass meta.at-rule variable#a8a8a8
source.css.scss meta.at-rule variable, source.css.sass meta.at-rule variable#c5c5c5
meta.attribute-selector.scss entity.other.attribute-name.attribute, meta.attribute-selector.sass entity.other.attribute-name.attribute#a8a8a8
entity.name.tag.scss, entity.name.tag.sass#bebebe
keyword.other.unit.scss, keyword.other.unit.sass#e7e7e7
variable.other.readwrite.alias.ts, variable.other.readwrite.alias.tsx, variable.other.readwrite.ts, variable.other.readwrite.tsx, variable.other.object.ts, variable.other.object.tsx, variable.object.property.ts, variable.object.property.tsx, variable.other.ts, variable.other.tsx, variable.tsx, variable.ts#dddddd
entity.name.type.ts, entity.name.type.tsx#d3d3d3
support.class.node.ts, support.class.node.tsx#a8a8a8
meta.type.parameters.ts entity.name.type, meta.type.parameters.tsx entity.name.type#787878
meta.import.ts punctuation.definition.block, meta.import.tsx punctuation.definition.block, meta.export.ts punctuation.definition.block, meta.export.tsx punctuation.definition.block#dddddd
meta.decorator punctuation.decorator.ts, meta.decorator punctuation.decorator.tsx#a8a8a8
meta.tag.js meta.jsx.children.tsx#a8a8a8
entity.name.tag.yaml#bebebe
variable.other.readwrite.js, variable.parameter#dadada
support.class.component.js, support.class.component.tsx#a8a8a8
meta.jsx.children, meta.jsx.children.js, meta.jsx.children.tsx#dddddd
meta.class entity.name.type.class.tsx#d3d3d3
entity.name.type.tsx, entity.name.type.module.tsx#d3d3d3
meta.class.ts meta.var.expr.ts storage.type.ts, meta.class.tsx meta.var.expr.tsx storage.type.tsx#acacac
meta.method.declaration storage.type.ts, meta.method.declaration storage.type.tsx#a8a8a8
meta.property-list.css meta.property-value.css variable.other.less, meta.property-list.scss variable.scss, meta.property-list.sass variable.sass, meta.brace, keyword.operator.operator, keyword.operator.or.regexp, keyword.operator.expression.in, keyword.operator.relational, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.type, keyword.operator, keyword, punctuation.definintion.string, punctuation, variable.other.readwrite.js, storage.type, source.css, string.quoted