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#E5DFCC
  • activityBar.foreground#263238
  • activityBar.inactiveForeground#687A80
  • activityBarBadge.background#268BD2
  • activityBarBadge.foreground#F7F1DF
  • agentsBottomPanel.border#D8D1BC
  • agentsCard.border#D8D1BC
  • agentsChatInput.border#D8D1BC
  • agentsChatInput.focusBorder#268BD2
  • agentsNewSessionButton.border#D8D1BC
  • agentsPanel.border#D8D1BC
  • badge.background#268BD2
  • badge.foreground#F7F1DF
  • button.background#268BD2
  • button.foreground#F7F1DF
  • button.hoverBackground#1F79B5
  • debugExceptionWidget.background#EEE8D5
  • debugExceptionWidget.border#D8D1BC
  • debugToolBar.background#EEE8D5
  • dropdown.background#EEE8D5
  • dropdown.border#D8D1BC
  • dropdown.foreground#263238
  • editor.background#F7F1DF
  • editor.foreground#263238
  • editor.inactiveSelectionBackground#E5DFCC
  • editor.lineHighlightBackground#E5DFCC
  • editor.lineHighlightBorder#D8D1BC
  • editor.selectionBackground#D9E3E3
  • editor.selectionForeground#263238
  • editor.selectionHighlightBackground#D9E3E380
  • editor.wordHighlightBackground#D9E3E380
  • editor.wordHighlightStrongBackground#D9E3E3A0
  • editorBracketHighlight.foreground1#268BD2
  • editorBracketHighlight.foreground2#9A7800
  • editorBracketHighlight.foreground3#7568A8
  • editorCursor.foreground#263238
  • editorGroup.border#D8D1BC
  • editorGroup.dropBackground#268BD233
  • editorGroupHeader.tabsBackground#EEE8D5
  • editorHoverWidget.background#EEE8D5
  • editorHoverWidget.border#D8D1BC
  • editorLineNumber.activeForeground#263238
  • editorLineNumber.foreground#687A80
  • editorMarkerNavigationError.background#F3DADA
  • editorMarkerNavigationWarning.background#F3E8C8
  • editorWhitespace.foreground#D8D1BC
  • editorWidget.background#EEE8D5
  • editorWidget.border#D8D1BC
  • errorForeground#C94B45
  • focusBorder#268BD2
  • input.background#EEE8D5
  • input.border#D8D1BC
  • input.foreground#263238
  • input.placeholderForeground#687A80
  • inputOption.activeBorder#268BD2
  • inputValidation.errorBackground#F3DADA
  • inputValidation.errorBorder#C94B45
  • inputValidation.infoBackground#E4EEF4
  • inputValidation.infoBorder#268BD2
  • inputValidation.warningBackground#F3E8C8
  • inputValidation.warningBorder#9A7800
  • list.activeSelectionBackground#D9E3E3
  • list.activeSelectionForeground#263238
  • list.dropBackground#268BD233
  • list.highlightForeground#268BD2
  • list.hoverBackground#E5DFCC
  • list.inactiveSelectionBackground#E5DFCC
  • list.inactiveSelectionForeground#687A80
  • minimap.background#E5DFCC
  • minimap.selectionHighlight#D9E3E3
  • modernActivityBar.activeBackground#D9D2BC
  • modernActivityBar.background#E5DFCC
  • modernActivityBar.hoverBackground#DED8C5
  • notificationCenter.border#D8D1BC
  • notificationCenterHeader.background#EEE8D5
  • notificationCenterHeader.foreground#263238
  • notifications.background#EEE8D5
  • notifications.border#D8D1BC
  • notifications.foreground#263238
  • notificationsErrorIcon.foreground#C94B45
  • notificationsInfoIcon.foreground#268BD2
  • notificationsWarningIcon.foreground#9A7800
  • notificationToast.border#D8D1BC
  • panel.background#E5DFCC
  • panel.border#D8D1BC
  • peekView.border#268BD2
  • peekViewEditor.background#F7F1DF
  • peekViewEditor.matchHighlightBackground#D9E3E3A0
  • peekViewResult.background#EEE8D5
  • peekViewResult.fileForeground#263238
  • peekViewResult.lineForeground#687A80
  • peekViewTitle.background#E5DFCC
  • peekViewTitleDescription.foreground#687A80
  • peekViewTitleLabel.foreground#263238
  • pickerGroup.border#D8D1BC
  • pickerGroup.foreground#268BD2
  • ports.iconRunningProcessForeground#668A32
  • progressBar.background#268BD2
  • quickInput.background#EEE8D5
  • quickInput.foreground#263238
  • quickInputList.focusBackground#D9E3E3
  • quickInputList.focusForeground#263238
  • selection.background#D9E3E3
  • sideBar.background#EEE8D5
  • sideBar.foreground#263238
  • sideBarSectionHeader.background#E5DFCC
  • sideBarSectionHeader.foreground#263238
  • sideBarTitle.foreground#263238
  • statusBar.background#E5DFCC
  • statusBar.debuggingBackground#D9D2BC
  • statusBar.debuggingForeground#263238
  • statusBar.foreground#263238
  • statusBar.noFolderBackground#E5DFCC
  • statusBar.noFolderForeground#263238
  • statusBarItem.prominentBackground#D9D2BC
  • statusBarItem.prominentForeground#263238
  • statusBarItem.prominentHoverBackground#D8D1BC
  • surface.border#D8D1BC
  • tab.activeBackground#F7F1DF
  • tab.activeForeground#263238
  • tab.border#D8D1BC
  • tab.inactiveBackground#EEE8D5
  • tab.inactiveForeground#687A80
  • terminal.ansiBlack#263238
  • terminal.ansiBlue#268BD2
  • terminal.ansiBrightBlack#687A80
  • terminal.ansiBrightBlue#3D9BE0
  • terminal.ansiBrightCyan#429F9F
  • terminal.ansiBrightGreen#789B42
  • terminal.ansiBrightMagenta#897CBD
  • terminal.ansiBrightRed#D65A54
  • terminal.ansiBrightWhite#263238
  • terminal.ansiBrightYellow#B08C00
  • terminal.ansiCyan#328C8C
  • terminal.ansiGreen#668A32
  • terminal.ansiMagenta#7568A8
  • terminal.ansiRed#C94B45
  • terminal.ansiWhite#EEE8D5
  • terminal.ansiYellow#9A7800
  • terminal.background#F7F1DF
  • terminal.foreground#263238
  • terminalCursor.foreground#263238
  • textLink.activeForeground#268BD2
  • textLink.foreground#268BD2
  • titleBar.activeBackground#E5DFCC
  • titleBar.activeForeground#263238
  • titleBar.inactiveBackground#E5DFCC
  • titleBar.inactiveForeground#687A80

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
meta.embedded, source.groovy.embedded, string meta.image.inline.markdown, variable.legacy.builtin.python#263238
comment#687A80italic
string#668A32
string.regexp#C94B45
constant.numeric#9A7800
variable.language, variable.other#263238
keyword#7568A8
storage#7568A8bold
entity.name.class, entity.name.type, entity.name.namespace, entity.name.scope-resolution#328C8C
entity.name.function#268BD2
punctuation.definition.variable#7568A8
punctuation.section.embedded.begin, punctuation.section.embedded.end#C94B45
constant.language, meta.preprocessor#7568A8
support.function.construct, keyword.other.new#328C8C
constant.character, constant.other#9A7800
entity.other.inherited-class, punctuation.separator.namespace.ruby#7568A8
variable.parameter#263238
entity.name.tag#268BD2
punctuation.definition.tag#687A80
entity.other.attribute-name#328C8C
support.function#268BD2
punctuation.separator.continuation#C94B45
support.constant, support.variable#268BD2
support.type, support.class#328C8C
support.type.exception#C94B45
support.other.variable#268BD2
invalid#C94B45
meta.diff, meta.diff.header#268BD2italic
markup.deleted#C94B45
markup.changed#9A7800
markup.inserted#668A32
markup.quote#668A32
markup.list#9A7800
markup.bold, markup.italic#7568A8
markup.boldbold
markup.italicitalic
markup.strikethroughstrikethrough
markup.inline.raw#668A32
markup.heading#268BD2bold
markup.heading.setext#268BD2
token.info-token#268BD2
token.warn-token#9A7800
token.error-token#C94B45
token.debug-token#7568A8
iSheild by jediOTW - VS Code Theme