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#d86575
  • activityBar.background#080c13
  • activityBar.foreground#c2ccd6
  • activityBar.inactiveForeground#4a5568
  • activityBarBadge.background#d86575
  • activityBarBadge.foreground#0c1018
  • badge.background#d86575
  • badge.foreground#0c1018
  • breadcrumb.focusForeground#c2ccd6
  • breadcrumb.foreground#4a5568
  • breadcrumbPicker.background#080c13
  • descriptionForeground#6b7787
  • diffEditor.insertedTextBackground#82b89a1a
  • diffEditor.removedTextBackground#d865751a
  • dropdown.background#141a24
  • dropdown.foreground#c2ccd6
  • editor.background#0c1018
  • editor.findMatchBackground#d8657555
  • editor.findMatchHighlightBackground#d8657533
  • editor.foreground#c2ccd6
  • editor.lineHighlightBackground#141a24
  • editor.selectionBackground#22303c
  • editor.selectionHighlightBackground#d8657522
  • editor.wordHighlightBackground#6e96c422
  • editorBracketHighlight.foreground1#d86575
  • editorBracketHighlight.foreground2#6e96c4
  • editorBracketHighlight.foreground3#5aa6b0
  • editorBracketHighlight.foreground4#82b3c0
  • editorBracketHighlight.foreground5#c0ac84
  • editorBracketHighlight.foreground6#d86575
  • editorBracketHighlight.unexpectedBracket.foreground#ff5c66
  • editorBracketMatch.background#d8657522
  • editorBracketMatch.border#d86575
  • editorCursor.foreground#fcee0a
  • editorGroupHeader.noTabsBackground#080c13
  • editorGroupHeader.tabsBackground#080c13
  • editorGutter.addedBackground#82b89a
  • editorGutter.deletedBackground#d86575
  • editorGutter.modifiedBackground#6e96c4
  • editorHoverWidget.background#141a24
  • editorIndentGuide.activeBackground1#4a5568
  • editorIndentGuide.background1#141a24
  • editorLineNumber.activeForeground#c2ccd6
  • editorLineNumber.foreground#4a5568
  • editorSuggestWidget.background#141a24
  • editorSuggestWidget.highlightForeground#d86575
  • editorSuggestWidget.selectedBackground#0c1018
  • editorWhitespace.foreground#141a24
  • editorWidget.background#141a24
  • editorWidget.foreground#c2ccd6
  • errorForeground#ff5c66
  • focusBorder#d86575
  • foreground#c2ccd6
  • gitDecoration.deletedResourceForeground#d86575
  • gitDecoration.ignoredResourceForeground#4a5568
  • gitDecoration.modifiedResourceForeground#6e96c4
  • gitDecoration.untrackedResourceForeground#82b89a
  • icon.foreground#c2ccd6
  • input.background#141a24
  • input.border#141a24
  • input.foreground#c2ccd6
  • input.placeholderForeground#4a5568
  • inputOption.activeBorder#d86575
  • list.activeSelectionBackground#141a24
  • list.activeSelectionForeground#c2ccd6
  • list.highlightForeground#d86575
  • list.hoverBackground#141a24aa
  • list.inactiveSelectionBackground#141a24
  • notificationCenterHeader.background#080c13
  • notifications.background#141a24
  • panel.background#080c13
  • panel.border#141a24
  • panelTitle.activeBorder#d86575
  • panelTitle.activeForeground#c2ccd6
  • peekView.border#d86575
  • peekViewEditor.background#080c13
  • peekViewEditor.matchHighlightBackground#d8657544
  • peekViewResult.background#080c13
  • peekViewResult.selectionBackground#141a24
  • peekViewTitle.background#080c13
  • pickerGroup.border#141a24
  • pickerGroup.foreground#d86575
  • progressBar.background#d86575
  • quickInput.background#080c13
  • quickInputList.focusBackground#141a24
  • scrollbarSlider.activeBackground#4a556888
  • scrollbarSlider.background#4a556844
  • scrollbarSlider.hoverBackground#4a556866
  • sideBar.background#080c13
  • sideBar.foreground#c2ccd6
  • sideBarSectionHeader.background#080c13
  • sideBarTitle.foreground#c2ccd6
  • statusBar.background#080c13
  • statusBar.border#d86575
  • statusBar.debuggingBackground#d86575
  • statusBar.debuggingForeground#0c1018
  • statusBar.foreground#4a5568
  • statusBar.noFolderBackground#080c13
  • statusBarItem.remoteBackground#d86575
  • statusBarItem.remoteForeground#0c1018
  • tab.activeBackground#0c1018
  • tab.activeBorderTop#d86575
  • tab.activeForeground#c2ccd6
  • tab.border#080c13
  • tab.inactiveBackground#080c13
  • tab.inactiveForeground#4a5568
  • terminal.ansiBlack#141a24
  • terminal.ansiBlue#6e96c4
  • terminal.ansiBrightBlack#4a5568
  • terminal.ansiBrightBlue#6e96c4
  • terminal.ansiBrightCyan#5aa6b0
  • terminal.ansiBrightGreen#82b89a
  • terminal.ansiBrightMagenta#a98ac0
  • terminal.ansiBrightRed#d86575
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#c0ac84
  • terminal.ansiCyan#5aa6b0
  • terminal.ansiGreen#82b89a
  • terminal.ansiMagenta#a98ac0
  • terminal.ansiRed#d86575
  • terminal.ansiWhite#c2ccd6
  • terminal.ansiYellow#c0ac84
  • terminal.background#0c1018
  • terminal.foreground#c2ccd6
  • terminalCursor.foreground#fcee0a
  • textLink.activeForeground#6e96c4
  • textLink.foreground#d86575
  • textPreformat.foreground#5aa6b0
  • titleBar.activeBackground#080c13
  • titleBar.activeForeground#c2ccd6
  • titleBar.inactiveBackground#080c13
  • titleBar.inactiveForeground#4a5568

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#4a5568italic
keyword, keyword.control, storage, storage.type, storage.modifier#d86575—
keyword.operator#c2ccd6—
string, string.quoted, string.template, punctuation.definition.string#5aa6b0—
entity.name.function, support.function, meta.function-call, entity.other.attribute-name#6e96c4—
entity.name.type, entity.name.class, support.type, support.class, entity.name.tag#82b3c0—
variable.language.this, variable.other.property, support.variable.property, meta.object-literal.key, support.type.property-name#d86575—
constant.numeric, constant.language, constant.other#c0ac84—
variable, variable.other.readwrite, variable.parameter#c2ccd6—
markup.heading, entity.name.section#d86575bold
markup.bold—bold
markup.italic—italic
markup.inline.raw, markup.fenced_code#5aa6b0—
markup.underline.link, string.other.link#d86575—
invalid, invalid.illegal#ff5c66—