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#2C332F
  • activityBar.border#2C332F
  • activityBar.foreground#EEF1EE
  • activityBar.inactiveForeground#7C897E
  • activityBarBadge.background#5E8071
  • activityBarBadge.foreground#EEF1EE
  • badge.background#5E8071
  • badge.foreground#EEF1EE
  • button.background#5E8071
  • button.foreground#EEF1EE
  • button.hoverBackground#4C6B5D
  • button.secondaryBackground#D2DBD1
  • button.secondaryForeground#2C332F
  • contrastBorder#D2DBD1
  • dropdown.background#FFFFFF
  • dropdown.border#D2DBD1
  • editor.background#EEF1EE
  • editor.findMatchBackground#5E807160
  • editor.findMatchHighlightBackground#5E807135
  • editor.foreground#2C332F
  • editor.inactiveSelectionBackground#8CA3A825
  • editor.lineHighlightBackground#E4E9E4
  • editor.selectionBackground#8CA3A850
  • editor.selectionHighlightBackground#8CA3A830
  • editor.wordHighlightBackground#6B8C9330
  • editorBracketMatch.background#8CA3A840
  • editorBracketMatch.border#5E8071
  • editorCursor.foreground#5E8071
  • editorGroup.border#D2DBD1
  • editorGroupHeader.tabsBackground#E4E9E4
  • editorGutter.addedBackground#5E8071
  • editorGutter.deletedBackground#B0705A
  • editorGutter.modifiedBackground#6B8C93
  • editorHoverWidget.background#E4E9E4
  • editorHoverWidget.border#D2DBD1
  • editorIndentGuide.activeBackground1#5E807170
  • editorIndentGuide.background1#D2DBD1
  • editorLineNumber.activeForeground#5E8071
  • editorLineNumber.foreground#A5B3A6
  • editorRuler.foreground#D2DBD1
  • editorSuggestWidget.background#E4E9E4
  • editorSuggestWidget.border#D2DBD1
  • editorSuggestWidget.selectedBackground#8CA3A840
  • editorWhitespace.foreground#D2DBD1
  • editorWidget.background#E4E9E4
  • editorWidget.border#D2DBD1
  • extensionButton.prominentBackground#5E8071
  • extensionButton.prominentHoverBackground#4C6B5D
  • focusBorder#5E807180
  • foreground#2C332F
  • input.background#FFFFFF
  • input.border#D2DBD1
  • input.foreground#2C332F
  • input.placeholderForeground#A5B3A6
  • list.activeSelectionBackground#8CA3A870
  • list.activeSelectionForeground#2C332F
  • list.highlightForeground#5E8071
  • list.hoverBackground#D8DFD8
  • list.inactiveSelectionBackground#D8DFD8
  • notificationCenterHeader.background#E4E9E4
  • notifications.background#E4E9E4
  • notifications.border#D2DBD1
  • notifications.foreground#2C332F
  • panel.background#E4E9E4
  • panel.border#D2DBD1
  • panelTitle.activeForeground#2C332F
  • panelTitle.inactiveForeground#586459
  • peekView.border#5E8071
  • peekViewEditor.background#EEF1EE
  • peekViewResult.background#E4E9E4
  • progressBar.background#5E8071
  • scrollbarSlider.activeBackground#5E807180
  • scrollbarSlider.background#D2DBD170
  • scrollbarSlider.hoverBackground#D2DBD1A0
  • sideBar.background#E4E9E4
  • sideBar.border#D2DBD1
  • sideBar.foreground#586459
  • sideBarSectionHeader.background#D8DFD8
  • sideBarSectionHeader.foreground#2C332F
  • sideBarTitle.foreground#2C332F
  • statusBar.background#5E8071
  • statusBar.debuggingBackground#B0705A
  • statusBar.foreground#EEF1EE
  • statusBar.noFolderBackground#5E8071
  • statusBarItem.hoverBackground#4C6B5D
  • tab.activeBackground#EEF1EE
  • tab.activeBorderTop#5E8071
  • tab.activeForeground#2C332F
  • tab.border#D2DBD1
  • tab.inactiveBackground#D8DFD8
  • tab.inactiveForeground#586459
  • terminal.ansiBlack#2C332F
  • terminal.ansiBlue#6B8C93
  • terminal.ansiBrightBlack#A5B3A6
  • terminal.ansiBrightBlue#88A8AE
  • terminal.ansiBrightCyan#78A6A8
  • terminal.ansiBrightGreen#7A9C8C
  • terminal.ansiBrightMagenta#978CA8
  • terminal.ansiBrightRed#C78A75
  • terminal.ansiBrightWhite#EEF1EE
  • terminal.ansiBrightYellow#BBA46C
  • terminal.ansiCyan#5A8A8C
  • terminal.ansiGreen#5E8071
  • terminal.ansiMagenta#7C7290
  • terminal.ansiRed#B0705A
  • terminal.ansiWhite#586459
  • terminal.ansiYellow#A38E52
  • terminal.background#EEF1EE
  • terminal.foreground#2C332F
  • titleBar.activeBackground#222824
  • titleBar.activeForeground#EEF1EE
  • titleBar.inactiveBackground#222824
  • titleBar.inactiveForeground#8A988B

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#2C332F
comment, punctuation.definition.comment#8A988Bitalic
keyword, keyword.control, storage.type, storage.modifier#5E8071bold
string, string.quoted#B0705A
constant.numeric, constant.language, constant.character#6B8C93
entity.name.function, support.function, meta.function-call#7C7290
variable, variable.parameter#2C332F
entity.name.type, entity.name.class, support.class, support.type#5A8A8Cbold
entity.name.tag#5E8071
entity.other.attribute-name#A38E52
keyword.operator, punctuation#758079
variable.other.property, meta.object-literal.key#5A8A8C
markup.heading#5E8071bold
markup.boldbold
markup.italicitalic
invalid, invalid.illegal#EEF1EE