Skip to main content
Coding Theme

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#003366
  • activityBar.foreground#b3ecff
  • activityBarBadge.background#007bff91
  • button.background#0099cc
  • dropdown.background#002b4d
  • editor.background#001f3f
  • editor.findMatchBackground#33bbffd7
  • editor.findMatchHighlightBackground#59b8b377
  • editor.foreground#ffffff
  • editor.hoverHighlightBackground#007bff38
  • editor.lineHighlightBackground#7fdbff38
  • editor.lineHighlightBorder#007bff33
  • editor.rangeHighlightBackground#2e4157
  • editor.selectionBackground#007bff38
  • editor.selectionHighlightBackground#007bff38
  • editor.wordHighlightBackground#4dd0e13a
  • editor.wordHighlightStrongBackground#4dd0e193
  • editorBracketMatch.background#004d80
  • editorBracketMatch.border#00FFFF
  • editorCodeLens.foreground#004d80
  • editorCursor.foreground#b3e5ff
  • editorError.foreground#ff4e47
  • editorGroupHeader.tabsBackground#002b4d
  • editorGutter.addedBackground#33ccffbb
  • editorGutter.deletedBackground#ff6666bb
  • editorGutter.modifiedBackground#007bffbb
  • editorIndentGuide.activeBackground1#007bff94
  • editorIndentGuide.background1#007bff38
  • editorLineNumber.foreground#7eb9ff
  • editorLink.activeForeground#33bbff
  • editorOverviewRuler.border#007bff00
  • editorRuler.foreground#004d80
  • editorSuggestWidget.background#002b4d
  • editorSuggestWidget.border#007bff
  • editorSuggestWidget.foreground#007bff
  • editorWarning.foreground#1df5bf
  • editorWhitespace.foreground#ffffff23
  • extensionButton.prominentBackground#33ccff
  • extensionButton.prominentForeground#ffffff
  • extensionButton.prominentHoverBackground#007acc
  • input.background#003366
  • inputOption.activeBorder#007acc
  • list.activeSelectionBackground#007bff69
  • list.focusBackground#0099ccf3
  • list.highlightForeground#FFFFFF
  • list.hoverBackground#007bff38
  • list.inactiveSelectionBackground#007bff38
  • notificationCenter.border#007bff91
  • notificationCenterHeader.background#002b4d
  • notificationLink.foreground#004080
  • notifications.background#007bff38
  • notifications.foreground#FFFFFF
  • panelTitle.activeForeground#ffffff
  • peekView.border#003366
  • scrollbarSlider.activeBackground#80d4ff48
  • scrollbarSlider.background#80d4ff48
  • scrollbarSlider.hoverBackground#80d4ff48
  • sideBar.background#001a33
  • sideBarSectionHeader.background#007bff91
  • sideBarTitle.foreground#ffffff
  • statusBar.background#003366
  • statusBar.debuggingBackground#00264d
  • statusBar.noFolderBackground#002b4d
  • tab.activeForeground#ffffff
  • tab.border#99ccff71
  • tab.inactiveBackground#0000332f
  • tab.inactiveForeground#cce6ff
  • terminal.ansiWhite#ffffff
  • titleBar.activeBackground#001a33

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
entity.name.function#66ccffbold
meta.function-call.generic, support.function#66ccffitalic
meta.property.object, meta.method.declaration, meta.method-call, support.function#0099ccitalic
constant.language.boolean, constant.language.null, constant.language#33bbff
comment, punctuation.definition.comment#80bfff
keyword, storage.type, storage.modifier#007bffitalic
string, constant.other.symbol, punctuation.definition.string.begin, punctuation.definition.string.end#66ffcc
constant.numeric#ff99ff
punctuation, punctuation.definition.bracket, punctuation.definition.parameters, punctuation.separator#33bbff
Glacia Theme by Arthur Fortunato - VS Code Theme