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
Fedaykin by FedaykinDev - VS Code Theme