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#181818
  • activityBar.foreground#e0e0e0
  • activityBarBadge.background#1a73e8
  • activityBarBadge.foreground#ffffff
  • badge.background#1a73e8
  • badge.foreground#ffffff
  • button.background#1a73e8
  • button.foreground#ffffff
  • button.hoverBackground#3d8bf0
  • editor.background#1f1f1f
  • editor.foreground#e6e6e6
  • editor.lineHighlightBackground#2a2a2a
  • editor.selectionBackground#264f7840
  • editor.selectionHighlightBackground#264f7820
  • editorBracketMatch.background#1a73e830
  • editorBracketMatch.border#1a73e8
  • editorCursor.foreground#1a73e8
  • editorError.foreground#f14c4c
  • editorIndentGuide.activeBackground#404040
  • editorIndentGuide.background#2d2d2d
  • editorLineNumber.activeForeground#e6e6e6
  • editorLineNumber.foreground#6e7681
  • editorWarning.foreground#cca700
  • editorWhitespace.foreground#3c3c3c
  • focusBorder#1a73e8
  • foreground#e0e0e0
  • input.background#2d2d2d
  • input.border#3c3c3c
  • inputOption.activeBorder#1a73e8
  • list.activeSelectionBackground#1a73e840
  • list.activeSelectionForeground#ffffff
  • list.hoverBackground#2a2a2a
  • list.inactiveSelectionBackground#2a2a2a80
  • menu.background#252526
  • menu.foreground#e0e0e0
  • menu.selectionBackground#1a73e8
  • minimap.background#1a1a1a
  • panel.background#1f1f1f
  • panel.border#2d2d2d
  • panelTitle.activeBorder#1a73e8
  • scrollbarSlider.background#5a5a5a60
  • scrollbarSlider.hoverBackground#7a7a7a80
  • sideBar.background#181818
  • sideBar.foreground#c8c8c8
  • sideBarTitle.foreground#e0e0e0
  • statusBar.background#1a73e8
  • statusBar.foreground#ffffff
  • statusBar.noFolderBackground#181818
  • tab.activeBackground#1f1f1f
  • tab.activeBorderTop#1a73e8
  • tab.inactiveBackground#181818
  • tab.inactiveForeground#9d9d9d
  • terminal.background#1f1f1f
  • titleBar.activeBackground#181818
  • titleBar.activeForeground#e0e0e0
  • widget.shadow#00000060

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
keyword.other.DML.sql, keyword.other.DDL.sql, keyword.control.sql, keyword.other.sql#7DB0FFbold
keyword.operator.comparison.sql, keyword.operator.arithmetic.sql, keyword.operator.assignment.sql#B4B4B4
support.function.aggregate.sql, support.function.string.sql, support.function.datetime.sql, support.function.numeric.sql, support.function.sql#E879F9
storage.type.sql#4EC9B0
string.quoted.single.sql, string.quoted.double.sql#FF5252
string.quoted.backtick.sql#9CDCFE
constant.character.escape.sql#FF1744
constant.numeric.sql#B5CEA8
comment.line.double-dash.sql, comment.line.hash.sql, comment.block.sql#6A9955italic
variable.other.sql, variable.other.system.sql#9CDCFE
entity.other.qualified-object.sql#89D185
keyword.control, storage.type, storage.modifier#569CD6
string.quoted.single, string.quoted.double#FF5252
string.quoted.backtick#9CDCFE
string, string.quoted#FF5252
comment#6A9955italic
constant.numeric#B5CEA8
entity.name.function, support.function#E879F9
SQLLens.AI by skylineai - VS Code Theme