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#74c7ec
  • activityBar.background#0c1215
  • activityBar.border#373e41
  • activityBar.foreground#74c7ec
  • activityBar.inactiveForeground#677479
  • activityBarBadge.background#74c7ec
  • activityBarBadge.foreground#11191d
  • badge.background#74c7ec
  • badge.foreground#11191d
  • breadcrumb.activeSelectionForeground#74c7ec
  • breadcrumb.focusForeground#d6dde0
  • breadcrumb.foreground#677479
  • button.background#74c7ec
  • button.foreground#11191d
  • button.hoverBackground#87cfef
  • descriptionForeground#94a2a8
  • dropdown.background#242b2f
  • dropdown.border#373e41
  • dropdown.foreground#d6dde0
  • editor.background#11191d
  • editor.findMatchBackground#74c7ec73
  • editor.findMatchHighlightBackground#74c7ec38
  • editor.foreground#d6dde0
  • editor.lineHighlightBackground#2e353866
  • editor.selectionBackground#74c7ec52
  • editor.selectionHighlightBackground#74c7ec29
  • editor.wordHighlightBackground#74c7ec29
  • editor.wordHighlightStrongBackground#74c7ec3d
  • editorBracketMatch.background#74c7ec29
  • editorBracketMatch.border#74c7ec99
  • editorCursor.foreground#74c7ec
  • editorError.foreground#f38ba8
  • editorGroup.border#373e41
  • editorGroupHeader.tabsBackground#0f161a
  • editorGroupHeader.tabsBorder#373e41
  • editorGutter.addedBackground#a6e3a1
  • editorGutter.deletedBackground#f38ba8
  • editorGutter.modifiedBackground#a1b4f6
  • editorHoverWidget.background#242b2f
  • editorHoverWidget.border#373e41
  • editorIndentGuide.activeBackground1#74c7ec99
  • editorIndentGuide.background1#373e41
  • editorInfo.foreground#74c7ec
  • editorLineNumber.activeForeground#74c7ec
  • editorLineNumber.foreground#677479
  • editorSuggestWidget.background#242b2f
  • editorSuggestWidget.selectedBackground#74c7ec3d
  • editorWarning.foreground#f9e2af
  • editorWhitespace.foreground#677479
  • editorWidget.background#242b2f
  • editorWidget.border#373e41
  • errorForeground#f38ba8
  • focusBorder#74c7ec80
  • foreground#94a2a8
  • gitDecoration.deletedResourceForeground#f38ba8
  • gitDecoration.modifiedResourceForeground#a1b4f6
  • gitDecoration.untrackedResourceForeground#a6e3a1
  • input.background#242b2f
  • input.border#373e41
  • input.foreground#d6dde0
  • input.placeholderForeground#677479
  • inputOption.activeBackground#74c7ec3d
  • inputOption.activeBorder#74c7ec
  • list.activeSelectionBackground#74c7ec47
  • list.activeSelectionForeground#d6dde0
  • list.focusBackground#74c7ec47
  • list.highlightForeground#74c7ec
  • list.hoverBackground#32393d80
  • list.inactiveSelectionBackground#74c7ec29
  • minimap.selectionHighlight#74c7ec80
  • panel.background#0f161a
  • panel.border#373e41
  • panelTitle.activeBorder#74c7ec
  • panelTitle.activeForeground#d6dde0
  • panelTitle.inactiveForeground#677479
  • peekViewEditor.background#11191d
  • peekViewResult.background#0f161a
  • progressBar.background#74c7ec
  • quickInput.background#242b2f
  • quickInput.foreground#d6dde0
  • quickInputList.focusBackground#74c7ec3d
  • scrollbarSlider.activeBackground#74c7ec8c
  • scrollbarSlider.background#74c7ec38
  • scrollbarSlider.hoverBackground#74c7ec61
  • selection.background#74c7ec57
  • sideBar.background#0f161a
  • sideBar.border#373e41
  • sideBar.foreground#94a2a8
  • sideBarSectionHeader.background#0f161a
  • sideBarSectionHeader.foreground#d6dde0
  • sideBarTitle.foreground#d6dde0
  • statusBar.background#0c1215
  • statusBar.border#373e41
  • statusBar.debuggingBackground#74c7ec
  • statusBar.debuggingForeground#11191d
  • statusBar.foreground#94a2a8
  • statusBar.noFolderBackground#0c1215
  • statusBarItem.remoteBackground#74c7ec
  • statusBarItem.remoteForeground#11191d
  • tab.activeBackground#11191d
  • tab.activeBorder#74c7ecb3
  • tab.activeBorderTop#74c7ec
  • tab.activeForeground#d6dde0
  • tab.border#0c1215
  • tab.inactiveBackground#0f161a
  • tab.inactiveForeground#677479
  • terminal.background#11191d
  • terminal.foreground#d6dde0
  • terminalCursor.foreground#74c7ec
  • textLink.activeForeground#8ad0ef
  • textLink.foreground#74c7ec
  • titleBar.activeBackground#0c1215
  • titleBar.activeForeground#d6dde0
  • titleBar.border#373e41
  • titleBar.inactiveBackground#0c1215
  • titleBar.inactiveForeground#677479
  • widget.shadow#00000066

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#677479italic
string, string.quoted, string.template#e69ec3
constant.numeric, constant.language, constant.character, constant.other#eaa580
keyword, storage, storage.type, storage.modifier, keyword.control, keyword.operator.new#74c7ec
keyword.operator, punctuation, meta.brace#94a2a8
entity.name.function, support.function, meta.function-call.generic#bbbd73
entity.name.type, entity.name.class, support.type, support.class, entity.other.inherited-class#67ccc0
variable, variable.other, meta.definition.variable.name#d6dde0
variable.parameter, variable.other.readwrite#d6dde0
variable.language, variable.other.constant, support.variable#eaa580
entity.name.tag, punctuation.definition.tag#74c7ec
entity.other.attribute-name, meta.object-literal.key, support.type.property-name#a1b4f6
markup.heading, entity.name.section#74c7ecbold
markup.bold#eaa580bold
markup.italic#e69ec3italic
markup.inline.raw, markup.fenced_code#bbbd73
markup.inserted#a6e3a1
markup.deleted#f38ba8
invalid, invalid.illegal#f38ba8