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#D87D71
  • activityBar.background#47211A
  • activityBar.border#000000
  • activityBar.dropBorder#47211A
  • activityBar.foreground#FFFFFF
  • activityBar.inactiveForeground#FFFFFF
  • activityBarBadge.background#7A3D22
  • activityBarBadge.foreground#FFFFFF
  • button.background#7A3D22
  • button.foreground#FFFFFF
  • button.hoverBackground#47211A
  • dropdown.background#5C2B1E
  • dropdown.border#000000
  • dropdown.foreground#FFFFFF
  • editor.background#240702
  • editor.foreground#FFFFFF
  • editor.lineHighlightBackground#FF7E6733
  • editor.selectionBackground#661f13aa
  • editorCursor.foreground#D87D71
  • editorGutter.background#3D0A02
  • editorIndentGuide.activeBackground#D87D71
  • editorIndentGuide.background#7C4D34
  • scrollbarSlider.activeBackground#47211AFF
  • scrollbarSlider.background#47211AAA
  • scrollbarSlider.hoverBackground#47211ADD
  • sideBar.background#47211A
  • sideBar.border#000000
  • sideBar.foreground#FFFFFF
  • sideBarSectionHeader.background#47211A
  • sideBarSectionHeader.foreground#FFFFFF
  • sideBarTitle.foreground#FFFFFF
  • statusBar.background#47211A
  • statusBar.border#000000
  • statusBar.debuggingBackground#47211A
  • statusBar.debuggingForeground#FFFFFF
  • statusBar.foreground#FFFFFF
  • statusBar.noFolderBackground#5C2B1E
  • tab.activeBackground#421908
  • tab.activeForeground#FFFFFF
  • tab.border#000000
  • tab.hoverBackground#47211A
  • tab.inactiveBackground#5C2B1E
  • tab.inactiveForeground#FFFFFF
  • terminal.ansiBlack#5C2B1E
  • terminal.ansiBlue#00AFFF
  • terminal.ansiCyan#00E0E0
  • terminal.ansiGreen#42D97C
  • terminal.ansiMagenta#FF7E67
  • terminal.ansiRed#FF7E67
  • terminal.ansiWhite#FFFFFF
  • terminal.ansiYellow#FFCC00
  • terminal.foreground#FFFFFF
  • titleBar.activeBackground#47211A
  • titleBar.activeForeground#FFFFFF
  • titleBar.border#000000
  • titleBar.inactiveBackground#5C2B1E
  • titleBar.inactiveForeground#FFFFFF

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
emphasisitalic
strongbold
meta.diff.header#9B4212
comment#943002
constant.language#FFD54F
constant.numeric, constant.other.color.rgb-value, constant.other.rgb-value, support.constant.color#FFCC00
constant.regexp#FF6347
entity.name.tag#FF6347
entity.name.tag.css#FF6347
entity.other.attribute-name#FFA500
source.css entity.other.attribute-name, source.css.less entity.other.attribute-name.id, source.scss entity.other.attribute-name#FFA500
invalid#FF4500
markup.underlineunderline
markup.boldbold
markup.heading#FFD700
markup.italicitalic
markup.inserted#7CFC00
markup.deleted#FF4500
markup.changed#FFD700
meta.selector#FFD54F
punctuation.definition.tag#FF6347
meta.preprocessor#FFD700
meta.preprocessor.string#FF6347
meta.tag#FF6347
variable.language#FF7F50
variable.other#FFA07A
variable.parameter#FF4500
variable#FF7F50
variable.other.local#FF8C00
variable.other.global#FF4500
variable.other.local#FF8C00
variable.other.global#FF4500
function#FFD700
function.parameter#FF4500
variable.language#FF6347
variable.other#FFA07A
Puri Twilite by Sayam - VS Code Theme