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.activeBorder#E5C07B
  • activityBar.background#24292e
  • activityBar.foreground#D1D5DC
  • breadcrumb.focusForeground#e1e4e8
  • breadcrumb.foreground#959da5
  • debugToolBar.background#1286e4
  • editor.background#24292e
  • editor.foreground#eeffff
  • editor.lineHighlightBackground#2b3036
  • editor.selectionBackground#3392ff44
  • editorBracketHighlight.foreground1#E5C07B
  • editorBracketHighlight.foreground2#ffab70
  • editorBracketHighlight.foreground3#b392f0
  • editorBracketHighlight.foreground4#79b8ff
  • editorBracketHighlight.foreground5#ffab70
  • editorBracketHighlight.foreground6#b392f0
  • editorCursor.foreground#c8e1ff
  • editorGroupHeader.tabsBackground#1f2428
  • editorGroupHeader.tabsBorder#1b1f23
  • editorLineNumber.foreground#444d56
  • editorOverviewRuler.border#1b1f23
  • editorWidget.background#1f2428
  • list.hoverBackground#282e34
  • list.hoverForeground#e1e4e8
  • list.inactiveSelectionBackground#282e34
  • list.inactiveSelectionForeground#e1e4e8
  • menu.background#1f2428
  • minimapGutter.addedBackground#109868
  • minimapGutter.deletedBackground#9a353d
  • minimapGutter.modifiedBackground#948b60
  • scrollbar.shadow#00000088
  • scrollbarSlider.activeBackground#6a737d88
  • scrollbarSlider.background#6a737d33
  • scrollbarSlider.hoverBackground#6a737d44
  • sideBar.background#1f2428
  • sideBarSectionHeader.background#1f2428
  • sideBarStickyScroll.shadow#1f2428
  • sideBarTitle.foreground#bbbbbb
  • statusBar.background#24292e
  • statusBar.foreground#9da5b4
  • tab.activeBorderTop#e5c07b
  • tab.activeForeground#D1D5DC
  • tab.hoverBackground#24292e
  • tab.inactiveBackground#1f2428
  • tab.inactiveForeground#9da5b4
  • titleBar.activeBackground#24292e
  • titleBar.activeForeground#9da5b4

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#E5C07B
support.type.property-name#98C379
string, string.regexp, constant.other.symbol#98C379
constant.character.escape#777777
constant.numeric, constant.character, constant.keyword, constant#E5A4CB
entity.name, entity.name.function, support.function.any-method, entity.name.function.ts, variable.function, support.function.console, keyword.other.special-method, storage.type.string, storage.type.error#79B8FF
variable.other.readwrite.alias#9fc490
variable.other.constant, meta.definition.variable, variable.other.readwrite#A2CBFA
punctuation#8A97A1
invalid#CC3333
meta.diff.range, meta.diff.index, meta.separator#BBBBBB
meta.diff.header.from-file#BBBBBB
meta.diff.header.to-file#BBBBBB
token.info-token#6796E6
token.warn-token#CD9731
token.error-token#F44747
token.debug-token#B267E6
meta.property-name.css, support.type.property-name.css#A2CBFA
source.json meta.structure.dictionary.json support.type.property-name.json#79B8FF
meta.structure.dictionary.value.json string.quoted.double.json#98C379
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#A2CBFA
markup.italic#A2CBFAitalic
markup.bold, markup.bold string#A2CBFAbold
markup.quoteitalic
entity.other.attribute-name.class.css#98C379
Relieve Theme by brunopinho.dev - VS Code Theme