Skip to main content
Coding Theme

Color themes

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.

  • actionBar.toggledBackground#E9C61C
  • activityBar.activeBackground#E9C61C
  • activityBar.activeBorder#E9C61C
  • activityBar.background#999999
  • activityBar.foreground#000000
  • activityBarBadge.background#E9C61C
  • activityBarBadge.foreground#000
  • activityBarTop.activeBackground#E9C61C
  • activityBarTop.activeBorder#E9C61C
  • activityBarTop.background#999999
  • activityBarTop.foreground#000000
  • button.background#E9C61C
  • button.foreground#000000
  • descriptionForeground#222222
  • disabledForeground#999999
  • editor.background#BBBBBB
  • editor.foreground#000000
  • editorGroup.border#999999
  • editorGroupHeader.tabsBackground#999999
  • editorLineNumber.activeForeground#140f0f
  • editorLineNumber.foreground#999999
  • focusBorder#98D0F5
  • foreground#000000
  • gitDecoration.addedResourceForeground#0B7243
  • gitDecoration.conflictingResourceForeground#CF5F14
  • gitDecoration.deletedResourceForeground#E91C22
  • gitDecoration.ignoredResourceForeground#666666
  • gitDecoration.modifiedResourceForeground#1C3FE9
  • gitDecoration.renamedResourceForeground#0B7243
  • gitDecoration.stageDeletedResourceForeground#E91C22
  • gitDecoration.stageModifiedResourceForeground#1C3FE9
  • gitDecoration.submoduleResourceForeground#E91CD1
  • gitDecoration.untrackedResourceForeground#0B7243
  • icon.foreground#000000
  • list.activeSelectionBackground#98D0F5
  • list.activeSelectionForeground#000000
  • list.errorForeground#E91C22
  • list.hoverBackground#999999
  • list.inactiveSelectionBackground#98D0F5
  • list.inactiveSelectionForeground#000000
  • list.invalidItemForeground#E91CD1
  • list.warningForeground#CF5F14
  • sash.hoverBorder#98D0F5
  • selection.background#98D0F5
  • sideBar.background#BBBBBB
  • sideBar.border#999999
  • sideBarSectionHeader.background#999999
  • sideBarSectionHeader.border#999999
  • sideBarSectionHeader.foreground#000000
  • sideBarTitle.background#999999
  • sideBarTitle.border#999999
  • sideBarTitle.foreground#000000
  • statusBar.background#999999
  • statusBar.foreground#000000
  • tab.activeBackground#BBBBBB
  • tab.activeForeground#000000
  • tab.border#999999
  • tab.inactiveBackground#999999
  • terminal.ansiBlack#222222
  • terminal.ansiBlue#1C3FE9
  • terminal.ansiBrightBlack#333333
  • terminal.ansiBrightBlue#80baff
  • terminal.ansiBrightCyan#78ffff
  • terminal.ansiBrightGreen#b8f171
  • terminal.ansiBrightMagenta#d778ff
  • terminal.ansiBrightRed#ff7882
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#ffe580
  • terminal.ansiCyan#1CE98B
  • terminal.ansiGreen#0B7243
  • terminal.ansiMagenta#E91CD1
  • terminal.ansiRed#E91C22
  • terminal.ansiWhite#BBBBBB
  • terminal.ansiYellow#E9C61C
  • titleBar.activeBackground#999999
  • titleBar.inactiveBackground#999999

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#666666italic
comment.block.preprocessor#666666
comment.documentation, comment.block.documentation#222222
invalid.illegal#E91C22
keyword.operator#222222
keyword, storage#511CE9
storage.type, support.type#511CE9
constant.language, support.constant, variable.language#511CE9
variable, support.variable#511CE9
entity.name.function, support.function#511CE9bold
entity.name.type, entity.other.inherited-class, support.class#511CE9bold
entity.name.exception#E91C22
entity.name.sectionbold
constant.numeric, constant.character, constant#222222
string#0B7243
constant.character.escape#666666
string.regexp#1C3FE9
constant.other.symbol#222222
punctuation#222222
meta.tag.sgml.doctype, meta.tag.sgml.doctype string, meta.tag.sgml.doctype entity.name.tag, meta.tag.sgml punctuation.definition.tag.html#BBBBBB
meta.tag, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html#511CE9bold
entity.name.tag#511CE9
meta.tag entity.other.attribute-name, entity.other.attribute-name.html#511CE9italic
constant.character.entity, punctuation.definition.entity#511CE9
meta.selector, meta.selector entity, meta.selector entity punctuation, entity.name.tag.css#511CE9
meta.property-name, support.type.property-name#511CE9
meta.property-value, meta.property-value constant.other, support.constant.property-value#0B7243
keyword.other.importantbold
markup.changed#000000
markup.deleted#000000
markup.italicitalic
markup.error#E91C22
markup.inserted#000000
meta.link#1C3FE9
markup.output, markup.raw#777777
markup.prompt#777777
markup.heading#511CE9
markup.boldbold
markup.traceback#E91C22
markup.underlineunderline
markup.quote#511CE9
markup.list#222222
markup.bold, markup.italic#448C27
markup.inline.raw#0B7243
meta.diff.range, meta.diff.index, meta.separator#434343
meta.diff.header.from-file#434343
meta.diff.header.to-file#434343

Shiki preview

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

Loading...

Frequency Grey Colour Theme - Coding Theme