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.activeBorder#1a1a1a
  • activityBar.background#fafafa
  • activityBar.foreground#909090
  • activityBar.inactiveForeground#909090
  • activityBarBadge.background#0550ae
  • activityBarBadge.foreground#fafafa
  • badge.background#0550ae
  • badge.foreground#fafafa
  • breadcrumb.activeSelectionForeground#1a1a1a
  • breadcrumb.focusForeground#1a1a1a
  • breadcrumb.foreground#404040
  • breadcrumbPicker.background#eeeeee
  • button.background#0550ae
  • button.foreground#fafafa
  • button.hoverBackground#033d8b
  • descriptionForeground#404040
  • diffEditor.insertedLineBackground#1a7f3720
  • diffEditor.insertedTextBackground#1a7f3720
  • diffEditor.removedLineBackground#a40e2620
  • diffEditor.removedTextBackground#a40e2620
  • dropdown.background#eeeeee
  • dropdown.border#c0c0c0
  • dropdown.foreground#1a1a1a
  • editor.background#fafafa
  • editor.findMatchBackground#1a7f3730
  • editor.findMatchHighlightBackground#9a670050
  • editor.findRangeHighlightBackground#cf222e30
  • editor.foreground#1a1a1a
  • editor.lineHighlightBackground#eeeeee
  • editor.lineHighlightBorder#00000001
  • editor.selectionBackground#dedede
  • editor.selectionHighlightBackground#dedede80
  • editor.wordHighlightBackground#0550ae60
  • editor.wordHighlightStrongBackground#0550ae60
  • editorBracketHighlight.foreground1#116329
  • editorBracketHighlight.foreground2#6639ba
  • editorBracketHighlight.foreground3#cf222e
  • editorBracketHighlight.foreground4#0550ae
  • editorBracketHighlight.foreground5#0969da
  • editorBracketHighlight.foreground6#8250df
  • editorBracketHighlight.unexpectedBracket.foreground#a40e26
  • editorBracketMatch.background#d4d4d440
  • editorBracketMatch.border#60606080
  • editorCursor.foreground#1a1a1a
  • editorError.foreground#a40e26
  • editorGroupHeader.tabsBackground#fafafa
  • editorGutter.addedBackground#1a7f37
  • editorGutter.deletedBackground#a40e26
  • editorGutter.modifiedBackground#9a6700
  • editorHoverWidget.background#eeeeee
  • editorHoverWidget.border#c0c0c0
  • editorHoverWidget.foreground#1a1a1a
  • editorInfo.foreground#0969da
  • editorLineNumber.activeForeground#1a1a1a
  • editorLineNumber.foreground#909090
  • editorOverviewRuler.errorForeground#a40e26
  • editorOverviewRuler.infoForeground#0969da
  • editorOverviewRuler.warningForeground#9a6700
  • editorRuler.foreground#c0c0c0
  • editorSuggestWidget.background#eeeeee
  • editorSuggestWidget.border#c0c0c0
  • editorSuggestWidget.selectedBackground#d4d4d4
  • editorWarning.foreground#9a6700
  • editorWhitespace.foreground#c0c0c0
  • editorWidget.background#eeeeee
  • editorWidget.border#c0c0c0
  • focusBorder#0550ae60
  • gitDecoration.addedResourceForeground#1a7f37
  • gitDecoration.conflictingResourceForeground#0550ae
  • gitDecoration.deletedResourceForeground#a40e26
  • gitDecoration.ignoredResourceForeground#909090
  • gitDecoration.modifiedResourceForeground#9a6700
  • gitDecoration.untrackedResourceForeground#656d76
  • input.background#eeeeee
  • input.border#c0c0c0
  • input.foreground#1a1a1a
  • input.placeholderForeground#606060
  • inputOption.activeBorder#0550ae
  • inputOption.activeForeground#1a1a1a
  • list.activeSelectionBackground#eeeeee
  • list.activeSelectionForeground#1a1a1a
  • list.errorForeground#a40e26
  • list.highlightForeground#0550ae
  • list.hoverBackground#e8e8e8
  • list.inactiveSelectionBackground#e8e8e8
  • list.warningForeground#9a6700
  • notificationsErrorIcon.foreground#a40e26
  • notificationsInfoIcon.foreground#0969da
  • notificationsWarningIcon.foreground#9a6700
  • panel.background#fafafa
  • panel.border#00000000
  • panelTitle.activeForeground#1a1a1a
  • panelTitle.inactiveForeground#404040
  • peekView.border#0550ae
  • peekViewEditor.background#f4f4f4
  • peekViewResult.background#fafafa
  • peekViewTitle.background#f4f4f4
  • peekViewTitleDescription.foreground#404040
  • pickerGroup.foreground#1a1a1a
  • problemsErrorIcon.foreground#a40e26
  • problemsInfoIcon.foreground#0969da
  • problemsWarningIcon.foreground#9a6700
  • quickInput.background#eeeeee
  • quickInput.foreground#1a1a1a
  • quickInputList.focusBackground#d4d4d4
  • quickInputList.focusForeground#1a1a1a
  • scrollbar.shadow#0550ae30
  • scrollbarSlider.activeBackground#e8e8e830
  • scrollbarSlider.background#d4d4d440
  • scrollbarSlider.hoverBackground#c0c0c060
  • selection.background#dedede
  • settings.headerForeground#1a1a1a
  • settings.modifiedItemIndicator#0550ae
  • sideBar.background#fafafa
  • sideBar.border#c0c0c050
  • sideBar.foreground#1a1a1a
  • sideBarSectionHeader.background#fafafa
  • sideBarSectionHeader.foreground#1a1a1a
  • sideBarTitle.foreground#1a1a1a
  • statusBar.background#f4f4f4
  • statusBar.debuggingBackground#eeeeee
  • statusBar.debuggingForeground#1a1a1a
  • statusBar.foreground#404040
  • statusBar.noFolderBackground#f4f4f4
  • statusBarItem.remoteBackground#0550ae
  • statusBarItem.remoteForeground#fafafa
  • tab.activeBackground#eeeeee
  • tab.activeBorder#1a1a1a20
  • tab.activeForeground#1a1a1a
  • tab.border#00000000
  • tab.inactiveBackground#fafafa
  • tab.inactiveForeground#404040
  • terminal.ansiBlack#fafafa
  • terminal.ansiBlue#cf222e
  • terminal.ansiBrightBlack#909090
  • terminal.ansiBrightBlue#0969da
  • terminal.ansiBrightCyan#0598d3
  • terminal.ansiBrightGreen#1a7f37
  • terminal.ansiBrightMagenta#8250df
  • terminal.ansiBrightRed#a40e26
  • terminal.ansiBrightWhite#0a0a0a
  • terminal.ansiBrightYellow#9a6700
  • terminal.ansiCyan#116329
  • terminal.ansiGreen#0969da
  • terminal.ansiMagenta#6639ba
  • terminal.ansiRed#8250df
  • terminal.ansiWhite#1a1a1a
  • terminal.ansiYellow#0550ae
  • terminal.background#fafafa
  • terminal.foreground#1a1a1a
  • terminalCursor.foreground#1a1a1a
  • textLink.activeForeground#0550ae
  • textLink.foreground#0550ae
  • titleBar.activeBackground#fafafa
  • titleBar.activeForeground#1a1a1a
  • titleBar.border#00000000
  • titleBar.inactiveBackground#fafafa
  • titleBar.inactiveForeground#404040

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#606060italic
string, string.quoted, string.template#0969da—
constant.numeric#8250df—
constant.language.boolean#8250df—
constant.language.null, constant.language.undefined#8250df—
keyword, keyword.control#cf222e—
storage, storage.type, storage.modifier#cf222e—
keyword.operator#cf222e—
entity.name.function, support.function#0550ae—
entity.name.method#0550ae—
entity.name.type, entity.name.class, support.type, support.class#6639ba—
variable, entity.name.variable, variable.other#0a0a0a—
variable.parameter#8250df—
variable.other.property, support.type.property-name#116329—
constant, variable.other.constant#8250df—
entity.name.tag#8250df—
entity.other.attribute-name#116329—
punctuation#1a1a1a—
variable.language.special.self.python, variable.parameter.function.language.special.self.python#8250dfnormal
support.function.magic.python#0550aenormal
invalid, invalid.illegal#a40e26—
constant.other.color#1a1a1a—
keyword.control, constant.other.color, punctuation.definition.tag, punctuation.separator.inheritance.php, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, punctuation.section.embedded, keyword.other.template, keyword.other.substitution#cf222e—
entity.name.function, variable.function, support.function, keyword.other.special-method#0550ae—
meta.block variable.other#1a1a1a—
support.other.variable, string.other.link#1a1a1a—
constant.numeric, support.constant, constant.character, constant.escape, keyword.other.unit, keyword.other, constant.language.boolean#8250df—
string, constant.other.symbol, constant.other.key, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js#0969da—
entity.name, support.type, support.class, support.other.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types#6639ba—
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, support.type.vendored.property-name.css, source.css.scss entity.name.tag, variable.parameter.keyframe-list.css, meta.property-name.css, variable.parameter.url.scss, meta.property-value.scss, meta.property-value.css#1a1a1a—
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#a40e26—
variable.language#404040—
entity.name.method.js#1a1a1a—
meta.class-method.js entity.name.function.js, variable.function.constructor#1a1a1a—
entity.other.attribute-name, meta.property-list.scss, meta.attribute-selector.scss, meta.property-value.css, entity.other.keyframe-offset.css, meta.selector.css, entity.name.tag.reference.scss, entity.name.tag.nesting.css, punctuation.separator.key-value.css#116329—
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name#0550ae—
entity.other.attribute-name.class, entity.other.attribute-name.id, meta.attribute-selector.scss, variable.parameter.misc.css#0550ae—
source.sass keyword.control, meta.attribute-selector.scss#1a1a1a—
markup.inserted#1a7f37—
markup.deleted#a40e26—
markup.changed#9a6700—
string.regexp#116329—
constant.character.escape#404040—
*url*, *link*, *uri*#0550aeunderline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#0550ae—
source.js constant.other.object.key.js string.unquoted.label.js#a40e26normal
support.type.property-name.json#0550ae—
text.html.markdown, punctuation.definition.list_item.markdown#1a1a1a—
text.html.markdown markup.inline.raw.markdown#404040—
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown#1a1a1a—
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown, markup.heading, markup.inserted.git_gutter#0550ae—
markup.italic#1a1a1anormal
markup.bold, markup.bold string#1a1a1abold
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#1a1a1abold
markup.underline#0550aeunderline
markup.quote punctuation.definition.blockquote.markdown#1a1a1a—
markup.quote#1a1a1a—
string.other.link.title.markdown#1a1a1a—
string.other.link.description.title.markdown#404040—
constant.other.reference.link.markdown#0550ae—
markup.raw.block#404040—
markup.raw.block.fenced.markdown#0969da30—
punctuation.definition.fenced.markdown#0969da30—
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end#1a1a1a—
variable.language.fenced.markdown#1a1a1a—
meta.separator#606060bold
markup.table#1a1a1a—
meta.brace, punctuation.definition.block, punctuation.definition.parameters, punctuation.section.function, meta.brackets, punctuation.definition.brackets, punctuation.definition.dictionary, punctuation.definition.array, punctuation.section, punctuation.section.block, punctuation.section.braces, punctuation.section.group, punctuation.section.parameters#909090—
meta.function string.quoted.double.ts, meta.function string.quoted.single.ts, meta.function string.quoted.double.js, meta.function string.quoted.single.js, meta.function string.quoted.double.tsx, meta.function string.quoted.single.tsx#8250df—
support.function.builtin.python, support.function.magic.python, support.type.builtin.python#0550aebold
variable.parameter.function.python#8250dfnormal
keyword.control.flow.python, keyword.control.import.python, keyword.control.statement.python, keyword.operator.member.python, keyword.operator.wordlike.python#cf222e—
keyword.operator.logical.python, keyword.operator.arithmetic.python, keyword.operator.assignment.python, keyword.operator.comparison.python, keyword.operator.bitwise.python#8250df—
storage.type.python, storage.type.annotation.python, storage.type.function.python, storage.type.class.python, storage.type.union.python, storage.type.intersection.python, storage.type.optional.python, storage.type.any.python, storage.type.unknown.python, storage.type.none.python#6639babold
variable.parameter.function.language.special.self.python#8250df—
entity.name.type.class.python, entity.name.type.class.python punctuation.definition.class.python#6639ba—
entity.name.function.python, meta.function.python entity.name.function.python#0550ae—
variable.other.constant.python, variable.other.enummember.python, variable.other.property.python, variable.other.object.python, variable.other.readwrite.python#0550ae—
constant.character.format.placeholder.other.python, constant.character.format.placeholder.other.python punctuation.definition.format.placeholder.python#8250df—
string.quoted.single.python, string.quoted.double.python, string.quoted.triple.single.python, string.quoted.triple.double.python, string.regexp.python, string.quoted.single.python punctuation.definition.string.begin.python, string.quoted.single.python punctuation.definition.string.end.python, string.quoted.double.python punctuation.definition.string.begin.python, string.quoted.double.python punctuation.definition.string.end.python, string.quoted.triple.single.python punctuation.definition.string.begin.python, string.quoted.triple.single.python punctuation.definition.string.end.python, string.quoted.triple.double.python punctuation.definition.string.begin.python, string.quoted.triple.double.python punctuation.definition.string.end.python#0969da—
punctuation.definition.string.begin.python, punctuation.definition.string.end.python, string.quoted.docstring.multi.python#0969da—
constant.language.python#8250dfnormal
meta.object-literal.key string.quoted.single.ts, meta.object-literal.key string.quoted.double.ts, meta.object-literal.key string.quoted.single.js, meta.object-literal.key string.quoted.double.js, meta.object-literal.key string.quoted.single.tsx, meta.object-literal.key string.quoted.double.tsx, meta.object.member string.quoted.single.ts, meta.object.member string.quoted.double.ts, meta.object.member string.quoted.single.js, meta.object.member string.quoted.double.js, meta.object.member string.quoted.single.tsx, meta.object.member string.quoted.double.tsx, meta.array.literal string.quoted.single.ts, meta.array.literal string.quoted.double.ts, meta.array.literal string.quoted.single.js, meta.array.literal string.quoted.double.js, meta.array.literal string.quoted.single.tsx, meta.array.literal string.quoted.double.tsx, meta.enum.declaration string.quoted.single.ts, meta.enum.declaration string.quoted.double.ts, meta.enum.declaration string.quoted.single.js, meta.enum.declaration string.quoted.double.js, meta.enum.declaration string.quoted.single.tsx, meta.enum.declaration string.quoted.double.tsx#1a7f37—
meta.tag string.quoted.single.ts, meta.tag string.quoted.double.ts, meta.tag string.quoted.single.js, meta.tag string.quoted.double.js, meta.tag string.quoted.single.tsx, meta.tag string.quoted.double.tsx, meta.attribute string.quoted.single.ts, meta.attribute string.quoted.double.ts, meta.attribute string.quoted.single.js, meta.attribute string.quoted.double.js, meta.attribute string.quoted.single.tsx, meta.attribute string.quoted.double.tsx#1a1a1a—
meta.import string.quoted.single.ts, meta.import string.quoted.double.ts, meta.import string.quoted.single.js, meta.import string.quoted.double.js, meta.import string.quoted.single.tsx, meta.import string.quoted.double.tsx#1a1a1a—
string.template.js, string.template.ts#0969da—
string.quoted.single.ansible, string.quoted.double.ansible, string.quoted.single.yaml.ansible, string.quoted.double.yaml.ansible, punctuation.definition.string.begin.ansible, punctuation.definition.string.end.ansible, punctuation.definition.string.begin.yaml.ansible, punctuation.definition.string.end.yaml.ansible#0969da—
string.quoted.double.json, punctuation.definition.string.begin.json, punctuation.definition.string.end.json, string.quoted.double.json punctuation.definition.string.begin, string.quoted.double.json punctuation.definition.string.end, punctuation.support.type.property-name.begin.json.lines, punctuation.support.type.property-name.end.json.lines#0969da—