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#1E1C1D
  • activityBar.foreground#BABABA
  • activityBarBadge.background#C15353
  • button.background#C15353
  • button.foreground#EDEDED
  • button.hoverBackground#B04C4C
  • editor.background#1E1C1D
  • editor.foreground#EDEDED
  • editor.lineHighlightBackground#FFFFFF02
  • editor.lineHighlightBorder#FFFFFF03
  • editor.selectionBackground#FFFFFF1F
  • editor.wordHighlightBackground#FFCF9911
  • editor.wordHighlightStrongBackground#FFCF9933
  • editorGroupHeader.tabsBackground#211F20
  • editorGroupHeader.tabsBorder#1E1C1D
  • editorGutter.modifiedBackground#FFCF99
  • editorLineNumber.foreground#BABABA
  • editorSuggestWidget.highlightForeground#C15353
  • editorSuggestWidget.selectedBackground#FFFFFF2F
  • focusBorder#FFCF99bb
  • gitDecoration.modifiedResourceForeground#FFCF99
  • input.border#FFCF9933
  • inputValidation.infoBackground#211F20
  • inputValidation.infoBorder#FFCF99
  • list.activeSelectionBackground#C15353
  • list.focusBackground#C15353
  • list.highlightForeground#FFCF99
  • list.hoverBackground#C1535311
  • nofication.infoBackground#F9C0AE
  • notification.background#211F20
  • notification.buttonBackground#C15353
  • notification.buttonForeground#EDEDED
  • notification.buttonHoverBackground#B04C4C
  • notification.foreground#F9F9F9
  • peekView.border#FFCF99
  • peekViewEditor.background#211F20
  • peekViewResult.selectionBackground#FFCF9922
  • pickerGroup.foreground#FFCF99
  • progressBar.background#F9C0AE33
  • sideBar.background#211F20
  • sideBar.foreground#F9F9F9
  • statusBar.background#1E1C1D
  • statusBar.foreground#BABABA
  • tab.activeBackground#1E1C1D
  • tab.activeBorder#BABABA
  • tab.inactiveBackground#211F20
  • tab.inactiveBorder#BABABA
  • tab.inactiveForeground#BABABA
  • titleBar.activeBackground#1E1C1D

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
string, support.constant.property-value.css, support.constant, support.type, support.class, support.other.variable#FFCF99italic
comment, invalid, invalid.deprecated#43494Cbold italic
keyword, keyword.operator, keyword.operator.new.js, keyword.operator.js, entity.other.attribute-name.html, entity.name.class, entity.name.function, entity.other.inherited-class, support#FF9999
storage, storage.type, constant.numeric, constant.language, constant.character, constant.other#F9C0AE
keyword.control, entity.name.tag#BF5477italic
entity.name.class, entity.name.struct, entity.name.enum, entity.name.union, entity.name.trait, entity.name.interface, entity.name.type, entity.other.attribute-name, support.function#C15353
variable.parameter#98664Ebold italic
variable, variable.language#EDEDED
Diacronia Theme by Weelsiix-DanieleBorra - VS Code Theme