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#ffffcc
  • activityBar.foreground#4d2600
  • activityBarBadge.background#4d2600
  • activityBarBadge.foreground#ffffcc
  • badge.background#4d2600
  • badge.foreground#FFFFFF
  • editor.background#FDFDFD
  • editor.foreground#1F1F1F
  • editor.lineHighlightBackground#F5F5F5
  • editor.lineHighlightBorder#E0E0E0
  • editor.selectionBackground#B3E5FC88
  • editor.selectionHighlightBackground#E1F5FE80
  • editorBracketMatch.background#00BCD410
  • editorBracketMatch.border#00BCD4
  • editorCursor.foreground#FF4081
  • editorGroup.border#E0E0E0
  • editorGroupHeader.tabsBackground#FAFAFA
  • editorIndentGuide.activeBackground#B3E5FC
  • editorIndentGuide.background#E0E0E0
  • editorLineNumber.activeForeground#1E88E5
  • editorLineNumber.foreground#B0BEC5
  • editorWhitespace.foreground#D0D0D0
  • list.activeSelectionBackground#E3F2FD
  • list.activeSelectionForeground#4d2600
  • list.hoverBackground#F1F8FF
  • list.inactiveSelectionBackground#E0F7FA
  • notification.background#FFFFFF
  • notification.buttonBackground#1E88E5
  • notification.buttonForeground#FFFFFF
  • notification.buttonHoverBackground#1565C0
  • notification.foreground#1F1F1F
  • sideBar.background#ffffff
  • sideBar.foreground#37474F
  • sideBarSectionHeader.background#E1F5FE
  • sideBarSectionHeader.foreground#4d2600
  • sideBarTitle.foreground#1F1F1F
  • statusBar.background#4d2600
  • statusBar.debuggingBackground#4d2600
  • statusBar.debuggingForeground#FFFFFF
  • statusBar.foreground#ffffff
  • statusBar.noFolderBackground#4d2600
  • statusBar.noFolderForeground#FFFFFF
  • tab.activeBackground#FFFFFF
  • tab.activeBorderTop#4d2600
  • tab.activeForeground#4d2600
  • tab.border#E0E0E0
  • tab.inactiveBackground#F0F0F0
  • tab.inactiveForeground#90A4AE
  • tab.unfocusedActiveBorder#E0E0E0
  • terminal.ansiBlack#212121
  • terminal.ansiBlue#40C4FF
  • terminal.ansiBrightBlack#9E9E9E
  • terminal.ansiBrightBlue#2979FF
  • terminal.ansiBrightCyan#00FFFF
  • terminal.ansiBrightGreen#00E676
  • terminal.ansiBrightMagenta#D500F9
  • terminal.ansiBrightRed#FF1744
  • terminal.ansiBrightWhite#FFFFFF
  • terminal.ansiBrightYellow#FFEA00
  • terminal.ansiCyan#18FFFF
  • terminal.ansiGreen#69F0AE
  • terminal.ansiMagenta#EA80FC
  • terminal.ansiRed#FF5252
  • terminal.ansiWhite#ECEFF1
  • terminal.ansiYellow#FFD740
  • terminal.background#ffffcc
  • terminal.foreground#212121
  • terminalCursor.background#4d2600
  • terminalCursor.foreground#4d2600
  • titleBar.activeBackground#ffffcc
  • titleBar.activeForeground#4d2600
  • titleBar.inactiveBackground#F5F5F5
  • titleBar.inactiveForeground#9E9E9E

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
entity.name.tag.html#FF6D00bold
entity.other.attribute-name.html#00BCD4
string.quoted.double.html, string.quoted.single.html#64DD17
comment.block.html#90A4AEitalic
entity.name.tag.css#7C4DFF
support.type.property-name.css#00BFA5
constant.other.color.rgb-value.css#FF4081
keyword.other.unit.css#4d2600
keyword.control.js, keyword.control.ts#F50057bold
entity.name.function.js, entity.name.function.ts#2979FF
variable.other.readwrite.js, variable.other.readwrite.ts#FF8F00
entity.name.type.class.js, entity.name.type.class.ts#AA00FF
string.quoted.double.js, string.quoted.single.js, string.quoted.double.ts, string.quoted.single.ts#00E676
constant.numeric.js, constant.language.boolean.js, constant.numeric.ts, constant.language.boolean.ts#FFC107
entity.name.tag.yaml#4d2600
string.unquoted.plain.out.yaml, string.quoted.double.yaml, string.quoted.single.yaml#00E5FF
comment.line.number-sign.yaml#9E9E9Eitalic
support.type.property-name.json#4d2600
string.quoted.double.json#4CAF50
constant.numeric.json#F44336
constant.language.boolean.json, constant.language.null.json#7C4DFF