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#C0C0C0
  • activityBar.border#808080
  • activityBar.foreground#000000
  • activityBar.inactiveForeground#00000066
  • activityBarBadge.background#000080
  • activityBarBadge.foreground#FFFFFF
  • activityBarTop.foreground#000000
  • badge.background#000080
  • badge.foreground#FFFFFF
  • button.background#C0C0C0
  • button.border#808080
  • button.foreground#000000
  • button.hoverBackground#FFFFFF
  • diffEditor.insertedLineBackground#0080001A
  • diffEditor.insertedTextBackground#00800033
  • diffEditor.removedLineBackground#CC00001A
  • diffEditor.removedTextBackground#CC000033
  • dropdown.background#C0C0C0
  • dropdown.border#808080
  • dropdown.foreground#000000
  • editor.background#FFFFFF
  • editor.foreground#000000
  • editor.lineHighlightBackground#0000801A
  • editor.selectionBackground#00008033
  • editor.selectionForeground#FFFFFF
  • editorCursor.foreground#000000
  • editorGroup.border#808080
  • editorGroup.dropBackground#0000801A
  • editorLineNumber.activeForeground#000080
  • editorLineNumber.foreground#808080
  • editorWhitespace.foreground#C0C0C0
  • focusBorder#000080
  • gitDecoration.addedResourceForeground#008000
  • gitDecoration.conflictingResourceForeground#808000
  • gitDecoration.deletedResourceForeground#CC0000
  • gitDecoration.ignoredResourceForeground#808080
  • gitDecoration.modifiedResourceForeground#000080
  • gitDecoration.untrackedResourceForeground#008000
  • icon.foreground#000000
  • input.background#FFFFFF
  • input.border#808080
  • input.foreground#000000
  • input.placeholderForeground#808080
  • list.activeSelectionBackground#000080DD
  • list.activeSelectionForeground#FFFFFF
  • list.dropBackground#0000801A
  • list.focusBackground#000080
  • list.focusForeground#FFFFFF
  • list.highlightForeground#65abf6
  • list.hoverBackground#0000801A
  • list.inactiveSelectionBackground#DADADA
  • list.inactiveSelectionForeground#000000
  • menu.background#C0C0C0
  • menu.border#808080
  • menu.foreground#000000
  • menu.selectionBackground#000080
  • menu.selectionForeground#FFFFFF
  • panel.background#C0C0C0
  • panel.border#808080
  • panelTitle.activeForeground#000000
  • panelTitle.inactiveForeground#808080
  • scrollbar.shadow#808080
  • scrollbarSlider.activeBackground#0000807F
  • scrollbarSlider.background#C0C0C07F
  • scrollbarSlider.hoverBackground#0000804C
  • sideBar.background#C0C0C0
  • sideBar.border#808080
  • sideBar.foreground#000000
  • sideBarSectionHeader.background#000080
  • sideBarSectionHeader.foreground#FFFFFF
  • sideBarTitle.foreground#000000
  • statusBar.background#C0C0C0
  • statusBar.border#808080
  • statusBar.foreground#000000
  • tab.activeBackground#E5E5E5
  • tab.activeBorder#FFFFFF
  • tab.activeForeground#000000
  • tab.activeModifiedBorder#808000
  • tab.border#808080
  • tab.hoverBackground#000080
  • tab.hoverForeground#FFFFFF
  • tab.inactiveBackground#808080
  • tab.inactiveForeground#000000
  • tab.inactiveModifiedBorder#808000
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#000080
  • terminal.ansiBrightBlack#808080
  • terminal.ansiBrightBlue#0000FF
  • terminal.ansiBrightCyan#00FFFF
  • terminal.ansiBrightGreen#00FF00
  • terminal.ansiBrightMagenta#FF00FF
  • terminal.ansiBrightRed#FF0000
  • terminal.ansiBrightWhite#FFFFFF
  • terminal.ansiBrightYellow#FFFF00
  • terminal.ansiCyan#008080
  • terminal.ansiGreen#008000
  • terminal.ansiMagenta#800080
  • terminal.ansiRed#800000
  • terminal.ansiWhite#C0C0C0
  • terminal.ansiYellow#808000
  • terminal.background#FFFFFF
  • terminal.foreground#000000
  • titleBar.activeBackground#000080
  • titleBar.activeForeground#FFFFFF
  • titleBar.border#808080
  • titleBar.inactiveBackground#808080
  • titleBar.inactiveForeground#C0C0C0
  • toolbar.hoverBackground#0000801A
  • toolbar.hoverOutline#000080
  • window.activeBorder#000080
  • window.inactiveBorder#808080

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#008000
string, constant.other.symbol#800000
constant.numeric, constant.language, constant.character, constant.other#FF0000
keyword, storage.type, storage.modifier#000080
entity.name.function, support.function#800080
variable, support.variable, entity.name.variable#000000
entity.name.type, support.type, support.class#000080
markup.heading, entity.name.section#000080bold
markup.italicitalic
markup.boldbold
markup.inline.raw, markup.fenced_code.block#800000
variable.parameter#800080italic
variable.language#000080bold
meta.object-literal.key#008080
invalid.illegal#FF0000bold
keyword.operator#FF0000
entity.name.tag, entity.name.tag.html, entity.name.tag.xml#800000
entity.other.attribute-name, entity.other.attribute-name.html#008080
support.type.property-name, support.type.property-name.css, support.type.property-name.less, support.type.property-name.scss#000080
string.regexp, constant.regexp#800000
meta.decorator, entity.name.function.decorator, punctuation.decorator#800080
entity.name.namespace, entity.name.type.namespace, entity.name.module#008000

Shiki preview

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

Loading...