Skip to main content
CodingTheme

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.background#131416
  • activityBar.border#08090C60
  • activityBar.foreground#ffffff
  • activityBarBadge.background#a4b1cd
  • activityBarBadge.foreground#08090C
  • badge.background#a4b1cd
  • badge.foreground#08090C
  • breadcrumb.activeSelectionForeground#BDC3C7
  • breadcrumb.background#08090C
  • breadcrumb.focusForeground#ffffff
  • breadcrumb.foreground#7e7e7e
  • breadcrumbPicker.background#08090C
  • button.background#a4b1cd
  • button.border#ffffff
  • button.foreground#08090C
  • contrastBorder#0E101440
  • debugToolBar.background#08090C
  • diffEditor.insertedTextBackground#094bc715
  • diffEditor.removedTextBackground#BDC3C720
  • dropdown.background#0f1013
  • dropdown.border#ECF0F110
  • editor.background#08090C
  • editor.findMatchBackground#ECF0F130
  • editor.findMatchBorder#575757
  • editor.findMatchHighlightBackground#1f202293
  • editor.findMatchHighlightBorder#575757
  • editor.foreground#BDC3C7
  • editor.lineHighlightBackground#08090C50
  • editor.selectionBackground#575757
  • editor.selectionHighlightBackground#ECF0F130
  • editor.selectionHighlightBorder#575757
  • editor.wordHighlightBackground#111318
  • editorBracketMatch.background#08090C
  • editorBracketMatch.border#BDC3C77f
  • editorCursor.foreground#ff9900
  • editorError.foreground#ff5e57
  • editorGroup.border#1645d130
  • editorGroupHeader.tabsBackground#08090C
  • editorGutter.addedBackground#2A303B60
  • editorGutter.deletedBackground#BDC3C760
  • editorGutter.modifiedBackground#a4b1cd60
  • editorHoverWidget.background#08090C
  • editorHoverWidget.border#ECF0F110
  • editorIndentGuide.activeBackground#515A72
  • editorIndentGuide.background#515A7270
  • editorInfo.foreground#a4b1cd70
  • editorLineNumber.activeForeground#a9adad
  • editorLineNumber.foreground#3c3f46c0
  • editorLink.activeForeground#BDC3C7
  • editorMarkerNavigation.background#BDC3C705
  • editorOverviewRuler.border#383838
  • editorOverviewRuler.errorForeground#ff5e57
  • editorOverviewRuler.findMatchForeground#0E1014
  • editorOverviewRuler.infoForeground#a4b1cd40
  • editorOverviewRuler.warningForeground#fffc59
  • editorRuler.foreground#515A72
  • editorSuggestWidget.background#1c1d20
  • editorSuggestWidget.border#ECF0F110
  • editorSuggestWidget.focusHighlightForeground#ffffff
  • editorSuggestWidget.foreground#BDC3C7
  • editorSuggestWidget.highlightForeground#BDC3C7
  • editorSuggestWidget.selectedBackground#0E1014
  • editorWarning.foreground#ffdd59
  • editorWhitespace.foreground#BDC3C740
  • editorWidget.background#15161a
  • editorWidget.border#BDC3C7
  • editorWidget.resizeBorder#0E1014
  • extensionButton.prominentBackground#2a303b
  • extensionButton.prominentHoverBackground#BDC3C7
  • extensionIcon.verifiedForeground#ffffff
  • focusBorder#ECF0F100
  • gitDecoration.conflictingResourceForeground#BDC3C7
  • gitDecoration.deletedResourceForeground#BDC3C7
  • gitDecoration.ignoredResourceForeground#5a5a5a
  • gitDecoration.modifiedResourceForeground#a3a3a3
  • gitDecoration.untrackedResourceForeground#a8a8a8
  • input.background#202020
  • input.border#ECF0F110
  • input.foreground#cfd1d3
  • input.placeholderForeground#BDC3C760
  • inputOption.activeBackground#126ca830
  • inputOption.activeBorder#BDC3C730
  • inputValidation.errorBorder#ff5e57
  • inputValidation.infoBorder#a4b1cd50
  • inputValidation.warningBorder#BDC3C750
  • list.activeSelectionBackground#424242
  • list.activeSelectionForeground#ffffff
  • list.focusBackground#2C333F
  • list.focusForeground#a4b1cd
  • list.highlightForeground#ECF0F1
  • list.hoverBackground#1d2025
  • list.hoverForeground#ECF0F1
  • list.inactiveSelectionBackground#08090C30
  • list.inactiveSelectionForeground#ffffff
  • list.warningForeground#BDC3C7
  • listFilterWidget.background#08090C30
  • listFilterWidget.noMatchesOutline#08090C30
  • listFilterWidget.outline#08090C30
  • menu.background#08090Cf8
  • menu.border#0E101450
  • menu.foreground#BDC3C7
  • menu.selectionBackground#1b1c1d
  • menu.selectionBorder#08090C30
  • menu.selectionForeground#BDC3C7
  • menu.separatorBackground#202122
  • menubar.selectionBackground#c5d1eb
  • menubar.selectionForeground#08090C
  • minimap.background#08090C
  • minimapGutter.addedBackground#BDC3C7
  • minimapGutter.deletedBackground#BDC3C7
  • minimapGutter.modifiedBackground#2A303B
  • minimapSlider.activeBackground#2A303Bb0
  • minimapSlider.background#2A303B80
  • minimapSlider.hoverBackground#2A303Ba0
  • notificationLink.foreground#0E1014
  • notifications.background#08090C
  • notifications.foreground#BDC3C7
  • panel.background#08090C
  • panel.border#2A303B
  • panelTitle.activeBorder#0E1014
  • panelTitle.activeForeground#ECF0F1
  • panelTitle.inactiveForeground#BDC3C7
  • peekView.border#646464
  • peekViewEditor.background#08090C49
  • peekViewEditor.matchHighlightBackground#0E101450
  • peekViewEditorGutter.background#08090Cc9
  • peekViewResult.background#BDC3C705
  • peekViewResult.matchHighlightBackground#0E101450
  • peekViewResult.selectionBackground#0E101470
  • peekViewTitle.background#BDC3C705
  • peekViewTitleDescription.foreground#BDC3C760
  • pickerGroup.foreground#0E1014
  • progressBar.background#0E1014
  • quickInput.background#0E1014
  • scrollbar.shadow#08090C00
  • scrollbarSlider.activeBackground#0E1014cc
  • scrollbarSlider.background#303030
  • scrollbarSlider.hoverBackground#292929
  • selection.background#0E1014
  • settings.checkboxBackground#181818
  • settings.checkboxForeground#BDC3C7
  • settings.dropdownBackground#181818
  • settings.dropdownForeground#BDC3C7
  • settings.focusedRowBorder#181818
  • settings.headerForeground#e0e0e0
  • settings.modifiedItemIndicator#a8a8a8
  • settings.numberInputBackground#08090C
  • settings.numberInputForeground#BDC3C7
  • settings.textInputBackground#08090C
  • settings.textInputForeground#BDC3C7
  • sideBar.background#08090C
  • sideBar.foreground#a4b1cd
  • sideBarSectionHeader.background#08090C
  • sideBarSectionHeader.border#08090C60
  • sideBarSectionHeader.foreground#a4b1cd
  • sideBarTitle.foreground#BDC3C7
  • statusBar.background#18191d
  • statusBar.border#08090C60
  • statusBar.debuggingBackground#BDC3C7
  • statusBar.debuggingForeground#08090C
  • statusBar.foreground#929596
  • statusBar.noFolderBackground#08090C
  • statusBarItem.hoverBackground#0E101420
  • statusBarItem.remoteBackground#08090C
  • statusBarItem.remoteForeground#929596
  • tab.activeBackground#08090C
  • tab.activeForeground#ECF0F1
  • tab.border#08090C60
  • tab.inactiveBackground#1b1d2081
  • tab.inactiveForeground#BDC3C7af
  • tab.unfocusedActiveBackground#0E101440
  • tab.unfocusedActiveForeground#BDC3C7
  • tab.unfocusedInactiveBackground#0E101410
  • tab.unfocusedInactiveForeground#BDC3C77f
  • terminal.ansiBlue#004cff
  • terminal.ansiBrightBlue#5cb2ff
  • terminal.ansiBrightCyan#1dd1a1
  • terminal.ansiBrightGreen#32ff7e
  • terminal.ansiBrightMagenta#c16cfa
  • terminal.ansiBrightRed#ff6b6b
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#ffcc5c
  • terminal.ansiCyan#2ee7b6
  • terminal.ansiGreen#fa8231
  • terminal.ansiMagenta#9f00ff
  • terminal.ansiRed#ff3e3e
  • terminal.ansiWhite#ffffff
  • terminal.ansiYellow#ffaf00
  • terminal.background#08090C
  • terminal.foreground#a4b1cd
  • terminalCursor.background#313f55
  • textLink.activeForeground#BDC3C7
  • textLink.foreground#727272
  • titleBar.activeBackground#1b1d2081
  • titleBar.activeForeground#BDC3C7
  • titleBar.border#08090C60
  • titleBar.inactiveBackground#333742
  • titleBar.inactiveForeground#0E1014
  • tree.indentGuidesStroke#515A72
  • widget.shadow#272727

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#a4b1cditalic
variable, string constant.other.placeholder#7b91ff
constant.other.color#f1f2f6
invalid, invalid.illegal#ff8484
keyword, storage.type, storage.modifier#cf8dfb
keyword.control, 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#46ddff
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter#ba88ff
entity.name.function, variable.function, keyword.other.special-method#ffcc5cbold
meta.block variable.other#ff6083
support.other.variable, string.other.link#ff5248
constant.numeric, constant.language, support.constant, constant.character, constant.escape, variable.parameter, keyword.other.unit, keyword.other#2ed573
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#7bed9f
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#ffae4c
entity.name.tag.html#ffcc5c
support.function.construct.output.php#ffae4c
support.function.construct.php#ff587c
source.php#cf8dfbbold
support.type#aaefff
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#7aa4ff
source.css#b37cffbold
support.function.swift#EF5777
meta.function-call.swift#2ED573bold
variable.other.object.js#2ED573
entity.name.tag.js#ef5777
entity.name.tag.js.jsx#ffcc5c
meta.definition.function.swift, meta.definition.function.body.swift, meta.body.function.definition.cpp, meta.function.definition.cpp, source.cpp, meta.method.body.java, meta.method.java, meta.class.body.java, meta.class.java, source.java, source.python, source.ruby, source.dart#ef5777
meta.function-call.generic.python#b37cffbold
support.function.builtin.python#2ED573
support.function.kernel.ruby#2ED573bold
keyword.control.java#2ED573
variable.other.object.java#ffab45
storage.type.primitive.java#5e91ff
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#e55039
variable.language#ff6d85italic
entity.name.method.js#5e91ffitalic
meta.class-method.js entity.name.function.js, variable.function.constructor#82AAFF
entity.other.attribute-name#b37cff
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name#ffd992italic
entity.other.attribute-name.class#fd9644
source.sass keyword.control#5f92ff
markup.inserted#cbff7e
markup.deleted#ff5672
markup.changed#C792EA
string.regexp#58d0ff
constant.character.escape#50cdff
*url*, *link*, *uri*underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#5e8ef8italic
source.js constant.other.object.key.js string.unquoted.label.js#ff7e94italic
meta.object-literal.key.js#ff5f7aitalic
source.json meta.structure.dictionary.json support.type.property-name.json#d390ff
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#ffd78c
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#ff9d80
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#ff7c92
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#ff9883
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#82AAFF
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#ff7c82
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#cf88ff
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#d0ff8a
text.html.markdown, punctuation.definition.list_item.markdown#46dada
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#d4ff93
markup.italic#ff797fitalic
markup.bold, markup.bold string#ff7179bold
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#ff7d84bold
markup.underline#ff9777underline
markup.quote punctuation.definition.blockquote.markdown#a8d9ff
markup.quoteitalic
string.other.link.title.markdown#9abaff
string.other.link.description.title.markdown#d494ff
constant.other.reference.link.markdown#ffd68a
markup.raw.block#ce84ff
markup.raw.block.fenced.markdown#08090C50
punctuation.definition.fenced.markdown#08090C50
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end#EEFFFF
variable.language.fenced.markdown#65737E
meta.separator#cde9ffbold
markup.table#EEFFFF

Shiki preview

TypeScript sample highlighted with this variant's colors and tokenColors.

Loading...

HollowDark by SmitAkbari - VS Code Theme