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.

  • activityBar.activeBorder#007ACC
  • activityBar.background#141414
  • activityBar.border#252525
  • activityBar.foreground#BBBBBB
  • activityBar.inactiveForeground#666666
  • activityBarBadge.background#007ACC
  • button.background#007ACC
  • editor.background#1E1E1E
  • editor.foreground#D4D4D4
  • editor.selectionBackground#8C6EFF33
  • editor.selectionHighlightBackground#9C7CFF44
  • editorBracketMatch.background#00000000
  • editorBracketMatch.border#3b2881
  • editorCursor.foreground#82AAFF
  • editorGroup.border#00000000
  • editorIndentGuide.activeBackground#707070
  • editorIndentGuide.background#404040
  • focusBorder#333
  • input.placeholderForeground#A6A6A6
  • list.activeSelectionBackgrounddefault
  • list.dropBackground#383B3D
  • list.hoverBackground#ffffff08
  • list.inactiveSelectionBackground#ffffff05
  • menu.background#1C1C1C
  • menu.foreground#CCCCCC
  • menu.separatorBackground#333333
  • panel.background#181818
  • panel.border#00000000
  • scrollbarSlider.activeBackground#ffffff30
  • scrollbarSlider.background#ffffff10
  • scrollbarSlider.hoverBackground#ffffff20
  • settings.numberInputBackground#292929
  • settings.textInputBackground#292929
  • sideBar.background#181818
  • sideBar.border#00000000
  • sideBar.foreground#CCCCCC
  • sideBarSectionHeader.background#181818
  • sideBarSectionHeader.border#252525
  • sideBarTitle.foreground#BBBBBB
  • statusBar.background#181818
  • statusBar.border#252525
  • statusBar.foreground#CCCCCC
  • statusBarItem.remoteBackground#16825D
  • statusBarItem.remoteForeground#FFFFFF
  • tab.activeBackground#1E1E1E
  • tab.border#00000000
  • tab.inactiveBackground#181818
  • titleBar.activeBackground#121212
  • titleBar.inactiveBackground#121212

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#a19b8fitalic
string.quoted.double, string.quoted.single, string.constant, string.template, string.quoted.template#8DDC8A
string.quoted.other, string support, string keyword#9DCDF5
entity.name.type, entity.name.namespace, storage.type.namespace.definition, entity.name.scope-resolution#66B5F6
punctuation.definition.template-expression, punctuation.section.embedded#bb97e7
constant.language, constant.other, support.constant#66B5F6
variable, variable.other, variable.parameter, variable.other.exported.go#A8DEFF
keyword, keyword.operator.arithmetic.shell, storage, support.type.return, support.type.receiver#eb7e81
entity.name.class, entity.name.type.class, entity.name.type.interface, entity.section.ini, entity.name.section#bb97e7
entity.name.function, meta.function-call.generic, meta.function-call.object, meta.function-call.static, meta.function-call.ts#bb97e7
entity.name.tag, entity.tag.apacheconf#66B5F6
entity.other.attribute-name, entity.other.pseudo-element#bb97e7
support.type, support.other.namespace, support.class, source.js support.type, support.constant.color#66B5F6
constant.numeric, constant.character.entity#66B5F6
invalid#fafbfc
meta.property-name.css, meta.property-value.css support, meta.property-value.css support.constant, meta.property-value.css#66B5F6
meta.property-value.css punctuation#ffffff
string.quoted.single.dart, string.quoted.double.dart, punctuation.definition.string.begin.dart, punctuation.definition.string.end.dart#8DDC8A
JMrad Theme by Jason Mrad - VS Code Theme