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.activeBackground#C678DD20
  • activityBar.activeBorder#61AFEF
  • activityBar.background#0B0C10
  • activityBar.border#1c1f26
  • activityBar.foreground#C678DD
  • activityBar.inactiveForeground#5C6370
  • activityBarBadge.background#C678DD
  • activityBarBadge.foreground#0B0C10
  • badge.background#C678DD
  • badge.foreground#0B0C10
  • breadcrumb.activeSelectionForeground#C678DD
  • breadcrumb.background#0B0C10
  • breadcrumb.focusForeground#F8F8F2
  • breadcrumb.foreground#5C6370
  • breadcrumbPicker.background#1c1f26
  • button.background#C678DD
  • button.foreground#0B0C10
  • button.hoverBackground#B568CE
  • button.secondaryBackground#2c313a
  • button.secondaryForeground#F8F8F2
  • button.secondaryHoverBackground#3c414a
  • dropdown.background#1c1f26
  • dropdown.border#2c313a
  • dropdown.foreground#F8F8F2
  • dropdown.listBackground#1c1f26
  • editor.background#0B0C10
  • editor.findMatchBackground#E5C07B60
  • editor.findMatchHighlightBackground#E5C07B40
  • editor.findRangeHighlightBackground#C678DD20
  • editor.foreground#F8F8F2
  • editor.inactiveSelectionBackground#2c313a60
  • editor.lineHighlightBackground#1c1f26
  • editor.selectionBackground#C678DD40
  • editor.selectionHighlightBackground#C678DD20
  • editor.wordHighlightBackground#61AFEF30
  • editor.wordHighlightStrongBackground#C678DD30
  • editorBracketMatch.background#C678DD40
  • editorBracketMatch.border#C678DD
  • editorCodeLens.foreground#5C6370
  • editorCursor.foreground#61AFEF
  • editorError.foreground#E06C75
  • editorGroup.border#1c1f26
  • editorGroupHeader.tabsBackground#0B0C10
  • editorGroupHeader.tabsBorder#1c1f26
  • editorHint.foreground#56B6C2
  • editorIndentGuide.activeBackground1#C678DD
  • editorIndentGuide.background1#2c313a
  • editorInfo.foreground#61AFEF
  • editorLightBulb.foreground#E5C07B
  • editorLightBulbAutoFix.foreground#98C379
  • editorLineNumber.activeForeground#C678DD
  • editorLineNumber.foreground#5C6370
  • editorRuler.foreground#2c313a
  • editorWarning.foreground#E5C07B
  • extensionButton.prominentBackground#C678DD
  • extensionButton.prominentForeground#0B0C10
  • extensionButton.prominentHoverBackground#B568CE
  • gitDecoration.addedResourceForeground#98C379
  • gitDecoration.conflictingResourceForeground#D19A66
  • gitDecoration.deletedResourceForeground#E06C75
  • gitDecoration.ignoredResourceForeground#5C6370
  • gitDecoration.modifiedResourceForeground#E5C07B
  • gitDecoration.submoduleResourceForeground#C678DD
  • gitDecoration.untrackedResourceForeground#56B6C2
  • input.background#1c1f26
  • input.border#2c313a
  • input.foreground#F8F8F2
  • input.placeholderForeground#5C6370
  • inputOption.activeBorder#C678DD
  • inputValidation.errorBackground#E06C7520
  • inputValidation.errorBorder#E06C75
  • inputValidation.infoBackground#61AFEF20
  • inputValidation.infoBorder#61AFEF
  • inputValidation.warningBackground#E5C07B20
  • inputValidation.warningBorder#E5C07B
  • list.activeSelectionBackground#2c313a
  • list.activeSelectionForeground#F8F8F2
  • list.dropBackground#2c313a
  • list.errorForeground#E06C75
  • list.focusBackground#21252B
  • list.focusForeground#F8F8F2
  • list.highlightForeground#C678DD
  • list.hoverBackground#1c1f26
  • list.inactiveSelectionBackground#1c1f26
  • list.inactiveSelectionForeground#ABB2BF
  • list.warningForeground#E5C07B
  • menu.background#1c1f26
  • menu.foreground#F8F8F2
  • menu.selectionBackground#2c313a
  • menu.selectionBorder#C678DD
  • menu.selectionForeground#F8F8F2
  • menu.separatorBackground#2c313a
  • menubar.selectionBackground#2c313a
  • menubar.selectionForeground#F8F8F2
  • notificationCenter.border#1c1f26
  • notificationCenterHeader.background#1c1f26
  • notificationCenterHeader.foreground#F8F8F2
  • notificationLink.foreground#C678DD
  • notifications.background#1c1f26
  • notifications.border#1c1f26
  • notifications.foreground#F8F8F2
  • notificationToast.border#1c1f26
  • panel.background#0B0C10
  • panel.border#1c1f26
  • panelTitle.activeBorder#C678DD
  • panelTitle.activeForeground#F8F8F2
  • panelTitle.inactiveForeground#5C6370
  • peekView.border#C678DD
  • peekViewEditor.background#1c1f26
  • peekViewEditor.matchHighlightBackground#C678DD40
  • peekViewResult.background#0B0C10
  • peekViewResult.fileForeground#F8F8F2
  • peekViewResult.lineForeground#ABB2BF
  • peekViewResult.matchHighlightBackground#C678DD40
  • peekViewResult.selectionBackground#2c313a
  • peekViewResult.selectionForeground#F8F8F2
  • peekViewTitle.background#1c1f26
  • peekViewTitleDescription.foreground#5C6370
  • peekViewTitleLabel.foreground#F8F8F2
  • pickerGroup.border#1c1f26
  • pickerGroup.foreground#C678DD
  • quickInput.background#1c1f26
  • quickInput.foreground#F8F8F2
  • scrollbarSlider.activeBackground#5C6370
  • scrollbarSlider.background#5C637050
  • scrollbarSlider.hoverBackground#5C637080
  • settings.checkboxBackground#1c1f26
  • settings.checkboxBorder#2c313a
  • settings.checkboxForeground#F8F8F2
  • settings.dropdownBackground#1c1f26
  • settings.dropdownBorder#2c313a
  • settings.dropdownForeground#F8F8F2
  • settings.headerForeground#F8F8F2
  • settings.modifiedItemIndicator#C678DD
  • settings.numberInputBackground#1c1f26
  • settings.numberInputBorder#2c313a
  • settings.numberInputForeground#F8F8F2
  • settings.textInputBackground#1c1f26
  • settings.textInputBorder#2c313a
  • settings.textInputForeground#F8F8F2
  • sideBar.background#0B0C10
  • sideBar.border#1c1f26
  • sideBar.foreground#ABB2BF
  • sideBarSectionHeader.background#1c1f26
  • sideBarSectionHeader.border#2c313a
  • sideBarSectionHeader.foreground#61AFEF
  • sideBarTitle.foreground#F8F8F2
  • statusBar.background#0B0C10
  • statusBar.border#1c1f26
  • statusBar.debuggingBackground#E06C75
  • statusBar.debuggingForeground#0B0C10
  • statusBar.foreground#61AFEF
  • statusBar.noFolderBackground#0B0C10
  • statusBar.noFolderForeground#61AFEF
  • statusBarItem.activeBackground#C678DD40
  • statusBarItem.hoverBackground#C678DD20
  • statusBarItem.prominentBackground#E5C07B
  • statusBarItem.prominentForeground#0B0C10
  • statusBarItem.prominentHoverBackground#D19A66
  • tab.activeBackground#0B0C10
  • tab.activeBorder#C678DD
  • tab.activeBorderTop#61AFEF
  • tab.activeForeground#F8F8F2
  • tab.border#1c1f26
  • tab.hoverBackground#1c1f26
  • tab.hoverForeground#ABB2BF
  • tab.inactiveBackground#0B0C10AA
  • tab.inactiveForeground#5C6370
  • tab.unfocusedActiveBackground#0B0C10AA
  • tab.unfocusedActiveForeground#ABB2BF
  • tab.unfocusedInactiveForeground#5C6370
  • terminal.ansiBlack#282C34
  • terminal.ansiBlue#61AFEF
  • terminal.ansiBrightBlack#5C6370
  • terminal.ansiBrightBlue#72C0FF
  • terminal.ansiBrightCyan#67C7D3
  • terminal.ansiBrightGreen#A9D48A
  • terminal.ansiBrightMagenta#D789EE
  • terminal.ansiBrightRed#FF7B86
  • terminal.ansiBrightWhite#FFFFFF
  • terminal.ansiBrightYellow#F6D18C
  • terminal.ansiCyan#56B6C2
  • terminal.ansiGreen#98C379
  • terminal.ansiMagenta#C678DD
  • terminal.ansiRed#E06C75
  • terminal.ansiWhite#ABB2BF
  • terminal.ansiYellow#E5C07B
  • terminal.background#0B0C10
  • terminal.border#1c1f26
  • terminal.foreground#F8F8F2
  • terminal.selectionBackground#C678DD40
  • titleBar.activeBackground#0B0C10
  • titleBar.activeForeground#F8F8F2
  • titleBar.border#1c1f26
  • titleBar.inactiveBackground#0B0C10AA
  • titleBar.inactiveForeground#5C6370
  • tree.indentGuidesStroke#3E4451

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment, comment.block.documentation#5C6370italic
keyword, storage.type, storage.modifier, keyword.control, keyword.operator, keyword.other, keyword.operator.new, keyword.operator.expression, keyword.other.debugger#C678DDitalic
string, constant.other.symbol, string.quoted, string.template#98C379
string.template, punctuation.definition.string.template#98C379
meta.template.expression, punctuation.definition.template-expression#E5C07B
constant.numeric, constant.language.boolean, constant.language.null, constant.language.undefined#D19A66
constant.language, support.constant, variable.language#56B6C2
variable, identifier, meta.definition.variable, meta.definition.variable.name, support.variable#E5C07B
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method#61AFEF
entity.name.type, entity.name.class, support.type, support.class, support.orther.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter#56B6C2
support.type#56B6C2
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#56B6C2
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#E06C75
variable.language.this, variable.language.super#E5C07Bitalic
entity.name.method.js#61AFEF
meta.class-method.js entity.name.function.js, variable.function.constructor#61AFEF
entity.other.attribute-name#D19A66italic
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name#D19A66italic
entity.other.attribute-name.class#D19A66
source.sass keyword.control#D19A66
markup.inserted#98C379
markup.deleted#E06C75
markup.changed#C678DD
string.regexp#56B6C2
constant.character.escape#56B6C2
*url*, *link*, *uri*underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#61AFEFitalic
source.js constant.other.object.key.js string.unquoted.label.js#E06C75italic
source.json meta.structure.dictionary.json support.type.property-name.json#C678DD
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#61AFEF
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#E5C07B
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#E06C75
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#98C379
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#D19A66
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 support.type.property-name.json#56B6C2
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#C678DD
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#61AFEF
text.html.markdown, punctuation.definition.list_item.markdown#F8F8F2
text.html.markdown markup.inline.raw.markdown#C678DD
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown#56B6C2
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown#61AFEFbold
markup.italic#C678DDitalic
markup.bold, markup.bold string#D19A66bold
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#E5C07Bbold
markup.underline#61AFEFunderline
markup.quote punctuation.definition.blockquote.markdown#56B6C2
markup.quoteitalic
string.other.link.title.markdown#61AFEF
string.other.link.description.title.markdown#C678DD
constant.other.reference.link.markdown#E5C07B
markup.raw.block#C678DD
markup.raw.block.fenced.markdown#00000050
punctuation.definition.fenced.markdown#00000050
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end#F8F8F2
variable.language.fenced.markdown#56B6C2
meta.separator#56B6C2bold
markup.table#F8F8F2
entity.name.tag, meta.tag, punctuation.definition.tag#E06C75
entity.name.tag.css, entity.other.attribute-name.class.css, entity.other.attribute-name.id.css, source.css entity.name.tag#E06C75
support.type.property-name.css#56B6C2
support.constant.property-value.css, constant.numeric.css, keyword.other.unit.css#98C379
invalid, invalid.illegal#E06C75italic underline
invalid.deprecated#C678DDitalic underline
support.class.component#E06C75italic
support.function.lifecycle.react#61AFEF
entity.name.type.ts, entity.name.type.tsx, support.type.primitive.ts, support.type.primitive.tsx#56B6C2
entity.name.type.interface.ts, entity.name.type.interface.tsx#61AFEF
meta.type.parameters.ts, meta.type.parameters.tsx#C678DD
storage, storage.modifier#C678DDitalic bold
entity.name.function.constructor#E5C07Bbold
support.variable, support.constant#56B6C2bold
variable.other.constant#D19A66italic
meta.embedded, source.groovy.embedded, string.template#98C379
variable.parameter#D19A66italic
punctuation.separator.key-value, punctuation.separator.dictionary.key-value, punctuation.separator.key-value.json, punctuation.separator.dictionary.key-value.json#ABB2BF
string.quoted.double.json#98C379
meta.structure.dictionary.json string.quoted.double.json#E5C07B
constant.language.json, constant.numeric.json#D19A66
comment.line.double-slash.json#5C6370italic
Shaant Shakti - Spiritual Dark Theme for Focused Coding by Aadityaa - VS Code Theme