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#f3e5f5
  • activityBar.foreground#6a1b9a
  • activityBarBadge.background#9c27b0
  • activityBarBadge.foreground#ffffff
  • badge.background#9c27b0
  • badge.foreground#ffffff
  • breadcrumb.activeSelectionForeground#6a1b9a
  • breadcrumb.focusForeground#6a1b9a
  • breadcrumb.foreground#9575cd
  • contrastActiveBorder#6a1b9a
  • contrastBorder#6a1b9a
  • debugToolBar.background#ffffff
  • dropdown.background#ffffff
  • dropdown.border#6a1b9a
  • dropdown.foreground#1a0d1a
  • editor.background#faf5fa
  • editor.findMatchBackground#ffeb3b40
  • editor.findMatchHighlightBackground#ffeb3b20
  • editor.foreground#1a0d1a
  • editor.lineHighlightBackground#e1bee720
  • editor.selectionBackground#ce93d860
  • editor.selectionHighlightBackground#ce93d830
  • editor.wordHighlightBackground#ba68c830
  • editor.wordHighlightStrongBackground#ba68c850
  • editorBracketHighlight.foreground1#ff6b9d
  • editorBracketHighlight.foreground2#4fc3f7
  • editorBracketHighlight.foreground3#81c784
  • editorBracketHighlight.foreground4#ffb74d
  • editorBracketHighlight.foreground5#ba68c8
  • editorBracketHighlight.foreground6#26a69a
  • editorBracketMatch.background#ce93d840
  • editorBracketMatch.border#6a1b9a
  • editorCursor.foreground#6a1b9a
  • editorGutter.addedBackground#4caf50
  • editorGutter.background#faf5fa
  • editorGutter.deletedBackground#f44336
  • editorGutter.modifiedBackground#ffeb3b
  • editorHoverWidget.background#ffffff
  • editorIndentGuide.activeBackground#6a1b9a
  • editorIndentGuide.background#e1bee730
  • editorLineNumber.activeForeground#6a1b9a
  • editorLineNumber.foreground#9575cd
  • editorSuggestWidget.background#ffffff
  • editorSuggestWidget.border#6a1b9a
  • editorWidget.background#ffffff
  • focusBorder#6a1b9a
  • input.background#ffffff
  • input.border#6a1b9a
  • input.foreground#1a0d1a
  • input.placeholderForeground#9575cd
  • inputOption.activeBackground#6a1b9a
  • inputOption.activeBorder#6a1b9a
  • inputValidation.errorBackground#ffebee
  • inputValidation.errorBorder#f44336
  • inputValidation.infoBackground#e3f2fd
  • inputValidation.infoBorder#2196f3
  • inputValidation.warningBackground#fff8e1
  • inputValidation.warningBorder#ffeb3b
  • list.activeSelectionBackground#ce93d860
  • list.activeSelectionForeground#1a0d1a
  • list.errorForeground#f44336
  • list.focusBackground#ce93d830
  • list.hoverBackground#ce93d830
  • list.inactiveSelectionBackground#ce93d830
  • list.invalidItemForeground#f44336
  • list.warningForeground#ffeb3b
  • menu.background#ffffff
  • menu.foreground#1a0d1a
  • menu.selectionBackground#ce93d840
  • menu.selectionForeground#1a0d1a
  • menubar.selectionBackground#ce93d840
  • menubar.selectionForeground#1a0d1a
  • merge.currentHeaderBackground#ce93d840
  • merge.incomingHeaderBackground#4caf5040
  • notifications.background#ffffff
  • notifications.border#6a1b9a
  • notifications.foreground#1a0d1a
  • panel.background#ffffff
  • panel.border#6a1b9a
  • panelTitle.activeBorder#6a1b9a
  • panelTitle.activeForeground#6a1b9a
  • panelTitle.inactiveForeground#9575cd
  • peekViewEditor.background#ffffff
  • peekViewEditorGutter.background#ffffff
  • peekViewResult.background#ffffff
  • peekViewTitle.background#ffffff
  • pickerGroup.border#6a1b9a
  • progressBar.background#6a1b9a
  • scrollbar.shadow#00000010
  • scrollbarSlider.activeBackground#ce93d880
  • scrollbarSlider.background#ce93d840
  • scrollbarSlider.hoverBackground#ce93d860
  • settings.headerForeground#6a1b9a
  • settings.modifiedItemIndicator#9c27b0
  • sideBar.background#f0e6f0
  • sideBar.foreground#6a1b9a
  • sideBarTitle.foreground#6a1b9a
  • statusBar.background#9c27b0
  • statusBar.debuggingBackground#f44336
  • statusBar.foreground#ffffff
  • tab.activeBackground#ffffff
  • tab.activeBorder#6a1b9a
  • tab.activeForeground#1a0d1a
  • tab.inactiveBackground#f3e5f5
  • terminal.ansiBlack#263238
  • terminal.ansiBlue#2196f3
  • terminal.ansiBrightBlack#37474f
  • terminal.ansiBrightBlue#448aff
  • terminal.ansiBrightCyan#18ffff
  • terminal.ansiBrightGreen#69f0ae
  • terminal.ansiBrightMagenta#ff4081
  • terminal.ansiBrightRed#ff5252
  • terminal.ansiBrightWhite#000000
  • terminal.ansiBrightYellow#ffff00
  • terminal.ansiCyan#00bcd4
  • terminal.ansiGreen#4caf50
  • terminal.ansiMagenta#e91e63
  • terminal.ansiRed#f44336
  • terminal.ansiWhite#eceff1
  • terminal.ansiYellow#ffeb3b
  • terminal.background#faf5fa
  • terminal.foreground#1a0d1a
  • titleBar.activeBackground#f3e5f5
  • titleBar.activeForeground#6a1b9a
  • titleBar.inactiveBackground#faf5fa
  • titleBar.inactiveForeground#9575cd
  • tree.indentGuidesStroke#e1bee730
  • welcomePage.background#faf5fa
  • widget.shadow#00000010

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment, comment.line, comment.block#8e24aaitalic
comment.block.documentation, comment.line.documentation#9c27b0italic
keyword, keyword.control, keyword.operator.new, keyword.other.using, keyword.other.import#6a1b9abold
keyword.control.flow, keyword.control.conditional, keyword.control.loop, keyword.control.exception, keyword.control.trycatch#c2185bbold
storage.type, storage.modifier, storage.type.class, storage.type.function, storage.type.interface#1976d2bold
keyword.operator, keyword.operator.arithmetic, keyword.operator.comparison, keyword.operator.logical, keyword.operator.assignment#388e3c
keyword.operator.word, keyword.operator.typeof, keyword.operator.instanceof#c2185b
variable, variable.other, variable.language.this, variable.language.super#1a0d1a
variable.other.property, variable.other.object.property, variable.other.member#388e3c
variable.parameter, variable.parameter.function#f57c00italic
entity.name.function, entity.name.method, meta.function-call entity.name.function, support.function#6a1b9a
meta.function entity.name.function, meta.method entity.name.function#7b1fa2bold
support.function.builtin, support.function.magic#00796b
entity.name.class, entity.name.type.class, entity.other.inherited-class#f57c00bold
entity.name.interface, entity.name.type.interface#1976d2bold
entity.name.type, support.type, meta.type.annotation#388e3c
string, string.quoted, string.quoted.single, string.quoted.double#388e3c
string.template, string.quoted.template#66bb6a
string.interpolated, meta.template.expression#1976d2
string.regexp, string.regex#f57c00
constant.numeric, constant.numeric.integer, constant.numeric.float, constant.numeric.decimal, constant.numeric.hex, constant.numeric.binary, constant.numeric.octal#f57c00
constant.language.boolean, constant.language.true, constant.language.false#c2185bbold
constant.language.null, constant.language.undefined, constant.language.none#f44336bold
constant.other, variable.other.constant#f57c00italic
keyword.control.import, keyword.control.export, keyword.control.from, keyword.control.as#1976d2
keyword.control.flow.async, keyword.control.flow.await#c2185bitalic
meta.object-binding-pattern-variable entity.name.binding, meta.array-binding-pattern-variable entity.name.binding#388e3c
variable.language.special.self.python, variable.language.special.cls.python#1976d2italic
support.function.magic.python#f57c00
entity.name.function.decorator.python, punctuation.definition.decorator.python#f57c00
punctuation.definition.annotation, storage.type.annotation#f57c00
punctuation.definition.typeparameters, entity.name.type.parameter#1976d2
keyword.control.directive, meta.preprocessor#1976d2
keyword.operator.pointer, keyword.operator.address#c2185b
entity.name.type.lifetime.rust, punctuation.definition.lifetime.rust#f57c00
entity.name.function.macro.rust, punctuation.definition.macro.rust#1976d2
entity.name.package.go#388e3c
punctuation.definition.variable.php, variable.other.php#1a0d1a
entity.name.type.namespace.php#388e3c
entity.name.tag.html, punctuation.definition.tag#6a1b9a
entity.other.attribute-name.html#f57c00
string.quoted.double.html, string.quoted.single.html#388e3c
support.type.property-name.css#1976d2
support.constant.property-value.css, constant.numeric.css#388e3c
entity.name.tag.css, entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#f57c00
keyword.other.unit.css#f57c00
source.json meta.structure.dictionary.json support.type.property-name.json#6a1b9abold
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#8e24aabold
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#9575cdbold
punctuation.support.type.property-name.begin.json, punctuation.support.type.property-name.end.json, punctuation.separator.dictionary.key-value.json, punctuation.separator.array.json#9575cd
string.quoted.double.json, string.quoted.single.json#388e3c
constant.numeric.json#f57c00
constant.language.json#c2185bbold
constant.language.null.json#f44336bold
entity.name.tag.yaml#6a1b9a
string.unquoted.plain.out.yaml#388e3c
markup.heading, punctuation.definition.heading.markdown#6a1b9abold
markup.bold#f57c00bold
markup.italic#1976d2italic
markup.inline.raw.markdown, markup.fenced_code.block.markdown#00796b
markup.underline.link.markdown#388e3c
markup.quote.markdown#388e3citalic
keyword.other.sql#6a1b9abold
support.function.sql#6a1b9a
punctuation, punctuation.separator, punctuation.terminator#9575cd
punctuation.section.brackets, punctuation.section.parens, punctuation.section.braces#6a1b9a
source.graphql keyword.operation, source.graphql meta.type.interface#26c6dabold
source.graphql variable.graphql, source.graphql meta.selection-set#80cbc4
keyword.other.special-method.dockerfile, source.dockerfile keyword.operator.flag#f48fb1bold
entity.name.type.anchor.yaml, variable.other.alias.yaml#b39ddbitalic
variable.other.special.shell, variable.other.positional.shell, variable.other.normal.shell#9575cd
meta.decorator.ts entity.name.function, meta.decorator.tsx entity.name.function#dce775italic
comment.block.documentation storage.type.class.jsdoc, comment.block.documentation punctuation.definition.block.tag.jsdoc#aed581bold
markup.changed, meta.diff.header.git#fff176
meta.decorator.python, meta.decorator.identifier.python#ffb74ditalic
meta.attribute.rust, meta.attribute.identifier.rust#ff9800italic