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#0d0d10
  • activityBar.foreground#ffffff
  • activityBar.inactiveForeground#414141
  • activityBarBadge.background#62A8FE
  • activityBarBadge.foreground#000000
  • badge.background#8974FF
  • badge.foreground#ffffff
  • button.background#62FECA
  • button.foreground#242427
  • button.hoverBackground#acffe3
  • dropdown.background#080808
  • dropdown.border#434343
  • dropdown.foreground#62A8FE
  • editor.background#18181C
  • editor.findMatchBackground#FEE462
  • editor.findMatchHighlightBackground#FEE46280
  • editor.foreground#e0e0e0
  • editor.lineHighlightBackground#0a0a0a
  • editor.selectionBackground#0b0a1cab
  • editor.selectionHighlightBackground#37548086
  • editor.wordHighlightBackground#37548086
  • editorCursor.foreground#62FECA
  • editorError.foreground#FE6262
  • editorGroupHeader.tabsBackground#18181C
  • editorIndentGuide.activeBackground1#191818be
  • editorIndentGuide.background1#404040b0
  • editorInfo.foreground#62FECA
  • editorLineNumber.activeForeground#62FECA
  • editorLineNumber.foreground#666666
  • editorWarning.foreground#fec062
  • editorWhitespace.foreground#404040
  • input.background#2d2d30
  • input.border#555555
  • input.foreground#e0e0e0
  • input.placeholderForeground#888888
  • list.activeSelectionBackground#1b1b1d
  • list.activeSelectionForeground#62FECA
  • list.hoverBackground#343635
  • list.inactiveSelectionBackground#19191a
  • panel.background#18181C
  • panel.border#121212
  • panelTitle.activeForeground#62FECA
  • panelTitle.inactiveForeground#888888
  • peekView.border#62FECA
  • peekViewEditor.background#18181C
  • peekViewResult.background#1f1f21
  • peekViewTitle.background#62FECA
  • scrollbar.shadow#00000050
  • scrollbarSlider.activeBackground#777777
  • scrollbarSlider.background#55555580
  • scrollbarSlider.hoverBackground#666666
  • sideBar.background#18181C
  • sideBar.border#7A7A82
  • sideBar.foreground#e0e0e0
  • sideBarSectionHeader.background#2f2f2f
  • sideBarSectionHeader.foreground#ffffff
  • statusBar.background#18181C
  • statusBar.debuggingBackground#86d9c2
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#e0e0e0
  • statusBar.noFolderBackground#000000
  • statusBarItem.hoverBackground#454549
  • tab.activeBackground#18181C
  • tab.activeForeground#ffffff
  • tab.border#7A7A82
  • tab.hoverBackground#7A7A82
  • tab.inactiveBackground#18181C
  • tab.inactiveForeground#888888
  • terminal.ansiBlack#18181C
  • terminal.ansiBlue#62A8FE
  • terminal.ansiBrightBlue#62A8FE
  • terminal.ansiBrightCyan#62FECA
  • terminal.ansiBrightGreen#62fe9b
  • terminal.ansiBrightMagenta#FE62B5
  • terminal.ansiBrightRed#FE6262
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#FEE462
  • terminal.ansiCyan#62FECA
  • terminal.ansiGreen#1aff90
  • terminal.ansiMagenta#FE62B5
  • terminal.ansiRed#FE6262
  • terminal.ansiWhite#e0e0e0
  • terminal.ansiYellow#FEE462
  • terminal.background#18181C
  • terminal.foreground#e0e0e0
  • titleBar.activeBackground#18181C
  • titleBar.activeForeground#e0e0e0
  • titleBar.inactiveBackground#18181C
  • titleBar.inactiveForeground#888888

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#ffffffitalic
variable, string constant.other.placeholder#e0e0e0
constant.other.color#ffffff
invalid, invalid.illegal#FE6262
keyword, storage.type, storage.modifier#62A8FE
keyword.control, constant.other.color, punctuation, meta.tag, 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#62A8FE
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter#62FECA
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method#FEE462
meta.block variable.other#FE6262
support.other.variable, string.other.link#FE6262
constant.numeric, constant.language, support.constant, constant.character, constant.escape, variable.parameter, keyword.other.unit, keyword.other#62FECA
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#1aff90
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#62FECA
support.type#B2CCD6
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#B2CCD6
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#FE6262
variable.language#FE6262italic
entity.name.method.js#8974FFitalic
meta.class-method.js entity.name.function.js, variable.function.constructor#62A8FE
entity.other.attribute-name#FE62B5
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name#ff36c3italic
entity.other.attribute-name.class#62feb3
source.sass keyword.control#8974FF
markup.inserted#62feb8
markup.deleted#FE6262
markup.changed#ff74ff
string.regexp#62FECA
constant.character.escape#62FECA
*url*, *link*, *uri*underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#8974FFitalic
source.js constant.other.object.key.js string.unquoted.label.js#FE6262italic
source.json meta.structure.dictionary.json support.type.property-name.json#8974FF
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#62fefb
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#62f9fe
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#FE6262
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#62fe81
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#8974FF
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#FE62B5
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#8974FF
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#62feba
text.html.markdown, punctuation.definition.list_item.markdown#e0e0e0
text.html.markdown markup.inline.raw.markdown#8974FF
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#62fe81
markup.italic#62fecfitalic
markup.bold, markup.bold string#62fecfbold
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#62fecfbold
markup.underline#62fecfunderline
markup.quote punctuation.definition.blockquote.markdown#567b97
markup.quoteitalic
string.other.link.title.markdown#8974FF
string.other.link.description.title.markdown#8974FF
constant.other.reference.link.markdown#62cffe
markup.raw.block#8974FF
markup.raw.block.fenced.markdown#00000050
punctuation.definition.fenced.markdown#00000050
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end#e0e0e0
variable.language.fenced.markdown#65737e
meta.separator#65737ebold
markup.table#e0e0e0
ThemeDatabase All Themes by enes ozturk - VS Code Theme