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.background#FAFAFA
  • activityBar.foreground#121417
  • activityBarBadge.background#526FFF
  • activityBarBadge.foreground#FFFFFF
  • badge.background#526FFF
  • badge.foreground#FFFFFF
  • button.background#5871EF
  • button.foreground#FFFFFF
  • button.hoverBackground#6B83ED
  • diffEditor.insertedTextBackground#00809B33
  • dropdown.background#FFFFFF
  • dropdown.border#DBDBDC
  • editor.background#FAFAFA
  • editor.findMatchHighlightBackground#526FFF33
  • editor.foreground#383A42
  • editor.lineHighlightBackground#383A420C
  • editor.selectionBackground#E5E5E6
  • editorCursor.foreground#526FFF
  • editorGroup.background#EAEAEB
  • editorGroup.border#DBDBDC
  • editorGroupHeader.tabsBackground#EAEAEB
  • editorHoverWidget.background#EAEAEB
  • editorHoverWidget.border#DBDBDC
  • editorIndentGuide.activeBackground#626772
  • editorIndentGuide.background#383A4233
  • editorInlayHint.background#F5F5F5
  • editorInlayHint.foreground#AFB2BB
  • editorLineNumber.activeForeground#383A42
  • editorLineNumber.foreground#9D9D9F
  • editorRuler.foreground#383A4233
  • editorSuggestWidget.background#EAEAEB
  • editorSuggestWidget.border#DBDBDC
  • editorSuggestWidget.selectedBackground#FFFFFF
  • editorWhitespace.foreground#383A4233
  • editorWidget.background#EAEAEB
  • editorWidget.border#E5E5E6
  • extensionButton.prominentBackground#3BBA54
  • extensionButton.prominentHoverBackground#4CC263
  • focusBorder#526FFF
  • input.background#FFFFFF
  • input.border#DBDBDC
  • list.activeSelectionBackground#DBDBDC
  • list.activeSelectionForeground#232324
  • list.focusBackground#DBDBDC
  • list.highlightForeground#121417
  • list.hoverBackground#DBDBDC66
  • list.inactiveSelectionBackground#DBDBDC
  • list.inactiveSelectionForeground#232324
  • notebook.cellEditorBackground#F5F5F5
  • notification.background#333333
  • peekView.border#526FFF
  • peekViewEditor.background#FFFFFF
  • peekViewResult.background#EAEAEB
  • peekViewResult.selectionBackground#DBDBDC
  • peekViewTitle.background#FFFFFF
  • pickerGroup.border#526FFF
  • scrollbarSlider.activeBackground#747D9180
  • scrollbarSlider.background#4E566680
  • scrollbarSlider.hoverBackground#5A637580
  • sideBar.background#EAEAEB
  • sideBarSectionHeader.background#FAFAFA
  • statusBar.background#EAEAEB
  • statusBar.debuggingForeground#FFFFFF
  • statusBar.foreground#424243
  • statusBar.noFolderBackground#EAEAEB
  • statusBarItem.hoverBackground#DBDBDC
  • tab.activeBackground#FAFAFA
  • tab.activeForeground#121417
  • tab.border#DBDBDC
  • tab.inactiveBackground#EAEAEB
  • titleBar.activeBackground#EAEAEB
  • titleBar.activeForeground#424243
  • titleBar.inactiveBackground#EAEAEB
  • titleBar.inactiveForeground#424243

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#1f1f1fff
meta.embedded, source.groovy.embedded#272822
comment#a0a1a7
string#bc4c00
punctuation.definition.template-expression, punctuation.section.embedded#d1242f
meta.template.expression#777774
constant.numeric#8250df
constant.language#8250df
constant.character, constant.other#8250df
variable#000
keyword#d1242f
storage#d1242f
storage.type#0969daitalic
entity.name.type, entity.name.class#1a7f37underline
entity.other.inherited-class#1a7f37italic underline
entity.name.function#1a7f37
variable.parameter#EF8307italic
entity.name.tag#d1242f
entity.other.attribute-name#1a7f37
support.function#0969da
support.constant#0969da
support.type, support.class#0969daitalic
support.other.variable
invalid#777774
invalid.deprecated#777774
invalid.deprecated.html#d1242f99
meta.structure.dictionary.json string.quoted.double.json#bc4c00
meta.diff, meta.diff.header#9b9587
markup.deleted#d1242f
markup.inserted#1a7f37
markup.changed#E5CE00
constant.numeric.line-number.find-in-files - match#8250dfA0
entity.name.filename.find-in-files#E5CE00
markup.quote#d1242f
markup.list#E5CE00
markup.bold, markup.italic#0969da
markup.inline.raw#EF8307
markup.heading#1a7f37
markup.heading.setext#1a7f37
token.info-token#6796e6
token.warn-token#cd9731
token.error-token#f44747
token.debug-token#b267e6
variable.language#d1242f
ThemeDatabase All Themes by enes ozturk - VS Code Theme