Skip to main content
CodingTheme

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#1E1E1E
  • activityBar.foreground#D4D4D4
  • editor.background#1E1E1E
  • editor.foreground#D4D4D4
  • editor.lineHighlightBackground#2A2A2A
  • editor.selectionBackground#3F3F3F
  • editorCursor.foreground#D4D4D4
  • editorHoverWidget.background#252526
  • sideBar.background#252526
  • sideBar.foreground#D4D4D4
  • statusBar.background#1E1E1E
  • statusBar.foreground#D4D4D4
  • tab.activeBackground#3C3C3C
  • tab.inactiveBackground#252526

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#A0A0A0
keyword#4EC9B0
string#569CD6
number#D69D85
variable#D4D4D4
function#569CD6
constant#C586C0
entity.name.type#DCDCAA
operator#D4D4D4
punctuation#D4D4D4
entity.name.tag#D69D85
entity.other.attribute-name#4EC9B0
meta.tag.attribute-value#569CD6
meta.object-literal.key#D4D4D4
string.json#B5CEA8
number.json#B5CEA8
constant.language.json#B5CEA8

Shiki preview

TypeScript sample highlighted with this variant's colors and tokenColors.

Loading...

Grok Dark Theme by Joseph King - VS Code Theme