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#f0f0f0
  • activityBar.foreground#d91656
  • activityBar.inactiveForeground#909090
  • activityBarBadge.background#d91656
  • activityBarBadge.foreground#ffffff
  • badge.background#d91656
  • badge.foreground#ffffff
  • breadcrumb.activeSelectionForeground#d91656
  • breadcrumb.focusForeground#d91656
  • breadcrumb.foreground#606060
  • button.background#d91656
  • button.foreground#ffffff
  • button.hoverBackground#ff4d67
  • dropdown.background#ffffff
  • dropdown.border#d0d0d0
  • dropdown.foreground#2a2a2a
  • editor.background#fafafa
  • editor.findMatchBackground#ff637e45
  • editor.findMatchHighlightBackground#ff637e25
  • editor.foreground#2a2a2a
  • editor.inactiveSelectionBackground#ff637e18
  • editor.lineHighlightBackground#ffffff
  • editor.selectionBackground#ff637e35
  • editor.wordHighlightBackground#ff637e25
  • editor.wordHighlightStrongBackground#ff637e35
  • editorBracketMatch.background#8fd46025
  • editorBracketMatch.border#2f9e44
  • editorCursor.foreground#d91656
  • editorHoverWidget.background#ffffff
  • editorHoverWidget.border#d0d0d0
  • editorIndentGuide.activeBackground1#8fd46040
  • editorIndentGuide.background1#e0e0e0
  • editorLineNumber.activeForeground#d91656
  • editorLineNumber.foreground#909090
  • editorSuggestWidget.background#ffffff
  • editorSuggestWidget.border#d0d0d0
  • editorSuggestWidget.highlightForeground#d91656
  • editorSuggestWidget.selectedBackground#ff637e20
  • editorWhitespace.foreground#e0e0e0
  • editorWidget.background#ffffff
  • editorWidget.border#d0d0d0
  • gitDecoration.conflictingResourceForeground#ff9900
  • gitDecoration.deletedResourceForeground#ff3333
  • gitDecoration.ignoredResourceForeground#909090
  • gitDecoration.modifiedResourceForeground#d91656
  • gitDecoration.untrackedResourceForeground#2f9e44
  • input.background#ffffff
  • input.border#d0d0d0
  • input.foreground#2a2a2a
  • input.placeholderForeground#909090
  • inputOption.activeBorder#d91656
  • inputValidation.errorBorder#ff3333
  • inputValidation.infoBorder#4d9fff
  • inputValidation.warningBorder#ff9900
  • list.activeSelectionBackground#ff637e20
  • list.activeSelectionForeground#d91656
  • list.focusBackground#ff637e20
  • list.highlightForeground#d91656
  • list.hoverBackground#ffffff
  • list.inactiveSelectionBackground#ff637e15
  • notificationCenter.border#d0d0d0
  • notificationCenterHeader.background#ffffff
  • notificationLink.foreground#d91656
  • notifications.background#ffffff
  • notifications.border#d0d0d0
  • panel.background#f0f0f0
  • panel.border#d0d0d0
  • panelTitle.activeBorder#d91656
  • panelTitle.activeForeground#d91656
  • panelTitle.inactiveForeground#606060
  • peekView.border#d91656
  • peekViewEditor.background#fafafa
  • peekViewResult.background#f0f0f0
  • peekViewTitle.background#f0f0f0
  • peekViewTitleLabel.foreground#d91656
  • progressBar.background#d91656
  • scrollbar.shadow#00000050
  • scrollbarSlider.activeBackground#60606080
  • scrollbarSlider.background#40404050
  • scrollbarSlider.hoverBackground#50505070
  • sideBar.background#f0f0f0
  • sideBar.foreground#606060
  • sideBarSectionHeader.background#fafafa
  • sideBarSectionHeader.foreground#d91656
  • sideBarTitle.foreground#d91656
  • statusBar.background#f0f0f0
  • statusBar.debuggingBackground#d91656
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#606060
  • statusBar.noFolderBackground#f0f0f0
  • statusBarItem.prominentBackground#d91656
  • statusBarItem.prominentHoverBackground#ff4d67
  • tab.activeBackground#fafafa
  • tab.activeBorder#d91656
  • tab.activeBorderTop#00000000
  • tab.activeForeground#d91656
  • tab.border#f0f0f0
  • tab.inactiveBackground#f0f0f0
  • tab.inactiveForeground#606060
  • tab.unfocusedActiveBorder#d91656
  • tab.unfocusedActiveBorderTop#00000000
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#1864ab
  • terminal.ansiBrightBlack#606060
  • terminal.ansiBrightBlue#4d9fff
  • terminal.ansiBrightCyan#15aabf
  • terminal.ansiBrightGreen#50c878
  • terminal.ansiBrightMagenta#da77f2
  • terminal.ansiBrightRed#ff637e
  • terminal.ansiBrightWhite#1a1a1a
  • terminal.ansiBrightYellow#ffaa00
  • terminal.ansiCyan#0c8599
  • terminal.ansiGreen#2f9e44
  • terminal.ansiMagenta#ae3ec9
  • terminal.ansiRed#d91656
  • terminal.ansiWhite#2a2a2a
  • terminal.ansiYellow#d97900
  • terminal.foreground#2a2a2a
  • titleBar.activeBackground#f0f0f0
  • titleBar.activeForeground#2a2a2a
  • titleBar.inactiveBackground#f0f0f0
  • titleBar.inactiveForeground#909090

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#909090italic
variable, string constant.other.placeholder#2a2a2a
meta.block variable.other#2a2a2a
variable.language#d91656italic
constant, constant.numeric, constant.language, constant.character, constant.other#c2255c
constant.other.color#2a2a2a
invalid, invalid.illegal#ff3333
keyword, keyword.control, keyword.control.conditional, keyword.control.flow, keyword.control.return, keyword.control.loop, storage.type, storage.modifier#d91656
keyword.operator, keyword.operator.assignment, keyword.operator.arithmetic, keyword.operator.comparison, keyword.operator.logical, punctuation.separator, punctuation.terminator#4a4a4a
keyword.other.substitution, meta.brace.round, meta.brace.square, punctuation.definition.parameters, punctuation.definition.array#4a4a4a
entity.name.function, meta.function-call, support.function, keyword.other.special-method#2f9e44
entity.name.class, entity.name.type.class, support.class, entity.other.inherited-class#d91656
support.type, entity.name.type, entity.name.type.interface, entity.name.type.alias#2b8a3e
string, string.quoted, string.template, punctuation.definition.string#d97900
string.other.link#4d9fff
string.regexp#c2255c
constant.character.escape#d91656
entity.name.tag, punctuation.definition.tag#d91656
entity.other.attribute-name#2b8a3eitalic
meta.decorator, tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#d91656italic
markup.underline.link, meta.linkunderline
markup.inserted#2f9e44
markup.deleted#ff3333
markup.changed#ff9900
source.css support.type.property-name, source.sass support.type.property-name, source.scss support.type.property-name, source.less support.type.property-name, source.stylus support.type.property-name, source.postcss support.type.property-name#2f9e44
entity.name.tag.css, entity.name.tag.scss, entity.name.tag.less#d91656
entity.other.attribute-name.class.css, entity.other.attribute-name.class.scss, entity.other.attribute-name.class.less#2b8a3e
entity.other.attribute-name.id.css, entity.other.attribute-name.id.scss, entity.other.attribute-name.id.less#d97900
entity.other.attribute-name.attribute.css, meta.attribute-selector.css#d97900
entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css, entity.other.attribute-name.pseudo-class.scss, entity.other.attribute-name.pseudo-element.scss#ae3ec9
support.constant.property-value.css, support.constant.property-value.scss, support.constant.property-value.less#c2255c
keyword.other.unit.css, keyword.other.unit.scss, keyword.other.unit.less, keyword.other.unit.percentage.css, keyword.other.unit.px.css, keyword.other.unit.em.css, keyword.other.unit.rem.css#c2255c
support.function.css, support.function.scss, support.function.less, support.function.calc.css, support.function.var.css#2f9e44
variable.css, variable.scss, variable.argument.css, variable.parameter.css#4d9fff
keyword.control.at-rule.css, keyword.control.at-rule.scss, keyword.control.at-rule.less, keyword.control.at-rule.media.css, keyword.control.at-rule.keyframes.css, keyword.control.at-rule.import.css, keyword.control.at-rule.fontface.css, keyword.control.at-rule.font-face.css, keyword.control.at-rule.supports.css, keyword.control.at-rule.container.css, keyword.control.at-rule.charset.css, keyword.control.at-rule.namespace.css, keyword.control.at-rule.page.css, keyword.control.at-rule.layer.css#d91656italic
keyword.other.important.css, keyword.other.important.scss#d91656bold
keyword.operator.combinator.css#4a4a4a
support.class.component.tsx, support.class.component.jsx, entity.name.tag.tsx, entity.name.tag.jsx#d91656bold
entity.name.type.ts, entity.name.type.tsx, entity.name.type.interface.ts, entity.name.type.interface.tsx, support.type.primitive.ts, support.type.primitive.tsx, support.type.builtin.ts, support.type.builtin.tsx#2b8a3e
entity.name.type.parameter.ts, entity.name.type.parameter.tsx#2f9e44
storage.type.ts, storage.type.tsx, keyword.control.as.ts, keyword.control.as.tsx#d91656
keyword.control.import.ts, keyword.control.import.tsx, keyword.control.export.ts, keyword.control.export.tsx, keyword.control.from.ts, keyword.control.from.tsx#d91656italic
entity.other.attribute-name.tsx, entity.other.attribute-name.jsx#2b8a3eitalic
punctuation.section.embedded.begin.tsx, punctuation.section.embedded.end.tsx, punctuation.section.embedded.begin.jsx, punctuation.section.embedded.end.jsx#2f9e44
punctuation.definition.tag.end.tsx, punctuation.definition.tag.end.jsx, punctuation.definition.tag.begin.tsx, punctuation.definition.tag.begin.jsx#4a4a4a
string.template.ts, string.template.tsx, string.template.js, string.template.jsx#d97900
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end#2f9e44
storage.type.function.arrow.ts, storage.type.function.arrow.tsx, storage.type.function.arrow.js, storage.type.function.arrow.jsx#d91656
meta.object-literal.key.ts, meta.object-literal.key.tsx, meta.object-literal.key.js, meta.object-literal.key.jsx#2a2a2a
entity.name.method.js, entity.name.method.ts, meta.class-method.js entity.name.function.js, variable.function.constructor#2f9e44italic
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#d91656
source.js constant.other.object.key.js string.unquoted.label.js#d91656italic
entity.name.function.python, meta.function.python entity.name.function, support.function.python#2f9e44
meta.function-call.python, meta.function-call.generic.python#2f9e44
support.function.magic.python, entity.name.function.magic.python#ae3ec9italic
support.function.builtin.python, meta.function-call.python support.function.builtin#2f9e44
entity.name.type.class.python, meta.class.python entity.name.type.class#d91656bold
entity.other.inherited-class.python#2b8a3eitalic
keyword.control.python, keyword.control.flow.python, keyword.control.conditional.python, keyword.control.loop.python, keyword.control.exception.python#d91656bold
keyword.control.import.python, keyword.control.import.from.python#ae3ec9italic
storage.type.function.python, storage.modifier.declaration.python, storage.type.class.python#d91656bold
keyword.operator.python, keyword.operator.logical.python, keyword.operator.comparison.python, keyword.operator.arithmetic.python, keyword.operator.assignment.python#4a4a4a
keyword.operator.wordlike.python#d91656italic
entity.name.function.decorator.python, meta.function.decorator.python, punctuation.definition.decorator.python#ae3ec9italic
string.quoted.single.python, string.quoted.double.python#d97900
string.quoted.docstring.multi.python, string.quoted.docstring.raw.python#909090italic
meta.fstring.python, string.interpolated.python, string.quoted.single.python.fstring, string.quoted.double.python.fstring#d97900
meta.embedded.line.python, meta.fstring.python source.python.embedded, meta.interpolation.python#2a2a2a
punctuation.definition.interpolation.begin.python, punctuation.definition.interpolation.end.python#d91656
string.quoted.raw.python, storage.type.string.python#d97900
meta.function.parameters.python support.type.python, meta.function.return-type.python support.type.python, meta.type.annotation.python#2b8a3e
support.type.python, support.type.metaclass.python#2b8a3e
keyword.operator.type.python, punctuation.separator.annotation.python, punctuation.separator.parameters.python#4a4a4a
variable.parameter.function.python, variable.parameter.function.language.python, meta.function.parameters.python variable.parameter#c2255citalic
variable.parameter.function.language.special.self.python, variable.parameter.function.language.special.cls.python, variable.language.special.self.python, variable.language.special.cls.python#d91656italic
variable.other.python, meta.indexed-name.python#2a2a2a
constant.language.boolean.python#c2255cbold
constant.language.python#c2255citalic
constant.numeric.python, constant.numeric.integer.python, constant.numeric.float.python, constant.numeric.complex.python, constant.numeric.bin.python, constant.numeric.oct.python, constant.numeric.hex.python#c2255c
constant.character.escape.python, constant.character.escape.newline.python#ae3ec9
meta.import.python entity.name.namespace, meta.import-from.python entity.name.namespace, meta.qualified-name.python#2f9e44
meta.import.python variable.other, meta.import-from.python variable.other, meta.import-name.python, meta.generic-name.python#2b8a3e
meta.import.python meta.generic-name.python, meta.import-from.python meta.generic-name.python, variable.other.readwrite.alias.python#2a2a2aitalic
punctuation.definition.arguments.begin.python, punctuation.definition.arguments.end.python, punctuation.definition.list.begin.python, punctuation.definition.list.end.python, punctuation.definition.dict.begin.python, punctuation.definition.dict.end.python#4a4a4a
punctuation.separator.colon.python, punctuation.separator.element.python, punctuation.separator.arguments.python#4a4a4a
keyword.declaration.function.lambda.python, storage.type.function.lambda.python#d91656italic
keyword.control.flow.python.comprehension#d91656italic
storage.type.format.python, constant.character.format.placeholder.other.python#ae3ec9
text.html.markdown, punctuation.definition.list_item.markdown#2a2a2a
markup.heading, entity.name.section.markdown, markup.heading.markdown punctuation.definition.heading.markdown#d91656
markup.bold, markup.bold string#d97900bold
markup.italic#ae3ec9italic
markup.bold markup.italic, markup.italic markup.bold, markup.quote markup.bold, markup.bold markup.italic string, markup.italic markup.bold string, markup.quote markup.bold string#d97900bold italic
markup.underline#d97900underline
markup.strikethrough#606060strikethrough
markup.quote punctuation.definition.blockquote.markdown#909090
markup.quoteitalic
string.other.link.title.markdown#4d9fff
string.other.link.description.title.markdown#4d9fff
constant.other.reference.link.markdown#d97900
text.html.markdown markup.inline.raw.markdown#2f9e44
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown#909090
markup.fenced_code.block.markdown, punctuation.definition.markdown#d97900
fenced_code.block.language.markdown#2f9e44
meta.separator#909090bold
source.json meta.structure.dictionary.json support.type.property-name.json#d91656
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#c2255c
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#606060
source.json meta.structure.dictionary.json meta.structure.dictionary.value.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#d91656
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.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#c2255c
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.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#606060