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#ffffff
  • activityBar.border#ffffff
  • activityBar.foreground#000000
  • activityBarBadge.background#d73a49
  • button.background#d73a49
  • button.foreground#ffffff
  • dropdown.background#ffffff
  • dropdown.border#b2b2b2
  • dropdown.listBackground#ffffff
  • editor.background#ffffff
  • editor.foreground#000000
  • editor.lineHighlightBackground#fffbdf
  • editor.lineHighlightBorder#fffbdf
  • editor.selectionBackground#fed442
  • editorGroup.border#ffffff
  • editorGroupHeader.noTabsBackground#ffffff
  • editorGroupHeader.tabsBackground#ffffff
  • editorGroupHeader.tabsBorder#ffffff
  • editorLineNumber.activeForeground#000000
  • editorLineNumber.foreground#babbbc
  • editorSuggestWidget.highlightForeground#d73a49
  • editorSuggestWidget.selectedBackground#f0f0f0
  • editorWidget.background#ffffff
  • editorWidget.border#000000
  • focusBorder#ffffff00
  • foreground#000000
  • input.background#ffffff
  • input.border#b2b2b2
  • inputOption.activeBorder#000000
  • inputOption.activeForeground#000000
  • list.activeSelectionBackground#eeeeee
  • list.activeSelectionForeground#d73a49
  • list.focusBackground#eeeeee
  • list.focusForeground#d73a49
  • list.highlightForeground#d73a49
  • list.hoverBackground#eeeeee
  • list.hoverForeground#d73a49
  • list.inactiveSelectionBackground#eeeeee
  • list.inactiveSelectionForeground#d73a49
  • notificationCenter.border#ffffff
  • notificationCenterHeader.background#ffffff
  • notifications.background#ffffff
  • notifications.border#ffffff
  • notificationToast.border#ffffff
  • panel.border#d73a49
  • scrollbar.shadow#ffffff
  • sideBar.background#ffffff
  • sideBar.border#ffffff
  • sideBar.foreground#000000
  • sideBarSectionHeader.background#ffffff
  • statusBar.background#ffffff
  • statusBar.border#ffffff
  • statusBar.debuggingBackground#ffffff
  • statusBar.debuggingForeground#000000
  • statusBar.foreground#000000
  • statusBar.noFolderBackground#ffffff
  • statusBar.noFolderForeground#000000
  • tab.activeBackground#ffffff
  • tab.activeBorder#d73a49
  • tab.border#ffffff
  • tab.inactiveBackground#ffffff
  • titleBar.activeBackground#ffffff
  • titleBar.activeForeground#000000
  • titleBar.border#ffffff
  • titleBar.inactiveBackground#ffffff
  • titleBar.inactiveForeground#000000

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment, string.comment#6a737d
constant, entity.name.constant, variable.other.constant, variable.language#005cc5
keyword.operator.symbole, keyword.other.mark#000000
entity, entity.name#6f42c1
variable.parameter.function#000000
entity.name.tag#22863a
keyword#d73a49
storage, storage.type#d73a49
storage.modifier.package, storage.modifier.import, storage.type.java#000000
string, punctuation.definition.string, string punctuation.section.embedded source#032f62
string.unquoted.import.ada
support#005cc5
meta.property-name#005cc5
variable#e36209
variable.other#000000
invalid.broken#b31d28bold italic underline
invalid.deprecated#b31d28bold italic underline
invalid.illegal#b31d28italic underline
carriage-return#d73a49italic underline
invalid.unimplemented#b31d28bold italic underline
message.error#b31d28
string source#000000
string variable#005cc5
source.regexp, string.regexp#032f62
string.regexp.character-class, string.regexp constant.character.escape, string.regexp source.ruby.embedded, string.regexp string.regexp.arbitrary-repitition#032f62
string.regexp constant.character.escape#22863abold
support.constant#005cc5
support.variable#005cc5
meta.module-reference#005cc5
markup.list#735c0f
markup.heading, markup.heading entity.name#005cc5bold
markup.quote#22863a
markup.italic#000000italic
markup.bold#000000bold
markup.raw#005cc5
markup.deleted, meta.diff.header.from-file, punctuation.definition.deleted#b31d28
markup.inserted, meta.diff.header.to-file, punctuation.definition.inserted#22863a
markup.changed, punctuation.definition.changed#e36209
markup.ignored, markup.untracked#005cc5
meta.diff.range#6f42c1bold
meta.diff.header#005cc5
meta.separator#005cc5bold
meta.output#005cc5
brackethighlighter.tag, brackethighlighter.curly, brackethighlighter.round, brackethighlighter.square, brackethighlighter.angle, brackethighlighter.quote#586069
brackethighlighter.unmatched#b31d28
sublimelinter.mark.error#b31d28
sublimelinter.mark.warning#e36209
sublimelinter.gutter-mark#959da5
constant.other.reference.link, string.other.link#032f62underline
meta.function-call support.function, meta.function-call entity.name.function#005cc5
keyword.operator#000000

Shiki preview

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

Loading...