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#1b1b1b
  • activityBar.border#1b1b1b
  • activityBar.dropBackground#1f75fe
  • activityBar.foreground#535458
  • activityBarBadge.background#1f75fe
  • activityBarBadge.foreground#1b1b1b
  • badge.background#1b1b1b
  • badge.foreground#cbcdd2
  • button.background#cbcdd2
  • button.foreground#1b1b1b
  • button.hoverBackground#cbcdd2
  • contrastBorder#1b1b1b
  • debugExceptionWidget.background#1b1b1b
  • debugExceptionWidget.border#1f75fe
  • debugToolBar.background#1b1b1b
  • diffEditor.insertedTextBackground#0bda5125
  • diffEditor.insertedTextBorder#0bda5125
  • diffEditor.removedTextBackground#f5142325
  • diffEditor.removedTextBorder#f5142325
  • dropdown.background#1b1b1b
  • dropdown.border#3f4044
  • dropdown.foreground#cbcdd2
  • editor.background#1b1b1b
  • editor.findMatchHighlightBackground#2F3137
  • editor.findRangeHighlightBackground#2F3137
  • editor.foreground#cbcdd2
  • editor.hoverHighlightBackground#2F3137
  • editor.inactiveSelectionBackground#25272d
  • editor.lineHighlightBackground#2F3137
  • editor.lineHighlightBorder#2F3137
  • editor.rangeHighlightBackground#2F3137
  • editor.selectionBackground#2F3137
  • editor.selectionHighlightBackground#2F3137
  • editor.wordHighlightBackground#2F3137
  • editor.wordHighlightStrongBackground#2F3137
  • editorBracketHighlight.foreground1#bf00ff
  • editorBracketHighlight.foreground2#0bda51
  • editorBracketHighlight.foreground3#ffc40c
  • editorBracketHighlight.unexpectedBracket.foreground#f51423
  • editorCursor.foreground#1f75fe
  • editorError.foreground#f51423
  • editorGroupHeader.tabsBackground#1b1b1b
  • editorGroupHeader.tabsBorder#1b1b1b
  • editorGutter.addedBackground#0bda51
  • editorGutter.deletedBackground#f51423
  • editorGutter.modifiedBackground#ffc40c
  • editorHoverWidget.background#1b1b1b
  • editorHoverWidget.border#1f75fe
  • editorIndentGuide.activeBackground#686b78
  • editorIndentGuide.background#3f4044
  • editorLineNumber.foreground#686b78
  • editorLink.activeForeground#3d93ff
  • editorMarkerNavigation.background#1b1b1b
  • editorMarkerNavigationError.background#f51423
  • editorMarkerNavigationWarning.background#ff7518
  • editorOverviewRuler.addedForeground#0bda51
  • editorOverviewRuler.commonContentForeground#1f75fe
  • editorOverviewRuler.currentContentForeground#1f75fe
  • editorOverviewRuler.deletedForeground#f51423
  • editorOverviewRuler.errorForeground#f51423
  • editorOverviewRuler.incomingContentForeground#1f75fe
  • editorOverviewRuler.modifiedForeground#ffc40c
  • editorOverviewRuler.warningForeground#ff7518
  • editorRuler.foreground#686b78
  • editorWarning.foreground#0bda51
  • editorWidget.background#1b1b1b
  • errorForeground#f51423
  • extensionButton.prominentBackground#cbcdd2
  • extensionButton.prominentForeground#1b1b1b
  • extensionButton.prominentHoverBackground#cbcdd2
  • focusBorder#1b1b1b
  • foreground#cbcdd2
  • gitDecoration.deletedResourceForeground#f51423
  • gitDecoration.modifiedResourceForeground#ffc40c
  • gitDecoration.untrackedResourceForeground#0bda51
  • input.border#686b78
  • input.foreground#cbcdd2
  • input.placeholderForeground#cbcdd2
  • inputOption.activeBorder#cbcdd2
  • inputValidation.errorBackground#f51423
  • inputValidation.errorBorder#f51423
  • inputValidation.infoBackground#1f75fe
  • inputValidation.infoBorder#1f75fe
  • inputValidation.warningBackground#ff7518
  • inputValidation.warningBorder#ff7518
  • list.activeSelectionBackground#3f4044
  • list.activeSelectionForeground#cbcdd2
  • list.errorForeground#ff7518
  • list.focusBackground#494a4e
  • list.focusForeground#cbcdd2
  • list.highlightForeground#cbcdd2
  • list.hoverBackground#494a4e
  • list.hoverForeground#cbcdd2
  • list.inactiveSelectionBackground#3f4044
  • list.inactiveSelectionForeground#cbcdd2
  • list.warningForeground#f51423
  • merge.currentHeaderBackground#1f75fe
  • merge.incomingHeaderBackground#1f75fe
  • notification.background#1b1b1b
  • notification.buttonForeground#1b1b1b
  • notification.errorBackground#f51423
  • notification.errorForeground#1b1b1b
  • notification.foreground#cbcdd2
  • notification.infoBackground#1f75fe
  • notification.infoForeground#1b1b1b
  • notification.warningBackground#ff7518
  • notification.warningForeground#1b1b1b
  • panel.background#1b1b1b
  • panel.border#3f4044
  • panelTitle.activeBorder#1f75fe
  • panelTitle.activeForeground#cbcdd2
  • peekView.border#1f75fe
  • peekViewEditor.matchHighlightBackground#2F3137
  • peekViewResult.fileForeground#cbcdd2
  • peekViewResult.lineForeground#cbcdd2
  • peekViewResult.matchHighlightBackground#2F3137
  • peekViewResult.selectionForeground#cbcdd2
  • peekViewTitle.background#1b1b1b
  • peekViewTitleLabel.foreground#cbcdd2
  • pickerGroup.foreground#1f75fe
  • progressBar.background#1f75fe
  • scrollbarSlider.activeBackground#3f4044
  • scrollbarSlider.background#3f404480
  • scrollbarSlider.hoverBackground#3f4044
  • sideBar.background#131313
  • sideBar.border#1b1b1b
  • sideBar.foreground#cbcdd2
  • sideBarSectionHeader.background#3f4044
  • sideBarSectionHeader.foreground#cbcdd2
  • sideBarTitle.foreground#cbcdd2
  • statusBar.background#1b1b1b
  • statusBar.border#1b1b1b
  • statusBar.foreground#686b78
  • statusBar.noFolderBackground#1b1b1b
  • tab.activeBackground#202020
  • tab.activeBorder#686b78
  • tab.activeForeground#cbcdd2
  • tab.border#1b1b1b
  • tab.inactiveBackground#1b1b1b
  • tab.inactiveForeground#686b78
  • tab.unfocusedActiveBorder#1b1b1b
  • terminal.ansiBlack#818491
  • terminal.ansiBlue#1f75fe
  • terminal.ansiBrightBlack#818491
  • terminal.ansiBrightBlue#1f75fe
  • terminal.ansiBrightCyan#1f75fe
  • terminal.ansiBrightGreen#0bda51
  • terminal.ansiBrightMagenta#0bda51
  • terminal.ansiBrightRed#f51423
  • terminal.ansiBrightWhite#cbcdd2
  • terminal.ansiBrightYellow#ffc40c
  • terminal.ansiCyan#1f75fe
  • terminal.ansiGreen#0bda51
  • terminal.ansiMagenta#f51423
  • terminal.ansiRed#f51423
  • terminal.ansiWhite#cbcdd2
  • terminal.ansiYellow#ffc40c
  • textLink.activeForeground#3d93ff
  • textLink.foreground#1f75fe
  • textPreformat.foreground#ffc40c
  • titleBar.activeForeground#cbcdd2

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
Global settings#cbcdd2
comment#686b78
string#1f75fe
string.quoted#1f75fe
support.constant.math#ffc40c
constant.numeric, constant.character.numeric#ff7518
constant.language, punctuation.definition.constant, variable.other.constant#cbcdd2
constant.character, constant.other#ffc40c
constant.character.escape#ff7518
string.regexp, string.regexp keyword.other#1f75fe
meta.function punctuation.separator.comma#cbcdd2
variable#ffc40c
punctuation.accessor, keyword#0bda51
storage#0bda51
storage.type, meta.var.expr storage.type, meta.class meta.method.declaration meta.var.expr storage.type.js#f51423
entity.name.class, meta.class entity.name.type.class#ffc40c
entity.other.inherited-class#1f75fe
entity.name.function#ffc40c
variable.parameter#1f75fe
punctuation.definition.tag, meta.tag#cbcdd2
support.class.component, meta.tag.other.html, meta.tag.other.js, meta.tag.other.tsx, meta.tag.tsx, meta.tag.html#f51423
entity.name.tag.tsx, entity.name.tag.js, entity.name.tag#f51423
entity.other.attribute-name#ffc40c
entity.name.tag.custom#ffc40c
support.function, support.constant#ffc40c
support.constant.meta.property-value#ff7518
support.type, support.class#ffc40c
support.variable.dom#ffc40c
invalid#cbcdd2
invalid.deprecated#cbcdd2
keyword.operator#0bda51
keyword.operator.relational#0bda51
keyword.operator.assignment#0bda51
comment.line.double-slash#686b78
constant.language.null#ff7518
meta.brace#cbcdd2
meta.delimiter.period#0bda51
constant.language.boolean#ff7518
object.comma#cbcdd2
variable.parameter.function#ff7518
support.type.vendored.property-name, support.constant.vendored.property-value, support.type.property-name, meta.property-list entity.name.tag#1f75fe
meta.property-list entity.name.tag.reference#f51423
constant.other.color.rgb-value punctuation.definition.constant#ff7518
constant.other.color#0bda51
keyword.other.unit#0bda51
meta.selector#0bda51
entity.other.attribute-name.id#ffc40c
meta.property-name#1f75fe
entity.name.tag.doctype, meta.tag.sgml.doctype#0bda51
punctuation.definition.parameters#cbcdd2
keyword.control.operator#ff7518
keyword.operator.logical#0bda51
variable.instance, variable.other.instance, variable.reaedwrite.instance, variable.other.readwrite.instance#f51423
variable.other.property, variable.other.object.property#ff7518
entity.name.function#ffc40c
keyword.operator.comparison#0bda51
support.constant, keyword.other.special-method, keyword.other.new#ff7518
support.function#ff7518
invalid.broken#1b1b1b
invalid.unimplemented#cbcdd2
invalid.illegal#cbcdd2
variable.language#f51423
support.variable.property#ff7518
variable.function#ffc40c
variable.interpolation#f51423
meta.function-call#ffc40c
punctuation.section.embedded#f51423
string.template meta.template.expression#f51423
italic#0bda51italic
bold#ffc40cbold
quote#1f75feitalic
raw#1f75fe
variable.assignment.coffee#ff7518
variable.parameter.function.coffee#cbcdd2
variable.assignment.coffee#ff7518
variable.other.readwrite.cs#cbcdd2
entity.name.type.class.cs, storage.type.cs#ffc40c
entity.name.type.namespace.cs#0bda51
entity.name.tag.css, entity.name.tag.less, entity.name.tag.custom.css#f51423
entity.name.tag.wildcard.css, entity.name.tag.wildcard.less, entity.name.tag.wildcard.scss, entity.name.tag.wildcard.sass#f51423
keyword.other.unit.css#0bda51
meta.attribute-selector.css entity.other.attribute-name.attribute#ff7518
source.elixir support.type.elixir, source.elixir meta.module.elixir entity.name.class.elixir#ffc40c
source.elixir entity.name.function#ffc40c
source.elixir constant.other.symbol.elixir, source.elixir constant.other.keywords.elixir#ffc40c
source.elixir punctuation.definition.string#1f75fe
source.elixir variable.other.readwrite.module.elixir, source.elixir variable.other.readwrite.module.elixir punctuation.definition.variable.elixir#ffc40c
source.elixir .punctuation.binary.elixir#0bda51
source.go meta.function-call.go#ffc40c
entity.other.attribute-name.id.html#ffc40c
punctuation.definition.tag.html#ff7518
meta.tag.sgml.doctype.html#0bda51
meta.class entity.name.type.class.js#ffc40c
meta.method.declaration storage.type.js#ffc40cnormal
terminator.js#cbcdd2
meta.js punctuation.definition.js#cbcdd2
entity.name.type.instance.jsdoc, entity.name.type.instance.phpdoc#cbcdd2
variable.other.jsdoc, variable.other.phpdoc#1f75fe
variable.other.meta.import.js, meta.import.js variable.other#cbcdd2
variable.parameter.function.js#1f75fe
variable.other.readwrite.js#cbcdd2
variable.other.object.js, variable.other.object.jsx, variable.object.property.js, variable.object.property.jsx#cbcdd2
variable.js, variable.other.js#cbcdd2
entity.name.type.js, entity.name.type.module.js#ffc40c
support.class.js#cbcdd2
support.type.property-name.json#f51423
support.constant.json#ffc40c
meta.structure.dictionary.value.json string.quoted.double#1f75fe
string.quoted.double.json punctuation.definition.string.json#1f75fe
meta.structure.dictionary.json meta.structure.dictionary.value constant.language#ff7518
variable.other.ruby#cbcdd2
constant.language.symbol.hashkey.ruby#ff7518
entity.name.tag.less#f51423
keyword.other.unit.css#0bda51
meta.attribute-selector.less entity.other.attribute-name.attribute#ff7518
markup.heading.markdown#ffc40c
markup.italic.markdown#0bda51italic
markup.bold.markdown#ffc40cbold
markup.quote.markdown#1f75feitalic
markup.inline.raw.markdown#1f75fe
markup.underline.link.markdown, markup.underline.link.image.markdown#1f75fe
string.other.link.title.markdown, string.other.link.description.markdown#cbcdd2
punctuation.definition.string.markdown, punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown, meta.link.inline.markdown punctuation.definition.string#ffc40c
punctuation.definition.metadata.markdown#f51423
beginning.punctuation.definition.list.markdown#ffc40c
support.class.php#ffc40c
meta.function-call.php punctuation#cbcdd2
variable.other.global.php#ffc40c
variable.other.global.php punctuation.definition.variable#ffc40c
constant.language.python#ff7518
variable.parameter.function.python, meta.function-call.arguments.python#1f75fe
punctuation.python#cbcdd2
entity.name.function.decorator.python#ffc40c
source.css.scss meta.at-rule variable, source.css.sass meta.at-rule variable#ffc40c
meta.attribute-selector.scss entity.other.attribute-name.attribute, meta.attribute-selector.sass entity.other.attribute-name.attribute#ff7518
entity.name.tag.scss, entity.name.tag.sass#f51423
keyword.other.unit.scss, keyword.other.unit.sass#0bda51
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#cbcdd2
entity.name.type.ts, entity.name.type.tsx#ffc40c
support.class.node.ts, support.class.node.tsx#ffc40c
meta.type.parameters.ts entity.name.type, meta.type.parameters.tsx entity.name.type#cbcdd2
meta.import.ts punctuation.definition.block, meta.import.tsx punctuation.definition.block#cbcdd2
meta.decorator punctuation.decorator.ts, meta.decorator punctuation.decorator.tsx#ffc40c
meta.jsx.children.tsx, meta.tag.js meta.jsx.children.tsx#cbcdd2
entity.name.tag.yaml#ff7518
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
meta.import.ts meta.block.ts variable.other.readwrite.alias.ts, meta.import.tsx meta.block.tsx variable.other.readwrite.alias.tsx, meta.import.js variable.other, entity.name.function.ts, entity.name.function.tsx, support.type.primitive, entity.name.tag.yaml, meta.tag.sgml.doctype.html, entity.name.tag.doctype, meta.tag.sgml.doctype, entity.other.attribute-name, entity.name.tag.custom, source.js.jsx keyword.control.flow.js, support.type.property.css, support.function.basic_functions, variable.assignment.coffee, support.function.basic_functions, keyword.operator.expression.typeof, keyword.operator.type.annotation, assignment.coffee, entity.name.type.ts, support.constant.math, meta.object-literal.key, meta.var.expr storage.type, parameter, string, italic, quote, keyword, storage, language, type .function, type.function, storage.type.class, type.var, meta.parameter, variable.parameter, meta.parameters, keyword.control, modifier, this, commentnormal