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#232530
  • activityBar.border#2e303e
  • activityBar.foreground#bfc7d7
  • activityBar.inactiveForeground#abb2bf80
  • activityBarBadge.background#26bbd9
  • activityBarBadge.foreground#ffffff
  • activityBarTop.background#232530
  • badge.background#e9436d
  • badge.foreground#ffffff
  • button.background#232530
  • button.foreground#7f9ab3
  • button.hoverBackground#2a2c38
  • dropdown.background#232530
  • dropdown.border#2e303e
  • dropdown.foreground#abb2bf
  • editor.background#1c1e26
  • editor.findMatchBackground#26bbd940
  • editor.findMatchHighlightBackground#b877db40
  • editor.foreground#abb2bf
  • editor.lineHighlightBackground#2e303e50
  • editor.selectionBackground#2a2c38
  • editor.selectionHighlightBackground#26bbd920
  • editor.wordHighlightBackground#26bbd920
  • editorCursor.foreground#26bbd9
  • editorGroup.emptyBackground#232530
  • editorGroupHeader.tabsBackground#232530
  • editorHoverWidget.background#232530
  • editorHoverWidget.border#2e303e
  • editorHoverWidget.foreground#abb2bf
  • editorHoverWidget.statusBarBackground#232530
  • editorIndentGuide.activeBackground1#2e303e
  • editorIndentGuide.background1#2e303e50
  • editorLineNumber.activeForeground#bfc7d7
  • editorLineNumber.foreground#5c6370
  • editorSuggestWidget.background#232530
  • editorSuggestWidget.border#2e303e
  • editorSuggestWidget.foreground#abb2bf
  • editorSuggestWidget.highlightForeground#b877db
  • editorSuggestWidget.selectedBackground#282a36
  • editorWidget.background#1c1e26
  • editorWidget.border#2e303e
  • editorWidget.foreground#abb2bf
  • focusBorder#abb2bf77
  • foreground#abb2bf
  • input.background#232530
  • input.border#2e303e
  • input.foreground#abb2bf
  • input.placeholderForeground#5c6370
  • list.activeSelectionBackground#2a2c38
  • list.activeSelectionForeground#bfc7d7
  • list.focusBackground#2a2c38
  • list.hoverBackground#282a36
  • list.inactiveSelectionBackground#2a2c38
  • list.inactiveSelectionForeground#abb2bf
  • menu.border#2e303e
  • menu.foreground#abb2bf
  • menu.separatorBackground#2e303e
  • panel.background#1c1e26
  • panel.border#2e303e
  • panelSectionHeader.background#232530
  • panelTitle.activeForeground#bfc7d7
  • panelTitle.inactiveForeground#abb2bf80
  • progressBar.background#26bbd9
  • quickInput.background#232530
  • quickInput.foreground#abb2bf
  • quickInputList.focusBackground#282a36
  • quickInputTitle.background#232530
  • scrollbar.shadow#00000044
  • scrollbarSlider.activeBackground#6c6f9330
  • scrollbarSlider.background#6c6f9325
  • scrollbarSlider.hoverBackground#6c6f9330
  • selection.background#2a2c38
  • sideBar.background#1c1e26
  • sideBar.border#2e303e
  • sideBar.foreground#abb2bf
  • sideBarSectionHeader.background#232530
  • sideBarSectionHeader.foreground#bfc7d7
  • sideBarTitle.background#232530
  • sideBarTitle.foreground#bfc7d7
  • statusBar.background#232530
  • statusBar.border#2e303e
  • statusBar.debuggingBackground#b877db
  • statusBar.foreground#bfc7d7
  • statusBar.noFolderBackground#232530
  • tab.activeBackground#2a2c38
  • tab.activeBorder#e9436d
  • tab.activeForeground#bfc7d7
  • tab.border#2e303e
  • tab.hoverBackground#282a36
  • tab.inactiveBackground#232530
  • tab.inactiveForeground#abb2bf80
  • textLink.activeForeground#e9436de6
  • textLink.foreground#e9436d
  • titleBar.activeBackground#1c1e26
  • titleBar.activeForeground#7f9ab3
  • titleBar.inactiveBackground#1c1e26
  • titleBar.inactiveForeground#abb2bf80
  • widget.shadow#00000044

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#5c6370
string, string.quoted#64d1a9
constant.character.escape, string.escape, constant.character.escape.backslash#64d1a9
constant.numeric, constant.language, constant.character, constant.other, constant, variable.constant#34d3fb
constant.other.enum, constant.enum, variable.enum, enum.member#ff9668
keyword, storage.type, storage.modifier, keyword.control, keyword.return, keyword.other#b877db
entity.name.function, support.function, meta.function, meta.function.declaration, entity.name.method#fab795
variable, variable.other, variable.other.local, variable.other.readwrite#d5d8da
variable.parameter, parameter, variable.parameter.language#f3c1ff
meta.type.parameters, meta.generic, meta.generic-name, support.type.parameter, entity.name.type.parameter#64d1a9
support.type.builtin, support.class.builtin, storage.type.builtin, entity.name.trait, support.type.trait, meta.trait, support.type, storage.type#64d1a9
entity.name.type.interface, entity.name.type.protocol, support.type.interface, protocol.reference, entity.name.type.abstract, meta.interface#64d1a9
entity.name.type, support.type, entity.name.class, support.class, storage.type, entity.name.type.class#dbbe7f
entity.name.tag, punctuation.definition.tag#e9436d
entity.other.attribute-name, variable.other.property, variable.field, storage.modifier.static, variable.other.static#34d3fb
ThemeDatabase All Themes by enes ozturk - VS Code Theme