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.activeBorder#D08770
  • activityBar.background#DEE6F2
  • activityBar.foreground#2E3440
  • activityBar.inactiveForeground#60728A
  • activityBarBadge.background#D08770
  • activityBarBadge.foreground#F7F9FC
  • badge.background#D08770
  • badge.foreground#F7F9FC
  • button.background#D08770
  • button.foreground#F7F9FC
  • button.hoverBackground#C67862
  • button.secondaryBackground#D8DEE9
  • button.secondaryForeground#2E3440
  • checkbox.background#E5E9F0
  • checkbox.border#C2CAD8
  • descriptionForeground#4C566A
  • dropdown.background#F6F8FC
  • dropdown.border#C2CAD8
  • editor.background#F6F8FC
  • editor.findMatchBackground#95A7C0C0
  • editor.findMatchHighlightBackground#B8C5DA80
  • editor.foreground#2E3440
  • editor.inactiveSelectionBackground#D2DBE9B0
  • editor.lineHighlightBackground#CDD8EA50
  • editor.lineHighlightBorder#00000000
  • editor.selectionBackground#B8C5DA80
  • editor.wordHighlightBackground#B8C5DA80
  • editor.wordHighlightStrongBackground#95A7C0B0
  • editorBracketHighlight.foreground1#D08770
  • editorBracketHighlight.foreground2#A3BE8C
  • editorBracketHighlight.foreground3#5E81AC
  • editorBracketHighlight.foreground4#B48EAD
  • editorBracketHighlight.foreground5#EBCB8B
  • editorBracketHighlight.foreground6#4C566A
  • editorBracketMatch.background#DCE4F1
  • editorBracketMatch.border#4C566A
  • editorCursor.foreground#2E3440
  • editorError.foreground#BF616A
  • editorGroupHeader.border#D8DEE9
  • editorGroupHeader.noTabsBackground#E4EBF5
  • editorGroupHeader.tabsBackground#E4EBF5
  • editorGutter.addedBackground#74C991
  • editorGutter.background#F6F8FC
  • editorGutter.deletedBackground#E77B84
  • editorGutter.modifiedBackground#D9B66E
  • editorHint.foreground#7B88A1
  • editorHoverWidget.background#EEF3FB
  • editorHoverWidget.border#C2CAD8
  • editorHoverWidget.foreground#2E3440
  • editorIndentGuide.activeBackground1#98A6BB
  • editorIndentGuide.background1#D0D7E2
  • editorInfo.foreground#5E81AC
  • editorInlayHint.background#00000000
  • editorInlayHint.foreground#60728AB3
  • editorLineNumber.activeForeground#2E3440
  • editorLineNumber.foreground#8A96AA
  • editorRuler.foreground#C2CAD8
  • editorSuggestWidget.background#FAFBFE
  • editorSuggestWidget.border#C2CAD8
  • editorSuggestWidget.foreground#2E3440
  • editorSuggestWidget.highlightForeground#5E81AC
  • editorSuggestWidget.selectedBackground#D8DEE9
  • editorSuggestWidget.selectedForeground#2E3440
  • editorWarning.foreground#D08770
  • editorWidget.background#F6F8FC
  • focusBorder#5E81AC
  • input.background#FAFBFE
  • input.border#C2CAD8
  • input.foreground#2E3440
  • input.placeholderForeground#7B88A1
  • list.activeSelectionBackground#D8DEE9
  • list.activeSelectionForeground#2E3440
  • list.errorForeground#BF616A
  • list.focusBackground#D8DEE9
  • list.focusForeground#2E3440
  • list.highlightForeground#5E81AC
  • list.hoverBackground#E8EEF7
  • list.hoverForeground#2E3440
  • list.inactiveSelectionBackground#E8EEF7
  • list.inactiveSelectionForeground#2E3440
  • list.warningForeground#D08770
  • menu.background#F6F8FC
  • menu.foreground#2E3440
  • menu.selectionBackground#D8DEE9
  • menu.selectionForeground#2E3440
  • panel.background#E9EFF8
  • panel.border#C2CAD8
  • peekView.border#C2CAD8
  • peekViewEditor.background#F6F8FC
  • peekViewResult.background#E9EFF8
  • pickerGroup.border#C2CAD8
  • pickerGroup.foreground#4C566A
  • progressBar.background#D08770
  • scrollbarSlider.activeBackground#98A6BBB3
  • scrollbarSlider.background#C2CAD8B3
  • scrollbarSlider.hoverBackground#98A6BBB3
  • sideBar.background#E9EEF6
  • sideBar.border#D8DEE9
  • sideBar.foreground#2E3440
  • sideBarSectionHeader.background#DFE7F2
  • sideBarSectionHeader.foreground#2E3440
  • statusBar.background#DEE6F2
  • statusBar.debuggingBackground#D08770
  • statusBar.debuggingForeground#F7F9FC
  • statusBar.foreground#4C566A
  • statusBarItem.hoverBackground#D3DDEE
  • statusBarItem.remoteBackground#D3DDEE
  • statusBarItem.remoteForeground#2E3440
  • tab.activeBackground#F6F8FC
  • tab.activeBorderTop#D08770
  • tab.activeForeground#2E3440
  • tab.border#D8DEE9
  • tab.hoverBackground#E8EEF7
  • tab.inactiveBackground#E4EBF5
  • tab.unfocusedActiveBackground#F6F8FC
  • tabBar.background#E4EBF5
  • terminal.ansiBlack#3B4252
  • terminal.ansiBlue#1F5FA8
  • terminal.ansiBrightBlack#4C566A
  • terminal.ansiBrightBlue#2F74C4
  • terminal.ansiBrightCyan#3793B4
  • terminal.ansiBrightGreen#2E7A2E
  • terminal.ansiBrightMagenta#C09BB8
  • terminal.ansiBrightRed#D06F79
  • terminal.ansiBrightWhite#F7F9FC
  • terminal.ansiBrightYellow#F2D79A
  • terminal.ansiCyan#2B7FA0
  • terminal.ansiGreen#3F8A3A
  • terminal.ansiMagenta#B48EAD
  • terminal.ansiRed#BF616A
  • terminal.ansiWhite#ECEFF4
  • terminal.ansiYellow#EBCB8B
  • terminal.background#E9EEF6
  • terminal.foreground#2E3440
  • textLink.foreground#5E81AC
  • titleBar.activeBackground#DEE6F2
  • titleBar.activeForeground#2E3440
  • titleBar.inactiveBackground#DEE6F2
  • titleBar.inactiveForeground#4C566A

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, comment.line.php, comment.line.double-slash.php, comment.block.php, comment.block.documentation.php, comment.block.documentation.phpdoc, punctuation.definition.comment, punctuation.definition.comment.php#9A7FA8italic
keyword, storage, keyword.control#D08770
string, string.quoted, string.regexp#6B8F4E
constant, constant.numeric, constant.language#B48E2F
entity.name.function, support.function, meta.function-call#5E81AC
entity.name.type, support.type, storage.type#A67C3B
variable, variable.parameter#3F4A5D
variable.language.this, variable.language.this.php, variable.language.self#9A74A5
punctuation, punctuation.definition#8B7FA8
markup.heading, markup.heading.markdown#D08770bold
entity.name.tag, meta.tag#5E81AC
invalid, invalid.illegal#BF616A