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.activeBackground#00000000
  • activityBar.activeBorder#00000000
  • activityBar.background#111111
  • activityBar.border#00000000
  • activityBar.foreground#CCCCCC
  • activityBar.inactiveForeground#555555
  • activityBarBadge.background#4C6EFF
  • activityBarBadge.foreground#FFFFFF
  • activityBarTop.activeBackground#00000000
  • activityBarTop.activeBorder#00000000
  • activityBarTop.background#111111
  • activityBarTop.border#00000000
  • activityBarTop.foreground#EEEEEE
  • activityBarTop.inactiveForeground#555555
  • badge.background#4C6EFF
  • badge.foreground#FFFFFF
  • breadcrumb.activeSelectionForeground#CCCCCC
  • breadcrumb.background#191919
  • breadcrumb.focusForeground#CCCCCC
  • breadcrumb.foreground#CCCCCC80
  • button.background#555555
  • button.foreground#EEEEEE
  • button.hoverBackground#4C6EFF
  • button.secondaryBackground#222222
  • button.secondaryForeground#EEEEEE
  • button.secondaryHoverBackground#555555
  • checkbox.background#191919
  • checkbox.border#00000000
  • checkbox.foreground#CCCCCC
  • debugExceptionWidget.background#000000
  • debugExceptionWidget.border#00000000
  • debugToolBar.background#000000
  • debugToolBar.border#00000000
  • diffEditor.border#333333
  • diffEditor.insertedTextBackground#A4F64430
  • diffEditor.insertedTextBorder#00000000
  • diffEditor.removedTextBackground#FF482930
  • diffEditor.removedTextBorder#00000000
  • dropdown.background#191919
  • dropdown.border#00000000
  • dropdown.foreground#CCCCCC
  • editor.background#000000
  • editor.findMatchBackground#00000000
  • editor.findMatchBorder#CCCCCC
  • editor.findMatchForeground#FFFFFF
  • editor.findMatchHighlightBackground#4C6EFF50
  • editor.findMatchHighlightBorder#00000000
  • editor.findMatchHighlightForeground#FFFFFF
  • editor.findRangeHighlightBackground#222222
  • editor.findRangeHighlightBorder#00000000
  • editor.foldBackground#4C6EFF50
  • editor.foreground#CCCCCC
  • editor.hoverHighlightBackground#EEEEEE30
  • editor.inactiveSelectionBackground#EEEEEE30
  • editor.lineHighlightBackground#222222
  • editor.lineHighlightBorder#00000000
  • editor.rangeHighlightBackground#4C6EFF50
  • editor.rangeHighlightBorder#00000000
  • editor.selectionBackground#CCCCCC40
  • editor.selectionHighlightBackground#CCCCCC50
  • editor.selectionHighlightBorder#00000000
  • editor.wordHighlightBackground#EEEEEE30
  • editor.wordHighlightBorder#00000000
  • editor.wordHighlightStrongBackground#EEEEEE30
  • editor.wordHighlightStrongBorder#00000000
  • editorBracketMatch.background#CCCCCC30
  • editorBracketMatch.border#CCCCCC
  • editorCodeLens.foreground#999999
  • editorCursor.background#000000
  • editorCursor.foreground#CCCCCC
  • editorError.background#FF482950
  • editorError.border#00000000
  • editorError.foreground#FF4829
  • editorGroup.border#222222
  • editorGroup.emptyBackground#000000
  • editorGroupHeader.border#222222
  • editorGroupHeader.tabsBackground#111111
  • editorGroupHeader.tabsBorder#222222
  • editorGutter.addedBackground#A4F644
  • editorGutter.background#000000
  • editorGutter.commentRangeForeground#555555
  • editorGutter.deletedBackground#FF4829
  • editorGutter.foldingControlForeground#555555
  • editorGutter.modifiedBackground#4C6EFF
  • editorHoverWidget.background#191919
  • editorHoverWidget.border#333333
  • editorHoverWidget.foreground#CCCCCC
  • editorIndentGuide.activeBackground#555555
  • editorIndentGuide.background#222222
  • editorInfo.background#4C6EFF50
  • editorInfo.border#00000000
  • editorInfo.foreground#4C6EFF
  • editorLineNumber.activeForeground#CCCCCC
  • editorLineNumber.foreground#555555
  • editorLink.activeForeground#4C6EFF
  • editorMarkerNavigation.background#191919
  • editorMarkerNavigationError.background#FF4829
  • editorMarkerNavigationInfo.background#4C6EFF
  • editorMarkerNavigationWarning.background#FFD319
  • editorOverviewRuler.background#000000
  • editorOverviewRuler.border#00000000
  • editorRuler.foreground#555555
  • editorSuggestWidget.background#191919
  • editorSuggestWidget.border#333333
  • editorSuggestWidget.foreground#CCCCCC
  • editorSuggestWidget.highlightForeground#4C6EFF
  • editorSuggestWidget.selectedBackground#CCCCCC20
  • editorWarning.background#FFD31950
  • editorWarning.border#00000000
  • editorWarning.foreground#FFD319
  • editorWhitespace.foreground#CCCCCC30
  • editorWidget.background#191919
  • editorWidget.foreground#CCCCCC
  • editorWidget.resizeBorder#00000000
  • focusBorder#00000000
  • foreground#CCCCCC
  • gitDecoration.addedResourceForeground#A4F644
  • gitDecoration.conflictingResourceForeground#8C1EFF
  • gitDecoration.deletedResourceForeground#FF4829
  • gitDecoration.ignoredResourceForeground#555555
  • gitDecoration.modifiedResourceForeground#FFD319
  • gitDecoration.stageDeletedResourceForeground#FF4829
  • gitDecoration.stageModifiedResourceForeground#FFD319
  • gitDecoration.submoduleResourceForeground#4C6EFF
  • gitDecoration.untrackedResourceForeground#FF2975
  • icon.foreground#CCCCCC
  • input.background#222222
  • input.border#00000000
  • input.foreground#CCCCCC
  • input.placeholderForeground#666666
  • list.activeSelectionBackground#222222
  • list.activeSelectionForeground#FFFFFF
  • list.dropBackground#222222
  • list.focusBackground#191919
  • list.focusForeground#EEEEEE
  • list.highlightForeground#4C6EFF
  • list.hoverBackground#222222
  • list.hoverForeground#CCCCCC
  • list.inactiveSelectionBackground#222222
  • list.inactiveSelectionForeground#FFFFFF
  • listFilterWidget.background#4C6EFF
  • listFilterWidget.noMatchesOutline#00000000
  • listFilterWidget.outline#00000000
  • menu.background#191919
  • menu.border#00000000
  • menu.foreground#CCCCCC
  • menu.selectionBackground#55555550
  • menu.selectionBorder#00000000
  • menu.selectionForeground#CCCCCC
  • menu.separatorBackground#333333
  • menubar.selectionBackground#55555550
  • menubar.selectionBorder#00000000
  • menubar.selectionForeground#CCCCCC
  • merge.commonContentBackground#19191960
  • merge.commonHeaderBackground#19191990
  • merge.currentContentBackground#4C6EFF60
  • merge.currentHeaderBackground#4C6EFF90
  • merge.incomingContentBackground#8C1EFF60
  • merge.incomingHeaderBackground#8C1EFF90
  • minimap.background#111111
  • minimap.errorHighlight#FF4829
  • minimap.findMatchHighlight#4C6EFF90
  • minimap.selectionHighlight#4C6EFF50
  • minimap.warningHighlight#FFD319
  • minimapGutter.addedBackground#A4F644
  • minimapGutter.deletedBackground#FF4829
  • minimapGutter.modifiedBackground#4C6EFF
  • minimapSlider.activeBackground#00000080
  • minimapSlider.background#00000080
  • minimapSlider.hoverBackground#00000080
  • notificationCenter.border#333333
  • notificationCenterHeader.background#222222
  • notificationCenterHeader.foreground#CCCCCC
  • notifications.background#191919
  • notifications.border#333333
  • notifications.foreground#CCCCCC
  • notificationsErrorIcon.foreground#FF4829
  • notificationsInfoIcon.foreground#4C6EFF
  • notificationsWarningIcon.foreground#FFD319
  • notificationToast.border#333333
  • outputView.background#000000
  • panel.background#111111
  • panel.border#222222
  • panelInput.border#00000000
  • panelSection.border#00000000
  • panelTitle.activeBorder#00000000
  • panelTitle.activeForeground#EEEEEE
  • panelTitle.border#222222
  • panelTitle.inactiveForeground#666666
  • peekView.border#333333
  • peekViewEditor.background#191919
  • peekViewEditor.matchHighlightBackground#FFD31930
  • peekViewEditor.matchHighlightBorder#FFD319
  • peekViewEditorGutter.background#191919
  • peekViewResult.background#222222
  • peekViewResult.fileForeground#EEEEEE
  • peekViewResult.lineForeground#CCCCCC
  • peekViewResult.matchHighlightBackground#FFD31930
  • peekViewResult.selectionBackground#CCCCCC20
  • peekViewResult.selectionForeground#EEEEEE
  • peekViewTitle.background#4C6EFF
  • peekViewTitleDescription.foreground#EEEEEE
  • peekViewTitleLabel.foreground#FFFFFF
  • pickerGroup.border#333333
  • pickerGroup.foreground#CCCCCC
  • progressBar.background#4C6EFF
  • quickInput.background#191919
  • quickInput.foreground#CCCCCC
  • quickInputList.focusBackground#4C6EFF
  • quickInputList.focusForeground#FFFFFF
  • scrollbar.shadow#000000
  • scrollbarSlider.activeBackground#222222
  • scrollbarSlider.background#222222
  • scrollbarSlider.hoverBackground#222222
  • selection.background#CCCCCC50
  • settings.focusedRowBackground#FFFFFF07
  • settings.headerForeground#CCCCCC
  • sideBar.background#111111
  • sideBar.border#222222
  • sideBar.dropBackground#222222
  • sideBar.foreground#CCCCCC
  • sideBarSectionHeader.background#00000000
  • sideBarSectionHeader.border#222222
  • sideBarSectionHeader.foreground#EEEEEE
  • sideBarTitle.background#111111
  • sideBarTitle.border#00000000
  • sideBarTitle.foreground#EEEEEE
  • statusBar.background#111111
  • statusBar.border#222222
  • statusBar.debuggingBackground#4C6EFF
  • statusBar.debuggingBorder#00000000
  • statusBar.debuggingForeground#FFFFFF
  • statusBar.foreground#CCCCCC
  • statusBar.noFolderBackground#191919
  • statusBar.noFolderBorder#222222
  • statusBar.noFolderForeground#CCCCCC
  • statusBarItem.activeBackground#FFFFFF25
  • statusBarItem.hoverBackground#222222
  • statusBarItem.remoteBackground#111111
  • statusBarItem.remoteForeground#CCCCCC
  • tab.activeBackground#000000
  • tab.activeBorder#00000000
  • tab.activeBorderTop#00000000
  • tab.activeForeground#EEEEEE
  • tab.border#00000000
  • tab.hoverBackground#000000
  • tab.hoverBorder#00000000
  • tab.hoverForeground#CCCCCC
  • tab.inactiveBackground#111111
  • tab.inactiveForeground#777777
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#4C6EFF
  • terminal.ansiBrightBlack#555555
  • terminal.ansiBrightBlue#6F8BFF
  • terminal.ansiBrightCyan#81D8FF
  • terminal.ansiBrightGreen#A4F644
  • terminal.ansiBrightMagenta#F564FF
  • terminal.ansiBrightRed#FF6C53
  • terminal.ansiBrightWhite#EEEEEE
  • terminal.ansiBrightYellow#FFE05E
  • terminal.ansiCyan#4CC8FF
  • terminal.ansiGreen#A4F644
  • terminal.ansiMagenta#F222FF
  • terminal.ansiRed#CD3131
  • terminal.ansiWhite#CCCCCC
  • terminal.ansiYellow#FFD319
  • terminal.background#000000
  • terminal.border#222222
  • terminal.foreground#2FA43D
  • terminal.selectionBackground#CCCCCC30
  • terminalCursor.background#000000
  • terminalCursor.foreground#2FA43D
  • textLink.foreground#4C6EFF
  • titleBar.activeBackground#191919
  • titleBar.activeForeground#CCCCCC
  • titleBar.border#00000000
  • titleBar.inactiveBackground#191919
  • titleBar.inactiveForeground#CCCCCC
  • tree.inactiveIndentGuidesStroke#333333
  • tree.indentGuidesStroke#555555
  • walkThrough.embeddedEditorBackground#00000050
  • widget.shadow#000000

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, comment storage.type, comment variable, comment support.variable, comment support.class, comment support.type, comment entity.name.type, comment entity.name.class, comment keyword.operator, comment: comment, comment.line.double-slash, comment entity.name.class, comment entity.name.type, comment keyword.operator, comment support.class, comment support.type, comment support.variable, comment variable, Double-Slashed Comment#888888
string#32D698
string.quoted#32D698
support.constant.math#F3F359
constant.numeric, constant.character.numeric#F09030
constant.language, punctuation.definition.constant, variable.other.constant#F887FF
constant.character, constant.other#F887FF
constant.character.escape#F09030
string.regexp, string.regexp keyword.other#F887FF
meta.function punctuation.separator.comma#EEEEEE
variable#F3F359
punctuation.accessor, keyword#EB0869
storage#EB0869
storage.type, meta.var.expr storage.type, meta.class meta.method.declaration meta.var.expr storage.type.js#EB0869
entity.name.class, meta.class entity.name.type.class#F3F359
entity.other.inherited-class#06FBCFitalic
entity.name.function#F887FF
variable.parameter#B60DFC
punctuation.definition.tag, meta.tag#F887FF
entity.name.tag support.class.component, 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#EB0869
entity.other.attribute-name#F3F359
entity.name.tag.custom#F3F359
support.function, support.constant#F887FF
support.constant.meta.property-value#F887FF
support.type, support.class#F3F359
support.variable.dom#F3F359
invalid#EEEEEE
invalid.deprecated#EEEEEE
keyword.operator#F887FF
keyword.operator.relational#EB0869
keyword.operator.assignment#EB0869
comment.line.double-slash#777777
object#CCCCCC
constant.language.null#EB0869
meta.brace#EEEEEE
meta.delimiter.period#EB0869
punctuation.definition.string#32D698
constant.language.boolean#EB0869
object.comma#EEEEEE
variable.parameter.function#F887FF
support.type.vendored.property-name, support.constant.vendored.property-value, support.type.property-name, meta.property-list entity.name.tag#F887FF
meta.property-list entity.name.tag.reference#EB0869
constant.other.color.rgb-value punctuation.definition.constant#F09030
constant.other.color#F3F359
keyword.other.unit#F3F359
meta.selector#EB0869
entity.other.attribute-name.id#FAD430
meta.property-name#F887FF
entity.name.tag.doctype, meta.tag.sgml.doctype#EB0869
punctuation.definition.parameters#32D698
keyword.control.operator#F887FF
keyword.operator.logical#EB0869
variable.instance, variable.other.instance, variable.reaedwrite.instance, variable.other.readwrite.instance#EB0869
variable.other.property, variable.other.object.property#F887FF
entity.name.function#F887FF
keyword.operator.comparison#EB0869
support.constant, keyword.other.special-method, keyword.other.new#F887FF
support.function#F887FF
invalid.broken#020E14
invalid.unimplemented#EEEEEE
invalid.illegal#EEEEEE
variable.language#EB0869
support.variable.property#F887FF
variable.function#F887FF
variable.interpolation#EC5F67
meta.function-call#F887FF
punctuation.section.embedded#D3423E
punctuation.terminator.expression, punctuation.definition.arguments, punctuation.definition.array, punctuation.section.array, meta.array#EEEEEE
punctuation.terminator#EB0869
punctuation.definition.list.begin, punctuation.definition.list.end, punctuation.separator.arguments, punctuation.definition.list#32D698
string.template meta.template.expression#D3423E
string.template punctuation.definition.string#FFFFFF
italic#EB0869italic
bold#F3F359bold
quote#777777italic
raw#F887FF
variable.assignment.coffee#F887FF
variable.parameter.function.coffee#EEEEEE
variable.assignment.coffee#F887FF
variable.other.readwrite.cs#EEEEEE
entity.name.type.class.cs, storage.type.cs#87E1FF
entity.name.type.namespace.cs#CCCCCC
entity.name.tag.css, entity.name.tag.less, entity.name.tag.custom.css#EB0869
entity.name.tag.wildcard.css, entity.name.tag.wildcard.less, entity.name.tag.wildcard.scss, entity.name.tag.wildcard.sass#EB0869
keyword.other#F3F359
meta.attribute-selector.css entity.other.attribute-name.attribute#F09030
source.elixir support.type.elixir, source.elixir meta.module.elixir entity.name.class.elixir#F887FF
source.elixir entity.name.function#F3F359
source.elixir constant.other.symbol.elixir, source.elixir constant.other.keywords.elixir#F887FF
source.elixir punctuation.definition.string#F887FF
source.elixir variable.other.readwrite.module.elixir, source.elixir variable.other.readwrite.module.elixir punctuation.definition.variable.elixir#F3F359
source.elixir .punctuation.binary.elixir#EB0869
source.go meta.function-call.go#EEEEEE
entity.other.attribute-name.id.html#F3F359
punctuation.definition.tag.html#F887FF
meta.tag.sgml.doctype.html#EB0869
meta.class entity.name.type.class.js#F09030
meta.method.declaration storage.type.js#F887FF
terminator.js#EEEEEE
meta.js punctuation.definition.js#EEEEEE
entity.name.type.instance.jsdoc, entity.name.type.instance.phpdoc#EEEEEE
variable.other.jsdoc, variable.other.phpdoc#78CCF0
variable.other.meta.import.js, meta.import.js variable.other, variable.other.meta.export.js, meta.export.js variable.other#EEEEEE
variable.parameter.function.js#B60DFC
variable.other.readwrite.js#FFFFFF
variable.other.object.js, variable.other.object.jsx, variable.object.property.js, variable.object.property.jsx#FFFFFF
variable.js, variable.other.js#FFFFFF
entity.name.type.js, entity.name.type.module.js#F09030
support.class.js#FFFFFF
support.type.property-name.json#32D698
support.constant.json#F3F359
meta.structure.dictionary.value.json string.quoted.double#F887FF
string.quoted.double.json punctuation.definition.string.json#F887FF
meta.structure.dictionary.json meta.structure.dictionary.value constant.language#EB0869
variable.other.ruby#FFFFFF
constant.language.symbol.hashkey.ruby#F887FF
entity.name.tag.less#EB0869
keyword.other.unit.css#F3F359
meta.attribute-selector.less entity.other.attribute-name.attribute#F09030
markup.heading.markdown#F887FF
markup.italic.markdown#EB0869italic
markup.bold.markdown#F3F359bold
markup.quote.markdown#777777italic
markup.inline.raw.markdown#F887FF
markup.underline.link.markdown, markup.underline.link.image.markdown#EB0869
string.other.link.title.markdown, string.other.link.description.markdown#FFFFFF
punctuation.definition.string.markdown, punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown, meta.link.inline.markdown punctuation.definition.string#F887FF
punctuation.definition.metadata.markdown#EB0869
beginning.punctuation.definition.list.markdown#F887FF
variable.other.php#FFFFFF
support.class.php#F09030
meta.function-call.php punctuation#FFFFFF
variable.other.global.php#F3F359
variable.other.global.php punctuation.definition.variable#F3F359
constant.language.python#EB0869
variable.parameter.function.python, meta.function-call.arguments.python#B60DFC
meta.function-call.python, meta.function-call.generic.python#CCCCCC
punctuation.python#FFFFFF
entity.name.function.decorator.python#F3F359
source.python variable.language.special#F887FF
variable.scss, variable.sass, variable.parameter.url.scss, variable.parameter.url.sass#FFFFFF
source.css.scss meta.at-rule variable, source.css.sass meta.at-rule variable#F887FF
source.css.scss meta.at-rule variable, source.css.sass meta.at-rule variable#FFFFFF
meta.attribute-selector.scss entity.other.attribute-name.attribute, meta.attribute-selector.sass entity.other.attribute-name.attribute#F09030
entity.name.tag.scss, entity.name.tag.sass#EB0869
keyword.other.unit.scss, keyword.other.unit.sass#F3F359
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#FFFFFF
entity.name.type.ts, entity.name.type.tsx#78CCF0
support.class.node.ts, support.class.node.tsx#F887FF
meta.type.parameters.ts entity.name.type, meta.type.parameters.tsx entity.name.type#FFFFFF
meta.import.ts punctuation.definition.block, meta.import.tsx punctuation.definition.block, meta.export.ts punctuation.definition.block, meta.export.tsx punctuation.definition.block#FFFFFF
meta.decorator punctuation.decorator.ts, meta.decorator punctuation.decorator.tsx#F887FF
meta.jsx.children.tsx, meta.tag.js meta.jsx.children.tsx#F887FF
entity.name.tag.yaml#F887FF
meta.property-list.css meta.property-value.css variable.other.less, meta.property-list.scss variable.scss, meta.property-list.sass variable.sass, keyword.operator.logical, keyword.operator.arithmetic, keyword.operator.bitwise, keyword.operator.increment, keyword.operator.ternary, keyword.operator.comparison, keyword.operator.assignment, keyword.operator.operator, keyword.operator.or.regexp, punctuation.definintion.string, punctuation