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#0c0d0e
  • activityBar.border#0a0a0a60
  • activityBar.foreground#ffffff
  • activityBarBadge.background#f90086
  • activityBarBadge.foreground#ffffff
  • badge.background#0c0d0e
  • badge.foreground#3a3a3a
  • breadcrumb.foreground#f8f8f8c2
  • button.background#77777750
  • debugToolBar.background#0c0d0e
  • descriptionForeground#FFFFFF
  • diffEditor.insertedTextBackground#08fbcf15
  • diffEditor.removedTextBackground#f9008690
  • dropdown.background#0c0d0e
  • dropdown.border#FFFFFF10
  • editor.background#000000
  • editor.editorSelection#252525
  • editor.editorSelectionHighlight#252525
  • editor.findMatchBackground#f9008688
  • editor.findMatchHighlightBackground#f9008644
  • editor.findRangeHighlightBackground#252525
  • editor.foreground#ffffff
  • editor.hoverHighlightBackground#181818
  • editor.lineHighlightBackground#181818
  • editor.selectionBackground#08fbcf88
  • editor.selectionHighlightBackground#08fbcf44
  • editor.wordHighlightBackground#181818
  • editor.wordHighlightStrongBackground#181818
  • editorBracketMatch.background#0c0d0e
  • editorBracketMatch.border#FFCC0050
  • editorCursor.foreground#f90086
  • editorError.foreground#f90086
  • editorGroup.border#252525
  • editorGroupHeader.tabsBackground#0c0d0e
  • editorGroupHeader.tabsBorder#0c0d0e
  • editorGutter.addedBackground#08fbcf60
  • editorGutter.commentRangeForeground#54d4ff60
  • editorGutter.deletedBackground#f9008660
  • editorGutter.modifiedBackground#54d4ff60
  • editorHoverWidget.background#0c0d0e
  • editorHoverWidget.border#FFFFFF10
  • editorIndentGuide.activeBackground#616161
  • editorIndentGuide.background#222222
  • editorInfo.foreground#616161
  • editorLineNumber.foreground#777777
  • editorLink.activeForeground#FFFFFF
  • editorMarkerNavigation.background#ffffff05
  • editorOverviewRuler.border#0c0d0e
  • editorSuggestWidget.background#0c0d0e
  • editorSuggestWidget.border#222222
  • editorSuggestWidget.foreground#ffffff
  • editorSuggestWidget.highlightForeground#f90086
  • editorSuggestWidget.selectedBackground#3a3a3a
  • editorWarning.foreground#fff90070
  • editorWhitespace.foreground#ffffff10
  • editorWidget.background#0c0d0e
  • errorForeground#f90086
  • extensionButton.prominentBackground#08fbcf90
  • extensionButton.prominentHoverBackground#08fbcf
  • focusBorder#FFFFFF00
  • foreground#FFFFFF
  • gitDecoration.conflictingResourceForeground#fff900
  • gitDecoration.deletedResourceForeground#f90086
  • gitDecoration.ignoredResourceForeground#3a3a3a
  • gitDecoration.modifiedResourceForeground#616161
  • gitDecoration.untrackedResourceForeground#08fbcf
  • gitlens.trailingLineForegroundColor#616161
  • input.background#3a3a3a
  • input.border#f9008600
  • input.foreground#ffffff
  • input.placeholderForeground#ffffff60
  • inputOption.activeBorder#f90086
  • inputValidation.errorBorder#f90086
  • inputValidation.infoBorder#54d4ff
  • inputValidation.warningBorder#fff900
  • list.activeSelectionBackground#3a3a3a
  • list.activeSelectionForeground#f90086
  • list.errorForeground#f90086
  • list.focusBackground#ffffff44
  • list.focusForeground#ffffff
  • list.highlightForeground#f90086
  • list.hoverBackground#252525
  • list.hoverForeground#FFFFFF
  • list.inactiveSelectionBackground#0c0d0e
  • list.inactiveSelectionForeground#f90086
  • list.warningForeground#fff900
  • notification.background#0c0d0e
  • notification.buttonBackground#ffffff50
  • notification.foreground#ffffff
  • notification.infoBackground#54d4ff
  • notification.infoForeground#ffffff
  • notification.warningBackground#fff90090
  • notification.warningForeground#ffffff
  • panel.background#0c0d0e
  • panel.border#0a0a0a00
  • panelTitle.activeForeground#ffffff
  • peekView.border#0a0a0a30
  • peekViewEditor.background#ffffff05
  • peekViewEditor.matchHighlightBackground#181818
  • peekViewEditorGutter.background#ffffff05
  • peekViewResult.background#ffffff05
  • peekViewTitle.background#ffffff05
  • peekViewTitleDescription.foreground#ffffff60
  • pickerGroup.foreground#f90086
  • progressBar.background#08fbcf
  • scrollbar.shadow#0a0a0a00
  • scrollbarSlider.activeBackground#ffffff24
  • scrollbarSlider.background#ffffff24
  • scrollbarSlider.hoverBackground#f9008677
  • selection.background#FFFFFF
  • sideBar.background#0c0d0e
  • sideBar.border#0c0d0e
  • sideBar.foreground#777777
  • sideBarSectionHeader.background#0c0d0e
  • sideBarTitle.foreground#ffffff
  • statusBar.background#0c0d0e
  • statusBar.border#0c0d0e
  • statusBar.debuggingBackground#f90086
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#777777
  • statusBar.noFolderBackground#0a0a0a60
  • tab.activeBackground#252525
  • tab.activeBorder#f90086
  • tab.activeForeground#FFFFFF
  • tab.border#0c0d0e
  • tab.hoverBackground#252525
  • tab.inactiveBackground#0c0d0e
  • tab.inactiveForeground#777777
  • tab.unfocusedActiveBorder#777777
  • tab.unfocusedActiveForeground#ffffff
  • tab.unfocusedInactiveForeground#777777
  • terminal.ansiBlack#3a3a3a
  • terminal.ansiBlue#54d4ff
  • terminal.ansiBrightBlack#3a3a3a
  • terminal.ansiBrightBlue#54d4ff
  • terminal.ansiBrightCyan#54d4ff
  • terminal.ansiBrightGreen#08fbcf
  • terminal.ansiBrightMagenta#f90086
  • terminal.ansiBrightRed#f9008690
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#fff900
  • terminal.ansiCyan#54d4ff
  • terminal.ansiGreen#08fbcf
  • terminal.ansiMagenta#f90086
  • terminal.ansiRed#f9008690
  • terminal.ansiWhite#ffffff
  • terminal.ansiYellow#fff900
  • terminalCursor.foreground#f90086
  • textLink.activeForeground#FFFFFF
  • textLink.foreground#f90086
  • titleBar.activeBackground#0c0d0e
  • titleBar.activeForeground#3a3a3a
  • titleBar.border#0a0a0a60
  • titleBar.inactiveBackground#0c0d0e
  • titleBar.inactiveForeground#3a3a3a
  • widget.shadow#0a0a0a00

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
Global settings#ffffff
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#08fbcf
string.quoted#08fbcf
support.constant.math#FFF900
constant.numeric, constant.character.numeric#ff9c31
constant.language, punctuation.definition.constant, variable.other.constant#54d4ff
constant.character, constant.other#54d4ff
constant.character.escape#ff9c31
string.regexp, string.regexp keyword.other#54d4ff
meta.function punctuation.separator.comma#ffffff
variable#FFF900
punctuation.accessor, keyword#f90086
storage#f90086
storage.type, meta.var.expr storage.type, meta.class meta.method.declaration meta.var.expr storage.type.js#f90086
entity.name.class, meta.class entity.name.type.class#FFF900
entity.other.inherited-class#06fbcfitalic
entity.name.function#54d4ff
variable.parameter#B60DFC
punctuation.definition.tag, meta.tag#54d1ff
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#f90086
entity.other.attribute-name#FFF900
entity.name.tag.custom#FFF900
support.function, support.constant#54d4ff
support.constant.meta.property-value#54d1ff
support.type, support.class#FFF900
support.variable.dom#FFF900
invalid#ffffff
invalid.deprecated#ffffff
keyword.operator#54d1ff
keyword.operator.relational#f90086
keyword.operator.assignment#f90086
comment.line.double-slash#777777
object#cccccc
constant.language.null#f90086
meta.brace#ffffff
meta.delimiter.period#f90086
punctuation.definition.string#08fbcf
constant.language.boolean#f90086
object.comma#ffffff
variable.parameter.function#54d1ff
support.type.vendored.property-name, support.constant.vendored.property-value, support.type.property-name, meta.property-list entity.name.tag#54d4ff
meta.property-list entity.name.tag.reference#f90086
constant.other.color.rgb-value punctuation.definition.constant#ff9c31
constant.other.color#fff900
keyword.other.unit#fff900
meta.selector#f90086
entity.other.attribute-name.id#FAD430
meta.property-name#54d4ff
entity.name.tag.doctype, meta.tag.sgml.doctype#f90086
punctuation.definition.parameters#08fbcf
keyword.control.operator#54d1ff
keyword.operator.logical#f90086
variable.instance, variable.other.instance, variable.reaedwrite.instance, variable.other.readwrite.instance#f90086
variable.other.property, variable.other.object.property#54d1ff
entity.name.function#54d4ff
keyword.operator.comparison#f90086
support.constant, keyword.other.special-method, keyword.other.new#54d1ff
support.function#54d1ff
invalid.broken#020e14
invalid.unimplemented#ffffff
invalid.illegal#ffffff
variable.language#f90086
support.variable.property#54d1ff
variable.function#54d4ff
variable.interpolation#ec5f67
meta.function-call#54d4ff
punctuation.section.embedded#d3423e
punctuation.terminator.expression, punctuation.definition.arguments, punctuation.definition.array, punctuation.section.array, meta.array#ffffff
punctuation.terminator#f90086
punctuation.definition.list.begin, punctuation.definition.list.end, punctuation.separator.arguments, punctuation.definition.list#08fbcf
string.template meta.template.expression#d3423e
string.template punctuation.definition.string#ffffff
italic#f90086italic
bold#FFF900bold
quote#777777italic
raw#54d4ff
variable.assignment.coffee#54d1ff
variable.parameter.function.coffee#ffffff
variable.assignment.coffee#54d1ff
variable.other.readwrite.cs#ffffff
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#f90086
entity.name.tag.wildcard.css, entity.name.tag.wildcard.less, entity.name.tag.wildcard.scss, entity.name.tag.wildcard.sass#f90086
keyword.other#fff900
meta.attribute-selector.css entity.other.attribute-name.attribute#ff9c31
source.elixir support.type.elixir, source.elixir meta.module.elixir entity.name.class.elixir#54d4ff
source.elixir entity.name.function#FFF900
source.elixir constant.other.symbol.elixir, source.elixir constant.other.keywords.elixir#54d4ff
source.elixir punctuation.definition.string#54d4ff
source.elixir variable.other.readwrite.module.elixir, source.elixir variable.other.readwrite.module.elixir punctuation.definition.variable.elixir#FFF900
source.elixir .punctuation.binary.elixir#f90086
source.go meta.function-call.go#ffffff
entity.other.attribute-name.id.html#FFF900
punctuation.definition.tag.html#54d1ff
meta.tag.sgml.doctype.html#f90086
meta.class entity.name.type.class.js#ff9c31
meta.method.declaration storage.type.js#54d4ffnormal
terminator.js#ffffff
meta.js punctuation.definition.js#ffffff
entity.name.type.instance.jsdoc, entity.name.type.instance.phpdoc#ffffff
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#ffffff
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#ff9c31
support.class.js#ffffff
support.type.property-name.json#08fbcf
support.constant.json#FFF900
meta.structure.dictionary.value.json string.quoted.double#54d4ff
string.quoted.double.json punctuation.definition.string.json#54d4ff
meta.structure.dictionary.json meta.structure.dictionary.value constant.language#f90086
variable.other.ruby#ffffff
constant.language.symbol.hashkey.ruby#54d1ff
entity.name.tag.less#f90086
keyword.other.unit.css#fff900
meta.attribute-selector.less entity.other.attribute-name.attribute#ff9c31
markup.heading.markdown#54d4ff
markup.italic.markdown#f90086italic
markup.bold.markdown#FFF900bold
markup.quote.markdown#777777italic
markup.inline.raw.markdown#54d4ff
markup.underline.link.markdown, markup.underline.link.image.markdown#f90086
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#54d4ff
punctuation.definition.metadata.markdown#f90086
beginning.punctuation.definition.list.markdown#54d4ff
variable.other.php#ffffff
support.class.php#ff9c31
meta.function-call.php punctuation#ffffff
variable.other.global.php#FFF900
variable.other.global.php punctuation.definition.variable#FFF900
constant.language.python#f90086
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#FFF900
source.python variable.language.special#54d4ff
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#54d4ff
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#ff9c31
entity.name.tag.scss, entity.name.tag.sass#f90086
keyword.other.unit.scss, keyword.other.unit.sass#fff900
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#54d4ff
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#54d4ff
meta.jsx.children.tsx, meta.tag.js meta.jsx.children.tsx#54d4ff
entity.name.tag.yaml#54d1ff
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, punctuationnormal