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.activeBorder#f7e4d6
  • activityBar.background#280c00
  • activityBar.dropBackground#e98f8f43
  • activityBar.foreground#fffffe
  • activityBar.inactiveForeground#f2e3daf0
  • activityBarBadge.background#bd0303
  • activityBarBadge.foreground#eec6c6
  • badge.background#fce4e4
  • badge.foreground#7a0505
  • editor.background#fefdf7
  • editor.foreground#7d301f
  • editor.lineHighlightBackground#fadfc9
  • editor.selectionBackground#fff0d5
  • editorCursor.foreground#e43d00
  • editorLineNumber.activeForeground#0b216f
  • editorLineNumber.foreground#da762a
  • editorWhitespace.foreground#f7d3ad
  • list.activeSelectionBackground#e85900
  • list.activeSelectionForeground#ffffff
  • list.dropBackground#fff0d6
  • list.errorForeground#b01011
  • list.filterMatchBackground#ea5c0055
  • list.focusBackground#ffe2d6f9
  • list.highlightForeground#e15600
  • list.hoverBackground#fddd92
  • list.inactiveSelectionBackground#fdefc0
  • list.invalidItemForeground#b89500
  • list.warningForeground#855f00
  • listFilterWidget.background#efc1ad
  • listFilterWidget.noMatchesOutline#be1100
  • listFilterWidget.outline#fcfbfb00
  • menu.background#ffffff
  • menu.foreground#6d0606
  • panel.background#fcfaf9
  • panel.border#f7dacb59
  • panelTitle.activeForeground#ba3737f1
  • panelTitle.inactiveForeground#4b4747bf
  • settings.dropdownBackground#ffffff
  • settings.dropdownBorder#dba276
  • settings.dropdownListBorder#c29c85
  • settings.headerForeground#444444
  • settings.modifiedItemIndicator#66afe0
  • sideBar.background#fceddc
  • sideBar.dropBackground#0000001a
  • sideBarSectionHeader.background#80808033
  • statusBar.background#fcc7a5
  • statusBar.debuggingBackground#cc6633
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#570606
  • tab.activeBackground#ffdec3
  • tab.activeForeground#333333
  • tab.activeModifiedBorder#ed5402
  • tab.inactiveBackground#fdead8
  • tab.inactiveForeground#473e26b3
  • terminal.background#fcf9f8
  • terminal.foreground#452304

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#137e00e7
string#c73905
constant.numeric#3e8501
constant.language#ff6302
constant.character, constant.other#f0b606
variable#9b0303
keyword#ff6c10
storage#ea6a25
storage.type#cb6540italic
entity.name.class#0c4124underline
entity.other.inherited-class#f39472italic underline
entity.name.function#d02c07
variable.parameter#ea1707italic
entity.name.tag#1d6c03underline
entity.other.attribute-name#cf4f0a
support.function#d85904
support.constant#df2f07
support.type, support.class#CB1B45italic
support.other.variable#EB7A77
invalid#fee6df
invalid.deprecated#fee6df
meta.attribute#eec3a9
token.info-token#bb110e
token.warn-token#CD9731
token.error-token#ad4949
token.debug-token#800080
terminal.background

Shiki preview

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

Loading...

Coffee Break by akiko - VS Code Theme