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#252526
  • activityBar.foreground#D0D0D0
  • activityBar.inactiveForeground#858585
  • activityBarBadge.background#569CD6
  • activityBarBadge.foreground#1E1E1E
  • agentsBottomPanel.border#38383D
  • agentsCard.border#38383D
  • agentsChatInput.border#38383D
  • agentsChatInput.focusBorder#569CD6
  • agentsNewSessionButton.border#38383D
  • agentsPanel.border#38383D
  • agentsSessions.border#38383D
  • badge.background#569CD6
  • badge.foreground#1E1E1E
  • button.background#569CD6
  • button.foreground#1E1E1E
  • button.hoverBackground#4D8FC8
  • button.secondaryBackground#38383D
  • button.secondaryForeground#D0D0D0
  • button.secondaryHoverBackground#414146
  • debugExceptionWidget.background#252526
  • debugExceptionWidget.border#38383D
  • debugToolBar.background#252526
  • dropdown.background#252526
  • dropdown.border#38383D
  • dropdown.foreground#D0D0D0
  • dropdown.listBackground#252526
  • editor.background#1E1E1E
  • editor.foreground#D0D0D0
  • editor.inactiveSelectionBackground#2A2D2E
  • editor.lineHighlightBackground#2A2D2E
  • editor.lineHighlightBorder#38383D
  • editor.selectionBackground#264F78
  • editor.selectionForeground#D0D0D0
  • editor.selectionHighlightBackground#264F7880
  • editor.wordHighlightBackground#264F7880
  • editor.wordHighlightStrongBackground#569CD640
  • editorBracketHighlight.foreground1#569CD6
  • editorBracketHighlight.foreground2#4BB3A7
  • editorBracketHighlight.foreground3#B982B4
  • editorBracketHighlight.foreground4#C9B978
  • editorBracketHighlight.foreground5#7FA65A
  • editorBracketHighlight.foreground6#D96C75
  • editorCursor.foreground#D0D0D0
  • editorGroup.border#38383D
  • editorGroup.dropBackground#569CD633
  • editorGroupHeader.tabsBackground#252526
  • editorHoverWidget.background#2A2D2E
  • editorHoverWidget.border#38383D
  • editorLineNumber.activeForeground#D0D0D0
  • editorLineNumber.foreground#858585
  • editorMarkerNavigationError.background#352226
  • editorMarkerNavigationInfo.background#202D38
  • editorMarkerNavigationWarning.background#353025
  • editorWhitespace.foreground#38383D
  • editorWidget.background#2A2D2E
  • editorWidget.border#38383D
  • errorForeground#D96C75
  • focusBorder#569CD6
  • input.background#252526
  • input.border#38383D
  • input.foreground#D0D0D0
  • input.placeholderForeground#858585
  • inputOption.activeBorder#569CD6
  • inputValidation.errorBackground#352226
  • inputValidation.errorBorder#D96C75
  • inputValidation.infoBackground#202D38
  • inputValidation.infoBorder#569CD6
  • inputValidation.warningBackground#353025
  • inputValidation.warningBorder#C9B978
  • list.activeSelectionBackground#264F78
  • list.activeSelectionForeground#D0D0D0
  • list.dropBackground#569CD633
  • list.focusBackground#2A2D2E
  • list.focusForeground#D0D0D0
  • list.highlightForeground#569CD6
  • list.hoverBackground#2A2D2E
  • list.inactiveSelectionBackground#2A2D2E
  • list.inactiveSelectionForeground#D0D0D0
  • minimap.background#1E1E1E
  • minimap.selectionHighlight#264F78
  • modernActivityBar.activeBackground#2A2D2E
  • modernActivityBar.background#252526
  • modernActivityBar.hoverBackground#2A2D2E
  • notificationCenter.border#38383D
  • notificationCenterHeader.background#252526
  • notificationCenterHeader.foreground#D0D0D0
  • notifications.background#2A2D2E
  • notifications.border#38383D
  • notifications.foreground#D0D0D0
  • notificationsErrorIcon.foreground#D96C75
  • notificationsInfoIcon.foreground#569CD6
  • notificationsWarningIcon.foreground#C9B978
  • notificationToast.border#38383D
  • panel.background#1E1E1E
  • panel.border#38383D
  • peekView.border#569CD6
  • peekViewEditor.background#1E1E1E
  • peekViewEditor.matchHighlightBackground#569CD640
  • peekViewResult.background#252526
  • peekViewResult.fileForeground#D0D0D0
  • peekViewResult.lineForeground#858585
  • peekViewTitle.background#2A2D2E
  • peekViewTitleDescription.foreground#858585
  • peekViewTitleLabel.foreground#D0D0D0
  • pickerGroup.border#38383D
  • pickerGroup.foreground#569CD6
  • ports.iconRunningProcessForeground#7FA65A
  • progressBar.background#569CD6
  • quickInput.background#2A2D2E
  • quickInput.foreground#D0D0D0
  • quickInputList.focusBackground#264F78
  • quickInputList.focusForeground#D0D0D0
  • selection.background#264F78
  • sideBar.background#252526
  • sideBar.foreground#D0D0D0
  • sideBarSectionHeader.background#2A2D2E
  • sideBarSectionHeader.foreground#D0D0D0
  • sideBarTitle.foreground#D0D0D0
  • statusBar.background#252526
  • statusBar.debuggingBackground#2A2D2E
  • statusBar.debuggingForeground#D0D0D0
  • statusBar.foreground#D0D0D0
  • statusBar.noFolderBackground#252526
  • statusBar.noFolderForeground#D0D0D0
  • statusBarItem.prominentBackground#2A2D2E
  • statusBarItem.prominentForeground#D0D0D0
  • statusBarItem.prominentHoverBackground#38383D
  • statusBarItem.remoteBackground#4BB3A7
  • statusBarItem.remoteForeground#1E1E1E
  • surface.border#38383D
  • tab.activeBackground#1E1E1E
  • tab.activeForeground#D0D0D0
  • tab.border#38383D
  • tab.inactiveBackground#252526
  • tab.inactiveForeground#858585
  • tab.lastPinnedBorder#4BB3A7
  • tab.unfocusedActiveForeground#D0D0D0
  • tab.unfocusedInactiveForeground#858585
  • terminal.ansiBlack#1E1E1E
  • terminal.ansiBlue#569CD6
  • terminal.ansiBrightBlack#858585
  • terminal.ansiBrightBlue#569CD6
  • terminal.ansiBrightCyan#4BB3A7
  • terminal.ansiBrightGreen#7FA65A
  • terminal.ansiBrightMagenta#B982B4
  • terminal.ansiBrightRed#D96C75
  • terminal.ansiBrightWhite#D0D0D0
  • terminal.ansiBrightYellow#C9B978
  • terminal.ansiCyan#4BB3A7
  • terminal.ansiGreen#7FA65A
  • terminal.ansiMagenta#B982B4
  • terminal.ansiRed#D96C75
  • terminal.ansiWhite#D0D0D0
  • terminal.ansiYellow#C9B978
  • terminal.background#1E1E1E
  • terminal.foreground#D0D0D0
  • terminalCursor.foreground#D0D0D0
  • textLink.activeForeground#4BB3A7
  • textLink.foreground#569CD6
  • titleBar.activeBackground#252526
  • titleBar.activeForeground#D0D0D0
  • titleBar.inactiveBackground#252526
  • titleBar.inactiveForeground#858585

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
meta.embedded, source.groovy.embedded, string meta.image.inline.markdown, variable.legacy.builtin.python#D0D0D0
comment#858585italic
string#7FA65A
string.regexp#D96C75
constant.numeric#C9B978
variable.language, variable.other#D0D0D0
keyword#B982B4
storage#B982B4bold
entity.name.class, entity.name.type, entity.name.namespace, entity.name.scope-resolution#4BB3A7
entity.name.function#569CD6
punctuation.definition.variable#D0D0D0
punctuation.section.embedded.begin, punctuation.section.embedded.end#569CD6
constant.language, meta.preprocessor#B982B4
support.function.construct, keyword.other.new#B982B4
constant.character, constant.other#C9B978
entity.other.inherited-class, punctuation.separator.namespace.ruby#4BB3A7
variable.parameter#D0D0D0
entity.name.tag#569CD6
punctuation.definition.tag#858585
entity.other.attribute-name#4BB3A7
support.function#569CD6
punctuation.separator.continuation#B982B4
support.constant, support.variable#569CD6
support.type, support.class#4BB3A7
support.type.exception#D96C75
support.other.variable#D0D0D0
invalid#D96C75
meta.diff, meta.diff.header#569CD6italic
markup.deleted#D96C75
markup.changed#C9B978
markup.inserted#7FA65A
markup.quote#7FA65A
markup.list#C9B978
markup.bold, markup.italic#B982B4
markup.boldbold
markup.italicitalic
markup.strikethroughstrikethrough
markup.inline.raw#7FA65A
markup.heading#569CD6bold
markup.heading.setext#569CD6
token.info-token#569CD6
token.warn-token#C9B978
token.error-token#D96C75
token.debug-token#B982B4
iSheild by jediOTW - VS Code Theme