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—