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#0C111A
  • activityBar.border#0C111A
  • activityBar.foreground#E5EEF7
  • activityBar.inactiveForeground#5D6878
  • activityBarBadge.background#6FAFEC
  • activityBarBadge.foreground#05070D
  • badge.background#6FAFEC
  • badge.foreground#05070D
  • button.background#6FAFEC
  • button.foreground#05070D
  • button.hoverBackground#5A97D1
  • button.secondaryBackground#182030
  • button.secondaryForeground#E5EEF7
  • contrastBorder#182030
  • dropdown.background#05070D
  • dropdown.border#182030
  • editor.background#05070D
  • editor.findMatchBackground#F0C64A66
  • editor.findMatchHighlightBackground#F0C64A3C
  • editor.foreground#E5EEF7
  • editor.inactiveSelectionBackground#3C8EDB22
  • editor.lineHighlightBackground#0C111A
  • editor.selectionBackground#3C8EDB45
  • editor.selectionHighlightBackground#3C8EDB2A
  • editor.wordHighlightBackground#2BB9A235
  • editorBracketMatch.background#3C8EDB25
  • editorBracketMatch.border#6FAFEC
  • editorCursor.foreground#6FAFEC
  • editorGroup.border#182030
  • editorGroupHeader.tabsBackground#05070D
  • editorGutter.addedBackground#4EA87B
  • editorGutter.deletedBackground#D07074
  • editorGutter.modifiedBackground#3C8EDB
  • editorHoverWidget.background#0C111A
  • editorHoverWidget.border#182030
  • editorIndentGuide.activeBackground1#3D4756
  • editorIndentGuide.background1#182030
  • editorLineNumber.activeForeground#6FAFEC
  • editorLineNumber.foreground#3D4756
  • editorRuler.foreground#182030
  • editorSuggestWidget.background#0C111A
  • editorSuggestWidget.border#182030
  • editorSuggestWidget.selectedBackground#3C8EDB30
  • editorWhitespace.foreground#182030
  • editorWidget.background#0C111A
  • editorWidget.border#182030
  • extensionButton.prominentBackground#6FAFEC
  • extensionButton.prominentHoverBackground#5A97D1
  • focusBorder#6FAFEC
  • foreground#E5EEF7
  • input.background#05070D
  • input.border#182030
  • input.foreground#E5EEF7
  • input.placeholderForeground#5D6878
  • list.activeSelectionBackground#182030
  • list.activeSelectionForeground#E5EEF7
  • list.highlightForeground#6FAFEC
  • list.hoverBackground#0C111A
  • list.inactiveSelectionBackground#0C111A
  • notificationCenterHeader.background#0C111A
  • notifications.background#0C111A
  • notifications.border#182030
  • notifications.foreground#E5EEF7
  • panel.background#05070D
  • panel.border#182030
  • panelTitle.activeForeground#E5EEF7
  • panelTitle.inactiveForeground#B4C0D2
  • peekView.border#6FAFEC
  • peekViewEditor.background#05070D
  • peekViewResult.background#0C111A
  • progressBar.background#6FAFEC
  • scrollbarSlider.activeBackground#6FAFEC80
  • scrollbarSlider.background#18203070
  • scrollbarSlider.hoverBackground#182030A0
  • sideBar.background#05070D
  • sideBar.border#182030
  • sideBar.foreground#B4C0D2
  • sideBarSectionHeader.background#0C111A
  • sideBarSectionHeader.foreground#E5EEF7
  • sideBarTitle.foreground#E5EEF7
  • statusBar.background#182840
  • statusBar.debuggingBackground#D07074
  • statusBar.foreground#E5EEF7
  • statusBar.noFolderBackground#182840
  • statusBarItem.hoverBackground#244162
  • tab.activeBackground#05070D
  • tab.activeBorderTop#6FAFEC
  • tab.activeForeground#E5EEF7
  • tab.border#182030
  • tab.inactiveBackground#0C111A
  • tab.inactiveForeground#B4C0D2
  • terminal.ansiBlack#0C111A
  • terminal.ansiBlue#3C8EDB
  • terminal.ansiBrightBlack#3D4756
  • terminal.ansiBrightBlue#5BA2E8
  • terminal.ansiBrightCyan#56D2C2
  • terminal.ansiBrightGreen#69C294
  • terminal.ansiBrightMagenta#B588E2
  • terminal.ansiBrightRed#E4888B
  • terminal.ansiBrightWhite#E5EEF7
  • terminal.ansiBrightYellow#F6D877
  • terminal.ansiCyan#2BB9A2
  • terminal.ansiGreen#4EA87B
  • terminal.ansiMagenta#9C6DD1
  • terminal.ansiRed#D07074
  • terminal.ansiWhite#B4C0D2
  • terminal.ansiYellow#F0C64A
  • terminal.background#05070D
  • terminal.foreground#E5EEF7
  • titleBar.activeBackground#04060A
  • titleBar.activeForeground#E5EEF7
  • titleBar.inactiveBackground#04060A
  • titleBar.inactiveForeground#5D6878

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#E5EEF7
comment, punctuation.definition.comment#5D6878italic
keyword, keyword.control, storage.type, storage.modifier#6FAFECbold
string, string.quoted#F0C64A
constant.numeric, constant.language, constant.character#2BB9A2
entity.name.function, support.function, meta.function-call#E5EEF7bold
variable, variable.parameter#E5EEF7
entity.name.type, entity.name.class, support.class, support.type#B588E2italic
entity.name.tag#4EA87B
entity.other.attribute-name#6FAFEC
keyword.operator, punctuation#858FA0
variable.other.property, meta.object-literal.key#56D2C2
markup.heading#E5EEF7bold
markup.boldbold
markup.italicitalic
invalid, invalid.illegal#D07074