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#e4edf7
  • activityBar.background#11161c
  • activityBar.foreground#5a6b7e
  • activityBar.inactiveForeground#5a6b7e
  • activityBarBadge.background#3b82f6
  • activityBarBadge.foreground#11161c
  • badge.background#3b82f6
  • badge.foreground#11161c
  • breadcrumb.activeSelectionForeground#e4edf7
  • breadcrumb.focusForeground#e4edf7
  • breadcrumb.foreground#c5d3e0
  • breadcrumbPicker.background#202931
  • button.background#3b82f6
  • button.foreground#11161c
  • button.hoverBackground#2563eb
  • descriptionForeground#c5d3e0
  • diffEditor.insertedLineBackground#10b98120
  • diffEditor.insertedTextBackground#10b98120
  • diffEditor.removedLineBackground#ef444420
  • diffEditor.removedTextBackground#ef444420
  • dropdown.background#202931
  • dropdown.border#3f4d5c
  • dropdown.foreground#e4edf7
  • editor.background#11161c
  • editor.findMatchBackground#10b98130
  • editor.findMatchHighlightBackground#f59e0b50
  • editor.findRangeHighlightBackground#22d3ee30
  • editor.foreground#e4edf7
  • editor.lineHighlightBackground#202931
  • editor.lineHighlightBorder#00000001
  • editor.selectionBackground#303d49
  • editor.selectionHighlightBackground#2a364180
  • editor.wordHighlightBackground#3b82f660
  • editor.wordHighlightStrongBackground#3b82f660
  • editorBracketHighlight.foreground1#10b981
  • editorBracketHighlight.foreground2#94a3b8
  • editorBracketHighlight.foreground3#22d3ee
  • editorBracketHighlight.foreground4#3b82f6
  • editorBracketHighlight.foreground5#4a9fa5
  • editorBracketHighlight.foreground6#60a5fa
  • editorBracketHighlight.unexpectedBracket.foreground#ef4444
  • editorBracketMatch.background#33404d40
  • editorBracketMatch.border#8b9cae80
  • editorCursor.foreground#e4edf7
  • editorError.foreground#ef4444
  • editorGroupHeader.tabsBackground#11161c
  • editorGutter.addedBackground#10b981
  • editorGutter.deletedBackground#ef4444
  • editorGutter.modifiedBackground#f59e0b
  • editorHoverWidget.background#202931
  • editorHoverWidget.border#3f4d5c
  • editorHoverWidget.foreground#e4edf7
  • editorInfo.foreground#3b82f6
  • editorLineNumber.activeForeground#e4edf7
  • editorLineNumber.foreground#5a6b7e
  • editorOverviewRuler.errorForeground#ef4444
  • editorOverviewRuler.infoForeground#3b82f6
  • editorOverviewRuler.warningForeground#f59e0b
  • editorRuler.foreground#3f4d5c
  • editorSuggestWidget.background#202931
  • editorSuggestWidget.border#3f4d5c
  • editorSuggestWidget.selectedBackground#394755
  • editorWarning.foreground#f59e0b
  • editorWhitespace.foreground#3f4d5c
  • editorWidget.background#202931
  • editorWidget.border#3f4d5c
  • focusBorder#3b82f660
  • gitDecoration.addedResourceForeground#10b981
  • gitDecoration.conflictingResourceForeground#3b82f6
  • gitDecoration.deletedResourceForeground#ef4444
  • gitDecoration.ignoredResourceForeground#6a7b8e
  • gitDecoration.modifiedResourceForeground#f59e0b
  • gitDecoration.untrackedResourceForeground#8b9cae
  • input.background#202931
  • input.border#3f4d5c
  • input.foreground#e4edf7
  • input.placeholderForeground#8b9cae
  • inputOption.activeBorder#3b82f6
  • inputOption.activeForeground#e4edf7
  • list.activeSelectionBackground#202931
  • list.activeSelectionForeground#e4edf7
  • list.errorForeground#ef4444
  • list.highlightForeground#3b82f6
  • list.hoverBackground#28333d
  • list.inactiveSelectionBackground#28333d
  • list.warningForeground#f59e0b
  • notificationsErrorIcon.foreground#ef4444
  • notificationsInfoIcon.foreground#3b82f6
  • notificationsWarningIcon.foreground#f59e0b
  • panel.background#11161c
  • panel.border#00000000
  • panelTitle.activeForeground#e4edf7
  • panelTitle.inactiveForeground#c5d3e0
  • peekView.border#3b82f6
  • peekViewEditor.background#191f27
  • peekViewResult.background#11161c
  • peekViewTitle.background#191f27
  • peekViewTitleDescription.foreground#c5d3e0
  • pickerGroup.foreground#e4edf7
  • problemsErrorIcon.foreground#ef4444
  • problemsInfoIcon.foreground#3b82f6
  • problemsWarningIcon.foreground#f59e0b
  • quickInput.background#202931
  • quickInput.foreground#e4edf7
  • quickInputList.focusBackground#394755
  • quickInputList.focusForeground#e4edf7
  • scrollbar.shadow#3b82f630
  • scrollbarSlider.activeBackground#222c3530
  • scrollbarSlider.background#33404d40
  • scrollbarSlider.hoverBackground#3f4d5c60
  • selection.background#303d49
  • settings.headerForeground#e4edf7
  • settings.modifiedItemIndicator#3b82f6
  • sideBar.background#11161c
  • sideBar.border#3f4d5c50
  • sideBar.foreground#e4edf7
  • sideBarSectionHeader.background#11161c
  • sideBarSectionHeader.foreground#e4edf7
  • sideBarTitle.foreground#e4edf7
  • statusBar.background#191f27
  • statusBar.debuggingBackground#202931
  • statusBar.debuggingForeground#e4edf7
  • statusBar.foreground#c5d3e0
  • statusBar.noFolderBackground#191f27
  • statusBarItem.remoteBackground#3b82f6
  • statusBarItem.remoteForeground#11161c
  • tab.activeBackground#202931
  • tab.activeBorder#e4edf740
  • tab.activeForeground#e4edf7
  • tab.border#00000000
  • tab.inactiveBackground#11161c
  • tab.inactiveForeground#c5d3e0
  • terminal.ansiBlack#11161c
  • terminal.ansiBlue#22d3ee
  • terminal.ansiBrightBlack#5a6b7e
  • terminal.ansiBrightBlue#3b82f6
  • terminal.ansiBrightCyan#06b6d4
  • terminal.ansiBrightGreen#10b981
  • terminal.ansiBrightMagenta#a78bfa
  • terminal.ansiBrightRed#ef4444
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#f59e0b
  • terminal.ansiCyan#10b981
  • terminal.ansiGreen#4a9fa5
  • terminal.ansiMagenta#94a3b8
  • terminal.ansiRed#60a5fa
  • terminal.ansiWhite#e4edf7
  • terminal.ansiYellow#3b82f6
  • terminal.background#11161c
  • terminal.foreground#e4edf7
  • terminalCursor.foreground#e4edf7
  • textLink.activeForeground#3b82f6
  • textLink.foreground#3b82f6
  • titleBar.activeBackground#11161c
  • titleBar.activeForeground#e4edf7
  • titleBar.border#00000000
  • titleBar.inactiveBackground#11161c
  • titleBar.inactiveForeground#c5d3e0

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#8b9caeitalic
string, string.quoted, string.template#4a9fa5
constant.numeric#60a5fa
constant.language.boolean#60a5fa
constant.language.null, constant.language.undefined#60a5fa
keyword, keyword.control#22d3ee
storage, storage.type, storage.modifier#22d3ee
keyword.operator#22d3ee
entity.name.function, support.function#3b82f6
entity.name.method#3b82f6
entity.name.type, entity.name.class, support.type, support.class#94a3b8
variable, entity.name.variable, variable.other#f0f6fc
variable.parameter#60a5fa
variable.other.property, support.type.property-name#10b981
constant, variable.other.constant#60a5fa
entity.name.tag#60a5fa
entity.other.attribute-name#10b981
punctuation#e4edf7
variable.language.special.self.python, variable.parameter.function.language.special.self.python#60a5fanormal
support.function.magic.python#3b82f6normal
invalid, invalid.illegal#ef4444
constant.other.color#e4edf7
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#22d3ee
entity.name.function, variable.function, support.function, keyword.other.special-method#3b82f6
meta.block variable.other#e4edf7
support.other.variable, string.other.link#e4edf7
constant.numeric, support.constant, constant.character, constant.escape, keyword.other.unit, keyword.other, constant.language.boolean#60a5fa
string, constant.other.symbol, constant.other.key, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js#4a9fa5
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#94a3b8
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#e4edf7
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#ef4444
variable.language#c5d3e0
entity.name.method.js#e4edf7
meta.class-method.js entity.name.function.js, variable.function.constructor#e4edf7
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#10b981
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name#3b82f6
entity.other.attribute-name.class, entity.other.attribute-name.id, meta.attribute-selector.scss, variable.parameter.misc.css#3b82f6
source.sass keyword.control, meta.attribute-selector.scss#e4edf7
markup.inserted#10b981
markup.deleted#ef4444
markup.changed#f59e0b
string.regexp#10b981
constant.character.escape#c5d3e0
*url*, *link*, *uri*#3b82f6underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#3b82f6
source.js constant.other.object.key.js string.unquoted.label.js#ef4444normal
support.type.property-name.json#3b82f6
text.html.markdown, punctuation.definition.list_item.markdown#e4edf7
text.html.markdown markup.inline.raw.markdown#c5d3e0
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown#e4edf7
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown, markup.heading, markup.inserted.git_gutter#3b82f6
markup.italic#e4edf7normal
markup.bold, markup.bold string#e4edf7bold
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#e4edf7bold
markup.underline#3b82f6underline
markup.quote punctuation.definition.blockquote.markdown#e4edf7
markup.quote#e4edf7
string.other.link.title.markdown#e4edf7
string.other.link.description.title.markdown#c5d3e0
constant.other.reference.link.markdown#3b82f6
markup.raw.block#c5d3e0
markup.raw.block.fenced.markdown#4a9fa530
punctuation.definition.fenced.markdown#4a9fa530
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end#e4edf7
variable.language.fenced.markdown#e4edf7
meta.separator#8b9caebold
markup.table#e4edf7
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#5a6b7e
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#60a5fa
support.function.builtin.python, support.function.magic.python, support.type.builtin.python#3b82f6bold
variable.parameter.function.python#60a5fanormal
keyword.control.flow.python, keyword.control.import.python, keyword.control.statement.python, keyword.operator.member.python, keyword.operator.wordlike.python#22d3ee
keyword.operator.logical.python, keyword.operator.arithmetic.python, keyword.operator.assignment.python, keyword.operator.comparison.python, keyword.operator.bitwise.python#60a5fa
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#94a3b8bold
variable.parameter.function.language.special.self.python#60a5fa
entity.name.type.class.python, entity.name.type.class.python punctuation.definition.class.python#94a3b8
entity.name.function.python, meta.function.python entity.name.function.python#3b82f6
variable.other.constant.python, variable.other.enummember.python, variable.other.property.python, variable.other.object.python, variable.other.readwrite.python#3b82f6
constant.character.format.placeholder.other.python, constant.character.format.placeholder.other.python punctuation.definition.format.placeholder.python#60a5fa
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#4a9fa5
punctuation.definition.string.begin.python, punctuation.definition.string.end.python, string.quoted.docstring.multi.python#4a9fa5
constant.language.python#60a5fanormal
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#10b981
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#e4edf7
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#e4edf7
string.template.js, string.template.ts#4a9fa5
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#4a9fa5
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#4a9fa5