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#5658a5
  • activityBar.foreground#ffffff
  • activityBarBadge.background#da5e98
  • breadcrumb.activeSelectionForeground#6d88ff
  • breadcrumb.foreground#da5e98
  • debugIcon.breakpointForeground#6d88ff
  • editor.background#3f4068
  • editor.findMatchBackground#20a79550
  • editor.findMatchHighlightBackground#ffffff20
  • editor.foreground#da5e98
  • editor.hoverHighlightBackground#20a79550
  • editor.lineHighlightBackground#ffffff10
  • editor.selectionBackground#ffffff20
  • editor.selectionHighlightBackground#20a79550
  • editor.wordHighlightBackground#ffffff00
  • editor.wordHighlightStrongBackground#ffffff20
  • editorBracketHighlight.foreground1#ffffff
  • editorBracketHighlight.foreground2#ffffff
  • editorBracketHighlight.foreground3#ffffff
  • editorBracketHighlight.foreground4#ffffff
  • editorBracketHighlight.foreground5#ffffff
  • editorBracketHighlight.foreground6#ffffff
  • editorCursor.foreground#da5e98
  • editorHoverWidget.border#ffffff
  • editorIndentGuide.activeBackground#ffffff
  • editorIndentGuide.background#20a795
  • editorLightBulb.foreground#6d88ff
  • editorLineNumber.activeForeground#ffffff
  • editorLineNumber.foreground#da5e98
  • editorSuggestWidget.foreground#6d88ff
  • editorSuggestWidget.highlightForeground#da5e98
  • editorWidget.background#000000
  • editorWidget.foreground#ffffff
  • focusBorder#d3af86
  • foreground#ffffff
  • icon.foreground#ffffff
  • input.background#000000
  • input.foreground#ffffff
  • input.placeholderForeground#000000
  • inputOption.activeBackground#ffffff00
  • inputOption.activeBorder#ffffff
  • inputOption.activeForeground#ffffff
  • inputOption.hoverBackground#20a795
  • menu.background#da5e98
  • search.resultsInfoForeground#ffffff
  • sideBar.background#5658a585
  • statusBar.background#da5e98
  • tab.activeBackground#ffffff
  • tab.activeForeground#000000
  • tab.inactiveBackground#6d88ff85
  • tab.inactiveForeground#ffffff
  • titleBar.activeBackground#20a795
  • titleBar.activeForeground#ffffff
  • titleBar.inactiveBackground#20a79585

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#6752C9italic
string#CDABAD
constant.language#F7F7F7
constant.character, constant.other#F7F7F7
variable#AFA3EE
keyword#6A86B3
entity.name.class, entity.name.type#9469B5underline
entity.name.function#67B6BD
entity.name.tag#67B6BD
support.type, support.class#67B6BD
support.other.variable#67B6BD
comment#20A795CC
punctuation.definition.comment#20A795CC
string#6D88FF
meta.embedded.assembly#6D88FF
keyword - keyword.operator#6D88FF
keyword.control#6D88FF
storage#6D88FF
storage.type#6D88FF
constant.numeric#6D88FF
entity.name.type#20A795
entity.name.class#20A795
support.type#20A795
support.class#20A795
entity.name.function#DA5E98
support.function#DA5E98
variable#6D88FF
entity.name.variable#6D88FF
keyword.operator.assignment#FFFFFF
keyword.operator.logical#DA5E98
keyword.operator.arithmetic#FFFFFF
keyword.control#FFFFFF
support.variable#6D88FF
meta.block#DA5E98
entity.name.function#DA5E98
variable.language#20A795
variable.other.readwrite#DA5E98
punctuation#FFFFFF
token.info-token#6796E6
token.warn-token#CD9731
token.error-token#F44747
token.debug-token#B267E6
pstel_jsh by Josh S - VS Code Theme