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#2A9DFF
  • activityBar.background#E8F2FF
  • activityBar.foreground#2A9DFF
  • activityBarBadge.background#2A9DFF
  • activityBarBadge.foreground#FFFFFF
  • badge.background#2A9DFF
  • badge.foreground#FFFFFF
  • button.background#2A9DFF
  • button.foreground#FFFFFF
  • button.hoverBackground#238ACC
  • dropdown.background#E6F0FF
  • dropdown.border#B0C4D9
  • dropdown.foreground#20273A
  • editor.background#F5FAFF
  • editor.findMatchBackground#2A9DFF44
  • editor.findMatchHighlightBackground#2A9DFF22
  • editor.foreground#20273A
  • editor.lineHighlightBackground#D0E7FF
  • editor.lineHighlightBorder#2A9DFF40
  • editor.selectionBackground#A0D2FF80
  • editor.selectionHighlightBackground#A0D2FF40
  • editorBracketMatch.background#2A9DFF33
  • editorBracketMatch.border#2A9DFF
  • editorCursor.foreground#2A9DFF
  • editorGroupHeader.tabsBackground#E6F0FF
  • editorIndentGuide.activeBackground#8AB6D9
  • editorIndentGuide.background#C4D9EB
  • editorLineNumber.activeForeground#2A9DFF
  • editorLineNumber.foreground#8AB6D9
  • editorWhitespace.foreground#B0C4D9
  • focusBorder#2A9DFF
  • gitDecoration.conflictingResourceForeground#FFB454
  • gitDecoration.deletedResourceForeground#FF5F57
  • gitDecoration.modifiedResourceForeground#2A9DFF
  • gitDecoration.untrackedResourceForeground#00E5C2
  • input.background#E6F0FF
  • input.border#B0C4D9
  • input.foreground#20273A
  • input.placeholderForeground#8AB6D9
  • inputOption.activeBorder#2A9DFF
  • list.activeSelectionBackground#B0D9FF
  • list.activeSelectionForeground#20273A
  • list.focusBackground#B0D9FF
  • list.highlightForeground#2A9DFF
  • list.hoverBackground#D0E7FF
  • minimap.background#E6F0FF
  • minimapSlider.activeBackground#708CA0AA
  • minimapSlider.background#A0B8C9AA
  • minimapSlider.hoverBackground#8AA3B5AA
  • panel.background#F5FAFF
  • panel.border#C4D9EB
  • panelTitle.activeBorder#2A9DFF
  • panelTitle.activeForeground#20273A
  • panelTitle.inactiveForeground#6B7C99
  • scrollbar.shadow#00000022
  • scrollbarSlider.activeBackground#708CA0AA
  • scrollbarSlider.background#A0B8C9AA
  • scrollbarSlider.hoverBackground#8AA3B5AA
  • sideBar.background#F0F8FF
  • sideBar.foreground#20273A
  • sideBarSectionHeader.background#E6F0FF
  • sideBarSectionHeader.foreground#2A9DFF
  • sideBarTitle.foreground#2A9DFF
  • statusBar.background#2A9DFF
  • statusBar.debuggingBackground#3AB0FF
  • statusBar.foreground#FFFFFF
  • statusBar.noFolderBackground#D0DCEB
  • statusBarItem.hoverBackground#2A9DFF80
  • tab.activeBackground#F5FAFF
  • tab.activeBorder#2A9DFF
  • tab.activeForeground#20273A
  • tab.border#C4D9EB
  • tab.inactiveBackground#E8F2FF
  • tab.inactiveForeground#6B7C99
  • terminal.ansiBlue#2A9DFF
  • terminal.ansiBrightBlue#4AB4FF
  • terminal.ansiBrightCyan#50E5FF
  • terminal.ansiBrightGreen#00E5C2
  • terminal.ansiBrightMagenta#D277FF
  • terminal.ansiBrightRed#FF7A71
  • terminal.ansiBrightYellow#FFD27F
  • terminal.ansiCyan#33C9FF
  • terminal.ansiGreen#00BFA5
  • terminal.ansiMagenta#B84ACF
  • terminal.ansiRed#FF5F57
  • terminal.ansiYellow#FFB454
  • terminal.background#F5FAFF
  • terminal.foreground#20273A
  • titleBar.activeBackground#DCEAFF
  • titleBar.activeForeground#20273A
  • titleBar.inactiveBackground#E8F2FF
  • titleBar.inactiveForeground#6B7C99

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#6B7C99italic
string, string.quoted, string.template#00BFA5
keyword, storage.type, storage.modifier#2A9DFFbold
keyword.operator, punctuation.accessor#33C9FF
variable, variable.other#005F99
variable.parameter#33C9FFitalic
entity.name.function, support.function#2A9DFF
meta.function-call#33C9FF
entity.name.class, entity.name.type.class, support.class#2A9DFFbold
entity.name.type, support.type#33C9FF
entity.name.type.interface#33C9FFitalic
constant.numeric#33C9FF
constant, constant.language, constant.character#2A9DFF
constant.language.boolean#2A9DFFbold
variable.other.property, support.variable.property#005F99
meta.object-literal.key#005F99
entity.name.tag, punctuation.definition.tag#2A9DFF
entity.other.attribute-name#33C9FFitalic
punctuation, meta.brace#2A9DFF
string.regexp#33C9FF
constant.character.escape#33C9FF
meta.decorator, punctuation.decorator#FFB454
invalid, invalid.illegal#FF5F57strikethrough
markup.heading, entity.name.section#2A9DFFbold
markup.bold#2A9DFFbold
markup.italic#33C9FFitalic
markup.underline.link#33C9FF
markup.inline.raw, markup.fenced_code#00BFA5
support.type.property-name.json#2A9DFF
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#33C9FF
support.type.property-name.css#2A9DFF
support.constant.property-value.css#00BFA5