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.activeBackground#2E34400A
  • activityBar.activeBorder#4C7A91
  • activityBar.background#E7EAE8
  • activityBar.border#D5DAD7
  • activityBar.foreground#2E3440
  • activityBar.inactiveForeground#6D788B
  • activityBarBadge.background#4C7A91
  • activityBarBadge.foreground#E7EAE8
  • activityBarTop.foreground#2E3440
  • activityBarTop.inactiveForeground#6D788B
  • badge.background#CDD8E3
  • badge.foreground#2E3440
  • breadcrumb.activeSelectionForeground#2E3440
  • breadcrumb.background#F4F5F2
  • breadcrumb.focusForeground#2E3440
  • breadcrumb.foreground#6D788B
  • breadcrumbPicker.background#E4E8E6
  • button.background#3E6F91
  • button.foreground#FFFFFF
  • button.hoverBackground#357A83
  • button.secondaryBackground#E4E8E6
  • button.secondaryForeground#2E3440
  • button.secondaryHoverBackground#CDD8E3
  • checkbox.background#E4E8E6
  • checkbox.border#D5DAD7
  • checkbox.foreground#4C7A91
  • commandCenter.activeBackground#CDD8E3
  • commandCenter.activeForeground#2E3440
  • commandCenter.background#E4E8E6
  • commandCenter.border#D5DAD7
  • commandCenter.foreground#4C566A
  • commandCenter.inactiveForeground#6D788B
  • debugExceptionWidget.background#E4E8E6
  • debugExceptionWidget.border#A24E57
  • debugIcon.breakpointDisabledForeground#6D788B
  • debugIcon.breakpointForeground#A24E57
  • debugIcon.continueForeground#547A50
  • debugIcon.disconnectForeground#9C5E4D
  • debugIcon.pauseForeground#3E6F91
  • debugIcon.restartForeground#417A70
  • debugIcon.startForeground#547A50
  • debugIcon.stepIntoForeground#357A83
  • debugIcon.stepOutForeground#76558F
  • debugIcon.stepOverForeground#3E6F91
  • debugIcon.stopForeground#A24E57
  • debugToolBar.background#E4E8E6
  • debugToolBar.border#D5DAD7
  • descriptionForeground#4C566A
  • diffEditor.diagonalFill#6D788B26
  • diffEditor.insertedLineBackground#547A5012
  • diffEditor.insertedTextBackground#547A5024
  • diffEditor.removedLineBackground#A24E5712
  • diffEditor.removedTextBackground#A24E5724
  • diffEditorGutter.insertedLineBackground#547A5028
  • diffEditorGutter.removedLineBackground#A24E5728
  • diffEditorOverview.insertedForeground#547A50
  • diffEditorOverview.removedForeground#A24E57
  • disabledForeground#6D788B99
  • dropdown.background#E4E8E6
  • dropdown.border#D5DAD7
  • dropdown.foreground#2E3440
  • editor.background#F4F5F2
  • editor.findMatchBackground#9A6B2F59
  • editor.findMatchBorder#9A6B2FB3
  • editor.findMatchHighlightBackground#9A6B2F2E
  • editor.findRangeHighlightBackground#3E6F9118
  • editor.foreground#2E3440
  • editor.hoverHighlightBackground#3E6F9120
  • editor.inactiveSelectionBackground#DEE4E8
  • editor.lineHighlightBackground#E9ECEA
  • editor.lineHighlightBorder#00000000
  • editor.rangeHighlightBackground#3E6F9118
  • editor.selectionBackground#CDD8E3
  • editor.selectionForeground#2E3440
  • editor.selectionHighlightBackground#3E6F9126
  • editor.symbolHighlightBackground#417A7022
  • editor.wordHighlightBackground#3E6F9124
  • editor.wordHighlightStrongBackground#76558F28
  • editor.wordHighlightTextBackground#417A7020
  • editorBracketHighlight.foreground1#3E6F91
  • editorBracketHighlight.foreground2#76558F
  • editorBracketHighlight.foreground3#417A70
  • editorBracketHighlight.foreground4#9A6B2F
  • editorBracketHighlight.foreground5#547A50
  • editorBracketHighlight.foreground6#4C566A
  • editorBracketHighlight.unexpectedBracket.foreground#A24E57
  • editorBracketMatch.background#4C7A9126
  • editorBracketMatch.border#4C7A9199
  • editorBracketPairGuide.activeBackground1#3E6F91
  • editorBracketPairGuide.activeBackground2#76558F
  • editorBracketPairGuide.activeBackground3#417A70
  • editorBracketPairGuide.activeBackground4#9A6B2F
  • editorBracketPairGuide.activeBackground5#547A50
  • editorBracketPairGuide.activeBackground6#4C566A
  • editorBracketPairGuide.background1#3E6F914D
  • editorBracketPairGuide.background2#76558F4D
  • editorBracketPairGuide.background3#417A704D
  • editorBracketPairGuide.background4#9A6B2F4D
  • editorBracketPairGuide.background5#547A504D
  • editorBracketPairGuide.background6#4C566A4D
  • editorCodeLens.foreground#6D788B
  • editorCursor.foreground#4C7A91
  • editorError.border#00000000
  • editorError.foreground#A24E57
  • editorGhostText.foreground#6D788B
  • editorGroup.border#D5DAD7
  • editorGroup.dropBackground#3E6F9122
  • editorGroupHeader.noTabsBackground#F4F5F2
  • editorGroupHeader.tabsBackground#EFF1EE
  • editorGroupHeader.tabsBorder#D5DAD7
  • editorGutter.addedBackground#547A50
  • editorGutter.background#F4F5F2
  • editorGutter.deletedBackground#A24E57
  • editorGutter.foldingControlForeground#6D788B
  • editorGutter.modifiedBackground#3E6F91
  • editorHint.border#00000000
  • editorHint.foreground#417A70
  • editorHoverWidget.background#E4E8E6
  • editorHoverWidget.border#D5DAD7
  • editorHoverWidget.foreground#2E3440
  • editorHoverWidget.highlightForeground#357A83
  • editorHoverWidget.statusBarBackground#EFF1EE
  • editorIndentGuide.activeBackground1#4C7A9180
  • editorIndentGuide.background1#D5DAD7
  • editorInfo.border#00000000
  • editorInfo.foreground#3E6F91
  • editorInlayHint.background#3E6F9118
  • editorInlayHint.foreground#6D788B
  • editorInlayHint.parameterBackground#9A6B2F18
  • editorInlayHint.parameterForeground#80672F
  • editorInlayHint.typeBackground#417A7018
  • editorInlayHint.typeForeground#417A70
  • editorLightBulb.foreground#9A6B2F
  • editorLightBulbAutoFix.foreground#417A70
  • editorLineNumber.activeForeground#2E3440
  • editorLineNumber.foreground#6D788B
  • editorLink.activeForeground#357A83
  • editorOverviewRuler.addedForeground#547A50B3
  • editorOverviewRuler.border#00000000
  • editorOverviewRuler.deletedForeground#A24E57B3
  • editorOverviewRuler.errorForeground#A24E57CC
  • editorOverviewRuler.infoForeground#3E6F91CC
  • editorOverviewRuler.modifiedForeground#3E6F91B3
  • editorOverviewRuler.warningForeground#9A6B2FCC
  • editorRuler.foreground#D5DAD7
  • editorStickyScroll.background#F4F5F2
  • editorStickyScroll.border#D5DAD7
  • editorStickyScrollHover.background#E9ECEA
  • editorSuggestWidget.background#E4E8E6
  • editorSuggestWidget.border#D5DAD7
  • editorSuggestWidget.foreground#2E3440
  • editorSuggestWidget.highlightForeground#357A83
  • editorSuggestWidget.selectedBackground#CDD8E3
  • editorSuggestWidget.selectedForeground#2E3440
  • editorUnnecessaryCode.border#00000000
  • editorUnnecessaryCode.opacity#00000088
  • editorWarning.border#00000000
  • editorWarning.foreground#9A6B2F
  • editorWhitespace.foreground#6D788B55
  • editorWidget.background#E4E8E6
  • editorWidget.border#D5DAD7
  • editorWidget.foreground#2E3440
  • editorWidget.resizeBorder#4C7A91
  • errorForeground#A24E57
  • focusBorder#4C7A9180
  • foreground#2E3440
  • gitDecoration.addedResourceForeground#547A50
  • gitDecoration.conflictingResourceForeground#9C5E4D
  • gitDecoration.deletedResourceForeground#A24E57
  • gitDecoration.ignoredResourceForeground#6D788B
  • gitDecoration.modifiedResourceForeground#3E6F91
  • gitDecoration.renamedResourceForeground#417A70
  • gitDecoration.submoduleResourceForeground#76558F
  • gitDecoration.untrackedResourceForeground#547A50
  • icon.foreground#4C566A
  • input.background#E4E8E6
  • input.border#D5DAD7
  • input.foreground#2E3440
  • input.placeholderForeground#6D788B
  • inputOption.activeBackground#4C7A9125
  • inputOption.activeBorder#4C7A9180
  • inputValidation.errorBackground#A24E571F
  • inputValidation.errorBorder#A24E57
  • inputValidation.infoBackground#3E6F911F
  • inputValidation.infoBorder#3E6F91
  • inputValidation.warningBackground#9A6B2F1F
  • inputValidation.warningBorder#9A6B2F
  • list.activeSelectionBackground#CDD8E3
  • list.activeSelectionForeground#2E3440
  • list.errorForeground#A24E57
  • list.focusBackground#DEE4E8
  • list.focusForeground#2E3440
  • list.highlightForeground#3E6F91
  • list.hoverBackground#2E34400D
  • list.hoverForeground#2E3440
  • list.inactiveSelectionBackground#DEE4E8
  • list.inactiveSelectionForeground#2E3440
  • list.invalidItemForeground#A24E57
  • list.warningForeground#9A6B2F
  • listFilterWidget.background#E4E8E6
  • listFilterWidget.noMatchesOutline#A24E57
  • listFilterWidget.outline#D5DAD7
  • markdown.extension.editor.codeSpan.backgroundColor#E4E8E6
  • markdown.extension.editor.codeSpan.borderColor#D5DAD7
  • markdown.extension.editor.formattingMark.foreground#6D788B
  • menu.background#E4E8E6
  • menu.border#D5DAD7
  • menu.foreground#2E3440
  • menu.selectionBackground#CDD8E3
  • menu.selectionForeground#2E3440
  • menu.separatorBackground#D5DAD7
  • menubar.selectionBackground#2E34400D
  • menubar.selectionBorder#00000000
  • menubar.selectionForeground#2E3440
  • merge.commonContentBackground#6D788B15
  • merge.commonHeaderBackground#6D788B2B
  • merge.currentContentBackground#3E6F9117
  • merge.currentHeaderBackground#3E6F9133
  • merge.incomingContentBackground#417A7017
  • merge.incomingHeaderBackground#417A7033
  • mergeEditor.change.background#9A6B2F1F
  • mergeEditor.change.word.background#9A6B2F3D
  • mergeEditor.conflict.handledFocused.border#417A70
  • mergeEditor.conflict.handledUnfocused.border#D5DAD7
  • mergeEditor.conflict.unhandledFocused.border#9A6B2F
  • mergeEditor.conflict.unhandledUnfocused.border#9C5E4D
  • minimap.background#F4F5F2
  • minimap.errorHighlight#A24E57
  • minimap.findMatchHighlight#9A6B2F99
  • minimap.selectionHighlight#3E6F9166
  • minimap.warningHighlight#9A6B2F
  • minimapSlider.activeBackground#4C7A9155
  • minimapSlider.background#6D788B22
  • minimapSlider.hoverBackground#6D788B3D
  • notificationCenter.border#D5DAD7
  • notificationCenterHeader.background#EFF1EE
  • notificationCenterHeader.foreground#2E3440
  • notificationLink.foreground#357A83
  • notifications.background#E4E8E6
  • notifications.border#D5DAD7
  • notifications.foreground#2E3440
  • notificationsErrorIcon.foreground#A24E57
  • notificationsInfoIcon.foreground#3E6F91
  • notificationsWarningIcon.foreground#9A6B2F
  • notificationToast.border#D5DAD7
  • panel.background#EFF1EE
  • panel.border#D5DAD7
  • panelInput.border#D5DAD7
  • panelSection.border#D5DAD7
  • panelSectionHeader.background#E4E8E6
  • panelSectionHeader.foreground#2E3440
  • panelTitle.activeBorder#4C7A91
  • panelTitle.activeForeground#2E3440
  • panelTitle.inactiveForeground#6D788B
  • peekView.border#4C7A91
  • peekViewEditor.background#EFF1EE
  • peekViewEditor.matchHighlightBackground#9A6B2F4D
  • peekViewResult.background#ECEFEB
  • peekViewResult.fileForeground#2E3440
  • peekViewResult.lineForeground#4C566A
  • peekViewResult.matchHighlightBackground#9A6B2F38
  • peekViewResult.selectionBackground#CDD8E3
  • peekViewResult.selectionForeground#2E3440
  • peekViewTitle.background#E4E8E6
  • peekViewTitleDescription.foreground#6D788B
  • peekViewTitleLabel.foreground#2E3440
  • pickerGroup.border#D5DAD7
  • pickerGroup.foreground#357A83
  • progressBar.background#4C7A91
  • quickInput.background#E4E8E6
  • quickInput.foreground#2E3440
  • quickInputList.focusBackground#CDD8E3
  • quickInputList.focusForeground#2E3440
  • quickInputList.focusIconForeground#4C7A91
  • sash.hoverBorder#4C7A9199
  • scrollbar.shadow#45505B24
  • scrollbarSlider.activeBackground#4C7A9166
  • scrollbarSlider.background#6D788B33
  • scrollbarSlider.hoverBackground#6D788B55
  • settings.dropdownBackground#E4E8E6
  • settings.dropdownBorder#D5DAD7
  • settings.dropdownForeground#2E3440
  • settings.headerForeground#2E3440
  • settings.modifiedItemIndicator#4C7A91
  • settings.textInputBackground#E4E8E6
  • settings.textInputBorder#D5DAD7
  • settings.textInputForeground#2E3440
  • sideBar.background#ECEFEB
  • sideBar.border#D5DAD7
  • sideBar.foreground#4C566A
  • sideBarActivityBarTop.border#D5DAD7
  • sideBarSectionHeader.background#E4E8E6
  • sideBarSectionHeader.border#D5DAD7
  • sideBarSectionHeader.foreground#2E3440
  • sideBarTitle.foreground#2E3440
  • statusBar.background#E4E8E6
  • statusBar.border#D5DAD7
  • statusBar.debuggingBackground#9C5E4D
  • statusBar.debuggingForeground#FFFFFF
  • statusBar.foreground#4C566A
  • statusBar.noFolderBackground#ECEFEB
  • statusBar.noFolderForeground#4C566A
  • statusBarItem.activeBackground#4C7A9124
  • statusBarItem.errorBackground#A24E57
  • statusBarItem.errorForeground#FFFFFF
  • statusBarItem.hoverBackground#2E34400D
  • statusBarItem.prominentBackground#CDD8E3
  • statusBarItem.prominentForeground#2E3440
  • statusBarItem.warningBackground#9A6B2F
  • statusBarItem.warningForeground#E7EAE8
  • tab.activeBackground#F4F5F2
  • tab.activeBorder#00000000
  • tab.activeBorderTop#4C7A91
  • tab.activeForeground#2E3440
  • tab.border#D5DAD7
  • tab.hoverBackground#E4E8E6
  • tab.hoverForeground#2E3440
  • tab.inactiveBackground#EFF1EE
  • tab.inactiveForeground#6D788B
  • tab.lastPinnedBorder#D5DAD7
  • tab.unfocusedActiveForeground#4C566A
  • tab.unfocusedInactiveForeground#6D788B
  • terminal.ansiBlack#3C4350
  • terminal.ansiBlue#3E6F91
  • terminal.ansiBrightBlack#6D788B
  • terminal.ansiBrightBlue#527F9D
  • terminal.ansiBrightCyan#538B82
  • terminal.ansiBrightGreen#668D61
  • terminal.ansiBrightMagenta#87689D
  • terminal.ansiBrightRed#B76068
  • terminal.ansiBrightWhite#FDFEFC
  • terminal.ansiBrightYellow#9A7633
  • terminal.ansiCyan#417A70
  • terminal.ansiGreen#547A50
  • terminal.ansiMagenta#76558F
  • terminal.ansiRed#A24E57
  • terminal.ansiWhite#D7DAD7
  • terminal.ansiYellow#886525
  • terminal.background#EFF1EE
  • terminal.border#D5DAD7
  • terminal.dropBackground#3E6F9122
  • terminal.foreground#2E3440
  • terminal.inactiveSelectionBackground#DEE4E8
  • terminal.selectionBackground#CDD8E3
  • terminalCommandDecoration.defaultBackground#6D788B
  • terminalCommandDecoration.errorBackground#A24E57
  • terminalCommandDecoration.successBackground#547A50
  • terminalCursor.background#EFF1EE
  • terminalCursor.foreground#4C7A91
  • terminalOverviewRuler.cursorForeground#4C7A91
  • terminalOverviewRuler.findMatchForeground#9A6B2F
  • testing.iconErrored#9C5E4D
  • testing.iconFailed#A24E57
  • testing.iconPassed#547A50
  • testing.iconQueued#6D788B
  • testing.iconSkipped#80672F
  • testing.iconUnset#6D788B
  • testing.message.error.decorationForeground#A24E57
  • testing.message.info.decorationForeground#3E6F91
  • testing.peekBorder#A24E57
  • testing.runAction#417A70
  • textBlockQuote.background#2E34400A
  • textBlockQuote.border#417A70
  • textCodeBlock.background#E4E8E6
  • textLink.activeForeground#357A83
  • textLink.foreground#3E6F91
  • textPreformat.foreground#80672F
  • titleBar.activeBackground#E7EAE8
  • titleBar.activeForeground#2E3440
  • titleBar.border#D5DAD7
  • titleBar.inactiveBackground#EFF1EE
  • titleBar.inactiveForeground#6D788B
  • tree.inactiveIndentGuidesStroke#D5DAD799
  • tree.indentGuidesStroke#D5DAD7
  • walkThrough.embeddedEditorBackground#EFF1EE
  • welcomePage.background#F4F5F2
  • welcomePage.tileBackground#E4E8E6
  • welcomePage.tileHoverBackground#CDD8E3
  • window.activeBorder#D5DAD7
  • window.inactiveBorder#D5DAD799

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#68746Ditalic
comment.block.documentation, string.quoted.docstring, comment.line.documentation#68746Ditalic
keyword, storage.type, storage.modifier#76558F
keyword.control, keyword.control.flow, keyword.control.conditional, keyword.control.loop#76558F
keyword.operator, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.logical#4C566A
punctuation, meta.brace, meta.delimiter, punctuation.separator, punctuation.terminator#4C566A
variable, meta.definition.variable.name#2E3440
variable.language, variable.language.this, variable.language.self#76558F
variable.other.constant, constant.other, support.constant#80672F
variable.parameter, meta.parameters variable#9C5E4D
variable.other.property, support.type.property-name, meta.object-literal.key#3E6F91
entity.name.function, support.function, meta.function-call entity.name.function#3E6F91
entity.name.function.member, meta.method-call entity.name.function, variable.function#3E6F91
entity.name.function.constructor, support.class#357A83
entity.name.type.class, entity.name.type.struct, support.class, support.type#357A83
entity.name.type.interface, entity.name.type.trait#417A70
entity.name.type.enum#357A83
variable.other.enummember, constant.other.enum#80672F
entity.name.type, storage.type.numeric, storage.type.primitive#357A83
entity.name.type.parameter, meta.type.parameters entity.name.type#417A70
entity.name.namespace, entity.name.type.module, support.module#417A70
string, punctuation.definition.string#547A50
punctuation.definition.template-expression, punctuation.section.embedded#9A6B2F
constant.character.escape, constant.character.format.placeholder#9A6B2F
constant.numeric#9A6B2F
constant.language.boolean#80672F
constant.language.null, constant.language.nil, constant.language.undefined#80672F
string.regexp, constant.regexp, keyword.control.anchor.regexp#417A70
entity.name.tag, punctuation.definition.tag#9C5E4D
entity.other.attribute-name, meta.attribute#80672F
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css, entity.name.tag.css#9C5E4D
support.type.property-name.css, meta.property-name.css#3E6F91
support.constant.property-value.css, constant.numeric.css, keyword.other.unit#9A6B2F
support.type.property-name.json, string.json meta.structure.dictionary.value#3E6F91
entity.name.tag.yaml, string.unquoted.plain.out.yaml#3E6F91
support.function.builtin.shell, entity.name.function.shell, meta.function-call.shell#3E6F91
variable.other.normal.shell, variable.other.positional.shell#9C5E4D
markup.heading, entity.name.section.markdown, punctuation.definition.heading.markdown#3E6F91bold
markup.underline.link, string.other.link.title.markdown, meta.link.inline.markdown#357A83
markup.inline.raw, markup.raw.inline#417A70
markup.fenced_code.block, markup.raw.block#547A50
markup.quote, punctuation.definition.quote.begin.markdown#68746Ditalic
markup.bold#2E3440bold
markup.italic#2E3440italic
markup.inserted, meta.diff.header.to-file#547A50
markup.deleted, meta.diff.header.from-file#A24E57
markup.changed#9A6B2F
invalid, invalid.illegal#A24E57underline
invalid.deprecated, entity.name.function.deprecated#6D788Bstrikethrough
Architect Theme by Nick Moore - VS Code Theme