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#222222
  • activityBar.foreground#FFFFFF
  • activityBarBadge.background#E9C61C
  • activityBarBadge.foreground#000
  • activityBarTop.activeBackground#E9C61C
  • activityBarTop.activeBorder#E9C61C
  • activityBarTop.background#222222
  • activityBarTop.foreground#FFFFFF
  • button.background#E9C61C
  • button.foreground#000000
  • descriptionForeground#999999
  • disabledForeground#999999
  • editor.background#444444
  • editor.foreground#FFFFFF
  • editorGroup.border#222222
  • editorGroupHeader.tabsBackground#222222
  • editorLineNumber.activeForeground#BBBBBB
  • editorLineNumber.foreground#999999
  • focusBorder#0B4972
  • foreground#FFFFFF
  • gitDecoration.addedResourceForeground#5CE91C
  • gitDecoration.conflictingResourceForeground#CF5F14
  • gitDecoration.deletedResourceForeground#E91C22
  • gitDecoration.ignoredResourceForeground#999999
  • gitDecoration.modifiedResourceForeground#E9C61C
  • gitDecoration.renamedResourceForeground#5CE91C
  • gitDecoration.stageDeletedResourceForeground#E91C22
  • gitDecoration.stageModifiedResourceForeground#E9C61C
  • gitDecoration.submoduleResourceForeground#E91CD1
  • gitDecoration.untrackedResourceForeground#5CE91C
  • icon.foreground#FFFFFF
  • list.activeSelectionBackground#0B4972
  • list.activeSelectionForeground#FFFFFF
  • list.errorForeground#E91C22
  • list.hoverBackground#999999
  • list.inactiveSelectionBackground#0B4972
  • list.inactiveSelectionForeground#FFFFFF
  • list.invalidItemForeground#E91CD1
  • list.warningForeground#CF5F14
  • sash.hoverBorder#0B4972
  • selection.background#0B4972
  • sideBar.background#444444
  • sideBar.border#222222
  • sideBarSectionHeader.background#222222
  • sideBarTitle.background#222222
  • statusBar.background#222222
  • statusBar.foreground#FFFFFF
  • tab.activeBackground#444444
  • tab.activeForeground#FFFFFF
  • tab.border#222222
  • tab.inactiveBackground#222222
  • tab.inactiveForeground#ffffff
  • 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#5CE91C
  • terminal.ansiMagenta#E91CD1
  • terminal.ansiRed#E91C22
  • terminal.ansiWhite#BBBBBB
  • terminal.ansiYellow#E9C61C
  • titleBar.activeBackground#222222
  • titleBar.inactiveBackground#222222

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#666666italic
comment.block.preprocessor#666666
comment.documentation, comment.block.documentation#BBBBBB
invalid.illegal#E91C22
keyword.operator#BBBBBB
keyword, storage#1CE98B
storage.type, support.type#1CE98B
constant.language, support.constant, variable.language#1CE98B
variable, support.variable#1CE98B
entity.name.function, support.function#1CE98Bbold
entity.name.type, entity.other.inherited-class, support.class#1CE98Bbold
entity.name.exception#E91C22
entity.name.sectionbold
constant.numeric, constant.character, constant#BBBBBB
string#5CE91C
constant.character.escape#666666
string.regexp#1CE98B
constant.other.symbol#BBBBBB
punctuation#BBBBBB
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#1CE98Bbold
entity.name.tag#1CE98B
meta.tag entity.other.attribute-name, entity.other.attribute-name.html#1CE98Bitalic
constant.character.entity, punctuation.definition.entity#1CE98B
meta.selector, meta.selector entity, meta.selector entity punctuation, entity.name.tag.css#1CE98B
meta.property-name, support.type.property-name#1CE98B
meta.property-value, meta.property-value constant.other, support.constant.property-value#5CE91C
keyword.other.importantbold
markup.changed#000000
markup.deleted#000000
markup.italicitalic
markup.error#E91C22
markup.inserted#000000
meta.link#1CE98B
markup.output, markup.raw#777777
markup.prompt#777777
markup.heading#1CE98B
markup.boldbold
markup.traceback#E91C22
markup.underlineunderline
markup.quote#1CE98B
markup.list#BBBBBB
markup.bold, markup.italic#448C27
markup.inline.raw#5CE91C
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