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#282C34
  • activityBar.foreground#ABB2BF
  • activityBar.inactiveForeground#7F848E
  • activityBarBadge.background#61AFEF
  • activityBarBadge.foreground#21252B
  • agentsBottomPanel.border#3A3F4B
  • agentsCard.border#3A3F4B
  • agentsChatInput.border#3A3F4B
  • agentsChatInput.focusBorder#61AFEF
  • agentsNewSessionButton.border#3A3F4B
  • agentsPanel.border#3A3F4B
  • agentsSessions.border#3A3F4B
  • badge.background#61AFEF
  • badge.foreground#21252B
  • button.background#61AFEF
  • button.foreground#21252B
  • button.hoverBackground#528CC9
  • button.secondaryBackground#3A3F4B
  • button.secondaryForeground#ABB2BF
  • button.secondaryHoverBackground#454B59
  • debugExceptionWidget.background#282C34
  • debugExceptionWidget.border#3A3F4B
  • debugToolBar.background#282C34
  • dropdown.background#282C34
  • dropdown.border#3A3F4B
  • dropdown.foreground#ABB2BF
  • dropdown.listBackground#282C34
  • editor.background#21252B
  • editor.foreground#ABB2BF
  • editor.inactiveSelectionBackground#30343D
  • editor.lineHighlightBackground#30343D
  • editor.lineHighlightBorder#3A3F4B
  • editor.selectionBackground#3E4451
  • editor.selectionForeground#ABB2BF
  • editor.selectionHighlightBackground#3E445180
  • editor.wordHighlightBackground#3E445180
  • editor.wordHighlightStrongBackground#61AFEF40
  • editorBracketHighlight.foreground1#61AFEF
  • editorBracketHighlight.foreground2#56B6C2
  • editorBracketHighlight.foreground3#C678DD
  • editorBracketHighlight.foreground4#E5C07B
  • editorBracketHighlight.foreground5#98C379
  • editorBracketHighlight.foreground6#E06C75
  • editorCursor.foreground#ABB2BF
  • editorGroup.border#3A3F4B
  • editorGroup.dropBackground#61AFEF33
  • editorGroupHeader.tabsBackground#282C34
  • editorHoverWidget.background#30343D
  • editorHoverWidget.border#3A3F4B
  • editorLineNumber.activeForeground#ABB2BF
  • editorLineNumber.foreground#7F848E
  • editorMarkerNavigationError.background#3A2026
  • editorMarkerNavigationInfo.background#202F3A
  • editorMarkerNavigationWarning.background#3A3322
  • editorWhitespace.foreground#3A3F4B
  • editorWidget.background#30343D
  • editorWidget.border#3A3F4B
  • errorForeground#E06C75
  • focusBorder#61AFEF
  • input.background#282C34
  • input.border#3A3F4B
  • input.foreground#ABB2BF
  • input.placeholderForeground#7F848E
  • inputOption.activeBorder#61AFEF
  • inputValidation.errorBackground#3A2026
  • inputValidation.errorBorder#E06C75
  • inputValidation.infoBackground#202F3A
  • inputValidation.infoBorder#61AFEF
  • inputValidation.warningBackground#3A3322
  • inputValidation.warningBorder#E5C07B
  • list.activeSelectionBackground#3E4451
  • list.activeSelectionForeground#ABB2BF
  • list.dropBackground#61AFEF33
  • list.focusBackground#30343D
  • list.focusForeground#ABB2BF
  • list.highlightForeground#61AFEF
  • list.hoverBackground#30343D
  • list.inactiveSelectionBackground#30343D
  • list.inactiveSelectionForeground#ABB2BF
  • minimap.background#21252B
  • minimap.selectionHighlight#3E4451
  • modernActivityBar.activeBackground#30343D
  • modernActivityBar.background#282C34
  • modernActivityBar.hoverBackground#30343D
  • notificationCenter.border#3A3F4B
  • notificationCenterHeader.background#282C34
  • notificationCenterHeader.foreground#ABB2BF
  • notifications.background#30343D
  • notifications.border#3A3F4B
  • notifications.foreground#ABB2BF
  • notificationsErrorIcon.foreground#E06C75
  • notificationsInfoIcon.foreground#61AFEF
  • notificationsWarningIcon.foreground#E5C07B
  • notificationToast.border#3A3F4B
  • panel.background#21252B
  • panel.border#3A3F4B
  • peekView.border#61AFEF
  • peekViewEditor.background#21252B
  • peekViewEditor.matchHighlightBackground#61AFEF40
  • peekViewResult.background#282C34
  • peekViewResult.fileForeground#ABB2BF
  • peekViewResult.lineForeground#7F848E
  • peekViewTitle.background#30343D
  • peekViewTitleDescription.foreground#7F848E
  • peekViewTitleLabel.foreground#ABB2BF
  • pickerGroup.border#3A3F4B
  • pickerGroup.foreground#61AFEF
  • ports.iconRunningProcessForeground#98C379
  • progressBar.background#61AFEF
  • quickInput.background#30343D
  • quickInput.foreground#ABB2BF
  • quickInputList.focusBackground#3E4451
  • quickInputList.focusForeground#ABB2BF
  • selection.background#3E4451
  • sideBar.background#282C34
  • sideBar.foreground#ABB2BF
  • sideBarSectionHeader.background#30343D
  • sideBarSectionHeader.foreground#ABB2BF
  • sideBarTitle.foreground#ABB2BF
  • statusBar.background#282C34
  • statusBar.debuggingBackground#30343D
  • statusBar.debuggingForeground#ABB2BF
  • statusBar.foreground#ABB2BF
  • statusBar.noFolderBackground#282C34
  • statusBar.noFolderForeground#ABB2BF
  • statusBarItem.prominentBackground#30343D
  • statusBarItem.prominentForeground#ABB2BF
  • statusBarItem.prominentHoverBackground#3A3F4B
  • statusBarItem.remoteBackground#56B6C2
  • statusBarItem.remoteForeground#21252B
  • surface.border#3A3F4B
  • tab.activeBackground#21252B
  • tab.activeForeground#ABB2BF
  • tab.border#3A3F4B
  • tab.inactiveBackground#282C34
  • tab.inactiveForeground#7F848E
  • tab.lastPinnedBorder#56B6C2
  • tab.unfocusedActiveForeground#ABB2BF
  • tab.unfocusedInactiveForeground#7F848E
  • terminal.ansiBlack#21252B
  • terminal.ansiBlue#61AFEF
  • terminal.ansiBrightBlack#7F848E
  • terminal.ansiBrightBlue#61AFEF
  • terminal.ansiBrightCyan#56B6C2
  • terminal.ansiBrightGreen#98C379
  • terminal.ansiBrightMagenta#C678DD
  • terminal.ansiBrightRed#E06C75
  • terminal.ansiBrightWhite#ABB2BF
  • terminal.ansiBrightYellow#E5C07B
  • terminal.ansiCyan#56B6C2
  • terminal.ansiGreen#98C379
  • terminal.ansiMagenta#C678DD
  • terminal.ansiRed#E06C75
  • terminal.ansiWhite#ABB2BF
  • terminal.ansiYellow#E5C07B
  • terminal.background#21252B
  • terminal.foreground#ABB2BF
  • terminalCursor.foreground#ABB2BF
  • textLink.activeForeground#61AFEF
  • textLink.foreground#61AFEF
  • titleBar.activeBackground#282C34
  • titleBar.activeForeground#ABB2BF
  • titleBar.inactiveBackground#282C34
  • titleBar.inactiveForeground#7F848E

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
meta.embedded, source.groovy.embedded, string meta.image.inline.markdown, variable.legacy.builtin.python#ABB2BF
comment#7F848Eitalic
string#98C379
string.regexp#E06C75
constant.numeric#E5C07B
variable.language, variable.other#ABB2BF
keyword#C678DD
storage#C678DDbold
entity.name.class, entity.name.type, entity.name.namespace, entity.name.scope-resolution#56B6C2
entity.name.function#61AFEF
punctuation.definition.variable#C678DD
punctuation.section.embedded.begin, punctuation.section.embedded.end#E06C75
constant.language, meta.preprocessor#56B6C2
support.function.construct, keyword.other.new#C678DD
constant.character, constant.other#E5C07B
entity.other.inherited-class, punctuation.separator.namespace.ruby#56B6C2
variable.parameter#ABB2BF
entity.name.tag#61AFEF
punctuation.definition.tag#7F848E
entity.other.attribute-name#56B6C2
support.function#61AFEF
punctuation.separator.continuation#C678DD
support.constant, support.variable#61AFEF
support.type, support.class#56B6C2
support.type.exception#E06C75
support.other.variable#ABB2BF
invalid#E06C75
meta.diff, meta.diff.header#61AFEFitalic
markup.deleted#E06C75
markup.changed#E5C07B
markup.inserted#98C379
markup.quote#98C379
markup.list#E5C07B
markup.bold, markup.italic#C678DD
markup.boldbold
markup.italicitalic
markup.strikethroughstrikethrough
markup.inline.raw#98C379
markup.heading#61AFEFbold
markup.heading.setext#61AFEF
token.info-token#61AFEF
token.warn-token#E5C07B
token.error-token#E06C75
token.debug-token#C678DD
iSheild by jediOTW - VS Code Theme