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.activeBorder#fff
  • activityBar.background#141414
  • activityBar.border#141414
  • activityBarTop.activeBorder#141414
  • badge.background#141414
  • banner.background#141414
  • button.background#141414
  • editor.background#141414
  • editor.selectionBackground#fff
  • editor.selectionForeground#141414
  • editorCursor.foreground#eeffff
  • editorGroupHeader.tabsBackground#141414
  • editorLineNumber.activeForeground#777
  • editorLineNumber.foreground#444444
  • extensionBadge.remoteBackground#141414
  • focusBorder#fff
  • foreground#bbb
  • gitDecoration.addedResourceForeground#81ccb5
  • gitDecoration.conflictingResourceForeground#cc8181
  • gitDecoration.deletedResourceForeground#cc8181
  • gitDecoration.ignoredResourceForeground#777
  • gitDecoration.modifiedResourceForeground#81b1cc
  • gitDecoration.renamedResourceForeground#141414
  • gitDecoration.stageDeletedResourceForeground#cc8181
  • gitDecoration.stageModifiedResourceForeground#ccae81
  • gitDecoration.submoduleResourceForeground#141414
  • gitDecoration.untrackedResourceForeground#8dcc81
  • menu.background#191919c9
  • menu.border#40404080
  • menu.selectionBackground#FF9F0A
  • menu.selectionForeground#fff
  • notificationCenter.border#202020
  • notificationCenterHeader.background#191919
  • notifications.background#191919
  • notifications.border#555555
  • notifications.buttonBackground#444444
  • notifications.buttonForeground#ffffff
  • notifications.buttonHoverBackground#666666
  • notifications.foreground#ffffff
  • notificationToast.border#202020
  • panel.background#141414
  • panel.border#2a2a2a
  • panelTitle.activeBorder#fff
  • peekViewResult.background#ff0000
  • pickerGroup.border#242424
  • pickerGroup.foreground#3a944a
  • profileBadge.background#141414
  • progressBar.background#3a944a
  • quickInput.background#191919
  • quickInputList.focusBackground#3a944a
  • quickInputTitle.background#191919
  • sideBar.background#141414
  • sideBar.border#40404080
  • sideBar.foreground#bbb
  • sideBarSectionHeader.background#141414
  • statusBar.background#141414
  • statusBar.border#141414
  • statusBar.debuggingBackground#141414
  • statusBar.foreground#bbb
  • tab.activeBackground#141414
  • tab.activeBorder#141414
  • tab.activeBorderTop#ff000000
  • tab.border#00000000
  • tab.hoverBackground#141414
  • tab.inactiveBackground#141414
  • terminal.background#141414
  • titleBar.activeBackground#141414
  • titleBar.border#141414
  • titleBar.inactiveBackground#141414
  • widget.shadow#00000000

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment, string.comment#bdc4cc
constant.other.placeholder, constant.character#ff9492
constant, entity.name.constant, variable.other.constant, variable.other.enummember, variable.language, entity#91cbff
entity.name, meta.export.default, meta.definition.variable#ffb757
variable.parameter.function, meta.jsx.children, meta.block, meta.tag.attributes, entity.name.constant, meta.object.member, meta.embedded.expression#f0f3f6
entity.name.function#dbb7ff
entity.name.tag, support.class.component#72f088
keyword#ff9492
storage, storage.type#ff9492
storage.modifier.package, storage.modifier.import, storage.type.java#f0f3f6
string, string punctuation.section.embedded source#addcff
support#91cbff
meta.property-name#91cbff
variable#ffb757
variable.other#f0f3f6
invalid.broken#ffb1afitalic
invalid.deprecated#ffb1afitalic
invalid.illegal#ffb1afitalic
invalid.unimplemented#ffb1afitalic
carriage-return#ffffffitalic underline
message.error#ffb1af
string variable#91cbff
source.regexp, string.regexp#addcff
string.regexp.character-class, string.regexp constant.character.escape, string.regexp source.ruby.embedded, string.regexp string.regexp.arbitrary-repitition#addcff
string.regexp constant.character.escape#72f088bold
support.constant#91cbff
support.variable#91cbff
support.type.property-name.json#72f088
meta.module-reference#91cbff
punctuation.definition.list.begin.markdown#ffb757
markup.heading, markup.heading entity.name#91cbffbold
markup.quote#72f088
markup.italic#f0f3f6italic
markup.bold#f0f3f6bold
markup.underlineunderline
markup.strikethroughstrikethrough
markup.inline.raw#91cbff
markup.deleted, meta.diff.header.from-file, punctuation.definition.deleted#ffb1af
punctuation.section.embedded#ff9492
markup.inserted, meta.diff.header.to-file, punctuation.definition.inserted#72f088
markup.changed, punctuation.definition.changed#ffb757
markup.ignored, markup.untracked#272b33
meta.diff.range#dbb7ffbold
meta.diff.header#91cbff
meta.separator#91cbffbold
meta.output#91cbff
brackethighlighter.tag, brackethighlighter.curly, brackethighlighter.round, brackethighlighter.square, brackethighlighter.angle, brackethighlighter.quote#bdc4cc
brackethighlighter.unmatched#ffb1af
constant.other.reference.link, string.other.link#addcff
fb24m Theme by fb24m - VS Code Theme