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.background#0D1117
  • activityBar.foreground#D7DAE0
  • activityBarBadge.background#528bff
  • activityBarBadge.foreground#F8FAFD
  • button.background#528bff
  • diffEditor.insertedTextBackground#00809B33
  • dropdown.background#1d1f23
  • dropdown.border#181A11
  • editor.background#0D1117
  • editor.findMatchBackground#42557B
  • editor.findMatchHighlightBackground#354d64b3
  • editor.foreground#f8f8f0
  • editor.lineHighlightBackground#1F2328
  • editor.selectionBackground#3E4451
  • editorCursor.foreground#f8f8f0
  • editorError.foreground#c24038
  • editorGroup.border#181A1F
  • editorGroup.emptyBackground#111720
  • editorGroupHeader.tabsBackground#1A202A
  • editorHoverWidget.background#21252B
  • editorHoverWidget.border#181A1F
  • editorIndentGuide.background1#3B4048
  • editorLineNumber.foreground#495162
  • editorRuler.foreground#484848
  • editorSuggestWidget.background#21252B
  • editorSuggestWidget.border#181A1F
  • editorSuggestWidget.selectedBackground#2c313a
  • editorWhitespace.foreground#484a50
  • editorWidget.background#21252B
  • input.background#1d1f23
  • list.activeSelectionBackground#22313F
  • list.activeSelectionForeground#d7dae0
  • list.focusBackground#383E4A
  • list.highlightForeground#C5C5C5
  • list.hoverBackground#212d45
  • list.inactiveSelectionBackground#1A202A
  • list.inactiveSelectionForeground#d7dae0
  • menu.background#0f141b
  • notifications.background#21252b
  • scrollbarSlider.activeBackground#747D9180
  • scrollbarSlider.background#4E566680
  • scrollbarSlider.hoverBackground#5A637580
  • sideBar.background#0f141b
  • sideBarSectionHeader.background#1A202A
  • statusBar.background#16171D
  • statusBar.debuggingBackground#21252B
  • statusBar.foreground#fff
  • statusBar.noFolderBackground#21252B
  • statusBarItem.hoverBackground#2c313a
  • tab.activeBackground#22313F
  • tab.border#181A1F
  • tab.inactiveBackground#1A202A
  • titleBar.activeBackground#0D1117
  • titleBar.activeForeground#9da5b4
  • titleBar.inactiveBackground#0D1117
  • titleBar.inactiveForeground#6B717D

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, string.comment#5c6370italic
string#FFD945
punctuation.definition.template-expression.begin,punctuation.definition.template-expression.end,punctuation.definition.template-expression.begin,punctuation.definition.template-expression.end#FF3F4F
string.template#E5A422
meta.template.expression#f8f8f0
constant.numeric#E373CE
string.embedded.begin, string.embedded.end#E373CE
string.embedded#98c379
constant.language#19D1E5
constant.character, constant.other#19D1E5
variable.language#FF3F4Fitalic
variable.readwrite, variable.readwrite.other.block#61afef
keyword, keyword.operator.logical, keyword.operator.constructor#FF3F4Fitalic
keyword.operator#FF3F4Fitalic
storage#FF3F4Fitalic
storage.type#19D1E5
entity.name.class, entity.name.module, entity.name.type, storage.identifier, support.class#61afef
variable.other.object#61afef
variable.other.property, variable.other.block#f8f8f0
entity.other.inherited-class#81F900
entity.name.function, support.function#81F900
variable.parameter#FF9700italic
entity.name.function-call#f8f8f0
function.support.builtin, function.support.core#81F900
entity.name.tag, entity.name.tag.class#FF3F4F
entity.name.tag.class, entity.name.tag.id#19D1E5
entity.other.attribute-name#81F900
support.constant#19D1E5
support.type, support.variable#19D1E5
support.dictionary.json#19D1E5
support.type.property-name.css, support.type.property-name.scss, support.type.property-name.less, support.type.property-name.sass#6AEBF7
support.constant.css, support.constant.scss, support.constant.less, support.constant.sass#98c379
variable.css, variable.scss, variable.less, variable.sass#56b6c2
variable.css.string, variable.scss.string, variable.less.string, variable.sass.string#e5c07b
unit.css, unit.scss, unit.less, unit.sass#c678dd
constant.numeric.css, constant.numeric.scss, constant.numeric.less, constant.numeric.sass#E373CE
function.css, function.scss, function.less, function.sass#56b6c2
support.other.variable
invalid#F8F8F0
invalid.deprecated#F8F8F0
structure.dictionary.property-name.json#56b6c2
string.detected-link#61afef
meta.diff, meta.diff.header#75715E
markup.deleted#E542FF
markup.inserted#e5c07b
markup.changed#e5c07b
constant.numeric.line-number.find-in-files - match#56b6c2A0
entity.name.filename.find-in-files#e5c07b
markup.italic, markup.italic.markdownitalic
punctuation.definition.italic.markdown#696969
markup.underline.link.markdown#61afef
markup.bold.markdownbold
punctuation.definition.bold.markdown#919191
markup.heading.markdown#FF3F4Fbold
punctuation.definition.heading.markdown#919191
markup.quote.markdown#6FD80D
meta.separator.markdown#E542FFbold
markup.raw.inline.markdown, markup.raw.block.markdown#56b6c2
punctuation.definition.list_item.markdown#ffffffbold

Shiki preview

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

Loading...

Starlight Themes - Coding Theme