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#DEDBDA
  • activityBar.border#00000000
  • activityBar.foreground#333333
  • activityBar.inactiveForeground#948D8A
  • activityBarBadge.background#E87462
  • activityBarBadge.foreground#FFFFFF
  • badge.background#E87462
  • badge.foreground#FFFFFF
  • breadcrumb.activeSelectionForeground#333333
  • breadcrumb.focusForeground#333333
  • breadcrumb.foreground#706A68
  • breadcrumbPicker.background#E6E2E2
  • button.background#D06A58
  • button.foreground#FFFFFF
  • button.hoverBackground#C05E4C
  • button.secondaryBackground#D1CECE
  • button.secondaryForeground#333333
  • debugIcon.breakpointForeground#C05248
  • diffEditor.diagonalFill#E1DEDE
  • diffEditor.insertedLineBackground#50704010
  • diffEditor.insertedTextBackground#50704020
  • diffEditor.removedLineBackground#C0524810
  • diffEditor.removedTextBackground#C0524820
  • dropdown.background#F4F1F0
  • dropdown.border#00000000
  • dropdown.foreground#333333
  • editor.background#F4F2F0
  • editor.findMatchBackground#E8746240
  • editor.findMatchHighlightBackground#E8746218
  • editor.focusedStackFrameHighlightBackground#50704020
  • editor.foldBackground#C0524808
  • editor.foreground#333333
  • editor.inactiveSelectionBackground#E8746212
  • editor.inlineValuesBackground#C0524810
  • editor.inlineValuesForeground#706A68
  • editor.lineHighlightBackground#C052480A
  • editor.selectionBackground#E8746222
  • editor.stackFrameHighlightBackground#96702A20
  • editor.wordHighlightBackground#00000008
  • editor.wordHighlightStrongBackground#00000010
  • editorBracketHighlight.foreground1#C05248
  • editorBracketHighlight.foreground2#333333
  • editorBracketHighlight.foreground3#706A68
  • editorBracketHighlight.foreground4#C05248
  • editorBracketHighlight.foreground5#333333
  • editorBracketHighlight.foreground6#706A68
  • editorBracketHighlight.unexpectedBracket.foreground#C05248
  • editorBracketMatch.background#00000010
  • editorBracketMatch.border#00000000
  • editorBracketPairGuide.activeBackground1#C0524860
  • editorBracketPairGuide.activeBackground2#3A3A3A60
  • editorBracketPairGuide.activeBackground3#847E7B60
  • editorBracketPairGuide.background1#C0524830
  • editorBracketPairGuide.background2#3A3A3A30
  • editorBracketPairGuide.background3#847E7B30
  • editorCodeLens.foreground#B4ADA9
  • editorCursor.foreground#E87462
  • editorError.foreground#C05248
  • editorGhostText.border#00000000
  • editorGhostText.foreground#B4ADA9
  • editorGroup.border#00000000
  • editorGroupHeader.tabsBackground#F4F2F0
  • editorGutter.addedBackground#507040
  • editorGutter.deletedBackground#C05248
  • editorGutter.foldingControlForeground#A7A19E
  • editorGutter.modifiedBackground#96702A
  • editorIndentGuide.activeBackground#D1CECE
  • editorIndentGuide.background#E6E3E1
  • editorInfo.foreground#2A827E
  • editorInlayHint.background#00000000
  • editorInlayHint.foreground#A7A19E
  • editorInlayHint.parameterBackground#00000000
  • editorInlayHint.parameterForeground#A7A19E
  • editorInlayHint.typeBackground#00000000
  • editorInlayHint.typeForeground#A7A19E
  • editorLineNumber.activeForeground#C05248
  • editorLineNumber.foreground#B4ADA9
  • editorOverviewRuler.border#00000000
  • editorRuler.foreground#E1DEDE
  • editorSuggestWidget.background#E6E2E2
  • editorSuggestWidget.border#00000000
  • editorSuggestWidget.selectedBackground#D9D6D6
  • editorUnnecessaryCode.opacity#000000AA
  • editorWarning.foreground#96702A
  • editorWidget.background#E6E2E2
  • editorWidget.border#00000000
  • focusBorder#E8746280
  • foreground#333333
  • gitDecoration.conflictingResourceForeground#96702A
  • gitDecoration.deletedResourceForeground#C05248
  • gitDecoration.ignoredResourceForeground#B4ADA9
  • gitDecoration.modifiedResourceForeground#96702A
  • gitDecoration.untrackedResourceForeground#507040
  • input.background#F4F1F0
  • input.border#00000000
  • input.foreground#333333
  • input.placeholderForeground#948D8A
  • inputOption.activeBorder#E87462
  • list.activeSelectionBackground#D1CECE
  • list.activeSelectionForeground#333333
  • list.focusHighlightForeground#C05248
  • list.highlightForeground#C05248
  • list.hoverBackground#D9D6D6
  • list.inactiveSelectionBackground#D9D6D6
  • merge.currentContentBackground#50704020
  • merge.currentHeaderBackground#50704040
  • merge.incomingContentBackground#2A827E20
  • merge.incomingHeaderBackground#2A827E40
  • minimap.errorHighlight#C05248
  • minimap.findMatchHighlight#E8746250
  • minimap.selectionHighlight#E8746240
  • minimap.warningHighlight#96702A
  • notificationCenter.border#00000000
  • notifications.background#E6E2E2
  • notifications.border#00000000
  • notifications.foreground#333333
  • notificationsErrorIcon.foreground#C05248
  • notificationsInfoIcon.foreground#2A827E
  • notificationsWarningIcon.foreground#96702A
  • panel.background#F4F2F0
  • panel.border#00000000
  • panelTitle.activeBorder#E87462
  • panelTitle.activeForeground#333333
  • panelTitle.inactiveForeground#948D8A
  • peekView.border#E87462
  • peekViewEditor.background#F4F2F0
  • peekViewResult.background#F4F2F0
  • peekViewTitle.background#F4F2F0
  • peekViewTitleDescription.foreground#706A68
  • peekViewTitleLabel.foreground#333333
  • scrollbar.shadow#00000000
  • scrollbarSlider.activeBackground#00000030
  • scrollbarSlider.background#00000010
  • scrollbarSlider.hoverBackground#00000020
  • selection.background#E8746225
  • settings.headerForeground#333333
  • settings.modifiedItemIndicator#E87462
  • sideBar.background#F4F2F0
  • sideBar.border#00000000
  • sideBar.foreground#676162
  • sideBarSectionHeader.background#00000000
  • sideBarSectionHeader.foreground#676162
  • sideBarTitle.foreground#333333
  • statusBar.background#DEDBDA
  • statusBar.border#00000000
  • statusBar.debuggingBackground#E87462
  • statusBar.debuggingForeground#FFFFFF
  • statusBar.foreground#676162
  • statusBar.noFolderBackground#F4F2F0
  • tab.activeBackground#F4F2F0
  • tab.activeBorderTop#E87462
  • tab.activeForeground#333333
  • tab.border#00000000
  • tab.inactiveBackground#F4F2F0
  • tab.inactiveForeground#948D8A
  • terminal.ansiBlack#333333
  • terminal.ansiBlue#2A827E
  • terminal.ansiBrightBlack#706A68
  • terminal.ansiBrightBlue#3A9A96
  • terminal.ansiBrightCyan#3A9A96
  • terminal.ansiBrightGreen#608850
  • terminal.ansiBrightMagenta#A07098
  • terminal.ansiBrightRed#D86058
  • terminal.ansiBrightWhite#FFFFFF
  • terminal.ansiBrightYellow#A88035
  • terminal.ansiCyan#2A827E
  • terminal.ansiGreen#507040
  • terminal.ansiMagenta#8A6085
  • terminal.ansiRed#C05248
  • terminal.ansiWhite#F4F2F0
  • terminal.ansiYellow#96702A
  • terminal.background#F4F2F0
  • terminal.foreground#333333
  • terminal.selectionBackground#E8746230
  • terminalCommandDecoration.defaultBackground#A7A19E
  • terminalCommandDecoration.errorBackground#C05248
  • terminalCommandDecoration.successBackground#507040
  • terminalCursor.foreground#E87462
  • titleBar.activeBackground#DEDBDA
  • titleBar.activeForeground#333333
  • titleBar.border#00000000
  • titleBar.inactiveBackground#DEDBDA
  • titleBar.inactiveForeground#948D8A
  • widget.shadow#00000000

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#A7A19Eitalic
keyword, keyword.control, storage.type, storage.modifier, keyword.other.using, keyword.other.directive#8A6358—
keyword.operator, keyword.operator.expression#706A68—
string, string.quoted, string.template#4C4C4C—
constant.character.escape#C05248bold
constant.numeric#4C4C4C—
constant.language#4C4C4C—
variable.language#C05248bold
entity.name.type, entity.name.class, entity.other.inherited-class, support.type, support.class, entity.name.type.interface, entity.name.type.enum, entity.name.type.alias#9A5548—
entity.name.function#C05248bold
support.function, meta.function-call#333333—
variable, variable.other, variable.parameter, support.variable#333333—
variable.other.property, support.other.property, variable.other.object.property#333333—
punctuation, meta.brace, meta.bracket#706A68—
entity.name.tag#C05248bold
entity.other.attribute-name#4C4C4C—
meta.decorator, meta.decorator entity.name.function, punctuation.decorator#8A6358—
support.type.property-name.css, support.type.property-name.scss, support.type.property-name.less#8A6358—
support.constant.property-value.css, support.constant.color.css#4C4C4C—
keyword.other.unit.css, keyword.other.unit.scss#4C4C4C—
string.regexp#4C4C4C—
markup.heading, entity.name.section.markdown#C05248bold
markup.bold—bold
markup.italic—italic
markup.underline.link, string.other.link#4C4C4C—
markup.inline.raw, markup.fenced_code#4C4C4C—
support.type.property-name.json#8A6358—
entity.name.tag.yaml#8A6358—