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#0D141F
  • activityBar.border#0D141F
  • activityBar.foreground#E3EDF5
  • activityBar.inactiveForeground#4B5A72
  • activityBarBadge.background#79D4C3
  • activityBarBadge.foreground#070B11
  • badge.background#79D4C3
  • badge.foreground#070B11
  • button.background#79D4C3
  • button.foreground#070B11
  • button.hoverBackground#65BEAF
  • button.secondaryBackground#1B2636
  • button.secondaryForeground#E3EDF5
  • contrastBorder#1B2636
  • dropdown.background#070B11
  • dropdown.border#1B2636
  • editor.background#070B11
  • editor.findMatchBackground#95F0C260
  • editor.findMatchHighlightBackground#95F0C235
  • editor.foreground#E3EDF5
  • editor.inactiveSelectionBackground#2A7FBE25
  • editor.lineHighlightBackground#0D141F
  • editor.selectionBackground#2A7FBE50
  • editor.selectionHighlightBackground#2A7FBE30
  • editor.wordHighlightBackground#7AE08A30
  • editorBracketMatch.background#2A7FBE40
  • editorBracketMatch.border#79D4C3
  • editorCursor.foreground#79D4C3
  • editorGroup.border#1B2636
  • editorGroupHeader.tabsBackground#0A1018
  • editorGutter.addedBackground#5CCB93
  • editorGutter.deletedBackground#E57A7A
  • editorGutter.modifiedBackground#2A7FBE
  • editorHoverWidget.background#0D141F
  • editorHoverWidget.border#1B2636
  • editorIndentGuide.activeBackground1#79D4C370
  • editorIndentGuide.background1#1B2636
  • editorLineNumber.activeForeground#79D4C3
  • editorLineNumber.foreground#435066
  • editorRuler.foreground#1B2636
  • editorSuggestWidget.background#0D141F
  • editorSuggestWidget.border#1B2636
  • editorSuggestWidget.selectedBackground#2A7FBE40
  • editorWhitespace.foreground#1B2636
  • editorWidget.background#0D141F
  • editorWidget.border#1B2636
  • extensionButton.prominentBackground#79D4C3
  • extensionButton.prominentHoverBackground#65BEAF
  • focusBorder#79D4C3
  • foreground#E3EDF5
  • input.background#070B11
  • input.border#1B2636
  • input.foreground#E3EDF5
  • input.placeholderForeground#4B5A72
  • list.activeSelectionBackground#1B2636
  • list.activeSelectionForeground#E3EDF5
  • list.highlightForeground#79D4C3
  • list.hoverBackground#0F1722
  • list.inactiveSelectionBackground#0F1722
  • notificationCenterHeader.background#0D141F
  • notifications.background#0D141F
  • notifications.border#1B2636
  • notifications.foreground#E3EDF5
  • panel.background#0A1018
  • panel.border#1B2636
  • panelTitle.activeForeground#E3EDF5
  • panelTitle.inactiveForeground#A4B3C8
  • peekView.border#79D4C3
  • peekViewEditor.background#070B11
  • peekViewResult.background#0D141F
  • progressBar.background#79D4C3
  • scrollbarSlider.activeBackground#79D4C380
  • scrollbarSlider.background#1B263670
  • scrollbarSlider.hoverBackground#1B2636A0
  • sideBar.background#0A1018
  • sideBar.border#1B2636
  • sideBar.foreground#A4B3C8
  • sideBarSectionHeader.background#0F1722
  • sideBarSectionHeader.foreground#E3EDF5
  • sideBarTitle.foreground#E3EDF5
  • statusBar.background#153041
  • statusBar.debuggingBackground#E57A7A
  • statusBar.foreground#E3EDF5
  • statusBar.noFolderBackground#153041
  • statusBarItem.hoverBackground#21506A
  • tab.activeBackground#070B11
  • tab.activeBorderTop#79D4C3
  • tab.activeForeground#E3EDF5
  • tab.border#1B2636
  • tab.inactiveBackground#0F1722
  • tab.inactiveForeground#A4B3C8
  • terminal.ansiBlack#0F1722
  • terminal.ansiBlue#2A7FBE
  • terminal.ansiBrightBlack#4B5A72
  • terminal.ansiBrightBlue#5BA2E3
  • terminal.ansiBrightCyan#95F0C2
  • terminal.ansiBrightGreen#7DE7A8
  • terminal.ansiBrightMagenta#C9B1F0
  • terminal.ansiBrightRed#F2918B
  • terminal.ansiBrightWhite#E3EDF5
  • terminal.ansiBrightYellow#F5E495
  • terminal.ansiCyan#79D4C3
  • terminal.ansiGreen#5CCB93
  • terminal.ansiMagenta#B59BE5
  • terminal.ansiRed#E57A7A
  • terminal.ansiWhite#A4B3C8
  • terminal.ansiYellow#E8D27A
  • terminal.background#070B11
  • terminal.foreground#E3EDF5
  • titleBar.activeBackground#060910
  • titleBar.activeForeground#E3EDF5
  • titleBar.inactiveBackground#060910
  • titleBar.inactiveForeground#4B5A72

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#E3EDF5
comment, punctuation.definition.comment#4B5A72italic
keyword, keyword.control, storage.type, storage.modifier#B59BE5italic
string, string.quoted#7DE7A8
constant.numeric, constant.language, constant.character#5BA2E3
entity.name.function, support.function, meta.function-call#95F0C2
variable, variable.parameter#E3EDF5
entity.name.type, entity.name.class, support.class, support.type#C9B1F0italic
entity.name.tag#5CCB93
entity.other.attribute-name#E8D27A
keyword.operator, punctuation#7A8AA1
variable.other.property, meta.object-literal.key#8FC9D6
markup.heading#79D4C3bold
markup.boldbold
markup.italicitalic
invalid, invalid.illegal#070B11