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#89ddff
  • activityBar.background#1a2023
  • activityBar.border#00000060
  • activityBar.foreground#89ddff
  • activityBar.inactiveForeground#939da5
  • activityBarBadge.background#89ddff
  • activityBarBadge.foreground#1a2023
  • button.background#ffea6b
  • button.foreground#1a2023
  • checkbox.background#ffea6b
  • checkbox.foreground#1a2023
  • dropdown.background#1a2023
  • dropdown.listBackground#232a2f
  • editor.background#1a2023
  • editor.foreground#ffffff
  • editor.lineHighlightBorder#939da515
  • editor.selectionBackground#204062
  • editor.selectionHighlightBorder#939da5
  • editor.wordHighlightBackground#939da530
  • editorCursor.background#232a2f
  • editorCursor.foreground#939da5
  • editorGroup.border#00000060
  • editorGroup.dropBackground#535d7530
  • editorGroupHeader.noTabsBackground#1B202a
  • editorGroupHeader.tabsBackground#1a2023
  • editorGroupHeader.tabsBorder#00000060
  • editorIndentGuide.activeBackground#939da550
  • editorIndentGuide.background#939da520
  • editorLineNumber.activeForeground#d4dce4
  • editorLineNumber.foreground#707a84
  • editorSuggestWidget.selectedBackground#1a2023
  • editorSuggestWidget.selectedForeground#d4dce4
  • editorWidget.background#232a2f
  • editorWidget.border#707a84
  • extensionButton.prominentBackground#d4dce4
  • extensionButton.prominentForeground#1a2023
  • focusBorder#707a84
  • input.background#232a2f
  • list.activeSelectionBackground#232a2f
  • list.dropBackground#232a2f
  • list.focusBackground#232a2f
  • list.focusOutline#707a84
  • list.hoverBackground#232a2f
  • panelTitle.activeForeground#d4dce4
  • panelTitle.inactiveForeground#939da5
  • quickInput.background#1a2023
  • quickInput.foreground#939da5
  • quickInputList.focusBackground#232a2f
  • quickInputList.focusForeground#d4dce4
  • selection.background#89ddff40
  • settings.textInputBackground#1a2023
  • sideBar.background#1a2023
  • sideBar.border#00000060
  • sideBar.foreground#939da5
  • sideBarSectionHeader.background#232a2f
  • sideBarTitle.foreground#939da5
  • statusBar.background#1a2023
  • statusBar.debuggingBackground#ffa763
  • statusBar.debuggingForeground#1a2023
  • statusBar.foreground#939da5
  • statusBar.noFolderBackground#89ddff
  • statusBar.noFolderForeground#1a2023
  • tab.activeBackground#1a2023
  • tab.activeBorder#f5ed11
  • tab.activeBorderTop#ffea6b
  • tab.activeForeground#939da5
  • tab.border#00000060
  • tab.hoverBackground#232a2f
  • tab.inactiveBackground#1a2023
  • textLink.foreground#89ddff
  • titleBar.activeBackground#1a2023
  • titleBar.activeForeground#939da5
  • titleBar.border#00000060
  • titleBar.inactiveBackground#232a2f
  • toolbar.hoverBackground#707a8430
  • widget.shadow#1a2023

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
punctuation.separator.key-value, punctuation.separator.comma#ffffff—
meta.object-literal.key#a4e5ff—
variable#e0cdf8—
variable.other.property#ffffff—
meta.embedded, source.groovy.embedded#F8F8F2—
comment#55b5b5—
string#5bec95—
punctuation.definition.template-expression, punctuation.section.embedded#F92672—
meta.template.expression#F8F8F2—
constant.numeric#AE81FF—
constant.language#AE81FF—
constant.character, constant.other#AE81FF—
keyword#F92672—
storage.modifier#17d8ff—
storage.type#17d8ff—
entity.name.type, entity.name.class#A6E22E—
entity.name.class#A6E22E—
entity.other.inherited-class#A6E22E—
entity.name.function#56ff7b—
variable.parameter#ff8800—
entity.name.tag#F92672
entity.other.attribute-name#fff
support.function#17d8ff
support.constant#66D9EF
support.type, support.class#A6E22E—
support.other.variable—
invalid#F8F8F0
invalid.deprecated#F8F8F0—
meta.structure.dictionary.json string.quoted.double.json#CFCFC2—
meta.diff, meta.diff.header#75715E—
markup.deleted#F92672—
markup.inserted#A6E22E—
markup.changed#E6DB74—
constant.numeric.line-number.find-in-files - match#AE81FFA0—
entity.name.filename.find-in-files#E6DB74—
markup.quote#F92672—
markup.list#E6DB74—
markup.bold, markup.italic#66D9EF—
markup.inline.raw#FD971F
markup.heading#A6E22E—
markup.heading.setext#A6E22E
token.info-token#6796e6—
token.warn-token#cd9731—
token.error-token#f44747—
token.debug-token#b267e6—
variable.language#66D9EF—
HamidTheDev Pro by HamidTheDev - VS Code Theme