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#1E232D
  • activityBar.foreground#ECEFF4
  • activityBar.inactiveForeground#60728A
  • activityBarBadge.background#D08770
  • activityBarBadge.foreground#242933
  • badge.background#D08770
  • badge.foreground#242933
  • button.background#D08770
  • button.foreground#242933
  • button.hoverBackground#E0A287
  • button.secondaryBackground#333B4B
  • button.secondaryForeground#ECEFF4
  • checkbox.background#333B4B
  • checkbox.border#3C4454
  • descriptionForeground#D8DEE9
  • dropdown.background#242933
  • dropdown.border#3C4454
  • editor.background#242933
  • editor.findMatchBackground#EBCB8B66
  • editor.findMatchForeground#ECEFF4
  • editor.findMatchHighlightBackground#EBCB8B66
  • editor.foreground#ECEFF4
  • editor.inactiveSelectionBackground#333B4B
  • editor.lineHighlightBackground#F7F7F708
  • editor.lineHighlightBorder#00000000
  • editor.selectionBackground#58667F50
  • editor.wordHighlightBackground#58667F50
  • editor.wordHighlightStrongBackground#58667FF0
  • editorBracketHighlight.foreground1#D08770
  • editorBracketHighlight.foreground2#A3BE8C
  • editorBracketHighlight.foreground3#88C0D0
  • editorBracketHighlight.foreground4#B48EAD
  • editorBracketHighlight.foreground5#EBCB8B
  • editorBracketHighlight.foreground6#D8DEE9
  • editorBracketMatch.background#333B4B
  • editorBracketMatch.border#D8DEE9
  • editorCursor.foreground#ECEFF4
  • editorError.foreground#F48771
  • editorGroupHeader.border#1A2028
  • editorGroupHeader.noTabsBackground#1A2028
  • editorGroupHeader.tabsBackground#1A2028
  • editorGutter.addedBackground#74C991
  • editorGutter.background#242933
  • editorGutter.deletedBackground#E77B84
  • editorGutter.modifiedBackground#E2C08D
  • editorHint.foreground#969696
  • editorIndentGuide.activeBackground1#707070
  • editorIndentGuide.background1#404040
  • editorInfo.foreground#75BEFF
  • editorInlayHint.background#00000000
  • editorInlayHint.foreground#60728Ab3
  • editorLineNumber.activeForeground#ECEFF4
  • editorLineNumber.foreground#60728A
  • editorRuler.foreground#3C4454
  • editorSuggestWidget.background#1E232D
  • editorSuggestWidget.border#3C4454
  • editorSuggestWidget.foreground#ECEFF4
  • editorSuggestWidget.highlightForeground#88C0D0
  • editorSuggestWidget.selectedBackground#333B4B
  • editorSuggestWidget.selectedForeground#ECEFF4
  • editorWarning.foreground#EBCB8B
  • editorWidget.background#242933
  • focusBorder#D8DEE9
  • input.background#333B4B
  • input.border#3C4454
  • input.foreground#ECEFF4
  • input.placeholderForeground#8C8C8CF0
  • list.activeSelectionBackground#333B4B
  • list.activeSelectionForeground#ECEFF4
  • list.focusBackground#333B4B
  • list.focusForeground#ECEFF4
  • list.highlightForeground#88C0D0
  • list.hoverBackground#2D3341
  • list.hoverForeground#ECEFF4
  • list.inactiveSelectionBackground#2D3341
  • list.inactiveSelectionForeground#ECEFF4
  • menu.background#242933
  • menu.foreground#ECEFF4
  • menu.selectionBackground#333B4B
  • menu.selectionForeground#ECEFF4
  • panel.background#1E232D
  • panel.border#3C4454
  • peekView.border#3C4454
  • peekViewEditor.background#242933
  • peekViewResult.background#1E232D
  • pickerGroup.border#3C4454
  • pickerGroup.foreground#D8DEE9
  • progressBar.background#D08770
  • scrollbarSlider.activeBackground#646464B3
  • scrollbarSlider.background#353D4C
  • scrollbarSlider.hoverBackground#646464B3
  • sideBar.background#181D25
  • sideBar.border#3C4454
  • sideBar.foreground#ECEFF4
  • sideBarSectionHeader.background#1D232D
  • sideBarSectionHeader.foreground#ECEFF4
  • statusBar.background#242933
  • statusBar.debuggingBackground#F48771
  • statusBar.debuggingForeground#242933
  • statusBar.foreground#D8DEE9
  • statusBarItem.hoverBackground#2D3341
  • statusBarItem.remoteBackground#333B4B
  • statusBarItem.remoteForeground#ECEFF4
  • tab.activeBackground#242933
  • tab.activeBorderTop#D08770
  • tab.activeForeground#ECEFF4
  • tab.border#1E232D
  • tab.hoverBackground#2D3341
  • tab.inactiveBackground#1E232D
  • tab.unfocusedActiveBackground#242933
  • tabBar.background#1A2028
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#2472C8
  • terminal.ansiBrightBlack#666666
  • terminal.ansiBrightBlue#3B8EEA
  • terminal.ansiBrightCyan#29B8DB
  • terminal.ansiBrightGreen#23D18B
  • terminal.ansiBrightMagenta#D670D6
  • terminal.ansiBrightRed#F14C4C
  • terminal.ansiBrightWhite#E5E5E5
  • terminal.ansiBrightYellow#F5F543
  • terminal.ansiCyan#11A8CD
  • terminal.ansiGreen#0DBC79
  • terminal.ansiMagenta#BC3FBC
  • terminal.ansiRed#CD3131
  • terminal.ansiWhite#E5E5E5
  • terminal.ansiYellow#E5E510
  • terminal.background#171C24
  • terminal.foreground#ECEFF4
  • textLink.foreground#88C0D0
  • titleBar.activeBackground#1E232D
  • titleBar.activeForeground#ECEFF4
  • titleBar.inactiveBackground#1E232D
  • titleBar.inactiveForeground#D8DEE9

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#8C8C8CF0italic
keyword, storage, keyword.control#D08770
string, string.quoted, string.regexp#A3BE8C
constant, constant.numeric, constant.language#EBCB8B
entity.name.function, support.function, meta.function-call#88C0D0
entity.name.type, support.type, storage.type#EBCB8B
variable, variable.parameter#C0C8D8
variable.language.this, variable.language.this.php, variable.language.self#B48EAD
punctuation, punctuation.definition#B48EAD
markup.heading, markup.heading.markdown#D08770bold
entity.name.tag, meta.tag#88C0D0
entity.name.function.decorator, meta.decorator, punctuation.decorator, storage.type.annotation, storage.type.annotation.java, entity.name.type.annotation, entity.name.type.annotation.java, meta.annotation, meta.annotation.java#B48EAD
invalid, invalid.illegal#F48771