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.

  • actionBar.toggledBackground#eee8d5
  • activityBar.activeBorder#d33682
  • activityBar.background#fdf6e3
  • activityBar.border#eee8d5
  • activityBar.foreground#657b83
  • activityBar.inactiveForeground#93a1a1
  • activityBarBadge.background#d33682
  • activityBarBadge.foreground#fdf6e3
  • badge.background#d33682
  • badge.foreground#fdf6e3
  • breadcrumb.background#fdf6e3
  • button.background#268bd2
  • button.border#00000012
  • button.foreground#fdf6e3
  • button.hoverBackground#1e6b94
  • button.secondaryBackground#eee8d5
  • button.secondaryForeground#657b83
  • button.secondaryHoverBackground#e1dcc7
  • chat.slashCommandBackground#e1dcc7
  • chat.slashCommandForeground#268bd2
  • checkbox.background#eee8d5
  • checkbox.border#e1dcc7
  • debugToolBar.background#fdf6e3
  • debugToolBar.border#d33682
  • descriptionForeground#93a1a1
  • diffEditor.border#eee8d5
  • diffEditor.insertedTextBackground#85990033
  • diffEditor.removedTextBackground#dc322f33
  • dropdown.background#eee8d5
  • dropdown.border#e1dcc7
  • dropdown.foreground#657b83
  • dropdown.listBackground#fdf6e3
  • editor.background#fdf6e3
  • editor.findMatchBackground#eee8d5
  • editor.findMatchBorder#d33682
  • editor.findMatchForeground#d33682
  • editor.findMatchHighlightBackground#b58900aa
  • editor.findMatchHighlightBorder#d33682
  • editor.findRangeHighlightBackground#eee8d5d8
  • editor.foldBackground#eee8d5b8
  • editor.foreground#657b83
  • editor.inactiveSelectionBackground#eee8d5
  • editor.lineHighlightBorder#eee8d5
  • editor.rangeHighlightBackground#ff000000
  • editor.rangeHighlightBorder#e1dcc7
  • editor.selectionBackground#e1dcc7
  • editor.selectionHighlightBackground#e1dcc7
  • editor.wordHighlightBorder#6c71c4b8
  • editor.wordHighlightTextBackground#b5890064
  • editorBracketMatch.background#eee8d5
  • editorBracketMatch.border#d33682
  • editorCursor.background#fdf6e3
  • editorCursor.foreground#268bd2
  • editorError.foreground#dc322f
  • editorGroup.border#eee8d5
  • editorGroupHeader.border#e1dcc7
  • editorGroupHeader.tabsBackground#fdf6e3
  • editorGroupHeader.tabsBorder#eee8d5
  • editorGutter.addedBackground#859900
  • editorGutter.deletedBackground#dc322f
  • editorGutter.foldingControlForeground#93a1a1
  • editorGutter.modifiedBackground#b58900
  • editorHoverWidget.background#fdf6e3
  • editorHoverWidget.border#e1dcc7
  • editorIndentGuide.activeBackground1#93a1a1
  • editorIndentGuide.background1#e1dcc7
  • editorInfo.foreground#268bd2
  • editorLineNumber.activeForeground#6c71c4
  • editorLineNumber.foreground#93a1a1
  • editorLink.activeForeground#268bd2
  • editorMarkerNavigation.background#fdf6e3
  • editorMarkerNavigationError.background#dc322f
  • editorMarkerNavigationError.headerBackground#fdf6e3
  • editorMarkerNavigationInfo.background#268bd2
  • editorMarkerNavigationInfo.headerBackground#fdf6e3
  • editorMarkerNavigationWarning.background#b58900
  • editorMarkerNavigationWarning.headerBackground#fdf6e3
  • editorOverviewRuler.border#eee8d500
  • editorRuler.foreground#eee8d5
  • editorSuggestWidget.background#fdf6e3
  • editorSuggestWidget.border#93a1a1
  • editorSuggestWidget.focusHighlightForeground#268bd2
  • editorSuggestWidget.highlightForeground#268bd2
  • editorSuggestWidget.selectedBackground#eee8d5
  • editorWarning.foreground#b58900
  • editorWidget.background#eee8d5
  • editorWidget.resizeBorder#268bd2
  • errorForeground#dc322f
  • focusBorder#268bd2
  • foreground#657b83
  • gitDecoration.addedResourceForeground#859900
  • gitDecoration.conflictingResourceForeground#d33682
  • gitDecoration.deletedResourceForeground#dc322f
  • gitDecoration.ignoredResourceForeground#93a1a1
  • gitDecoration.modifiedResourceForeground#b58900
  • gitDecoration.stageDeletedResourceForeground#dc322f
  • gitDecoration.stageModifiedResourceForeground#b58900
  • gitDecoration.submoduleResourceForeground#268bd2
  • icon.foreground#657b83
  • input.background#eee8d5
  • input.border#93a1a1
  • input.foreground#657b83
  • input.placeholderForeground#93a1a1
  • inputOption.activeBackground#268bd2
  • inputOption.activeBorder#1e6b94
  • inputOption.activeForeground#fdf6e3
  • inputOption.hoverBackground#268bd2
  • keybindingLabel.foreground#657b83
  • list.activeSelectionBackground#eee8d5
  • list.activeSelectionForeground#002b36
  • list.activeSelectionIconForeground#002b36
  • list.dropBackground#e1dcc7
  • list.dropBetweenBackground#268bd2
  • list.errorForeground#dc322f
  • list.filterMatchBackground#e1dcc7
  • list.filterMatchBorder#dc322f
  • list.focusOutline#268bd2
  • list.highlightForeground#268bd2
  • list.hoverBackground#eee8d5
  • list.inactiveSelectionBackground#eee8d5
  • list.inactiveSelectionForeground#657b83
  • list.inactiveSelectionIconForeground#657b83
  • list.warningForeground#b58900
  • listFilterWidget.background#fdf6e3
  • listFilterWidget.noMatchesOutline#dc322f
  • listFilterWidget.outline#e1dcc7
  • menu.background#fdf6e3
  • menu.border#e1dcc7
  • menu.foreground#657b83
  • menu.selectionBackground#e1dcc7
  • menu.selectionForeground#d33682
  • menu.separatorBackground#e1dcc7
  • menubar.selectionBackground#e1dcc7
  • menubar.selectionForeground#d33682
  • merge.currentContentBackground#268bd244
  • merge.currentHeaderBackground#268bd288
  • merge.incomingContentBackground#2aa19844
  • merge.incomingHeaderBackground#2aa19888
  • notificationCenter.border#e1dcc7
  • notificationCenterHeader.background#fdf6e3
  • notificationCenterHeader.foreground#657b83
  • notifications.background#fdf6e3
  • notifications.border#e1dcc7
  • notifications.foreground#657b83
  • notificationsErrorIcon.foreground#dc322f
  • notificationsInfoIcon.foreground#268bd2
  • notificationsWarningIcon.foreground#b58900
  • notificationToast.border#e1dcc7
  • panel.background#fdf6e3
  • panel.border#eee8d5
  • panelInput.border#eee8d5
  • panelTitle.activeBorder#d33682
  • panelTitle.activeForeground#657b83
  • panelTitle.inactiveForeground#93a1a1
  • peekView.border#268bd2
  • peekViewEditor.background#fdf6e3
  • peekViewEditor.matchHighlightBackground#eee8d5
  • peekViewEditor.matchHighlightBorder#d33682
  • peekViewEditorGutter.background#fdf6e3
  • peekViewEditorStickyScroll.background#fdf6e3
  • peekViewResult.background#fdf6e3
  • peekViewResult.matchHighlightBackground#e1dcc7
  • peekViewResult.selectionBackground#eee8d5
  • peekViewTitle.background#fdf6e3
  • peekViewTitleDescription.foreground#6c71c4
  • peekViewTitleLabel.foreground#268bd2
  • pickerGroup.border#268bd2
  • pickerGroup.foreground#268bd2
  • ports.iconRunningProcessForeground#859900
  • progressBar.background#268bd2
  • quickInput.background#fdf6e3
  • quickInput.foreground#657b83
  • scrollbar.shadow#eee8d5
  • scrollbarSlider.activeBackground#eee8d5c8
  • scrollbarSlider.background#eee8d5c8
  • settings.dropdownBackground#eee8d5
  • settings.dropdownBorder#e1dcc7
  • settings.headerForeground#002b36
  • settings.modifiedItemIndicator#b5890066
  • sideBar.background#fdf6e3
  • sideBar.border#eee8d5
  • sideBar.foreground#657b83
  • sideBarSectionHeader.background#fdf6e3
  • sideBarSectionHeader.border#eee8d5
  • sideBarSectionHeader.foreground#268bd2
  • sideBarTitle.foreground#d33682
  • statusBar.background#fdf6e3
  • statusBar.border#eee8d5
  • statusBar.debuggingBackground#fdf6e3
  • statusBar.debuggingBorder#d33682
  • statusBar.debuggingForeground#657b83
  • statusBar.focusBorder#ff000000
  • statusBar.foreground#657b83
  • statusBar.noFolderBackground#fdf6e3
  • statusBar.noFolderBorder#2aa198
  • statusBar.noFolderForeground#657b83
  • statusBarItem.activeBackground#e1dcc7
  • statusBarItem.errorBackground#dc322f
  • statusBarItem.focusBorder#0078d4
  • statusBarItem.hoverBackground#eee8d5
  • statusBarItem.prominentBackground#93a1a166
  • statusBarItem.remoteBackground#d33682
  • statusBarItem.remoteForeground#fdf6e3
  • statusBarItem.warningBackground#b58900
  • tab.activeBackground#eee8d5
  • tab.activeBorder#268bd2
  • tab.activeBorderTop#eee8d5
  • tab.activeForeground#002b36
  • tab.border#eee8d5
  • tab.hoverBackground#eee8d5
  • tab.inactiveBackground#fdf6e3
  • tab.inactiveForeground#93a1a1
  • tab.lastPinnedBorder#65787333
  • tab.selectedBackground#fdf6e3
  • tab.selectedBorderTop#268bd2
  • tab.selectedForeground#657b83a0
  • tab.unfocusedActiveBackground#eee8d5
  • tab.unfocusedActiveBorder#fdf6e3
  • tab.unfocusedActiveBorderTop#eee8d5
  • tab.unfocusedHoverBackground#fdf6e3
  • tab.unfocusedInactiveBackground#fdf6e3
  • terminal.ansiBlack#eee8d5
  • terminal.ansiBlue#268bd2
  • terminal.ansiBrightBlack#93a1a1
  • terminal.ansiBrightBlue#4fa5d9
  • terminal.ansiBrightCyan#56c9f1
  • terminal.ansiBrightGreen#a4d666
  • terminal.ansiBrightMagenta#d33682
  • terminal.ansiBrightRed#d33682
  • terminal.ansiBrightWhite#002b36
  • terminal.ansiBrightYellow#dcb55f
  • terminal.ansiCyan#2aa198
  • terminal.ansiGreen#859900
  • terminal.ansiMagenta#6c71c4
  • terminal.ansiRed#dc322f
  • terminal.ansiWhite#073642
  • terminal.ansiYellow#b58900
  • terminal.background#fdf6e3
  • terminal.findMatchBackground#eee8d5
  • terminal.foreground#657b83
  • terminal.inactiveSelectionBackground#93a1a1
  • terminal.selectionBackground#eee8d5
  • terminal.tab.activeBorder#d33682
  • terminalCommandDecoration.defaultBackground#6c71c4
  • terminalCommandDecoration.errorBackground#dc322f
  • terminalCommandDecoration.successBackground#859900
  • terminalCursor.foreground#268bd2
  • textBlockQuote.background#eee8d5
  • textBlockQuote.border#93a1a1
  • textCodeBlock.background#eee8d5
  • textLink.activeForeground#4fa5d9
  • textLink.foreground#268bd2
  • textPreformat.background#e1dcc7
  • textPreformat.foreground#073642
  • textSeparator.foreground#eee8d5
  • titleBar.activeBackground#fdf6e3
  • titleBar.activeForeground#657b83
  • titleBar.border#e1dcc7
  • titleBar.inactiveBackground#e1dcc7
  • titleBar.inactiveForeground#93a1a1
  • tree.indentGuidesStroke#e1dcc7
  • welcomePage.progress.foreground#268bd2
  • welcomePage.tileBackground#eee8d5
  • widget.border#eee8d5

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#93a1a1italic
string#2aa198
number#d33682
built-in, constant.language#b58900
constant.character, constant.other#b58900
variable
variable.parameter#b58900italic
invalid#fdf6e3
invalid.deprecated#fdf6e3
meta.structure.dictionary.json, meta.structure.dictionary.value.json#657b83
string.quoted.json, string.quoted.single.json#2aa198
meta.structure.dictionary.key.json#268bd2
keyword#859900
keyword.operator#859900
constant.numeric.line-number.find-in-files, entity.name.filename.find-in-files#b58900
entity.name.function#268bd2
entity.name.type, entity.name.class#268bd2underline
markup.heading#dc322fbold
markup.italic#cb4b16italic
markup.bold#cb4b16bold
markup.underlineunderline
markup.underline.link#268bd2
markup.link#d33682
markup.list#cb4b16
markup.quote#2aa198
storage#859900
storage.modifier#859900
support.function#268bd2
support.constant#268bd2
support.type, support.class#268bd2
support.other.variable
punctuation.definition.variable#859900