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#1F2E2A
  • activityBar.border#1F2E2A
  • activityBar.foreground#DCEAE6
  • activityBar.inactiveForeground#5E7A72
  • activityBarBadge.background#6FB3A8
  • activityBarBadge.foreground#182320
  • badge.background#6FB3A8
  • badge.foreground#182320
  • button.background#6FB3A8
  • button.foreground#182320
  • button.hoverBackground#5C9E93
  • button.secondaryBackground#2B4038
  • button.secondaryForeground#DCEAE6
  • contrastBorder#2B4038
  • dropdown.background#182320
  • dropdown.border#2B4038
  • editor.background#182320
  • editor.findMatchBackground#6FB3A860
  • editor.findMatchHighlightBackground#6FB3A835
  • editor.foreground#DCEAE6
  • editor.inactiveSelectionBackground#8FBEDD25
  • editor.lineHighlightBackground#1F2E2A
  • editor.selectionBackground#8FBEDD50
  • editor.selectionHighlightBackground#8FBEDD30
  • editor.wordHighlightBackground#8FBEDD30
  • editorBracketMatch.background#8FBEDD40
  • editorBracketMatch.border#6FB3A8
  • editorCursor.foreground#6FB3A8
  • editorGroup.border#2B4038
  • editorGroupHeader.tabsBackground#1F2E2A
  • editorGutter.addedBackground#7FBB99
  • editorGutter.deletedBackground#DB9A8B
  • editorGutter.modifiedBackground#8FBEDD
  • editorHoverWidget.background#1F2E2A
  • editorHoverWidget.border#2B4038
  • editorIndentGuide.activeBackground1#6FB3A870
  • editorIndentGuide.background1#2B4038
  • editorLineNumber.activeForeground#6FB3A8
  • editorLineNumber.foreground#597269
  • editorRuler.foreground#2B4038
  • editorSuggestWidget.background#1F2E2A
  • editorSuggestWidget.border#2B4038
  • editorSuggestWidget.selectedBackground#8FBEDD40
  • editorWhitespace.foreground#2B4038
  • editorWidget.background#1F2E2A
  • editorWidget.border#2B4038
  • extensionButton.prominentBackground#6FB3A8
  • extensionButton.prominentHoverBackground#5C9E93
  • focusBorder#6FB3A8
  • foreground#DCEAE6
  • input.background#182320
  • input.border#2B4038
  • input.foreground#DCEAE6
  • input.placeholderForeground#597269
  • list.activeSelectionBackground#2B4038
  • list.activeSelectionForeground#DCEAE6
  • list.highlightForeground#6FB3A8
  • list.hoverBackground#263A35
  • list.inactiveSelectionBackground#263A35
  • notificationCenterHeader.background#1F2E2A
  • notifications.background#1F2E2A
  • notifications.border#2B4038
  • notifications.foreground#DCEAE6
  • panel.background#1F2E2A
  • panel.border#2B4038
  • panelTitle.activeForeground#DCEAE6
  • panelTitle.inactiveForeground#A9C4BE
  • peekView.border#6FB3A8
  • peekViewEditor.background#182320
  • peekViewResult.background#1F2E2A
  • progressBar.background#6FB3A8
  • scrollbarSlider.activeBackground#6FB3A880
  • scrollbarSlider.background#2B403870
  • scrollbarSlider.hoverBackground#2B4038A0
  • sideBar.background#1F2E2A
  • sideBar.border#2B4038
  • sideBar.foreground#A9C4BE
  • sideBarSectionHeader.background#263A35
  • sideBarSectionHeader.foreground#DCEAE6
  • sideBarTitle.foreground#DCEAE6
  • statusBar.background#2B4A43
  • statusBar.debuggingBackground#DB9A8B
  • statusBar.foreground#DCEAE6
  • statusBar.noFolderBackground#2B4A43
  • statusBarItem.hoverBackground#5C9E93
  • tab.activeBackground#182320
  • tab.activeBorderTop#6FB3A8
  • tab.activeForeground#DCEAE6
  • tab.border#2B4038
  • tab.inactiveBackground#263A35
  • tab.inactiveForeground#A9C4BE
  • terminal.ansiBlack#263A35
  • terminal.ansiBlue#8FBEDD
  • terminal.ansiBrightBlack#597269
  • terminal.ansiBrightBlue#A9D0E6
  • terminal.ansiBrightCyan#8FCFC3
  • terminal.ansiBrightGreen#9BD1B2
  • terminal.ansiBrightMagenta#C6B4D6
  • terminal.ansiBrightRed#EBB0A2
  • terminal.ansiBrightWhite#DCEAE6
  • terminal.ansiBrightYellow#E3C494
  • terminal.ansiCyan#6FB3A8
  • terminal.ansiGreen#7FBB99
  • terminal.ansiMagenta#B3A0C4
  • terminal.ansiRed#DB9A8B
  • terminal.ansiWhite#A9C4BE
  • terminal.ansiYellow#D1B378
  • terminal.background#182320
  • terminal.foreground#DCEAE6
  • titleBar.activeBackground#131C19
  • titleBar.activeForeground#DCEAE6
  • titleBar.inactiveBackground#131C19
  • titleBar.inactiveForeground#5E7A72

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#DCEAE6
comment, punctuation.definition.comment#5E7A72italic
keyword, keyword.control, storage.type, storage.modifier#7FBB99bold
string, string.quoted#E3C69A
constant.numeric, constant.language, constant.character#8FBEDD
entity.name.function, support.function, meta.function-call#EBB0A2
variable, variable.parameter#DCEAE6
entity.name.type, entity.name.class, support.class, support.type#C6B4D6bold
entity.name.tag#7FBB99
entity.other.attribute-name#D1B378
keyword.operator, punctuation#8CA39C
variable.other.property, meta.object-literal.key#8FCFC3
markup.heading#6FB3A8bold
markup.boldbold
markup.italicitalic
invalid, invalid.illegal#182320