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.activeBorder#FFB199
  • activityBar.background#102237
  • activityBar.foreground#6EC6FF
  • activityBarBadge.background#FFB199
  • activityBarBadge.foreground#0F1B3A
  • badge.background#FFB199
  • badge.foreground#0F1B3A
  • button.background#1A2E4F
  • button.foreground#FFFFFF
  • button.hoverBackground#2B3F6A
  • dropdown.background#102237
  • dropdown.border#1A2E4F
  • dropdown.foreground#E6F0FF
  • editor.background#0F1B3A
  • editor.findMatchBackground#6EC6FF44
  • editor.findMatchHighlightBackground#6EC6FF22
  • editor.foreground#E6F0FF
  • editor.lineHighlightBackground#1A2E4F80
  • editor.lineHighlightBorder#1A2E4FCC
  • editor.selectionBackground#6EC6FF33
  • editor.selectionHighlightBackground#6EC6FF22
  • editorBracketMatch.background#6EC6FF33
  • editorBracketMatch.border#6EC6FF
  • editorCursor.foreground#FFB199
  • editorGroupHeader.tabsBackground#0F1B3A
  • editorIndentGuide.activeBackground#2B3F6A88
  • editorIndentGuide.background#2B3F6A44
  • editorLineNumber.activeForeground#FFB199
  • editorLineNumber.foreground#4A607F
  • editorWhitespace.foreground#2B3F6A
  • focusBorder#FFB199
  • gitDecoration.conflictingResourceForeground#FFCF74
  • gitDecoration.deletedResourceForeground#FF8A80
  • gitDecoration.modifiedResourceForeground#6EC6FF
  • gitDecoration.untrackedResourceForeground#A8E6CF
  • input.background#102237
  • input.border#1A2E4F
  • input.foreground#E6F0FF
  • input.placeholderForeground#4A607F
  • inputOption.activeBorder#FFB199
  • list.activeSelectionBackground#1A2E4F
  • list.activeSelectionForeground#FFFFFF
  • list.focusBackground#1A2E4F
  • list.highlightForeground#FFB199
  • list.hoverBackground#1A2E4F66
  • minimap.background#0F1B3A
  • minimapSlider.activeBackground#6EC6FF66
  • minimapSlider.background#6EC6FF22
  • minimapSlider.hoverBackground#6EC6FF44
  • panel.background#0F1B3A
  • panel.border#1A2E4F
  • panelTitle.activeBorder#FFB199
  • panelTitle.activeForeground#FFB199
  • panelTitle.inactiveForeground#C0D8FF
  • scrollbar.shadow#00000044
  • scrollbarSlider.activeBackground#FFB19988
  • scrollbarSlider.background#4A607F44
  • scrollbarSlider.hoverBackground#4A607F88
  • sideBar.background#102237
  • sideBar.foreground#C0D8FF
  • sideBarSectionHeader.background#102237
  • sideBarSectionHeader.foreground#FFB199
  • sideBarTitle.foreground#FFB199
  • statusBar.background#1A2E4F
  • statusBar.debuggingBackground#FFB199
  • statusBar.foreground#E6F0FF
  • statusBar.noFolderBackground#102237
  • statusBarItem.hoverBackground#2B3F6A
  • tab.activeBackground#1A2E4F
  • tab.activeBorder#FFB199
  • tab.activeForeground#FFFFFF
  • tab.border#0F1B3A
  • tab.inactiveBackground#102237
  • tab.inactiveForeground#C0D8FF
  • terminal.ansiBlue#6EC6FF
  • terminal.ansiBrightBlue#9AD9FF
  • terminal.ansiBrightCyan#B7F5D4
  • terminal.ansiBrightGreen#BCED9F
  • terminal.ansiBrightMagenta#E0B0FF
  • terminal.ansiBrightRed#FFABAB
  • terminal.ansiBrightYellow#FFE5A0
  • terminal.ansiCyan#A8E6CF
  • terminal.ansiGreen#A8E6CF
  • terminal.ansiMagenta#D8A1FF
  • terminal.ansiRed#FF8A80
  • terminal.ansiYellow#FFCF74
  • terminal.background#0F1B3A
  • terminal.foreground#E6F0FF
  • titleBar.activeBackground#102237
  • titleBar.activeForeground#E6F0FF
  • titleBar.inactiveBackground#0F1B3A
  • titleBar.inactiveForeground#C0D8FF

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#555E6Eitalic
string, string.quoted, string.template#A8E6CF
keyword, storage.type, storage.modifier#FFB199bold
keyword.operator, punctuation.accessor#6EC6FF
variable, variable.other#E6F0FF
variable.parameter#C0D8FFitalic
entity.name.function, support.function#6EC6FF
meta.function-call#C0D8FF
entity.name.class, entity.name.type.class, support.class#FFB199bold
entity.name.type, support.type#6EC6FF
entity.name.type.interface#A8E6CFitalic
constant.numeric#FFCF74
constant, constant.language, constant.character#FFCF74
constant.language.boolean#FFCF74bold
variable.other.property, support.variable.property#C0D8FF
meta.object-literal.key#6EC6FF
entity.name.tag, punctuation.definition.tag#FFB199
entity.other.attribute-name#D8A1FFitalic
punctuation, meta.brace#6EC6FF
string.regexp#FF8A80
constant.character.escape#D8A1FF
meta.decorator, punctuation.decorator#FFCF74
invalid, invalid.illegal#FF8A80strikethrough
markup.heading, entity.name.section#FFB199bold
markup.bold#FFCF74bold
markup.italic#D8A1FFitalic
markup.underline.link#A8E6CF
markup.inline.raw, markup.fenced_code#A8E6CF
support.type.property-name.json#FFB199
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#FFCF74
support.type.property-name.css#6EC6FF
support.constant.property-value.css#A8E6CF