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#ef5346
  • activityBar.background#05181d
  • activityBar.foreground#eaf2f3
  • activityBar.inactiveForeground#648b93
  • activityBarBadge.background#ef5346
  • activityBarBadge.foreground#082228
  • badge.background#ef5346
  • badge.foreground#082228
  • breadcrumb.focusForeground#eaf2f3
  • breadcrumb.foreground#648b93
  • breadcrumbPicker.background#05181d
  • descriptionForeground#648b93
  • diffEditor.insertedTextBackground#74d6b41a
  • diffEditor.removedTextBackground#ef53461a
  • dropdown.background#103138
  • dropdown.foreground#eaf2f3
  • editor.background#082228
  • editor.findMatchBackground#ef534655
  • editor.findMatchHighlightBackground#ef534633
  • editor.foreground#eaf2f3
  • editor.lineHighlightBackground#103138
  • editor.selectionBackground#ef534633
  • editor.selectionHighlightBackground#ef534622
  • editor.wordHighlightBackground#5cc6e622
  • editorBracketHighlight.foreground1#ef5346
  • editorBracketHighlight.foreground2#5cc6e6
  • editorBracketHighlight.foreground3#74d6b4
  • editorBracketHighlight.foreground4#aee9f0
  • editorBracketHighlight.foreground5#f2c879
  • editorBracketHighlight.foreground6#f47b6f
  • editorBracketHighlight.unexpectedBracket.foreground#ff5c66
  • editorBracketMatch.background#ef534622
  • editorBracketMatch.border#ef5346
  • editorCursor.foreground#ef5346
  • editorGroupHeader.noTabsBackground#05181d
  • editorGroupHeader.tabsBackground#05181d
  • editorGutter.addedBackground#74d6b4
  • editorGutter.deletedBackground#ef5346
  • editorGutter.modifiedBackground#5cc6e6
  • editorHoverWidget.background#103138
  • editorIndentGuide.activeBackground1#648b93
  • editorIndentGuide.background1#103138
  • editorLineNumber.activeForeground#eaf2f3
  • editorLineNumber.foreground#648b93
  • editorSuggestWidget.background#103138
  • editorSuggestWidget.highlightForeground#ef5346
  • editorSuggestWidget.selectedBackground#082228
  • editorWhitespace.foreground#103138
  • editorWidget.background#103138
  • editorWidget.foreground#eaf2f3
  • errorForeground#ff5c66
  • focusBorder#ef5346
  • foreground#eaf2f3
  • gitDecoration.deletedResourceForeground#ef5346
  • gitDecoration.ignoredResourceForeground#648b93
  • gitDecoration.modifiedResourceForeground#5cc6e6
  • gitDecoration.untrackedResourceForeground#74d6b4
  • icon.foreground#eaf2f3
  • input.background#103138
  • input.border#103138
  • input.foreground#eaf2f3
  • input.placeholderForeground#648b93
  • inputOption.activeBorder#ef5346
  • list.activeSelectionBackground#103138
  • list.activeSelectionForeground#eaf2f3
  • list.highlightForeground#ef5346
  • list.hoverBackground#103138aa
  • list.inactiveSelectionBackground#103138
  • notificationCenterHeader.background#05181d
  • notifications.background#103138
  • panel.background#05181d
  • panel.border#103138
  • panelTitle.activeBorder#ef5346
  • panelTitle.activeForeground#eaf2f3
  • peekView.border#ef5346
  • peekViewEditor.background#05181d
  • peekViewEditor.matchHighlightBackground#ef534644
  • peekViewResult.background#05181d
  • peekViewResult.selectionBackground#103138
  • peekViewTitle.background#05181d
  • pickerGroup.border#103138
  • pickerGroup.foreground#ef5346
  • progressBar.background#ef5346
  • quickInput.background#05181d
  • quickInputList.focusBackground#103138
  • scrollbarSlider.activeBackground#648b9388
  • scrollbarSlider.background#648b9344
  • scrollbarSlider.hoverBackground#648b9366
  • sideBar.background#05181d
  • sideBar.foreground#eaf2f3
  • sideBarSectionHeader.background#05181d
  • sideBarTitle.foreground#eaf2f3
  • statusBar.background#05181d
  • statusBar.border#ef5346
  • statusBar.debuggingBackground#ef5346
  • statusBar.debuggingForeground#082228
  • statusBar.foreground#648b93
  • statusBar.noFolderBackground#05181d
  • statusBarItem.remoteBackground#ef5346
  • statusBarItem.remoteForeground#082228
  • tab.activeBackground#082228
  • tab.activeBorderTop#ef5346
  • tab.activeForeground#eaf2f3
  • tab.border#05181d
  • tab.inactiveBackground#05181d
  • tab.inactiveForeground#648b93
  • terminal.ansiBlack#103138
  • terminal.ansiBlue#5cc6e6
  • terminal.ansiBrightBlack#648b93
  • terminal.ansiBrightBlue#5cc6e6
  • terminal.ansiBrightCyan#aee9f0
  • terminal.ansiBrightGreen#74d6b4
  • terminal.ansiBrightMagenta#e88fa8
  • terminal.ansiBrightRed#ef5346
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#f2c879
  • terminal.ansiCyan#aee9f0
  • terminal.ansiGreen#74d6b4
  • terminal.ansiMagenta#e88fa8
  • terminal.ansiRed#ef5346
  • terminal.ansiWhite#eaf2f3
  • terminal.ansiYellow#f2c879
  • terminal.background#082228
  • terminal.foreground#eaf2f3
  • terminalCursor.foreground#ef5346
  • textLink.activeForeground#5cc6e6
  • textLink.foreground#ef5346
  • textPreformat.foreground#74d6b4
  • titleBar.activeBackground#05181d
  • titleBar.activeForeground#eaf2f3
  • titleBar.inactiveBackground#05181d
  • titleBar.inactiveForeground#648b93

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#648b93italic
keyword, keyword.control, storage, storage.type, storage.modifier#ef5346—
keyword.operator#eaf2f3—
string, string.quoted, string.template, punctuation.definition.string#74d6b4—
entity.name.function, support.function, meta.function-call, entity.other.attribute-name#5cc6e6—
entity.name.type, entity.name.class, support.type, support.class, entity.name.tag#aee9f0—
variable.language.this, variable.other.property, support.variable.property, meta.object-literal.key, support.type.property-name#f47b6f—
constant.numeric, constant.language, constant.other#f2c879—
variable, variable.other.readwrite, variable.parameter#eaf2f3—
markup.heading, entity.name.section#ef5346bold
markup.bold—bold
markup.italic—italic
markup.inline.raw, markup.fenced_code#74d6b4—
markup.underline.link, string.other.link#ef5346—
invalid, invalid.illegal#ff5c66—