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.background#C9D5C3
  • activityBar.border#67836D33
  • activityBar.foreground#323B2B
  • activityBar.inactiveForeground#525E6F
  • activityBarBadge.background#897244
  • activityBarBadge.foreground#DFE4DD
  • badge.background#276853
  • badge.foreground#DFE4DD
  • breadcrumb.activeSelectionForeground#323B2B
  • breadcrumb.background#DFE4DD
  • breadcrumb.focusForeground#323B2B
  • breadcrumb.foreground#525E6F
  • button.background#644B9B
  • button.foreground#F7F9F6
  • button.hoverBackground#513C7E
  • button.secondaryBackground#D4DCD0
  • button.secondaryForeground#323B2B
  • button.secondaryHoverBackground#C9D5C3
  • dropdown.background#E7EAE6
  • dropdown.border#736B8A
  • dropdown.foreground#323B2B
  • editor.background#DFE4DD
  • editor.findMatchBackground#5A682766
  • editor.findMatchHighlightBackground#5A682733
  • editor.foreground#323B2B
  • editor.inactiveSelectionBackground#CABCE659
  • editor.lineHighlightBackground#CABCE633
  • editor.selectionBackground#CABCE699
  • editor.selectionHighlightBackground#CABCE659
  • editor.wordHighlightBackground#CABCE666
  • editor.wordHighlightStrongBackground#CABCE699
  • editorBracketMatch.background#CABCE680
  • editorBracketMatch.border#897244
  • editorCursor.foreground#897244
  • editorError.foreground#B23A46
  • editorGroup.border#67836D33
  • editorGroupHeader.border#00000000
  • editorGroupHeader.tabsBackground#D4DCD0
  • editorGroupHeader.tabsBorder#00000000
  • editorIndentGuide.activeBackground1#525E6F99
  • editorIndentGuide.background1#736B8A40
  • editorInfo.foreground#2E6690
  • editorLineNumber.activeForeground#323B2B
  • editorLineNumber.foreground#525E6F
  • editorRuler.foreground#736B8A66
  • editorWarning.foreground#8A6215
  • editorWhitespace.foreground#525E6F4D
  • focusBorder#897244
  • foreground#323B2B
  • gitDecoration.addedResourceForeground#3E7A3B
  • gitDecoration.deletedResourceForeground#B23A46
  • gitDecoration.ignoredResourceForeground#525E6F
  • gitDecoration.modifiedResourceForeground#8A6215
  • gitDecoration.untrackedResourceForeground#2A526F
  • input.background#E7EAE6
  • input.border#736B8A
  • input.foreground#323B2B
  • input.placeholderForeground#525E6F
  • inputOption.activeBorder#276853
  • list.activeSelectionBackground#CABCE6B3
  • list.activeSelectionForeground#323B2B
  • list.focusBackground#CABCE6B3
  • list.focusForeground#323B2B
  • list.highlightForeground#276853
  • list.hoverBackground#CABCE64D
  • list.hoverForeground#323B2B
  • list.inactiveSelectionBackground#CABCE64D
  • list.inactiveSelectionForeground#323B2B
  • minimapSlider.activeBackground#897244
  • notificationLink.foreground#276853
  • notifications.background#D4DCD0
  • notifications.border#736B8A
  • notifications.foreground#323B2B
  • panel.background#DFE4DD
  • panel.border#67836D33
  • panelSection.border#67836D33
  • panelSectionHeader.background#DFE4DD
  • panelSectionHeader.border#67836D33
  • panelSectionHeader.foreground#525E6F
  • panelTitle.activeBorder#897244
  • panelTitle.activeForeground#323B2B
  • panelTitle.inactiveForeground#525E6F
  • sash.hoverBorder#897244
  • scrollbarSlider.activeBackground#897244
  • scrollbarSlider.background#CABCE64D
  • scrollbarSlider.hoverBackground#CABCE680
  • selection.background#CABCE699
  • sideBar.background#D4DCD0
  • sideBar.border#67836D33
  • sideBar.foreground#323B2B
  • sideBarSectionHeader.background#D4DCD0
  • sideBarSectionHeader.border#67836D33
  • sideBarSectionHeader.foreground#525E6F
  • sideBarTitle.border#00000000
  • sideBarTitle.foreground#323B2B
  • statusBar.background#E7EAE6
  • statusBar.border#67836D33
  • statusBar.debuggingBackground#5A6827
  • statusBar.debuggingForeground#DFE4DD
  • statusBar.foreground#323B2B
  • statusBar.noFolderBackground#E7EAE6
  • statusBarItem.hoverBackground#323B2B1A
  • statusBarItem.remoteBackground#2E6B59
  • statusBarItem.remoteForeground#DFE4DD
  • tab.activeBackground#DFE4DD
  • tab.activeBorderTop#897244
  • tab.activeForeground#323B2B
  • tab.border#00000000
  • tab.hoverBackground#C9D5C3
  • tab.inactiveBackground#D4DCD0
  • tab.inactiveForeground#525E6F
  • tab.unfocusedActiveBackground#DFE4DD
  • tab.unfocusedActiveBorderTop#89724480
  • tab.unfocusedActiveForeground#525E6F
  • terminal.ansiBlack#323B2B
  • terminal.ansiBlue#276853
  • terminal.ansiBrightBlack#6E7A6C
  • terminal.ansiBrightBlue#3E8A73
  • terminal.ansiBrightCyan#4C9280
  • terminal.ansiBrightGreen#5C9958
  • terminal.ansiBrightMagenta#C06B36
  • terminal.ansiBrightRed#C85A64
  • terminal.ansiBrightWhite#323B2B
  • terminal.ansiBrightYellow#A67F2E
  • terminal.ansiCyan#2E6B59
  • terminal.ansiGreen#3E7A3B
  • terminal.ansiMagenta#8B4D1D
  • terminal.ansiRed#B23A46
  • terminal.ansiWhite#525E6F
  • terminal.ansiYellow#8A6215
  • terminal.background#DFE4DD
  • terminal.foreground#323B2B
  • titleBar.activeBackground#D4DCD0
  • titleBar.activeForeground#323B2B
  • titleBar.border#67836D33
  • titleBar.inactiveBackground#D4DCD0
  • titleBar.inactiveForeground#525E6F
  • widget.shadow#00000026

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, comment.line, comment.block, comment.block.documentation, punctuation.definition.comment#67836Ditalic
keyword, keyword.control, keyword.other, storage, storage.type, storage.modifier#8B4D1D
string, string.quoted, string.quoted.single, string.quoted.double, string.template, punctuation.definition.string#2A526F
constant, constant.numeric, constant.language, constant.character, constant.other#5A6827
entity.name.function, support.function, meta.function-call, variable.function#276853
entity.name.type, entity.name.class, entity.name.namespace, entity.name.scope-resolution, entity.other.inherited-class, support.type, support.class#2E6B59
variable, variable.other, variable.parameter, meta.parameter#5F5D54
keyword.operator, punctuation, punctuation.separator, punctuation.terminator, meta.brace#6C8473
entity.name.tag, meta.tag#8F5024
entity.other.attribute-name, meta.attribute, support.type.property-name#79592A
heading.1.markdown, heading.2.markdown, heading.3.markdown, entity.name.section.markdown#8B4D1D
markup.underline.link, string.other.link#276853
markup.bold#5A6827bold
markup.italic#2E6B59italic
support.type.property-name.json, source.json meta.structure.dictionary.json > string.quoted.json#79592A
invalid, invalid.illegal#B23A46
invalid.deprecated#8A6215