Skip to main content
CodingTheme

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.background#2f2f2f
  • activityBar.dropBackground#ffffff80
  • activityBarBadge.background#ffffff
  • debugToolBar.background#2f2f2f
  • dropdown.background#363636
  • editor.background#222222
  • editor.foreground#dddddd
  • editor.lineHighlightBorder#FFFFFF1a
  • editor.rangeHighlightBackground#FFFFFF0d
  • editorGroup.dropBackground#ffffff80
  • editorGroup.focusedEmptyBorder#ffffff
  • editorGroupHeader.tabsBackground#282828
  • editorHoverWidget.background#282828
  • editorLineNumber.activeForeground#ffffff
  • editorLineNumber.foreground#FFFFFF4d
  • editorMarkerNavigation.background#282828
  • editorWidget.background#282828
  • focusBorder#ffffff
  • foreground#dddddd
  • input.background#363636
  • inputOption.activeBorder#ffffff
  • list.activeSelectionBackground#ffffff80
  • list.dropBackground#ffffff80
  • list.focusBackground#ffffff80
  • list.hoverBackground#FFFFFF1a
  • list.inactiveSelectionBackground#FFFFFF33
  • panel.background#282828
  • panel.border#FFFFFF1a
  • panelTitle.activeBorder#dddddd80
  • panelTitle.inactiveForeground#dddddd80
  • peekView.border#ffffff
  • peekViewEditor.background#1b1b1b
  • peekViewResult.background#282828
  • peekViewTitle.background#222222
  • pickerGroup.border#FFFFFF1a
  • selection.background#ffffff
  • sideBar.background#282828
  • sideBarSectionHeader.background#2f2f2f
  • statusBar.background#111111
  • statusBar.debuggingBackground#ffffff
  • statusBar.foreground#ffffff
  • statusBar.noFolderBackground#1b1b1b
  • statusBarItem.activeBackground#ffffff80
  • statusBarItem.hoverBackground#FFFFFF1a
  • tab.activeBorder#ffffff
  • tab.activeModifiedBorder#ffffff
  • tab.border#00000033
  • tab.inactiveBackground#2f2f2f
  • tab.inactiveModifiedBorder#999999
  • tab.unfocusedActiveModifiedBorder#cccccc
  • tab.unfocusedInactiveModifiedBorder#999999
  • titleBar.activeBackground#111111
  • titleBar.activeForeground#ffffff

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
Global settings#dddddd
string#ffffff
constant.character.escape, text.html constant.character.entity.named, punctuation.definition.entity.html#ffffff
constant.language.boolean#ffffff
constant.numeric#ffffff
variable, support.variable, support.class, support.constant, meta.definition.variable entity.name.function#aaaaaa
keyword, modifier, variable.language.this, support.type.object, constant.language#dddddd
entity.name.function, support.function#dddddd
storage.type, storage.modifier#ffffff
support.module, support.node#aaaaaaitalic
support.type#aaaaaa
entity.name.type, entity.other.inherited-class#aaaaaa
comment#aaaaaaitalic
entity.name.type.class#ffffffunderline
variable.object.property, meta.field.declaration entity.name.function#ffffff
meta.definition.method entity.name.function#ffffff
meta.function entity.name.function#dddddd
template.expression.begin, template.expression.end, punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end#dddddd
meta.embedded, source.groovy.embedded, meta.template.expression#dddddd
entity.name.tag.yaml#aaaaaa
modifier#dddddd
meta.object-literal.key, meta.object-literal.key string, support.type.property-name.json#aaaaaa
constant.language.json#dddddd
entity.other.attribute-name.class#dddddd
entity.other.attribute-name.id#dddddd
source.css entity.name.tag#dddddd
meta.tag, punctuation.definition.tag#dddddd
entity.name.tag#aaaaaa
entity.other.attribute-name#dddddd
markup.heading#dddddd
text.html.markdown meta.link.inline, meta.link.reference#aaaaaa
text.html.markdown beginning.punctuation.definition.list#dddddd
markup.italic#aaaaaaitalic
markup.bold#aaaaaabold
markup.bold markup.italic, markup.italic markup.bold#aaaaaaitalic bold
markup.fenced_code.block.markdown punctuation.definition.markdown#ffffff
markup.inline.raw.string.markdown#ffffff
keyword.other.definition.ini#aaaaaa
entity.name.section.group-title.ini#dddddd
source.cs meta.class.identifier storage.type#ffffffunderline
source.cs meta.method.identifier entity.name.function#ffffff
source.cs meta.method-call meta.method, source.cs entity.name.function#dddddd
source.cs storage.type#aaaaaa
source.cs meta.method.return-type#aaaaaa
source.cs meta.preprocessor#aaaaaa
source.cs entity.name.type.namespace#dddddd
Global settings#dddddd

Shiki preview

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

Loading...

Themed Themes Max by Maxwell Clarke - VS Code Theme