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#181818
  • activityBar.foreground#D7DAE0
  • activityBarBadge.background#3a7bff
  • activityBarBadge.foreground#F8FAFD
  • button.background#3a7bff
  • diffEditor.insertedTextBackground#00809B33
  • dropdown.background#1d1f23
  • dropdown.border#181A1F
  • editor.background#181818
  • editor.findMatchBackground#42557B
  • editor.findMatchHighlightBackground#314365
  • editor.lineHighlightBackground#383E4A
  • editor.selectionBackground#3E4451
  • editorCursor.foreground#f8f8f0
  • editorError.foreground#c24038
  • editorGroup.border#181A1F
  • editorGroup.emptyBackground#181A1F
  • editorGroupHeader.tabsBackground#222222
  • editorHoverWidget.background#222222
  • editorHoverWidget.border#181A1F
  • editorIndentGuide.background#3B4048
  • editorLineNumber.foreground#495162
  • editorRuler.foreground#484848
  • editorSuggestWidget.background#222222
  • editorSuggestWidget.border#181A1F
  • editorSuggestWidget.selectedBackground#2c313a
  • editorUnnecessaryCode.opacity#000000c0
  • editorWhitespace.foreground#484a50
  • editorWidget.background#222222
  • input.background#1d1f23
  • list.activeSelectionBackground#2c313a
  • list.activeSelectionForeground#d7dae0
  • list.focusBackground#383E4A
  • list.highlightForeground#C5C5C5
  • list.hoverBackground#292d35
  • list.inactiveSelectionBackground#2c313a
  • list.inactiveSelectionForeground#d7dae0
  • notifications.background#222222
  • scrollbarSlider.activeBackground#747D9180
  • scrollbarSlider.background#4E566680
  • scrollbarSlider.hoverBackground#5A637580
  • sideBar.background#222222
  • sideBarSectionHeader.background#181818
  • statusBar.background#222222
  • statusBar.debuggingBackground#222222
  • statusBar.foreground#9da5b4
  • statusBar.noFolderBackground#222222
  • statusBarItem.hoverBackground#2c313a
  • tab.activeBackground#383E4A
  • tab.border#181A1F
  • tab.inactiveBackground#222222
  • terminal.ansiBlack#2d3139
  • terminal.ansiBlue#528bff
  • terminal.ansiBrightBlack#7f848e
  • terminal.ansiBrightBlue#528bff
  • terminal.ansiBrightCyan#84efff
  • terminal.ansiBrightGreen#6fe25a
  • terminal.ansiBrightMagenta#7e0097
  • terminal.ansiBrightRed#f44747
  • terminal.ansiBrightWhite#d7dae0
  • terminal.ansiBrightYellow#e5c07b
  • terminal.ansiCyan#56e8ff
  • terminal.ansiGreen#6fe25a
  • terminal.ansiMagenta#b438da
  • terminal.ansiRed#dd6094
  • terminal.ansiWhite#d7dae0
  • terminal.ansiYellow#e4b050
  • terminal.foreground#ffffff
  • titleBar.activeBackground#181818
  • titleBar.activeForeground#9da5b4
  • titleBar.inactiveBackground#181818
  • titleBar.inactiveForeground#6B717D

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
text.html.derivative#e7e7e7
comment, string.comment#676f7d
string, string.template#ffbb5c
constant.numeric#eba3ff
string.embedded.begin, string.embedded.end, punctuation.definition.template-expression, punctuation.section.embedded#c678dd
punctuation.section.embedded.begin.js, punctuation.section.embedded.end.js, punctuation.section.embedded.begin.erb, punctuation.section.embedded.end.erb, source.elixir.embedded, punctuation.separator, punctuation.accessor, meta.brace#ffffffcb
constant.language#84efff
constant.character, constant.other#84efff
variable.language#dd6094
keyword, keyword.operator.logical, keyword.operator.constructor#dd6094
keyword.operator#dd6094
storage#dd6094
storage.type#84efff
entity.name.class, entity.name.module, entity.name.type, storage.identifier, support.class#61afef
variable.other.object, variable.other.constant, variable.other.global, variable.other.readwrite.class, variable.other.readwrite.instance, variable.other.readwrite.batchfile, variable.readwrite, variable.readwrite.other.block#61afef
variable.other, variable.other.property, variable.other.block#ffffffcb
entity.other.inherited-class#6fe25a
storage.modifier.import, storage.modifier.package#61afef
entity.name.function, support.function#6fe25a
variable.parameter, entity.name.variable.parameter, parameter.variable#d19a66italic
entity.name.function-call#ffffffcb
function.support.builtin, function.support.core#6fe25a
entity.name.tag, entity.name.tag.class.js#dd6094
entity.name.tag.class, entity.name.tag.id#84efff
entity.other.attribute-name#6fe25a
support.constant#84efff
support.type, support.variable#84efff
support.dictionary.json#84efff
support.type.property-name.css, support.type.property-name.scss, support.type.property-name.less, support.type.property-name.sass#ffffffcb
entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-class.scss, entity.other.attribute-name.pseudo-class.less, entity.other.attribute-name.pseudo-class.sass, entity.other.attribute-name.pseudo-element.css, entity.other.attribute-name.pseudo-element.scss, entity.other.attribute-name.pseudo-element.less, entity.other.attribute-name.pseudo-element.sass#84efff
support.constant.css, support.constant.scss, support.constant.less, support.constant.sass#6fe25a
variable.css, variable.scss, variable.less, variable.sass#84efff
variable.css.string, variable.scss.string, variable.less.string, variable.sass.string#e5c07b
unit.css, unit.scss, unit.less, unit.sass#c678dd
function.css, function.scss, function.less, function.sass#84efff
support.other.variable
invalid#F8F8F0
invalid.deprecated#F8F8F0
support.type.property-name.json#84efff
string.detected-link#61afef
meta.diff, meta.diff.header#75715E
markup.deleted#dd6094
markup.inserted#6fe25a
markup.changed#e5c07b
constant.numeric.line-number.find-in-files - match#84efffA0
entity.name.filename.find-in-files#e5c07b
markup.italic, markup.italic.markdownitalic
punctuation.definition.italic.markdown, punctuation.definition.bold.markdown, punctuation.definition.heading.markdown#676f7d
punctuation.definition.italic.markdownitalic
markup.underline.link.markdown#61afef
markup.bold.markdownbold
markup.heading.markdown#dd6094bold
markup.quote.markdown#6fe25a
meta.separator.markdown#c678ddbold
markup.raw.inline.markdown, markup.raw.block.markdown#84efff
punctuation.definition.list_item.markdown#ffffffbold