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#1d1f23
  • activityBar.foreground#d7dae0
  • activityBarBadge.background#528bff
  • activityBarBadge.foreground#f8fafd
  • button.background#528bff
  • diffEditor.insertedTextBackground#00809b33
  • dropdown.background#1d1f23
  • dropdown.border#181a1f
  • editor.background#121212
  • editor.findMatchHighlightBackground#314365
  • editor.foreground#BBBBBB
  • editor.lineHighlightBackground#1d1f23
  • editor.selectionBackground#3e4451
  • editorBracketHighlight.foreground1#BBBBBB
  • editorBracketHighlight.foreground2#BBBBBB
  • editorBracketHighlight.foreground3#BBBBBB
  • editorBracketHighlight.foreground4#BBBBBB
  • editorBracketHighlight.foreground5#BBBBBB
  • editorBracketHighlight.foreground6#BBBBBB
  • editorCursor.foreground#f8f8f0
  • editorError.foreground#704040
  • editorGroup.border#181a1f
  • editorGroupHeader.tabsBackground#181a1f
  • editorHoverWidget.background#181a1f
  • editorHoverWidget.border#181a1f
  • editorIndentGuide.background#3b4048
  • editorInfo.foreground#707040
  • editorLineNumber.foreground#495162
  • editorRuler.foreground#484848
  • editorSuggestWidget.background#181a1f
  • editorSuggestWidget.border#181a1f
  • editorSuggestWidget.selectedBackground#2c313a
  • editorWarning.foreground#407040
  • editorWhitespace.foreground#484a50
  • editorWidget.background#181a1f
  • focusBorder#181a1f
  • input.background#1d1f23
  • list.activeSelectionBackground#121212
  • list.activeSelectionForeground#d7dae0
  • list.focusBackground#383e4a
  • list.highlightForeground#c5c5c5
  • list.hoverBackground#121212
  • list.inactiveSelectionBackground#121212
  • list.inactiveSelectionForeground#d7dae0
  • peekView.border#202020
  • peekViewEditor.background#202020
  • scrollbarSlider.activeBackground#747d9180
  • scrollbarSlider.background#4e566680
  • scrollbarSlider.hoverBackground#5a637580
  • sideBar.background#181a1f
  • sideBar.border#1d1f23
  • sideBarSectionHeader.background#181a1f
  • statusBar.background#020202
  • statusBar.debuggingBackground#020202
  • statusBar.foreground#9da5b4
  • statusBar.noFolderBackground#020202
  • statusBarItem.hoverBackground#2c313a
  • tab.activeBackground#121212
  • tab.border#181a1f
  • tab.inactiveBackground#181a1f
  • titleBar.activeBackground#020202
  • titleBar.activeForeground#9da5b4
  • titleBar.inactiveBackground#020202
  • titleBar.inactiveForeground#6b717d

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, string.comment#5c6370italic
string#d19a66
punctuation.definition.template-expression.begin.js,punctuation.definition.template-expression.end.js,punctuation.definition.template-expression.begin.ts,punctuation.definition.template-expression.end.ts#e5c07b
string.template.js#d19a66
meta.template.expression.js#abb2bf
constant.numeric#e5c07b
string.embedded.begin, string.embedded.end#e5c07b
string.embedded#e06c75
constant.language#56b6c2
constant.character, constant.other#56b6c2
variable.language#98c379
variable.readwrite, variable.readwrite.other.block#6ca8e5
keyword, keyword.operator.constructor#98c379
keyword.operator.logical.js#98c379bold
keyword.operator#98c379
storage#98c379
storage.type#56b6c2
entity.name.class, entity.name.module, entity.name.type, storage.identifier, support.class#6ca8e5
variable.other.object#6ca8e5
variable.other.property, variable.other.block#abb2bf
entity.other.inherited-class#e06c75
entity.name.function, support.function#e06c75
variable.parameter#c678dditalic
entity.name.function-call#abb2bf
function.support.builtin, function.support.core#e06c75
entity.name.tag, entity.name.tag.class.js, entity.name.tag.class.jsx#98c379
entity.name.tag.class, entity.name.tag.id#56b6c2
entity.other.attribute-name#e06c75
support.constant#56b6c2
support.type, support.variable#56b6c2
support.dictionary.json#56b6c2
support.type.property-name.css, support.type.property-name.scss, support.type.property-name.less, support.type.property-name.sass#abb2bf
support.constant.css, support.constant.scss, support.constant.less, support.constant.sass#e06c75
variable.css, variable.scss, variable.less, variable.sass#56b6c2
variable.css.string, variable.scss.string, variable.less.string, variable.sass.string#d19a66
unit.css, unit.scss, unit.less, unit.sass#e5c07b
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#6ca8e5
meta.diff, meta.diff.header#75715E
markup.deleted#e5c07b
markup.inserted#d19a66
markup.changed#d19a66
constant.numeric.line-number.find-in-files - match#56b6c2A0
entity.name.filename.find-in-files#d19a66
markup.italic, markup.italic.markdownitalic
punctuation.definition.italic.markdown#696969
markup.underline.link.markdown#6ca8e5
markup.bold.markdownbold
punctuation.definition.bold.markdown#696969
markup.heading.markdown#98c379bold
punctuation.definition.heading.markdown#696969
markup.quote.markdown#e06c75
meta.separator.markdown#e5c07bbold
markup.raw.inline.markdown, markup.raw.block.markdown#56b6c2
punctuation.definition.list_item.markdown#ffffffbold
punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html#98c379
token.info-token#6796e6
token.warn-token#cd9731
token.error-token#f44747
token.debug-token#b267e6
ThemeDatabase All Themes by enes ozturk - VS Code Theme