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#23252e
  • activityBar.foreground#D7DAE0
  • activityBar.inactiveForeground#5F6672
  • activityBarBadge.background#528bff
  • activityBarBadge.foreground#F8FAFD
  • button.background#528bff
  • diffEditor.insertedTextBackground#00809B33
  • dropdown.background#1d1f23
  • dropdown.border#181A1F
  • editor.background#1f232b
  • editor.findMatchBorder#457dffbd
  • editor.lineHighlightBackground#2c313c
  • editor.selectionBackground#67769660
  • editor.selectionHighlightBackground#ffffff10
  • editorCursor.foreground#f8f8f0
  • editorError.foreground#c24038
  • editorGroup.border#181A1F
  • editorGroupHeader.tabsBackground#21252B
  • editorHoverWidget.background#21252B
  • editorHoverWidget.border#181A1F
  • editorIndentGuide.background1#3B4048
  • editorLineNumber.activeForeground#50bbf8
  • editorLineNumber.foreground#495162
  • editorRuler.foreground#484848
  • editorSuggestWidget.background#21252B
  • editorWhitespace.foreground#484a50
  • editorWidget.background#21252B
  • input.background#1d1f23
  • list.activeSelectionBackground#03385e
  • list.activeSelectionForeground#d7dae0
  • list.focusBackground#2c313c
  • list.highlightForeground#C5C5C5
  • list.hoverBackground#292d35
  • list.inactiveSelectionBackground#2c313a
  • list.inactiveSelectionForeground#d7dae0
  • scrollbarSlider.activeBackground#747D9180
  • scrollbarSlider.background#4E566680
  • scrollbarSlider.hoverBackground#5A637580
  • sideBar.background#21252b
  • sideBarSectionHeader.background#1f232b
  • statusBar.background#21252B
  • statusBar.debuggingBackground#21252B
  • statusBar.foreground#9da5b4
  • statusBar.noFolderBackground#21252B
  • statusBarItem.hoverBackground#2c313a
  • tab.activeBackground#1F232B
  • tab.activeBorderTop#9e9e9e
  • tab.border#181A1F
  • tab.hoverBackground#323842
  • tab.inactiveBackground#2b2d32
  • titleBar.activeBackground#1f232b
  • titleBar.activeForeground#9da5b4
  • titleBar.inactiveBackground#1f232b
  • titleBar.inactiveForeground#6B717D

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, string.comment#9e9c9cd5italic
string#e5c07b
punctuation.definition.template-expression.begin.js,punctuation.definition.template-expression.end.js,punctuation.definition.template-expression.begin.ts,punctuation.definition.template-expression.end.ts#c678dd
string.template.js#e5c07b
meta.template.expression.js#abb2bf
constant.numeric#e5c07b
string.embedded.begin, string.embedded.end#c678dd
string.embedded#95c673
constant.language#56b6c2
constant.character, constant.other#56b6c2
variable.language#e06c75
variable.readwrite, variable.readwrite.other.block#61afef
keyword, keyword.operator.logical, keyword.operator.constructor#e06c75
keyword.operator#e06c75
storage#e06c75
storage.type#56b6c2
entity.name.class, entity.name.module, storage.identifier, support.class#61afef
variable.other.property, variable.other.block#abb2bf
entity.other.inherited-class#61afef
entity.name.function, support.function#95c673
variable.parameter#d19a66
entity.name.function-call#abb2bf
function.support.builtin, function.support.core#95c673
entity.name.tag, entity.name.tag.class.js, entity.name.tag.class.jsx#e06c75
entity.name.tag.class, entity.name.tag.id#56b6c2
entity.other.attribute-name#95c673
support.type#56b6c2
variable.other.less#61afef
constant.numeric.css, keyword.other#56b6c2
support.type.property-name.css, support.type.property-name.scss, support.type.property-name.less, support.type.property-name.sass, support.type.vendored.property-name.css#e5c07b
entity.name.tag.css#95c673
support.other.variable
invalid#F8F8F0
invalid.deprecated#F8F8F0
structure.dictionary.property-name.json#56b6c2
support.dictionary.json#56b6c2
string.detected-link#61afef
meta.diff, meta.diff.header#75715E
markup.deleted#c678dd
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#696969
markup.heading.markdown#e06c75bold
punctuation.definition.heading.markdown#696969
markup.quote.markdown#95c673
meta.separator.markdown#c678ddbold
markup.raw.inline.markdown, markup.raw.block.markdown#56b6c2
punctuation.definition.list_item.markdown#ffffffbold
variable.languageitalic
One Monokai Dark+ Theme by Oleksandr Bagmut - VS Code Theme