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#26547C
  • activityBar.background#F9F7F1
  • activityBar.foreground#2E3A5C
  • activityBarBadge.background#26547C
  • activityBarBadge.foreground#FDFBF6
  • badge.background#26547C
  • badge.foreground#FDFBF6
  • button.background#26547C
  • button.foreground#FDFBF6
  • button.hoverBackground#1F4475
  • dropdown.background#F9F7F1
  • dropdown.border#D2B48C
  • dropdown.foreground#2E3A5C
  • editor.background#FDFBF6
  • editor.findMatchBackground#26547C40
  • editor.findMatchHighlightBackground#26547C30
  • editor.foreground#2E3A5C
  • editor.lineHighlightBackground#26547C15
  • editor.lineHighlightBorder#26547C15
  • editor.selectionBackground#26547C30
  • editor.selectionHighlightBackground#26547C20
  • editorBracketMatch.background#26547C25
  • editorBracketMatch.border#26547C
  • editorCursor.foreground#26547C
  • editorGroupHeader.tabsBackground#FDFBF6
  • editorIndentGuide.activeBackground#A0A0A0
  • editorIndentGuide.background#D0D0D0
  • editorLineNumber.activeForeground#26547C
  • editorLineNumber.foreground#8A92A6
  • editorWhitespace.foreground#C0C0C0
  • focusBorder#26547C
  • gitDecoration.conflictingResourceForeground#F0AD4E
  • gitDecoration.deletedResourceForeground#D9534F
  • gitDecoration.modifiedResourceForeground#26547C
  • gitDecoration.untrackedResourceForeground#5CB85C
  • input.background#F9F7F1
  • input.border#D2B48C
  • input.foreground#2E3A5C
  • input.placeholderForeground#A8A8A8
  • inputOption.activeBorder#26547C
  • list.activeSelectionBackground#26547C30
  • list.activeSelectionForeground#FDFBF6
  • list.focusBackground#26547C30
  • list.highlightForeground#26547C
  • list.hoverBackground#26547C20
  • minimap.background#F9F7F1
  • minimapSlider.activeBackground#26547C60
  • minimapSlider.background#26547C20
  • minimapSlider.hoverBackground#26547C40
  • panel.background#FDFBF6
  • panel.border#BFA57A
  • panelTitle.activeBorder#26547C
  • panelTitle.activeForeground#2E3A5C
  • panelTitle.inactiveForeground#6B7A99
  • scrollbar.shadow#00000044
  • scrollbarSlider.activeBackground#00000070
  • scrollbarSlider.background#00000030
  • scrollbarSlider.hoverBackground#00000050
  • sideBar.background#F9F7F1
  • sideBar.foreground#2E3A5C
  • sideBarSectionHeader.background#F9F7F1
  • sideBarSectionHeader.foreground#26547C
  • sideBarTitle.foreground#2E3A5C
  • statusBar.background#26547C
  • statusBar.debuggingBackground#C7448B
  • statusBar.foreground#FDFBF6
  • statusBar.noFolderBackground#D2B48C
  • statusBarItem.hoverBackground#1F4475
  • tab.activeBackground#FDFBF6
  • tab.activeBorder#26547C
  • tab.activeForeground#2E3A5C
  • tab.border#EAE7DB
  • tab.inactiveBackground#F9F7F1
  • tab.inactiveForeground#6B7A99
  • terminal.ansiBlue#26547C
  • terminal.ansiBrightBlue#3399FF
  • terminal.ansiBrightCyan#33FFFF
  • terminal.ansiBrightGreen#70D970
  • terminal.ansiBrightMagenta#E066E0
  • terminal.ansiBrightRed#FF6666
  • terminal.ansiBrightYellow#FFDA70
  • terminal.ansiCyan#3EB7A3
  • terminal.ansiGreen#5CB85C
  • terminal.ansiMagenta#C7448B
  • terminal.ansiRed#D9534F
  • terminal.ansiYellow#F0AD4E
  • terminal.background#FDFBF6
  • terminal.foreground#2E3A5C
  • titleBar.activeBackground#FDFBF6
  • titleBar.activeForeground#2E3A5C
  • titleBar.inactiveBackground#F9F7F1
  • titleBar.inactiveForeground#6B7A99

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#A0A0A0italic
string, string.quoted, string.template#3EB7A3
keyword, storage.type, storage.modifier#26547Cbold
keyword.operator, punctuation.accessor#26547C
variable, variable.other#2E3A5C
variable.parameter#6B7A99italic
entity.name.function, support.function#26547C
meta.function-call#7A9E9F
entity.name.class, entity.name.type.class, support.class#5C8D7Abold
entity.name.type, support.type#6B7A99
entity.name.type.interface#6B7A99italic
constant.numeric#D96C75
constant, constant.language, constant.character#D96C75
constant.language.boolean#D96C75bold
variable.other.property, support.variable.property#2E3A5C
meta.object-literal.key#26547C
entity.name.tag, punctuation.definition.tag#26547C
entity.other.attribute-name#7A9E9Fitalic
punctuation, meta.brace#8A92A6
string.regexp#D96C75
constant.character.escape#C7448B
meta.decorator, punctuation.decorator#CFA26D
invalid, invalid.illegal#D9534Fstrikethrough
markup.heading, entity.name.section#26547Cbold
markup.bold#D96C75bold
markup.italic#C7448Bitalic
markup.underline.link#26547C
markup.inline.raw, markup.fenced_code#3EB7A3
support.type.property-name.json#26547C
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#CFA26D
support.type.property-name.css#D96C75
support.constant.property-value.css#3EB7A3