Skip to main content
CodingTheme

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#363d4a
  • activityBarBadge.background#5993c5
  • banner.background#363d4a
  • button.background#5993c5
  • button.hoverBackground#4d7fab
  • dropdown.background#292f39
  • dropdown.listBackground#363d4a
  • editor.background#252b34
  • editor.foreground#cdcfd2
  • editor.lineHighlightBackground#ffffff12
  • editor.selectionHighlightBackground#ffffff12
  • editorBracketHighlight.foreground1#abc9ff
  • editorBracketHighlight.foreground2#ffe3ab
  • editorBracketHighlight.foreground3#aeffab
  • editorBracketHighlight.foreground4#ffabff
  • editorBracketHighlight.foreground5#ffabae
  • editorBracketHighlight.foreground6#abfff9
  • editorCursor.foreground#ffffff
  • editorError.foreground#ff786b
  • editorGroupHeader.noTabsBackground#292f39
  • editorGroupHeader.tabsBackground#292f39
  • editorWarning.foreground#f5ff6b
  • errorForeground#ff786b
  • input.background#292f39
  • list.errorForeground#ff786b
  • list.hoverBackground#363d4a
  • list.warningForeground#f5ff6b
  • notifications.background#292f39
  • panel.background#363d4a
  • problemsErrorIcon.foreground#ff786b
  • problemsWarningIcon.foreground#f5ff6b
  • sideBar.background#292f39
  • sideBarTitle.foreground#bbbbbb
  • statusBar.background#292f39
  • statusBar.debuggingBackground#364359
  • tab.activeBackground#363d4a
  • tab.inactiveBackground#292f39
  • titleBar.activeBackground#363d4a
  • titleBar.inactiveBackground#363d4a
  • toolbar.hoverBackground#292f39

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#cdcfd280
variable, meta.function-call.arguments, meta.indexed-name, meta.attribute, entity.name.variable#cdcfd2
variable.other.property, variable.other.object.property#bce0ff
invalid, invalid.illegal#ff786b
keyword, keyword.control, storage.type, storage.modifier, constant.language, support.constant, keyword.other.unit, keyword.other, keyword.operator.wordlike#ff7085
constant.numeric#a1ffe0
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, keyword.operator#abc9ff
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method, support.function.any-method#57b3ff
string, punctuation.definition.string, punctuation.support.type.property-name, support.type.property-name, storage.type.string, constant.other.symbol, constant.other.key, constant.character, constant.escape, markup.heading, markup.inserted.git_gutter, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js#ffeda1
entity.name, entity.other.inherited-class, keyword.type, meta.function.gdscript, entity.name.type.class, entity.name.type.enum, entity.name.type.interface, meta.void#42ffc2
entity.name.class.builtin, support.type, support.class#8fffdb
support.type#B2CCD6
string.regexp#89DDFF
*url*, *link*, *uri*underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#82AAFFitalic
comment.keywords.warnings#b89c7a
comment.keywords.critical#c45959
comment.keywords.notices#8fab82
keyword.control.flow#ff8ccc
entity.name.function.gdscript#66e6ff
entity.name.function.decorator.gdscript#ffb373
constant.language.gdscript#e7e7e9
meta.global-method, meta.keyword.language.gdscript, meta.function-global.gdscript#a3a3f5
meta.literal.nodepath.gdscript constant.character.escape.gdscript, meta.literal.nodepath.gdscript keyword.control.flow.gdscript, extra.keyword.language.gdscript#63c259
comment.line.double-number-sign.gdscript#7e94aa

Shiki preview

TypeScript sample highlighted with this variant's colors and tokenColors.

Loading...