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#353434
  • activityBar.border#353434
  • activityBar.dropBackground#FED90F
  • activityBar.foreground#828080
  • activityBarBadge.background#FED90F
  • activityBarBadge.foreground#353434
  • background#353434
  • badge.background#353434
  • badge.foreground#f8f8f8
  • button.background#f8f8f8
  • button.foreground#353434
  • button.hoverBackground#f8f8f8
  • contrastBorder#353434
  • debugExceptionWidget.background#353434
  • debugExceptionWidget.border#969BA7
  • debugToolBar.background#353434
  • diffEditor.insertedTextBackground#cef29625
  • diffEditor.insertedTextBorder#cef29625
  • diffEditor.removedTextBackground#ff419e25
  • diffEditor.removedTextBorder#ff419e25
  • dropdown.background#353434
  • dropdown.border#4f4d4d
  • dropdown.foreground#f8f8f8
  • editor.background#353434
  • editor.findMatchBackground#49495075
  • editor.findMatchHighlightBackground#d1b27175
  • editor.findRangeHighlightBackground#49495075
  • editor.foreground#f8f8f8
  • editor.hoverHighlightBackground#494950
  • editor.inactiveSelectionBackground#3d3d43
  • editor.lineHighlightBackground#49495075
  • editor.lineHighlightBorder#49495075
  • editor.rangeHighlightBackground#49495075
  • editor.selectionBackground#494950
  • editor.selectionHighlightBackground#55555d
  • editor.wordHighlightBackground#969ba775
  • editor.wordHighlightStrongBackground#49495075
  • editorCursor.foreground#FED90F
  • editorError.foreground#FF419E
  • editorGroupHeader.tabsBackground#353434
  • editorGroupHeader.tabsBorder#353434
  • editorGutter.addedBackground#cef296
  • editorGutter.deletedBackground#FF419E
  • editorGutter.modifiedBackground#70D1FE
  • editorHoverWidget.background#353434
  • editorHoverWidget.border#969BA7
  • editorIndentGuide.activeBackground#969BA7
  • editorIndentGuide.background#4f4d4d
  • editorLineNumber.foreground#969BA7
  • editorLink.activeForeground#fff1a7
  • editorMarkerNavigation.background#353434
  • editorMarkerNavigationError.background#FF419E
  • editorMarkerNavigationWarning.background#D1B271
  • editorOverviewRuler.addedForeground#cef296
  • editorOverviewRuler.commonContentForeground#FED90F
  • editorOverviewRuler.currentContentForeground#FED90F
  • editorOverviewRuler.deletedForeground#FF419E
  • editorOverviewRuler.errorForeground#FF419E
  • editorOverviewRuler.incomingContentForeground#FED90F
  • editorOverviewRuler.modifiedForeground#70D1FE
  • editorOverviewRuler.warningForeground#D1B271
  • editorRuler.foreground#969BA7
  • editorWarning.foreground#D1B271
  • editorWidget.background#353434
  • errorForeground#FF419E
  • extensionButton.prominentBackground#f8f8f8
  • extensionButton.prominentForeground#353434
  • extensionButton.prominentHoverBackground#f8f8f8
  • focusBorder#353434
  • foreground#f8f8f8
  • gitDecoration.addedResourceForeground#cef296
  • gitDecoration.deletedResourceForeground#FF419E
  • gitDecoration.modifiedResourceForeground#70D1FE
  • gitDecoration.untrackedResourceForeground#cef296
  • input.border#969BA7
  • input.foreground#f8f8f8
  • input.placeholderForeground#f8f8f8
  • inputOption.activeBorder#f8f8f8
  • inputValidation.errorBackground#FF419E
  • inputValidation.errorBorder#FF419E
  • inputValidation.infoBackground#FED90F
  • inputValidation.infoBorder#FED90F
  • inputValidation.warningBackground#D1B271
  • inputValidation.warningBorder#D1B271
  • list.activeSelectionBackground#4f4d4d
  • list.activeSelectionForeground#f8f8f8
  • list.errorForeground#FF419E
  • list.focusBackground#686666
  • list.focusForeground#f8f8f8
  • list.highlightForeground#f8f8f8
  • list.hoverBackground#686666
  • list.hoverForeground#f8f8f8
  • list.inactiveSelectionForeground#f8f8f8
  • list.warningForeground#D1B271
  • merge.currentHeaderBackground#FED90F
  • merge.incomingHeaderBackground#FED90F
  • notification.background#353434
  • notification.buttonForeground#353434
  • notification.errorBackground#FF419E
  • notification.errorForeground#353434
  • notification.foreground#f8f8f8
  • notification.infoBackground#FED90F
  • notification.infoForeground#353434
  • notification.warningBackground#D1B271
  • notification.warningForeground#353434
  • panel.background#353434
  • panel.border#4f4d4d
  • panelTitle.activeBorder#FED90F
  • panelTitle.activeForeground#f8f8f8
  • peekView.border#FED90F
  • peekViewEditor.matchHighlightBackground#494950
  • peekViewResult.fileForeground#f8f8f8
  • peekViewResult.lineForeground#f8f8f8
  • peekViewResult.matchHighlightBackground#494950
  • peekViewResult.selectionForeground#f8f8f8
  • peekViewTitle.background#353434
  • peekViewTitleLabel.foreground#f8f8f8
  • pickerGroup.foreground#FED90F
  • progressBar.background#FED90F
  • scrollbarSlider.activeBackground#4f4d4d
  • scrollbarSlider.background#49495075
  • scrollbarSlider.hoverBackground#4f4d4d
  • sideBar.background#2f2e2e
  • sideBar.border#353434
  • sideBar.foreground#f8f8f8
  • sideBarSectionHeader.background#4f4d4d
  • sideBarSectionHeader.foreground#f8f8f8
  • sideBarTitle.foreground#f8f8f8
  • statusBar.background#353434
  • statusBar.border#353434
  • statusBar.foreground#969BA7
  • statusBar.noFolderBackground#353434
  • tab.activeBackground#353434
  • tab.activeBorder#353434
  • tab.activeForeground#f8f8f8
  • tab.border#353434
  • tab.inactiveBackground#353434
  • tab.inactiveForeground#969BA7
  • tab.unfocusedActiveBorder#353434
  • terminal.ansiBlack#353434
  • terminal.ansiBlue#70d1fe
  • terminal.ansiBrightBlack#353434
  • terminal.ansiBrightBlue#70d1fe
  • terminal.ansiBrightCyan#d1b271
  • terminal.ansiBrightGreen#cef296
  • terminal.ansiBrightMagenta#FF419E
  • terminal.ansiBrightRed#FF419E
  • terminal.ansiBrightWhite#f8f8f8
  • terminal.ansiBrightYellow#FED90F
  • terminal.ansiCyan#d1b271
  • terminal.ansiGreen#cef296
  • terminal.ansiMagenta#FF419E
  • terminal.ansiRed#FF419E
  • terminal.ansiWhite#f8f8f8
  • terminal.ansiYellow#70D1FE
  • textLink.activeForeground#fff1a7
  • textLink.foreground#FED90F
  • textPreformat.foreground#70D1FE
  • titleBar.activeForeground#f8f8f8

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#969BA7
string#FED90F
string.quoted#FED90F
support.constant.math#70D1FE
constant.numeric, constant.character.numeric#cef296
constant.language, punctuation.definition.constant, variable.other.constant#f8f8f8
constant.character, constant.other#70D1FE
constant.character.escape#cef296
string.regexp, string.regexp keyword.other#FED90F
meta.function punctuation.separator.comma#f8f8f8
variable#70D1FE
punctuation.accessor, keyword#D1B271
storage#D1B271
storage.type, meta.var.expr storage.type, meta.class meta.method.declaration meta.var.expr storage.type.js#FF419E
entity.name.class, meta.class entity.name.type.class#70D1FE
entity.other.inherited-class#FED90F
entity.name.function#70D1FE
variable.parameter#FED90F
punctuation.definition.tag, meta.tag#f8f8f8
support.class.component, meta.tag.other.html, meta.tag.other.js, meta.tag.other.tsx, meta.tag.tsx, meta.tag.html#FF419E
entity.name.tag.tsx, entity.name.tag.js, entity.name.tag#FF419E
entity.other.attribute-name#70D1FE
entity.name.tag.custom#70D1FE
support.function, support.constant#70D1FE
support.constant.meta.property-value#cef296
support.type, support.class#70D1FE
support.variable.dom#70D1FE
invalid#f8f8f8
invalid.deprecated#f8f8f8
keyword.operator#D1B271
keyword.operator.relational#D1B271
keyword.operator.assignment#D1B271
comment.line.double-slash#969BA7
constant.language.null#cef296
meta.brace#f8f8f8
meta.delimiter.period#D1B271
constant.language.boolean#cef296
object.comma#f8f8f8
variable.parameter.function#cef296
support.type.vendored.property-name, support.constant.vendored.property-value, support.type.property-name, meta.property-list entity.name.tag#FED90F
meta.property-list entity.name.tag.reference#FF419E
constant.other.color.rgb-value punctuation.definition.constant#cef296
constant.other.color#D1B271
keyword.other.unit#D1B271
meta.selector#D1B271
entity.other.attribute-name.id#70D1FE
meta.property-name#FED90F
entity.name.tag.doctype, meta.tag.sgml.doctype#D1B271
punctuation.definition.parameters#f8f8f8
keyword.control.operator#cef296
keyword.operator.logical#D1B271
variable.instance, variable.other.instance, variable.reaedwrite.instance, variable.other.readwrite.instance#FF419E
variable.other.property, variable.other.object.property#cef296
entity.name.function#70D1FE
keyword.operator.comparison#D1B271
support.constant, keyword.other.special-method, keyword.other.new#cef296
support.function#cef296
invalid.broken#353434
invalid.unimplemented#f8f8f8
invalid.illegal#f8f8f8
variable.language#FF419E
support.variable.property#cef296
variable.function#70D1FE
variable.interpolation#FF419E
meta.function-call#70D1FE
punctuation.section.embedded#FF419E
string.template meta.template.expression#FF419E
italic#D1B271italic
bold#70D1FEbold
quote#FED90Fitalic
raw#FED90F
variable.assignment.coffee#cef296
variable.parameter.function.coffee#f8f8f8
variable.assignment.coffee#cef296
variable.other.readwrite.cs#f8f8f8
entity.name.type.class.cs, storage.type.cs#70D1FE
entity.name.type.namespace.cs#D1B271
entity.name.tag.css, entity.name.tag.less, entity.name.tag.custom.css#FF419E
entity.name.tag.wildcard.css, entity.name.tag.wildcard.less, entity.name.tag.wildcard.scss, entity.name.tag.wildcard.sass#FF419E
keyword.other.unit.css#D1B271
meta.attribute-selector.css entity.other.attribute-name.attribute#cef296
source.elixir support.type.elixir, source.elixir meta.module.elixir entity.name.class.elixir#70D1FE
source.elixir entity.name.function#70D1FE
source.elixir constant.other.symbol.elixir, source.elixir constant.other.keywords.elixir#70D1FE
source.elixir punctuation.definition.string#FED90F
source.elixir variable.other.readwrite.module.elixir, source.elixir variable.other.readwrite.module.elixir punctuation.definition.variable.elixir#70D1FE
source.elixir .punctuation.binary.elixir#D1B271
source.go meta.function-call.go#70D1FE
entity.other.attribute-name.id.html#70D1FE
punctuation.definition.tag.html#cef296
meta.tag.sgml.doctype.html#D1B271
meta.class entity.name.type.class.js#70D1FE
meta.method.declaration storage.type.js#70D1FEnormal
terminator.js#f8f8f8
meta.js punctuation.definition.js#f8f8f8
entity.name.type.instance.jsdoc, entity.name.type.instance.phpdoc#f8f8f8
variable.other.jsdoc, variable.other.phpdoc#FED90F
variable.other.meta.import.js, meta.import.js variable.other#f8f8f8
variable.parameter.function.js#FED90F
variable.other.readwrite.js#f8f8f8
variable.other.object.js, variable.other.object.jsx, variable.object.property.js, variable.object.property.jsx#f8f8f8
meta.jsx.children.js.jsx, meta.jsx.children.js.jsx#FED90F
punctuation.section.embedded.begin.js.jsx, punctuation.section.embedded.end.js.jsx#f8f8f8
variable.js, variable.other.js#f8f8f8
entity.name.type.js, entity.name.type.module.js#70D1FE
support.class.js#f8f8f8
support.type.property-name.json#FF419E
support.constant.json#70D1FE
meta.structure.dictionary.value.json string.quoted.double#FED90F
string.quoted.double.json punctuation.definition.string.json#FED90F
meta.structure.dictionary.json meta.structure.dictionary.value constant.language#cef296
variable.other.ruby#f8f8f8
constant.language.symbol.hashkey.ruby#cef296
entity.name.tag.less#FF419E
keyword.other.unit.css#D1B271
meta.attribute-selector.less entity.other.attribute-name.attribute#cef296
markup.heading.markdown#70D1FE
markup.italic.markdown#D1B271italic
markup.bold.markdown#70D1FEbold
markup.quote.markdown#FED90Fitalic
markup.inline.raw.markdown#FED90F
markup.underline.link.markdown, markup.underline.link.image.markdown#FED90F
string.other.link.title.markdown, string.other.link.description.markdown#f8f8f8
punctuation.definition.string.markdown, punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown, meta.link.inline.markdown punctuation.definition.string#70D1FE
punctuation.definition.metadata.markdown#FF419E
beginning.punctuation.definition.list.markdown#70D1FE
support.class.php#70D1FE
meta.function-call.php punctuation#f8f8f8
variable.other.global.php#70D1FE
variable.other.global.php punctuation.definition.variable#70D1FE
constant.language.python#cef296
variable.parameter.function.python, meta.function-call.arguments.python#FED90F
punctuation.python#f8f8f8
entity.name.function.decorator.python#70D1FE
source.css.scss meta.at-rule variable, source.css.sass meta.at-rule variable#70D1FE
meta.attribute-selector.scss entity.other.attribute-name.attribute, meta.attribute-selector.sass entity.other.attribute-name.attribute#cef296
entity.name.tag.scss, entity.name.tag.sass#FF419E
keyword.other.unit.scss, keyword.other.unit.sass#D1B271
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#f8f8f8
entity.name.type.ts, entity.name.type.tsx#70D1FE
support.class.node.ts, support.class.node.tsx#70D1FE
meta.type.parameters.ts entity.name.type, meta.type.parameters.tsx entity.name.type#f8f8f8
meta.import.ts punctuation.definition.block, meta.import.tsx punctuation.definition.block#f8f8f8
meta.decorator punctuation.decorator.ts, meta.decorator punctuation.decorator.tsx#70D1FE
meta.jsx.children.tsx, meta.tag.js meta.jsx.children.tsx#f8f8f8
entity.name.tag.yaml#cef296
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