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#1F2B3C
  • activityBar.border#1F2B3C
  • activityBar.foreground#F5F2EB
  • activityBar.inactiveForeground#8A95A4
  • activityBarBadge.background#40516B
  • activityBarBadge.foreground#F5F2EB
  • badge.background#40516B
  • badge.foreground#F5F2EB
  • button.background#40516B
  • button.foreground#F5F2EB
  • button.hoverBackground#343F56
  • button.secondaryBackground#D7CBB8
  • button.secondaryForeground#23262B
  • contrastBorder#D7CBB8
  • dropdown.background#FFFFFF
  • dropdown.border#D7CBB8
  • editor.background#F5F2EB
  • editor.findMatchBackground#94775A55
  • editor.findMatchHighlightBackground#94775A33
  • editor.foreground#23262B
  • editor.inactiveSelectionBackground#2C3E5A12
  • editor.lineHighlightBackground#ECE5D9
  • editor.selectionBackground#2C3E5A26
  • editor.selectionHighlightBackground#2C3E5A18
  • editor.wordHighlightBackground#94775A26
  • editorBracketMatch.background#2C3E5A1F
  • editorBracketMatch.border#40516B
  • editorCursor.foreground#1F2B3C
  • editorGroup.border#D7CBB8
  • editorGroupHeader.tabsBackground#ECE5D9
  • editorGutter.addedBackground#5F835C
  • editorGutter.deletedBackground#B5675A
  • editorGutter.modifiedBackground#59749C
  • editorHoverWidget.background#ECE5D9
  • editorHoverWidget.border#D7CBB8
  • editorIndentGuide.activeBackground1#B5A896
  • editorIndentGuide.background1#DED4C4
  • editorLineNumber.activeForeground#40516B
  • editorLineNumber.foreground#C3BAAA
  • editorRuler.foreground#DED4C4
  • editorSuggestWidget.background#ECE5D9
  • editorSuggestWidget.border#D7CBB8
  • editorSuggestWidget.selectedBackground#2C3E5A16
  • editorWhitespace.foreground#DED4C4
  • editorWidget.background#ECE5D9
  • editorWidget.border#D7CBB8
  • extensionButton.prominentBackground#40516B
  • extensionButton.prominentHoverBackground#343F56
  • focusBorder#40516B80
  • foreground#23262B
  • input.background#FFFFFF
  • input.border#D7CBB8
  • input.foreground#23262B
  • input.placeholderForeground#B0A698
  • list.activeSelectionBackground#23262B
  • list.activeSelectionForeground#F5F2EB
  • list.highlightForeground#40516B
  • list.hoverBackground#EAE0D4
  • list.inactiveSelectionBackground#E2D7C7
  • notificationCenterHeader.background#ECE5D9
  • notifications.background#ECE5D9
  • notifications.border#D7CBB8
  • notifications.foreground#23262B
  • panel.background#ECE5D9
  • panel.border#D7CBB8
  • panelTitle.activeForeground#23262B
  • panelTitle.inactiveForeground#5A5247
  • peekView.border#40516B
  • peekViewEditor.background#F5F2EB
  • peekViewResult.background#ECE5D9
  • progressBar.background#40516B
  • scrollbarSlider.activeBackground#40516B80
  • scrollbarSlider.background#C3BAAA70
  • scrollbarSlider.hoverBackground#C3BAAAA0
  • sideBar.background#ECE5D9
  • sideBar.border#D7CBB8
  • sideBar.foreground#5A5247
  • sideBarSectionHeader.background#E2D7C7
  • sideBarSectionHeader.foreground#23262B
  • sideBarTitle.foreground#23262B
  • statusBar.background#40516B
  • statusBar.debuggingBackground#B5675A
  • statusBar.foreground#F5F2EB
  • statusBar.noFolderBackground#40516B
  • statusBarItem.hoverBackground#343F56
  • tab.activeBackground#F5F2EB
  • tab.activeBorderTop#40516B
  • tab.activeForeground#23262B
  • tab.border#D7CBB8
  • tab.inactiveBackground#E2D7C7
  • tab.inactiveForeground#5A5247
  • terminal.ansiBlack#23262B
  • terminal.ansiBlue#59749C
  • terminal.ansiBrightBlack#C3BAAA
  • terminal.ansiBrightBlue#7A91AF
  • terminal.ansiBrightCyan#6B96A0
  • terminal.ansiBrightGreen#79A176
  • terminal.ansiBrightMagenta#977F9B
  • terminal.ansiBrightRed#C88275
  • terminal.ansiBrightWhite#F5F2EB
  • terminal.ansiBrightYellow#B8926A
  • terminal.ansiCyan#4E7E86
  • terminal.ansiGreen#5F835C
  • terminal.ansiMagenta#7B607F
  • terminal.ansiRed#B5675A
  • terminal.ansiWhite#5A5247
  • terminal.ansiYellow#94775A
  • terminal.background#F5F2EB
  • terminal.foreground#23262B
  • titleBar.activeBackground#18202E
  • titleBar.activeForeground#F5F2EB
  • titleBar.inactiveBackground#18202E
  • titleBar.inactiveForeground#8891A0

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#23262B
comment, punctuation.definition.comment#A1927Eitalic
keyword, keyword.control, storage.type, storage.modifier#2C3E5Abold
string, string.quoted#94775A
constant.numeric, constant.language, constant.character#59749C
entity.name.function, support.function, meta.function-call#2C3E5A
variable, variable.parameter#23262B
entity.name.type, entity.name.class, support.class, support.type#7B607Fitalic
entity.name.tag#5F835C
entity.other.attribute-name#94775A
keyword.operator, punctuation#867A6B
variable.other.property, meta.object-literal.key#4E7E86
markup.heading#2C3E5Abold
markup.boldbold
markup.italicitalic
invalid, invalid.illegal#B5675A