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#0A131F
  • badge.background#00A1E4
  • badge.foreground#0F1C2E
  • button.background#00A1E4
  • button.foreground#0F1C2E
  • button.hoverBackground#40E0D0
  • dropdown.background#192236
  • dropdown.border#2C4058
  • dropdown.foreground#DCE1E6
  • editor.background#0F1C2E
  • editor.foreground#DCE1E6
  • editor.lineHighlightBackground#192236
  • editor.selectionBackground#1F3A58
  • editorBracketMatch.background#2C4058
  • editorBracketMatch.border#40E0D0
  • editorCursor.foreground#FF007F
  • editorError.foreground#FF6F61
  • editorInfo.foreground#00A1E4
  • editorLineNumber.foreground#4D5B6A
  • editorLink.activeForeground#00A1E4
  • editorWarning.foreground#F1C232
  • focusBorder#00A1E4
  • gitDecoration.addedResourceForeground#6B8C78
  • gitDecoration.deletedResourceForeground#FF6F61
  • gitDecoration.modifiedResourceForeground#F1C232
  • input.background#192236
  • input.border#2C4058
  • input.foreground#DCE1E6
  • list.activeSelectionBackground#2C4058
  • list.activeSelectionForeground#DCE1E6
  • list.hoverBackground#1F3A58
  • scrollbarSlider.background#2C4058
  • scrollbarSlider.hoverBackground#3A5B7D
  • sideBar.background#0A131F
  • statusBar.background#003D67
  • statusBar.foreground#FFFFFF
  • tab.activeBackground#0F1C2E
  • tab.activeBorder#00A1E4
  • tab.activeForeground#00A1E4
  • tab.border#0A131F
  • tab.inactiveBackground#0A131F
  • tab.inactiveForeground#4D5B6A
  • tab.unfocusedActiveForeground#00A1E4
  • tab.unfocusedInactiveForeground#4D5B6A
  • terminal.ansiBlack#0A131F
  • terminal.ansiBlue#00A1E4
  • terminal.ansiBrightBlack#4D5B6A
  • terminal.ansiBrightBlue#00A1E4
  • terminal.ansiBrightCyan#40E0D0
  • terminal.ansiBrightGreen#6B8C78
  • terminal.ansiBrightMagenta#F08F90
  • terminal.ansiBrightRed#FF6F61
  • terminal.ansiBrightWhite#E6E6E6
  • terminal.ansiBrightYellow#F1C232
  • terminal.ansiCyan#40E0D0
  • terminal.ansiGreen#6B8C78
  • terminal.ansiMagenta#F08F90
  • terminal.ansiRed#FF6F61
  • terminal.ansiWhite#E6E6E6
  • terminal.ansiYellow#F1C232
  • terminal.background#0F1C2E
  • terminal.foreground#E6E6E6

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, comment.block.documentation, punctuation.definition.comment, comment.block.documentation punctuation, string.quoted.docstring.multi, string.quoted.docstring.single#6B8C78
keyword, storage#F08F90
string, string.quoted#F1C232
entity.name.function, support.function#00A1E4
entity.name.type, support.class, support.type#40E0D0
variable, variable.parameter#8FE3D0
constant.numeric#FF6F61
punctuation, punctuation.definition#DCE1E6
keyword.operator#F08F90
variable.other#EFF0F1
invalid#FF6F61underline
constant#40E0D0
markup.bold, markup.italic#F08F90
markup.heading#00A1E4bold
markup.link#40E0D0
entity.name.class, entity.name.namespace#40E0D0
entity.name.tag#F08F90
entity.other.attribute-name#00A1E4