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#302c3c
  • activityBarBadge.background#d49181
  • button.background#7191d6
  • button.hoverBackground#3a4a6d
  • dropdown.background#211e29
  • dropdown.listBackground#211e29
  • editor.background#302c3c
  • editor.foreground#eefff6
  • editor.selectionBackground#ead7f321
  • editor.wordHighlightBackground#ead7f321
  • editor.wordHighlightStrongBackground#ead7f321
  • editorGroupHeader.border#f8faff
  • editorGroupHeader.tabsBackground#231f2b
  • editorLineNumber.activeForeground#fff098
  • editorSuggestWidget.background#2d2938
  • editorSuggestWidget.border#231f2b
  • editorSuggestWidget.focusHighlightForeground#ffffff
  • editorSuggestWidget.highlightForeground#ffffff
  • editorWidget.background#231f2b
  • editorWidget.border#231f2b
  • focusBorder#00000000
  • input.background#211e29
  • inputOption.activeBorder#ffffff
  • list.activeSelectionBackground#231f2b
  • list.activeSelectionForeground#eba18e
  • list.focusAndSelectionOutline#97dcf7
  • list.hoverBackground#231f2b
  • list.inactiveSelectionBackground#231f2b
  • minimap.background#2d2938
  • peekView.border#fca099
  • peekViewEditor.background#302c3c
  • peekViewEditorGutter.background#2d2938
  • peekViewResult.background#2d2938
  • peekViewTitle.background#2d2938
  • sideBar.background#2d2938
  • sideBarTitle.foreground#eba18e
  • statusBar.background#666f8d
  • statusBar.debuggingBackground#391e52
  • tab.activeBackground#231f2b
  • tab.activeBorder#eba18e
  • tab.activeForeground#fcb5a3
  • tab.inactiveBackground#302c3c
  • tab.inactiveForeground#a0a0a0
  • titleBar.activeBackground#2d2938
  • titleBar.inactiveBackground#2d2938

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#777688italic
constant#ffffff
constant.numeric, constant.language, constant.charcter.escape#c9afe6
entity.name#ffbeb9
entity.name.section, entity.name.tag, entity.name.namespace, entity.name.type#9CCFD8
entity.other.attribute-name, entity.other.inherited-class#fffaad
invalid#EB6F92
invalid.deprecated#E1D5BD
keyword#6bfabe
meta.tag, meta.brace#6bfabe
meta.import, meta.export#5d8da4
punctuation#ffffff
punctuation.accessor#ffffff
punctuation.definition.string#ffffff
punctuation.definition.tag#9CCFD880
storage.type, storage.modifier#fa84a7
string#F6C177
support#a1dbfc
support.constant#F6C177
support.function#eb6f6f
variable#EBBCBAitalic
variable.other, variable.language, variable.function, variable.argument#f89cd9
variable.parameter#d6b4ff
token.info-token#6796E6
token.warn-token#CD9731
token.error-token#F44747
token.debug-token#B267E6

Shiki preview

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

Loading...

pink fresh by Andrés García - VS Code Theme