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#FCFCFB
  • activityBar.border#F1F0EE
  • activityBar.foreground#3A3835
  • activityBar.inactiveForeground#BAB7B2
  • activityBarBadge.background#5F9EA8
  • activityBarBadge.foreground#FCFCFB
  • badge.background#5F9EA8
  • badge.foreground#FCFCFB
  • banner.background#EFF5F5
  • banner.foreground#3A3835
  • banner.iconForeground#5F9EA8
  • breadcrumb.activeSelectionForeground#3A3835
  • breadcrumb.focusForeground#3A3835
  • breadcrumb.foreground#BAB7B2
  • breadcrumbPicker.background#FCFCFB
  • button.background#5F9EA8
  • button.foreground#FCFCFB
  • button.hoverBackground#4E8C95
  • button.secondaryBackground#F1F0EE
  • button.secondaryForeground#3A3835
  • button.secondaryHoverBackground#D5D3CF
  • checkbox.background#FCFCFB
  • checkbox.border#D5D3CF
  • checkbox.foreground#3A3835
  • commandCenter.activeBackground#F1F0EE
  • commandCenter.activeForeground#3A3835
  • commandCenter.background#F7F6F3
  • commandCenter.border#D5D3CF
  • commandCenter.foreground#7A7672
  • debugConsole.errorForeground#B87070
  • debugConsole.infoForeground#5F9EA8
  • debugConsole.warningForeground#C29E5E
  • debugConsoleInputIcon.foreground#5F9EA8
  • debugIcon.breakpointForeground#B87070
  • debugIcon.pauseForeground#C29E5E
  • debugIcon.restartForeground#7A9E72
  • debugIcon.startForeground#7A9E72
  • debugIcon.stopForeground#B87070
  • debugToolBar.background#FCFCFB
  • debugToolBar.border#D5D3CF
  • descriptionForeground#7A7672
  • diffEditor.insertedLineBackground#7A9E7210
  • diffEditor.insertedTextBackground#7A9E7215
  • diffEditor.removedLineBackground#B8707010
  • diffEditor.removedTextBackground#B8707015
  • dropdown.background#FCFCFB
  • dropdown.border#D5D3CF
  • dropdown.foreground#3A3835
  • dropdown.listBackground#FCFCFB
  • editor.background#FCFCFB
  • editor.findMatchBackground#C29E5E35
  • editor.findMatchBorder#C29E5E80
  • editor.findMatchHighlightBackground#C29E5E18
  • editor.foldBackground#5F9EA808
  • editor.foreground#3A3835
  • editor.hoverHighlightBackground#5F9EA812
  • editor.inactiveSelectionBackground#5F9EA818
  • editor.lineHighlightBackground#00000004
  • editor.linkedEditingBackground#5F9EA818
  • editor.rangeHighlightBackground#5F9EA808
  • editor.selectionBackground#5F9EA825
  • editor.selectionHighlightBackground#5F9EA815
  • editor.wordHighlightBackground#5F9EA815
  • editor.wordHighlightStrongBackground#5F9EA820
  • editorBracketHighlight.foreground1#5F9EA8
  • editorBracketHighlight.foreground2#C29E5E
  • editorBracketHighlight.foreground3#8A7EB0
  • editorBracketHighlight.foreground4#B07888
  • editorBracketHighlight.foreground5#6B9E8A
  • editorBracketHighlight.foreground6#B08A60
  • editorBracketMatch.background#5F9EA815
  • editorBracketMatch.border#5F9EA860
  • editorCodeLens.foreground#BAB7B2
  • editorCursor.foreground#5F9EA8
  • editorError.foreground#B87070
  • editorGroup.border#F1F0EE
  • editorGroup.dropBackground#5F9EA815
  • editorGroupHeader.tabsBackground#F7F6F3
  • editorGroupHeader.tabsBorder#F1F0EE
  • editorGutter.addedBackground#7A9E72
  • editorGutter.deletedBackground#B87070
  • editorGutter.modifiedBackground#5F9EA8
  • editorHint.foreground#5F9EA8
  • editorHoverWidget.background#FCFCFB
  • editorHoverWidget.border#D5D3CF
  • editorIndentGuide.activeBackground#D5D3CF
  • editorIndentGuide.background#F1F0EE
  • editorInfo.foreground#5F9EA8
  • editorInlayHint.background#D5D3CF50
  • editorInlayHint.foreground#BAB7B2
  • editorLightBulb.foreground#C29E5E
  • editorLightBulbAutoFix.foreground#7A9E72
  • editorLineNumber.activeForeground#BAB7B2
  • editorLineNumber.foreground#D5D3CF
  • editorLink.activeForeground#4E8C95
  • editorOverviewRuler.addedForeground#7A9E7260
  • editorOverviewRuler.border#F1F0EE
  • editorOverviewRuler.deletedForeground#B8707060
  • editorOverviewRuler.errorForeground#B87070
  • editorOverviewRuler.findMatchForeground#C29E5E80
  • editorOverviewRuler.infoForeground#5F9EA8
  • editorOverviewRuler.modifiedForeground#5F9EA860
  • editorOverviewRuler.warningForeground#C29E5E
  • editorRuler.foreground#F1F0EE
  • editorSuggestWidget.background#FCFCFB
  • editorSuggestWidget.border#D5D3CF
  • editorSuggestWidget.foreground#3A3835
  • editorSuggestWidget.highlightForeground#4E8C95
  • editorSuggestWidget.selectedBackground#5F9EA818
  • editorWarning.foreground#C29E5E
  • editorWhitespace.foreground#D5D3CF
  • editorWidget.background#FCFCFB
  • editorWidget.border#D5D3CF
  • editorWidget.foreground#3A3835
  • errorForeground#8E5050
  • focusBorder#5F9EA850
  • foreground#3A3835
  • gitDecoration.addedResourceForeground#7A9E72
  • gitDecoration.conflictingResourceForeground#C29E5E
  • gitDecoration.deletedResourceForeground#B87070
  • gitDecoration.ignoredResourceForeground#BAB7B2
  • gitDecoration.modifiedResourceForeground#5F9EA8
  • gitDecoration.renamedResourceForeground#6B9E8A
  • gitDecoration.stageDeletedResourceForeground#B87070
  • gitDecoration.stageModifiedResourceForeground#5F9EA8
  • gitDecoration.submoduleResourceForeground#B08A60
  • gitDecoration.untrackedResourceForeground#7A9E72
  • icon.foreground#7A7672
  • input.background#FCFCFB
  • input.border#D5D3CF
  • input.foreground#3A3835
  • input.placeholderForeground#BAB7B2
  • inputOption.activeBackground#5F9EA820
  • inputOption.activeBorder#5F9EA8
  • inputOption.activeForeground#3A3835
  • inputValidation.errorBackground#F4EDEA
  • inputValidation.errorBorder#B87070
  • inputValidation.infoBackground#EFF5F5
  • inputValidation.infoBorder#5F9EA8
  • inputValidation.warningBackground#F5F0E8
  • inputValidation.warningBorder#C29E5E
  • keybindingLabel.background#D5D3CF30
  • keybindingLabel.border#D5D3CF
  • keybindingLabel.bottomBorder#D5D3CF
  • keybindingLabel.foreground#3A3835
  • list.activeSelectionBackground#5F9EA820
  • list.activeSelectionForeground#3A3835
  • list.dropBackground#5F9EA815
  • list.errorForeground#8E5050
  • list.focusBackground#5F9EA818
  • list.focusForeground#3A3835
  • list.focusOutline#5F9EA850
  • list.highlightForeground#4E8C95
  • list.hoverBackground#00000006
  • list.hoverForeground#3A3835
  • list.inactiveSelectionBackground#5F9EA812
  • list.inactiveSelectionForeground#3A3835
  • list.warningForeground#8E7040
  • menu.background#FCFCFB
  • menu.foreground#3A3835
  • menu.selectionBackground#5F9EA820
  • menu.selectionForeground#3A3835
  • menu.separatorBackground#F1F0EE
  • menubar.selectionBackground#5F9EA820
  • menubar.selectionForeground#3A3835
  • merge.currentContentBackground#7A9E7212
  • merge.currentHeaderBackground#7A9E7225
  • merge.incomingContentBackground#5F9EA812
  • merge.incomingHeaderBackground#5F9EA825
  • minimap.findMatchHighlight#5F9EA860
  • minimap.selectionHighlight#5F9EA840
  • minimap.selectionOccurrenceHighlight#5F9EA830
  • minimapGutter.addedBackground#7A9E72
  • minimapGutter.deletedBackground#B87070
  • minimapGutter.modifiedBackground#5F9EA8
  • notification.background#FCFCFB
  • notification.foreground#3A3835
  • notificationCenterHeader.background#FCFCFB
  • notificationCenterHeader.foreground#3A3835
  • notificationLink.foreground#4E8C95
  • notificationsErrorIcon.foreground#B87070
  • notificationsInfoIcon.foreground#5F9EA8
  • notificationsWarningIcon.foreground#C29E5E
  • panel.background#FCFCFB
  • panel.border#F1F0EE
  • panelTitle.activeBorder#5F9EA8
  • panelTitle.activeForeground#3A3835
  • panelTitle.inactiveForeground#BAB7B2
  • peekView.border#5F9EA860
  • peekViewEditor.background#F7F6F3
  • peekViewEditor.matchHighlightBackground#C29E5E35
  • peekViewEditorGutter.background#F7F6F3
  • peekViewResult.background#FCFCFB
  • peekViewResult.fileForeground#3A3835
  • peekViewResult.lineForeground#7A7672
  • peekViewResult.matchHighlightBackground#C29E5E35
  • peekViewResult.selectionBackground#5F9EA820
  • peekViewResult.selectionForeground#3A3835
  • peekViewTitle.background#F7F6F3
  • peekViewTitleDescription.foreground#7A7672
  • peekViewTitleLabel.foreground#3A3835
  • progressBar.background#5F9EA8
  • scrollbar.shadow#00000008
  • scrollbarSlider.activeBackground#7A767250
  • scrollbarSlider.background#7A767220
  • scrollbarSlider.hoverBackground#7A767235
  • selection.background#5F9EA830
  • settings.focusedRowBackground#5F9EA808
  • settings.headerForeground#3A3835
  • settings.modifiedItemIndicator#5F9EA8
  • sideBar.background#F7F6F3
  • sideBar.border#F1F0EE
  • sideBar.foreground#7A7672
  • sideBarSectionHeader.background#F7F6F3
  • sideBarSectionHeader.foreground#7A7672
  • sideBarTitle.foreground#3A3835
  • statusBar.background#F7F6F3
  • statusBar.border#F1F0EE
  • statusBar.debuggingBackground#5F9EA8
  • statusBar.debuggingForeground#FCFCFB
  • statusBar.foreground#7A7672
  • statusBar.noFolderBackground#F7F6F3
  • statusBar.noFolderForeground#7A7672
  • statusBarItem.activeBackground#00000010
  • statusBarItem.hoverBackground#00000008
  • statusBarItem.prominentBackground#5F9EA820
  • statusBarItem.prominentHoverBackground#5F9EA835
  • statusBarItem.remoteBackground#5F9EA8
  • statusBarItem.remoteForeground#FCFCFB
  • tab.activeBackground#FCFCFB
  • tab.activeBorderTop#5F9EA8
  • tab.activeForeground#3A3835
  • tab.border#F1F0EE
  • tab.hoverBackground#FCFCFB
  • tab.inactiveBackground#F7F6F3
  • tab.inactiveForeground#BAB7B2
  • tab.unfocusedActiveForeground#7A7672
  • tab.unfocusedInactiveForeground#BAB7B2
  • terminal.ansiBlack#242320
  • terminal.ansiBlue#4A5870
  • terminal.ansiBrightBlack#7A7672
  • terminal.ansiBrightBlue#6B8BBF
  • terminal.ansiBrightCyan#5F9EA8
  • terminal.ansiBrightGreen#7A9E72
  • terminal.ansiBrightMagenta#8A7EB0
  • terminal.ansiBrightRed#B87070
  • terminal.ansiBrightWhite#FCFCFB
  • terminal.ansiBrightYellow#C29E5E
  • terminal.ansiCyan#3D7A83
  • terminal.ansiGreen#587850
  • terminal.ansiMagenta#635788
  • terminal.ansiRed#8E5050
  • terminal.ansiWhite#F1F0EE
  • terminal.ansiYellow#8E7040
  • terminal.background#FCFCFB
  • terminal.foreground#3A3835
  • terminal.selectionBackground#5F9EA825
  • terminalCursor.foreground#5F9EA8
  • textBlockQuote.background#F7F6F3
  • textBlockQuote.border#D0E4E6
  • textCodeBlock.background#F7F6F3
  • textLink.activeForeground#3D7A83
  • textLink.foreground#4E8C95
  • textPreformat.foreground#3A3835
  • textSeparator.foreground#F1F0EE
  • titleBar.activeBackground#FCFCFB
  • titleBar.activeForeground#3A3835
  • titleBar.border#F1F0EE
  • titleBar.inactiveBackground#FCFCFB
  • titleBar.inactiveForeground#BAB7B2
  • tree.indentGuidesStroke#D5D3CF
  • walkThrough.embeddedEditorBackground#F7F6F3
  • welcomePage.progress.foreground#5F9EA8
  • welcomePage.tileBackground#F7F6F3
  • widget.shadow#00000010

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#A8A5A0italic
keyword, storage.type, storage.modifier#5F9EA8—
keyword.control#5F9EA8—
keyword.operator, keyword.operator.assignment, keyword.operator.arithmetic, keyword.operator.logical, keyword.operator.comparison#7A7672—
keyword.operator.expression#5F9EA8—
string, string.quoted#7A9E72—
string.template, punctuation.definition.template-expression, punctuation.section.embedded#6B9E8A—
string.template meta.template.expression#3A3835—
string.regexp, constant.other.character-class.regexp, constant.character.escape.backslash.regexp#6B9E8A—
constant.character.escape#C29E5E—
constant.numeric, constant.language, constant.character, constant.other#C29E5E—
entity.name.function, support.function, meta.function-call entity.name.function#8A7EB0—
variable.parameter, meta.parameter#6B8BBF—
entity.name.type, entity.name.class, support.class, support.type#B07888—
entity.name.type.interface#B07888—
variable.other.enummember, constant.other.enum#C29E5E—
entity.name.type.parameter#B07888—
variable, variable.other, variable.other.readwrite#3A3835—
variable.other.constant#C29E5E—
variable.other.property, variable.other.object.property, support.variable.property, meta.object-literal.key#B08A60—
variable.language#5F9EA8italic
punctuation, punctuation.definition, punctuation.separator, punctuation.terminator, punctuation.accessor, meta.brace#7A7672—
punctuation.definition.string.begin, punctuation.definition.string.end#7A9E72—
entity.name.tag, punctuation.definition.tag#5F9EA8—
entity.other.attribute-name#B08A60italic
entity.other.attribute-name.class.css#B07888—
entity.other.attribute-name.id.css#C29E5E—
support.type.property-name.css, meta.property-name.css#B08A60—
support.constant.property-value.css, meta.property-value.css#3A3835—
keyword.other.unit.css#C29E5E—
entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css#5F9EA8—
meta.decorator, punctuation.decorator, meta.decorator entity.name.function#8A7EB0italic
support.constant#C29E5E—
support.variable#B08A60—
invalid.illegal#B87070—
invalid.deprecated#B87070strikethrough
markup.heading, markup.heading entity.name, entity.name.section#5F9EA8bold
markup.bold, punctuation.definition.bold—bold
markup.italic, punctuation.definition.italic—italic
markup.underline—underline
markup.underline.link, string.other.link#4E8C95—
markup.inline.raw, markup.raw, markup.fenced_code#7A9E72—
markup.quote#A8A5A0italic
markup.list, punctuation.definition.list#7A7672—
markup.inserted#7A9E72—
markup.deleted#B87070—
markup.changed#5F9EA8—
support.type.property-name.json#B08A60—
entity.name.tag.yaml#B08A60—
keyword.key.toml#B08A60—
entity.name.namespace, entity.name.module#B07888—
markup.table#3A3835—
variable.other.normal.shell, variable.other.special.shell, variable.other.positional.shell#6B8BBF—