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#dddddd
  • activityBar.activeBackground#99f2c03c
  • activityBar.activeBorder#99F2BF
  • activityBar.background#311D3A
  • activityBar.foreground#99F2BF
  • activityBar.inactiveForeground#C49CD4
  • activityBarBadge.background#007ACC
  • checkbox.border#919191
  • diffEditor.unchangedRegionBackground#f8f8f8
  • editor.background#e0e0e0
  • editor.foreground#000000
  • editor.inactiveSelectionBackground#E5EBF1
  • editor.selectionHighlightBackground#ADD6FF80
  • editorIndentGuide.activeBackground1#939393
  • editorIndentGuide.background1#D3D3D3
  • editorSuggestWidget.background#F3F3F3
  • icon.foreground#C49CD4
  • input.placeholderForeground#767676
  • list.activeSelectionIconForeground#FFF
  • list.focusAndSelectionOutline#90C2F9
  • list.hoverBackground#E8E8E8
  • menu.border#D4D4D4
  • notebook.cellBorderColor#E8E8E8
  • notebook.selectedCellBackground#c8ddf150
  • panel.background#311D3A
  • panel.border#1C58A3
  • panelTitle.activeBorder#99F2BF
  • panelTitle.activeForeground#C49CD4
  • panelTitle.inactiveForeground#C49CD4
  • ports.iconRunningProcessForeground#369432
  • scrollbar.shadow#00000000
  • scrollbarSlider.background#C49CD4
  • scrollbarSlider.hoverBackground#C49CD4
  • searchEditor.textInputBorder#CECECE
  • settings.numberInputBorder#CECECE
  • settings.textInputBorder#CECECE
  • sideBar.background#d8d8d8
  • sideBarSectionHeader.background#0000
  • sideBarSectionHeader.border#61616130
  • sideBarTitle.foreground#311D3A
  • statusBar.background#311D3A
  • statusBar.foreground#C49CD4
  • statusBarItem.errorBackground#c72e0f
  • statusBarItem.remoteBackground#16825D
  • statusBarItem.remoteForeground#FFF
  • tab.activeBackground#1c59a33d
  • tab.activeForeground#311D3A
  • tab.hoverBackground#1c59a331
  • tab.hoverBorder#1C58A3
  • tab.inactiveBackground#d8d8d8
  • tab.inactiveForeground#1C58A3
  • tab.lastPinnedBorder#61616130
  • tab.unfocusedHoverForeground#311D3A
  • terminal.background#e0e0e0
  • terminal.inactiveSelectionBackground#E5EBF1
  • terminal.tab.activeBorder#311D3A
  • titleBar.activeBackground#311D3A
  • titleBar.activeForeground#C49CD4
  • titleBar.inactiveForeground#C49CD4
  • toolbar.activeBackground#C49CD4
  • toolbar.hoverOutline#C49CD4
  • widget.border#d4d4d4
  • window.activeBorder#311D3A

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
meta.embedded, source.groovy.embedded, string meta.image.inline.markdown, variable.legacy.builtin.python#000000ff
emphasisitalic
strongbold
meta.diff.header#000080
comment#008000
constant.language#0000ff
constant.numeric, variable.other.enummember, keyword.operator.plus.exponent, keyword.operator.minus.exponent#098658
constant.regexp#811f3f
entity.name.tag#800000
entity.name.selector#800000
entity.other.attribute-name#e50000
invalid#cd3131
markup.underlineunderline
markup.bold#000080bold
markup.heading#800000bold
markup.italicitalic
markup.inserted#098658
markup.deleted#a31515
markup.changed#0451a5
storage#0000ff
storage.type#0000ff
string, meta.embedded.assembly#a31515
keyword#0000ff
variable.language#0000ff
entity.name.function, support.function, support.constant.handlebars, source.powershell variable.other.member, entity.name.operator.custom-literal#795E26
support.class, support.type, entity.name.type, entity.name.namespace, entity.other.attribute, entity.name.scope-resolution, entity.name.class, storage.type.numeric.go, storage.type.cs, storage.type.java#267f99
keyword.control, source.cpp keyword.operator.new, source.cpp keyword.operator.delete, keyword.other.using, entity.name.operator#AF00DB
variable, meta.definition.variable.name, support.variable#001080
variable.other.constant, variable.other.enummember#0070C1
punctuation.definition.group.regexp, punctuation.definition.character-class.regexp#d16969
devu-theme by Devu - VS Code Theme