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.activeBackground#fff
  • activityBar.activeBorder#343a40
  • activityBar.activeFocusBorder#343a40
  • activityBar.background#fff
  • activityBar.border#fff
  • activityBar.foreground#343a40
  • activityBarBadge.background#343a40
  • activityBarBadge.foreground#fff
  • button.background#343a40
  • button.foreground#fff
  • editor.background#fff
  • editor.findMatchBackground#fff
  • editor.findMatchHighlightBackground#e5dbff
  • editor.foldBackground#f8f9fa
  • editor.foreground#343a40
  • editor.lineHighlightBackground#fff
  • editor.selectionBackground#e9ecef
  • editor.selectionHighlightBackground#f8f9fa
  • editorCursor.foreground#717eee
  • editorError.foreground#ff8787
  • editorGroupHeader.tabsBackground#fff
  • editorGutter.addedBackground#d3f9d8
  • editorGutter.background#fff
  • editorGutter.deletedBackground#ffe3e3
  • editorGutter.modifiedBackground#dbe4ff
  • editorLineNumber.activeForeground#343a40
  • editorLineNumber.foreground#ced4da
  • editorWarning.foreground#9775fa
  • errorForeground#ff8787
  • focusBorder#343a40
  • foreground#343a40
  • gitDecoration.addedResourceForeground#343a40
  • gitDecoration.modifiedResourceForeground#343a40
  • gitDecoration.untrackedResourceForeground#adb5bd
  • input.background#fff
  • input.border#adb5bd
  • input.foreground#343a40
  • list.activeSelectionBackground#f8f9fa
  • list.activeSelectionForeground#343a40
  • list.errorForeground#ff8787
  • list.focusBackground#f8f9fa
  • list.focusForeground#343a40
  • list.hoverBackground#f8f9fa
  • list.inactiveFocusBackground#000
  • list.inactiveSelectionBackground#f8f9fa
  • list.inactiveSelectionForeground#343a40
  • list.invalidItemForeground#ff8787
  • list.warningForeground#9775fa
  • panel.background#fff
  • scrollbar.shadow#fff
  • scrollbarSlider.activeBackground#f000
  • scrollbarSlider.background#9aa0
  • scrollbarSlider.hoverBackground#ff00
  • sideBar.background#fff
  • sideBar.border#f8f9fa
  • sideBarSectionHeader.background#fff
  • statusBar.background#fff
  • statusBar.debuggingBackground#fff
  • statusBar.debuggingForeground#343a40
  • statusBar.foreground#343a40
  • statusBar.noFolderBackground#fff
  • statusBar.noFolderForeground#343a40
  • tab.activeBackground#fff
  • tab.activeBorder#343a40
  • tab.border#fff
  • tab.inactiveBackground#fff
  • tab.inactiveForeground#adb5bd
  • terminal.ansiBlack#343a40
  • terminal.ansiBlue#343a40
  • terminal.ansiBrightBlack#171a1d
  • terminal.ansiBrightBlue#343a40
  • terminal.ansiBrightCyan#323232
  • terminal.ansiBrightGreen#868E96
  • terminal.ansiBrightMagenta#343a40
  • terminal.ansiBrightRed#080808
  • terminal.ansiBrightWhite#fff
  • terminal.ansiBrightYellow#868E96
  • terminal.ansiCyan#343a40
  • terminal.ansiGreen#868E96
  • terminal.ansiMagenta#343a40
  • terminal.ansiRed#080808
  • terminal.ansiWhite#f8f9fa
  • terminal.ansiYellow#868E96
  • terminal.background#fff
  • terminal.foreground#000000
  • terminalCursor.foreground#000000
  • textLink.foreground#717eee

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
variable, support.variable#969896
comment, punctuation.definition.comment#ced4da
string, string.regexp, constant.other.symbol#868e96
constant.character.escape#343a40
constant.numeric, constant.character, constant.keyword, constant#868e96
entity.name#343a40bold
variable.other.constant.js, variable.other.constant.jsx, variable.other.constant.ts, variable.other.constant.tsx#343a40
entity.name.type.ts, entity.name.type.tsx
punctuation#343a40
meta.diff.range, meta.diff.index, meta.separator#343a40
meta.diff.header.from-file#343a40
meta.diff.header.to-file#343a40
constant.language#343a40italic
storage#343a40 italic
entity.other.inherited-class#343a40italic
variable.parameter#343a40italic
support.type, support.class#969896italic
keyword.control.as.js, keyword.control.as.jsx, keyword.control.as.ts, keyword.control.as.tsx, keyword.control.flow.js, keyword.control.flow.jsx, keyword.control.flow.ts, keyword.control.flow.tsxitalic
invalid, deprecated, support.deprecated, invalid.deprecated#9775faitalic
support.type.property-name.json, punctuation.support.type.property-name.begin.json, punctuation.support.type.property-name.end.json#3a3a3a90
string.quoted.double.json, punctuation.definition.string.begin.json, punctuation.definition.string.end.json#3a3a3a
Minimus Theme by Mauro Paternina - VS Code Theme