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