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#1a73e8
  • activityBar.background#f0f4fa
  • activityBar.foreground#1a1a2e
  • activityBarBadge.background#1a73e8
  • activityBarBadge.foreground#ffffff
  • badge.background#1a73e8
  • badge.foreground#ffffff
  • button.background#1a73e8
  • button.foreground#ffffff
  • button.hoverBackground#1557b0
  • editor.background#ffffff
  • editor.foreground#1a1a2e
  • editor.lineHighlightBackground#f5f8fc
  • editor.selectionBackground#1a73e830
  • editor.selectionHighlightBackground#1a73e818
  • editorBracketMatch.background#1a73e820
  • editorBracketMatch.border#1a73e8
  • editorCursor.foreground#1a73e8
  • editorError.foreground#c72e0f
  • editorIndentGuide.activeBackground#c8d0d8
  • editorIndentGuide.background#e8ecf0
  • editorLineNumber.activeForeground#1a1a2e
  • editorLineNumber.foreground#8a9199
  • editorWarning.foreground#8a6d00
  • editorWhitespace.foreground#d4d8dc
  • focusBorder#1a73e8
  • foreground#1a1a2e
  • input.background#ffffff
  • input.border#c8d0d8
  • inputOption.activeBorder#1a73e8
  • list.activeSelectionBackground#1a73e824
  • list.activeSelectionForeground#1a1a2e
  • list.hoverBackground#eef3f8
  • list.inactiveSelectionBackground#eef3f8
  • menu.background#ffffff
  • menu.foreground#1a1a2e
  • menu.selectionBackground#1a73e8
  • menu.selectionForeground#ffffff
  • minimap.background#f8fafc
  • panel.background#ffffff
  • panel.border#e4e8ec
  • panelTitle.activeBorder#1a73e8
  • scrollbarSlider.background#a0a8b060
  • scrollbarSlider.hoverBackground#80889080
  • sideBar.background#f5f8fc
  • sideBar.foreground#3a4450
  • sideBarTitle.foreground#1a1a2e
  • statusBar.background#1a73e8
  • statusBar.foreground#ffffff
  • statusBar.noFolderBackground#f0f4fa
  • tab.activeBackground#ffffff
  • tab.activeBorderTop#1a73e8
  • tab.inactiveBackground#eef3f8
  • tab.inactiveForeground#6a7380
  • terminal.background#ffffff
  • titleBar.activeBackground#f0f4fa
  • titleBar.activeForeground#1a1a2e
  • widget.shadow#00000018

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
keyword.other.DML.sql, keyword.other.DDL.sql, keyword.control.sql, keyword.other.sql#0d47a1bold
keyword.operator.comparison.sql, keyword.operator.arithmetic.sql, keyword.operator.assignment.sql#37474f
support.function.aggregate.sql, support.function.string.sql, support.function.datetime.sql, support.function.numeric.sql, support.function.sql#AB47BC
storage.type.sql#00796b
string.quoted.single.sql, string.quoted.double.sql#D32F2F
string.quoted.backtick.sql#0288D1
constant.character.escape.sql#B71C1C
constant.numeric.sql#098658
comment.line.double-dash.sql, comment.line.hash.sql, comment.block.sql#008000italic
variable.other.sql, variable.other.system.sql#0451a5
entity.other.qualified-object.sql#0d8043
keyword.control, storage.type, storage.modifier#0d47a1
string.quoted.single, string.quoted.double#D32F2F
string.quoted.backtick#0288D1
string, string.quoted#D32F2F
comment#008000italic
constant.numeric#098658
entity.name.function, support.function#AB47BC