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

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

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

Shiki preview

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

Loading...