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#bdbdbditalic
markup.deleted.diff#81818190italic
markup.inserted.diff#cececeffitalic
Global settings#dddddd
comment, punctuation.definition.comment#717171italic
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#acacacitalic
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#acacacitalic
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#acacacitalic
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#cececeitalic
entity.name.tag.custom#a8a8a8
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#acacacitalic
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#acacacitalic
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#acacacitalic
entity.other.attribute-name.id#cdcdcd
meta.property-name#b4b4b4
entity.name.tag.doctype, meta.tag.sgml.doctype#acacacitalic
punctuation.definition.parameters#eaeaea
keyword.control.operator#bebebe
keyword.operator.logical#acacac
variable.instance, variable.other.instance, variable.readwrite.instance, variable.other.readwrite.instance, variable.other.property#dbdbdb
variable.other.object.property#ecececitalic
variable.other.object.js
entity.name.function#a8a8a8italic
variable.language.this.js#b6b6b6italic
keyword.operator.comparison, keyword.control.flow.js, keyword.control.flow.ts, keyword.control.flow.tsx, keyword.control.ruby, keyword.control.module.ruby, keyword.control.class.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.operator.instanceof.js, keyword.operator.expression.instanceof.ts, keyword.operator.expression.instanceof.tsx#acacacitalic
keyword.control.conditional.js, keyword.control.conditional.ts, keyword.control.switch.js, keyword.control.switch.ts#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#727272italic
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#acacacitalic
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#acacacitalic
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#acacacitalic
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#bebebeitalic
variable.other.ruby#dddddd
entity.name.type.class.ruby#cacaca
constant.language.symbol.hashkey.ruby#bebebe
constant.language.symbol.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#727272italic
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, variable.other.property.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#acacacitalic
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
markup.deleted#4c4c4c
markup.inserted#404040
markup.underlineunderline
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