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#21252B
  • activityBar.foreground#D7DAE0
  • activityBarBadge.background#4D8FFF
  • activityBarBadge.foreground#F8FAFD
  • button.background#4D8FFF
  • editor.background#282C34
  • editor.findMatchBackground#42557B
  • editor.findMatchHighlightBackground#314365
  • editor.foreground#FDF6E3
  • editor.lineHighlightBackground#383E4A
  • editor.selectionBackground#1C5F6B
  • editorCursor.foreground#FDF6E3
  • editorGroup.border#30434C
  • editorGroupHeader.tabsBackground#21252B
  • editorIndentGuide.background#3B4048
  • editorLineNumber.foreground#8F9CA0
  • editorWhitespace.foreground#4D5661
  • editorWidget.background#21252B
  • input.background#1E2227
  • list.activeSelectionBackground#2E3540
  • list.focusBackground#383E4A
  • list.highlightForeground#C5C5C5
  • list.hoverBackground#2C313A
  • list.inactiveSelectionBackground#30434C
  • notifications.background#21252B
  • sideBar.background#21252B
  • sideBarSectionHeader.background#282C34
  • statusBar.background#21252B
  • statusBar.foreground#9DA5B4
  • statusBarItem.hoverBackground#2E3540
  • tab.activeBackground#1C5F6B
  • tab.inactiveBackground#21252B
  • terminal.ansiBlue#61AFEF
  • terminal.ansiBrightBlue#4D8FFF
  • terminal.ansiBrightCyan#56B6C2
  • terminal.ansiBrightGreen#98C379
  • terminal.ansiBrightMagenta#C678DD
  • terminal.ansiBrightRed#E06C75
  • terminal.ansiBrightYellow#E5C07B
  • terminal.ansiCyan#56B6C2
  • terminal.ansiGreen#98C379
  • terminal.ansiMagenta#C678DD
  • terminal.ansiRed#E06C75
  • terminal.ansiYellow#D19A66
  • titleBar.activeBackground#282C34
  • titleBar.activeForeground#9DA5B4

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, string.comment#7F8C98italic
string, string.template#8CC9AC
constant.numeric#D0826D
string.embedded.begin, string.embedded.end, punctuation.definition.template-expression, punctuation.section.embedded#C678DD
constant.language#56B6C2
constant.character, constant.other#56B6C2
keyword, keyword.operator.logical, keyword.operator.constructor, storage, keyword.operator#E06C75
storage.type#C678DD
variable.language#E06C75
variable.other, variable.other.property, variable.other.block, variable.other.module#FDF6E3
variable.object.property, variable.other.object.property, variable.other.class.property, variable.other.constant.object.property, variable.other.constant.property, variable.other.constant.object.property, variable.other.readwrite.class.member, variable.other.member, variable.other.readwrite.member, variable.other.readwrite.batchfile, variable.readwrite, variable.readwrite.other.block, variable.other.readwrite, variable.parameter.function.language.special.self#FDF6E3
variable.parameter, entity.name.variable.parameter, parameter.variable#D19A66italic
meta.function-call.arguments variable.parameter, meta.function-call.arguments entity.name.variable.parameter, meta.function-call.arguments parameter.variable#D19A66italic
entity.name.class, entity.name.module, entity.name.type, storage.identifier, support.class#FC804E
entity.other.inherited-class#98C379underline
entity.name.function, support.function#F7D065
entity.name.function-call#FABD2F
function.support.builtin, function.support.core#FABD2F
entity.name.function.decorator, meta.function.decorator.python#E5C07B
punctuation.definition.decorator#FABD2F
storage.modifier.import, storage.modifier.package#C678DD
entity.name.tag, entity.name.tag.class.js#E06C75
entity.name.tag.class, entity.name.tag.id#E5C07B
entity.other.attribute-name#98C379
support.constant#56B6C2
support.type, support.variable#56B6C2
invalid#FDF6E3underline italic
invalid.deprecated#FDF6E3underline italic
meta.member.access, punctuation.accessor, punctuation.separator.property, punctuation.separator.dot-access, punctuation.separator.pointer-access#FDF6E3
meta.function-call.member, support.function.mutator, punctuation.accessor.function#FDF6E3
punctuation.separator, punctuation.section#FDF6E3
markup.italic, markup.italic.markdownitalic
punctuation.definition.italic.markdown, punctuation.definition.bold.markdown, punctuation.definition.heading.markdown#7F8C98
punctuation.definition.italic.markdownitalic
markup.underline.link.markdown#61AFEF
markup.bold.markdownbold
markup.heading.markdown#E06C75bold
markup.quote.markdown#98C379
meta.separator.markdown#C678DDbold
markup.raw.inline.markdown, markup.raw.block.markdown#56B6C2
punctuation.definition.list_item.markdown#FFFFFFbold