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#8b5cf6
  • activityBar.background#060606
  • activityBar.border#080808
  • activityBar.foreground#e1e4e8
  • activityBar.inactiveForeground#7a7a7a
  • activityBarBadge.background#BBB0FF
  • activityBarBadge.foreground#e5e5e5
  • badge.background#BBB0FF
  • badge.foreground#c8e1ff
  • breadcrumb.activeSelectionForeground#d1d5da
  • breadcrumb.focusForeground#e1e4e8
  • breadcrumb.foreground#9d9d9d
  • breadcrumbPicker.background#0B0B0B
  • button.background#6d28d9
  • button.foreground#dcffe4
  • button.hoverBackground#BBB0FF
  • checkbox.background#4d4d4d
  • checkbox.border#080808
  • debugToolBar.background#060606
  • descriptionForeground#d4d4d4
  • diffEditor.insertedTextBackground#28a74530
  • diffEditor.removedTextBackground#d73a4930
  • dropdown.background#0B0B0B
  • dropdown.border#080808
  • dropdown.foreground#e1e4e8
  • dropdown.listBackground#0B0B0B
  • editor.background#0A0A0A
  • editor.findMatchBackground#ffd33d44
  • editor.findMatchHighlightBackground#ffd33d22
  • editor.focusedStackFrameHighlightBackground#b808
  • editor.foldBackground#282e3380
  • editor.foreground#e5e5e5
  • editor.inactiveSelectionBackground#3392FF22
  • editor.lineHighlightBackground#151515
  • editor.selectionBackground#3392FF44
  • editor.selectionHighlightBackground#17E5E633
  • editor.selectionHighlightBorder#17E5E600
  • editor.stackFrameHighlightBackground#a707
  • editor.wordHighlightBackground#17E5E600
  • editor.wordHighlightBorder#17E5E699
  • editor.wordHighlightStrongBackground#17E5E600
  • editor.wordHighlightStrongBorder#17E5E666
  • editorBracketMatch.background#17E5E650
  • editorBracketMatch.border#17E5E600
  • editorCursor.foreground#c8e1ff
  • editorGroup.border#080808
  • editorGroupHeader.tabsBackground#060606
  • editorGroupHeader.tabsBorder#080808
  • editorGutter.addedBackground#28a745
  • editorGutter.deletedBackground#ea4a5a
  • editorGutter.modifiedBackground#BBB0FF
  • editorIndentGuide.activeBackground1#4d4d4d
  • editorIndentGuide.background1#353535
  • editorInlayHint.background#101010
  • editorInlayHint.foreground#949494
  • editorLineNumber.activeForeground#e1e4e8
  • editorLineNumber.foreground#4d4d4d
  • editorOverviewRuler.border#080808
  • editorWhitespace.foreground#4d4d4d
  • editorWidget.background#080808
  • errorForeground#f87171
  • focusBorder#BBB0FF
  • foreground#d4d4d4
  • gitDecoration.addedResourceForeground#34d058
  • gitDecoration.conflictingResourceForeground#ffab70
  • gitDecoration.deletedResourceForeground#ea4a5a
  • gitDecoration.ignoredResourceForeground#7a7a7a
  • gitDecoration.modifiedResourceForeground#82BCFF
  • gitDecoration.submoduleResourceForeground#7a7a7a
  • gitDecoration.untrackedResourceForeground#34d058
  • input.background#0B0B0B
  • input.border#080808
  • input.foreground#e1e4e8
  • input.placeholderForeground#9d9d9d
  • list.activeSelectionBackground#2a2a2a
  • list.activeSelectionForeground#e1e4e8
  • list.focusBackground#044289
  • list.hoverBackground#1A1A1A
  • list.hoverForeground#e1e4e8
  • list.inactiveFocusBackground#1d2d3e
  • list.inactiveSelectionBackground#1A1A1A
  • list.inactiveSelectionForeground#e1e4e8
  • notificationCenterHeader.background#060606
  • notificationCenterHeader.foreground#9d9d9d
  • notifications.background#0B0B0B
  • notifications.border#080808
  • notifications.foreground#e1e4e8
  • notificationsErrorIcon.foreground#f87171
  • notificationsInfoIcon.foreground#BBB0FF
  • notificationsWarningIcon.foreground#ffab70
  • panel.background#060606
  • panel.border#080808
  • panelInput.border#353535
  • panelTitle.activeBorder#8b5cf6
  • panelTitle.activeForeground#e1e4e8
  • panelTitle.inactiveForeground#9d9d9d
  • peekViewEditor.background#0B0B0B
  • peekViewEditor.matchHighlightBackground#ffd33d33
  • peekViewResult.background#0B0B0B
  • peekViewResult.matchHighlightBackground#ffd33d33
  • pickerGroup.border#4d4d4d
  • pickerGroup.foreground#e1e4e8
  • progressBar.background#BBB0FF
  • quickInput.background#060606
  • quickInput.foreground#e1e4e8
  • scrollbar.shadow#0008
  • scrollbarSlider.activeBackground#7a7a7a88
  • scrollbarSlider.background#7a7a7a33
  • scrollbarSlider.hoverBackground#7a7a7a44
  • settings.headerForeground#e1e4e8
  • settings.modifiedItemIndicator#BBB0FF
  • sideBar.background#060606
  • sideBar.border#080808
  • sideBar.foreground#d1d5da
  • sideBarSectionHeader.background#060606
  • sideBarSectionHeader.border#080808
  • sideBarSectionHeader.foreground#e1e4e8
  • sideBarTitle.foreground#e5e5e5
  • statusBar.background#060606
  • statusBar.border#080808
  • statusBar.debuggingBackground#931c06
  • statusBar.debuggingForeground#fff
  • statusBar.foreground#d1d5da
  • statusBar.noFolderBackground#060606
  • statusBarItem.prominentBackground#1A1A1A
  • tab.activeBackground#1a0f20
  • tab.activeBorder#0B0B0B
  • tab.activeBorderTop#8b5cf6
  • tab.activeForeground#e1e4e8
  • tab.border#080808
  • tab.hoverBackground#090909
  • tab.inactiveBackground#060606
  • tab.inactiveForeground#9d9d9d
  • tab.unfocusedActiveBorder#0B0B0B
  • tab.unfocusedActiveBorderTop#080808
  • tab.unfocusedHoverBackground#090909
  • terminal.background#080808
  • terminal.foreground#d1d5da
  • textBlockQuote.background#0B0B0B
  • textBlockQuote.border#080808
  • textCodeBlock.background#0B0B0B
  • textPreformat.foreground#d1d5da
  • textSeparator.foreground#586069
  • titleBar.activeBackground#060606
  • titleBar.activeForeground#e1e4e8
  • titleBar.border#080808
  • titleBar.inactiveBackground#060606
  • titleBar.inactiveForeground#9d9d9d
  • tree.indentGuidesStroke#0B0B0B

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#60e67ditalic
variable, string constant.other.placeholder#ffffff
meta.block variable.other#ffffff
constant.other.color#ffffff
invalid, invalid.illegal#FF5370
keyword, storage.modifier#BBB0FF
storage.type#BBB0FF
keyword.control.flow#BBB0FF
storage.type.class#BBB0FF
keyword.control.import, keyword.control.from#BBB0FF
storage.type.generic#f8ca73
storage.type.primitive#f8ca73
keyword.control.type#f8ca73
constant.other.color, punctuation, 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#d6d3d1
string.quoted, string.quoted.double, string.quoted.single, string.quoted.raw, string.quoted.template, punctuation.definition.string.begin, punctuation.definition.string.end#C8E997
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter#fe6767
entity.other.attribute-name.id#f472b6
support.type.property-name.css#d4d4d4
constant.numeric.css#f8ca73
support.constant.color.w3c-standard-color-name.css, constant.other.color.rgb-value.hex.css#4ade80
keyword.other.unit.percentage.css, keyword.other.unit.rem.css, keyword.other.unit.em.css, keyword.other.unit.px.css, keyword.other.unit.in.css, keyword.other.unit.pt.css, keyword.other.unit.pc.css, keyword.other.unit.ex.css, keyword.other.unit.ch.css, keyword.other.unit.vw.css, keyword.other.unit.vh.css, keyword.other.unit.vmin.css, keyword.other.unit.vmax.css#BBB0FF
support.constant.property-value.css#33D6EF
variable.scss#FFA86B
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#fe6767
variable.language#fe6767italic
meta.tag#BCBCBC
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method#FFA86B
support.other.variable, string.other.link#f6a9ff
constant.numeric, constant.language, support.constant, constant.character, constant.escape, keyword.other.unit, keyword.other#f8ca73
variable.parameter#55D9C9
string, constant.other.symbol, constant.other.key, entity.other.inherited-class, markup.heading, markup.inserted.git_gutter, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js#C8E997
entity.name.type, support.type, support.class, support.other.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types#f8ca73
entity.name.type.class#f8ca73
support.type#f8ca73
variable.other.property, variable.other.object.property, meta.object-literal.key, meta.object.member, meta.objectliteral.ts, meta.object.member.ts, meta.object.member.tsx, meta.object.member.js, meta.object.member.jsx#8AC5F0
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#B2CCD6
entity.name.method.js#8BB1FFitalic
meta.class-method.js entity.name.function.js, variable.function.constructor#8BB1FF
entity.other.attribute-name#f8ca73
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name#fdce75italic
entity.other.attribute-name.class#fdce75
source.sass keyword.control#8BB1FF
markup.inserted#C8E997
markup.deleted#FF5370
markup.changed#C792EA
string.regexp#89DDFF
constant.character.escape#89DDFF
*url*, *link*, *uri*underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#8BB1FFitalic
source.js constant.other.object.key.js string.unquoted.label.js#FF5370italic
source.json meta.structure.dictionary.json support.type.property-name.json#C792EA
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#fdce75
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#F78C6C
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#FF5370
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#C17E70
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#8BB1FF
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 meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#fe6767
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 meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#C792EA
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 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#C3E88D
text.html.markdown, punctuation.definition.list_item.markdown#EEFFFF
text.html.markdown markup.inline.raw.markdown#C792EA
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown#65737E
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown#C3E88D
markup.italic#fe6767italic
markup.bold, markup.bold string#fe6767bold
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#fe6767bold
markup.underline#F78C6Cunderline
markup.quote punctuation.definition.blockquote.markdown#65737E
markup.quoteitalic
string.other.link.title.markdown#8BB1FF
string.other.link.description.title.markdown#C792EA
constant.other.reference.link.markdown#fdce75
markup.raw.block#C792EA
markup.raw.block.fenced.markdown#00000050
punctuation.definition.fenced.markdown#00000050
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end#EEFFFF
variable.language.fenced.markdown#65737E
meta.separator#65737Ebold
markup.table#EEFFFF
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end#ec4899
support.class.component#FFA86B
entity.name.type.parameter#FF82C3
variable.other.readwrite.alias.tsx, variable.other.readwrite.alias.ts, variable.other.readwrite.alias.js, variable.other.readwrite.alias.jsx, variable.other.readwrite.tsx, variable.other.readwrite.ts, variable.other.readwrite.js, variable.other.readwrite.jsx, variable.other.object.tsx, variable.other.object.ts, variable.other.object.js, variable.other.object.jsx#dbdbdb