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#0F140F
  • activityBar.foreground#FFB7B2
  • activityBar.inactiveForeground#708A63
  • activityBarBadge.background#FFB7B2
  • activityBarBadge.foreground#1A241B
  • diffEditor.insertedTextBackground#C3D89825
  • diffEditor.removedTextBackground#FFB7B225
  • editor.background#1A241B
  • editor.foreground#ECEFE6
  • editor.lineHighlightBackground#232F24
  • editor.selectionBackground#6E7F3F80
  • editorCursor.foreground#FFB7B2
  • editorGutter.addedBackground#C3D898
  • editorGutter.deletedBackground#FFB7B2
  • editorGutter.modifiedBackground#E8A87C
  • editorOverviewRuler.addedForeground#C3D898AA
  • editorOverviewRuler.deletedForeground#FFB7B2AA
  • editorOverviewRuler.modifiedForeground#E8A87CAA
  • sideBar.background#141C15
  • sideBar.foreground#C3D898
  • sideBarSectionHeader.background#1A241B
  • sideBarTitle.foreground#FFB7B2
  • statusBar.background#2D3B2C
  • statusBar.foreground#ECEFE6
  • tab.activeBackground#1A241B
  • tab.activeForeground#FFB7B2
  • tab.inactiveBackground#141C15
  • tab.inactiveForeground#90A583

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
keyword, storage.type, storage.modifier#F2A7A0bold
entity.name.function, support.function#B7C48A
variable, entity.other.attribute-name#E2E8D5
string#8A5A3C
comment#6E7F3Fitalic
entity.name.tag#C3D898
entity.name.tag.html, entity.name.tag.xml#C3D898
support.class.component, entity.name.tag.other.html#F2A7A0
punctuation.definition.tag#708A63
entity.name.tag.inline.any.html#E8A87C
punctuation.definition.interpolation, meta.interpolation#E8A87C
Cozy Code Club by mariasofia - VS Code Theme