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#FF9F40
  • activityBar.background#81C3EB
  • activityBar.foreground#2B3B55
  • activityBarBadge.background#FF9F40
  • activityBarBadge.foreground#2B3B55
  • badge.background#FF9F40
  • badge.foreground#2B3B55
  • button.background#68B74E
  • button.foreground#2B3B55
  • button.hoverBackground#68B74E80
  • dropdown.background#81C3EB
  • dropdown.border#2B3B55
  • dropdown.foreground#2B3B55
  • editor.background#F0F8FF
  • editor.findMatchBackground#FF9F4050
  • editor.findMatchHighlightBackground#FF9F4030
  • editor.foreground#2B3B55
  • editor.lineHighlightBackground#FF9F4020
  • editor.lineHighlightBorder#FF9F4080
  • editor.selectionBackground#68B74E40
  • editor.selectionHighlightBackground#68B74E20
  • editorBracketMatch.background#FF9F4030
  • editorBracketMatch.border#FF9F40
  • editorCursor.foreground#FF9F40
  • editorGroupHeader.tabsBackground#E3F2FD
  • editorIndentGuide.activeBackground#FF9F4070
  • editorIndentGuide.background#68B74E30
  • editorLineNumber.activeForeground#FF9F40
  • editorLineNumber.foreground#81C3EB
  • editorWhitespace.foreground#68B74E80
  • focusBorder#FF9F40
  • gitDecoration.conflictingResourceForeground#FF9F40
  • gitDecoration.deletedResourceForeground#FF6F61
  • gitDecoration.modifiedResourceForeground#68B74E
  • gitDecoration.untrackedResourceForeground#D96CBE
  • input.background#81C3EB
  • input.border#2B3B55
  • input.foreground#2B3B55
  • input.placeholderForeground#68B74E
  • inputOption.activeBorder#FF9F40
  • list.activeSelectionBackground#FF9F4030
  • list.activeSelectionForeground#2B3B55
  • list.focusBackground#FF9F4040
  • list.highlightForeground#FF9F40
  • list.hoverBackground#FF9F4020
  • minimap.background#F0F8FF
  • minimapSlider.activeBackground#FF9F4066
  • minimapSlider.background#FF9F4022
  • minimapSlider.hoverBackground#FF9F4044
  • panel.background#E3F2FD
  • panel.border#81C3EB
  • panelTitle.activeBorder#FF9F40
  • panelTitle.activeForeground#FF9F40
  • panelTitle.inactiveForeground#2B3B55
  • scrollbar.shadow#00000044
  • scrollbarSlider.activeBackground#FF9F4080
  • scrollbarSlider.background#68B74E30
  • scrollbarSlider.hoverBackground#68B74E60
  • sideBar.background#E3F2FD
  • sideBar.foreground#2B3B55
  • sideBarSectionHeader.background#81C3EB
  • sideBarSectionHeader.foreground#FF9F40
  • sideBarTitle.foreground#2B3B55
  • statusBar.background#68B74E
  • statusBar.debuggingBackground#FF9F40
  • statusBar.foreground#2B3B55
  • statusBar.noFolderBackground#81C3EB
  • statusBarItem.hoverBackground#FF9F4080
  • tab.activeBackground#F0F8FF
  • tab.activeBorder#FF9F40
  • tab.activeForeground#2B3B55
  • tab.border#2B3B55
  • tab.inactiveBackground#E3F2FD
  • tab.inactiveForeground#2B3B55
  • terminal.ansiBlue#2B3B55
  • terminal.ansiBrightBlue#81C3EB
  • terminal.ansiBrightCyan#A5D6A7
  • terminal.ansiBrightGreen#C5E1A5
  • terminal.ansiBrightMagenta#E1BEE7
  • terminal.ansiBrightRed#FF8A80
  • terminal.ansiBrightYellow#FFCC80
  • terminal.ansiCyan#68B74E
  • terminal.ansiGreen#68B74E
  • terminal.ansiMagenta#D96CBE
  • terminal.ansiRed#FF6F61
  • terminal.ansiYellow#FF9F40
  • terminal.background#F0F8FF
  • terminal.foreground#2B3B55
  • titleBar.activeBackground#81C3EB
  • titleBar.activeForeground#2B3B55
  • titleBar.inactiveBackground#E3F2FD
  • titleBar.inactiveForeground#2B3B55

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#A0A8B5italic
string, string.quoted, string.template#D96CBE
keyword, storage.type, storage.modifier#FF9F40bold
keyword.operator, punctuation.accessor#68B74E
variable, variable.other#2B3B55
variable.parameter#68B74Eitalic
entity.name.function, support.function#81C3EB
meta.function-call#FF9F40
entity.name.class, entity.name.type.class, support.class#68B74Ebold
entity.name.type, support.type#2B3B55
entity.name.type.interface#D96CBEitalic
constant.numeric#FF9F40
constant, constant.language, constant.character#FF9F40
constant.language.boolean#D96CBEbold
variable.other.property, support.variable.property#68B74E
meta.object-literal.key#FF9F40
entity.name.tag, punctuation.definition.tag#2B3B55
entity.other.attribute-name#D96CBEitalic
punctuation, meta.brace#2B3B55
string.regexp#D96CBE
constant.character.escape#FF9F40
meta.decorator, punctuation.decorator#81C3EB
invalid, invalid.illegal#FF6F61strikethrough
markup.heading, entity.name.section#FF9F40bold
markup.bold#FF9F40bold
markup.italic#D96CBEitalic
markup.underline.link#81C3EB
markup.inline.raw, markup.fenced_code#68B74E
support.type.property-name.json#FF9F40
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#FF9F40
support.type.property-name.css#68B74E
support.constant.property-value.css#D96CBE