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.activeBorder#4E6A59
  • activityBar.background#6F8B78
  • activityBar.foreground#F3F0EA
  • activityBar.inactiveForeground#BED0C3
  • activityBarBadge.background#587264
  • activityBarBadge.foreground#F8F5EF
  • breadcrumb.activeSelectionForeground#3E474C
  • breadcrumb.focusForeground#5F8E87
  • breadcrumb.foreground#7B756C
  • button.background#6C8593
  • button.foreground#F9F7F2
  • button.hoverBackground#7A929F
  • button.secondaryBackground#DED7CB
  • button.secondaryForeground#3E474C
  • button.secondaryHoverBackground#D4CCBF
  • commandCenter.activeBorder#6A8696
  • commandCenter.background#EDF1EF
  • commandCenter.border#90A0A9
  • commandCenter.foreground#26363A
  • commandCenter.inactiveForeground#667670
  • descriptionForeground#7B756C
  • diffEditor.diagonalFill#00000000
  • diffEditor.insertedTextBackground#D9E8DF88
  • diffEditor.removedTextBackground#F0DBDA88
  • dropdown.background#FEFDFB
  • dropdown.border#CBC2B6
  • dropdown.foreground#3E474C
  • editor.background#FAF8F3
  • editor.findMatchBackground#D5C39A99
  • editor.findMatchHighlightBackground#E5DDC755
  • editor.foreground#3E474C
  • editor.hoverHighlightBackground#EEF4F388
  • editor.inactiveSelectionBackground#E4EBED66
  • editor.lineHighlightBackground#F6F3ED
  • editor.selectionBackground#D5E1E588
  • editor.selectionHighlightBackground#E7EFF088
  • editor.wordHighlightBackground#E8F0EE88
  • editor.wordHighlightStrongBackground#D8E4E688
  • editorBracketHighlight.foreground1#96715F
  • editorBracketHighlight.foreground2#648A78
  • editorBracketHighlight.foreground3#637F98
  • editorBracketHighlight.foreground4#A06758
  • editorBracketHighlight.foreground5#7D8A58
  • editorBracketHighlight.foreground6#5D7390
  • editorBracketHighlight.unexpectedBracket.foreground#A65954
  • editorBracketMatch.background#DCE4E566
  • editorBracketMatch.border#6E8790
  • editorBracketPairGuide.activeBackground1#B8ADA0
  • editorBracketPairGuide.activeBackground2#B2A99C
  • editorBracketPairGuide.activeBackground3#ACA79D
  • editorBracketPairGuide.activeBackground4#B0A79B
  • editorBracketPairGuide.activeBackground5#AEA69A
  • editorBracketPairGuide.activeBackground6#AAA59B
  • editorBracketPairGuide.background1#D8D2C8
  • editorBracketPairGuide.background2#D6D1C6
  • editorBracketPairGuide.background3#D4D0C8
  • editorBracketPairGuide.background4#D7D1C8
  • editorBracketPairGuide.background5#D5D0C7
  • editorBracketPairGuide.background6#D3CFC6
  • editorCursor.foreground#5A7397
  • editorError.foreground#A65954
  • editorGroup.border#D2D7D1
  • editorGroupHeader.tabsBackground#D6DDDC
  • editorGutter.addedBackground#607766
  • editorGutter.deletedBackground#A65954
  • editorGutter.modifiedBackground#5A7397
  • editorHint.foreground#5F8E87
  • editorHoverWidget.background#FEFDFB
  • editorHoverWidget.border#CBC2B6
  • editorIndentGuide.activeBackground1#B9AEA1
  • editorIndentGuide.background1#E1DBD1
  • editorInfo.foreground#6E8790
  • editorLineNumber.activeForeground#7B7469
  • editorLineNumber.foreground#B2A89A
  • editorLink.activeForeground#5A7397
  • editorOverviewRuler.addedForeground#607766AA
  • editorOverviewRuler.border#00000000
  • editorOverviewRuler.deletedForeground#A65954AA
  • editorOverviewRuler.errorForeground#A65954AA
  • editorOverviewRuler.infoForeground#6E8790AA
  • editorOverviewRuler.modifiedForeground#5A7397AA
  • editorOverviewRuler.warningForeground#9B8253AA
  • editorSuggestWidget.background#FEFDFB
  • editorSuggestWidget.border#CBC2B6
  • editorSuggestWidget.foreground#3E474C
  • editorSuggestWidget.highlightForeground#5F8E87
  • editorSuggestWidget.selectedBackground#EEF3F3
  • editorWarning.foreground#9B8253
  • editorWhitespace.foreground#D7D0C5
  • editorWidget.background#FEFDFB
  • editorWidget.border#CBC2B6
  • errorForeground#A65954
  • focusBorder#6E879066
  • foreground#3E474C
  • gitDecoration.addedResourceForeground#607766
  • gitDecoration.deletedResourceForeground#A65954
  • gitDecoration.ignoredResourceForeground#A69B8C
  • gitDecoration.modifiedResourceForeground#5A7397
  • gitDecoration.untrackedResourceForeground#5F8E87
  • icon.foreground#6B7478
  • input.background#FEFDFB
  • input.border#CBC2B6
  • input.foreground#3E474C
  • input.placeholderForeground#9A9184
  • inputOption.activeBorder#5A7397
  • inputValidation.errorBackground#F2E4E3
  • inputValidation.errorBorder#A65954
  • inputValidation.infoBackground#E5ECEC
  • inputValidation.infoBorder#6E8790
  • inputValidation.warningBackground#F2EBDE
  • inputValidation.warningBorder#9B8253
  • list.activeSelectionBackground#E6EEF0
  • list.activeSelectionForeground#334045
  • list.errorForeground#A65954
  • list.highlightForeground#5F8E87
  • list.hoverBackground#F0ECE5
  • list.inactiveSelectionBackground#ECE7DE
  • list.warningForeground#9B8253
  • menu.background#FEFDFB
  • menu.foreground#3E474C
  • menu.selectionBackground#E7EEEF
  • menu.selectionForeground#344045
  • menu.separatorBackground#D8D0C4
  • minimap.background#F5F3EE
  • minimap.errorHighlight#A6595488
  • minimap.findMatchHighlight#D5C39A88
  • minimap.selectionHighlight#6E879044
  • minimap.warningHighlight#9B825388
  • notificationCenterHeader.background#F4F1EC
  • notifications.background#FEFDFB
  • notifications.border#CBC2B6
  • notifications.foreground#3E474C
  • panel.background#F4F1EC
  • panel.border#DAD3C7
  • panelTitle.activeBorder#6F9A92
  • panelTitle.activeForeground#3D474B
  • panelTitle.inactiveForeground#8A8277
  • peekView.border#6E8790
  • peekViewEditor.background#F7F5F0
  • peekViewResult.background#F4F1EC
  • peekViewResult.matchHighlightBackground#E5DDC755
  • peekViewResult.selectionBackground#D9E1E3
  • peekViewTitle.background#ECE7DE
  • scrollbar.shadow#8A7F720D
  • scrollbarSlider.activeBackground#7E766A66
  • scrollbarSlider.background#A7A09355
  • scrollbarSlider.hoverBackground#928A7D66
  • selection.background#D9E1E3
  • sideBar.background#FAF8F3
  • sideBar.border#E1DBD1
  • sideBar.foreground#3E474C
  • sideBarSectionHeader.background#F3F0EA
  • sideBarSectionHeader.foreground#3D474B
  • sideBarTitle.foreground#3D474B
  • statusBar.background#79B089
  • statusBar.debuggingBackground#BCA67E
  • statusBar.debuggingForeground#3E342A
  • statusBar.foreground#F5F2EB
  • statusBar.noFolderBackground#79B089
  • statusBarItem.hoverBackground#6CA37C
  • statusBarItem.prominentBackground#72A983
  • statusBarItem.remoteBackground#5A9270
  • statusBarItem.remoteForeground#F8F5EF
  • tab.activeBackground#F7F5F0
  • tab.activeBorderTop#6F9A92
  • tab.activeForeground#2F3A3F
  • tab.border#D7DCD6
  • tab.hoverBackground#EDF4F1
  • tab.inactiveBackground#E4E9E6
  • tab.inactiveForeground#64726C
  • tab.unfocusedActiveForeground#465156
  • terminal.ansiBlack#5B5F61
  • terminal.ansiBlue#5A7397
  • terminal.ansiBrightBlack#8F877B
  • terminal.ansiBrightBlue#7089AD
  • terminal.ansiBrightCyan#75A098
  • terminal.ansiBrightGreen#758C7A
  • terminal.ansiBrightMagenta#9885A6
  • terminal.ansiBrightRed#B76F69
  • terminal.ansiBrightWhite#FFFDFC
  • terminal.ansiBrightYellow#AD9668
  • terminal.ansiCyan#5F8E87
  • terminal.ansiGreen#607766
  • terminal.ansiMagenta#866F97
  • terminal.ansiRed#A65954
  • terminal.ansiWhite#F5F3EE
  • terminal.ansiYellow#9B8253
  • terminal.background#F7F5F0
  • terminal.foreground#3E474C
  • terminalCursor.background#3E474C
  • terminalCursor.foreground#5A7397
  • titleBar.activeBackground#5F7587
  • titleBar.activeForeground#F4F1EA
  • titleBar.inactiveBackground#5F7587CC
  • titleBar.inactiveForeground#D3DADE
  • widget.border#CBC2B6
  • widget.shadow#8A7F721A

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#8B8479italic
string, markup.inline.raw, markup.fenced_code.block#79B089
constant.numeric, constant.language, constant.character, constant.other, constant.escape#A17C49
keyword, storage, keyword.control, keyword.operator.new, keyword.operator.expression#A05F56
storage.type#A17C49
storage.modifier, storage.modifier.swift#A05F56
entity.name.function, support.function, meta.function-call, variable.function, entity.name.method#5F7587
entity.name.type, entity.name.class, support.type, support.class, entity.name.namespace#967548
variable, string constant.other.placeholder, meta.definition.variable.name#3E474C
variable.parameter#56645C
variable.other.property, meta.object-literal.key, entity.other.attribute-name#8C7660
entity.name.tag, meta.tag.sgml, punctuation.definition.tag#6F8B78
keyword.operator, punctuation, meta.brace, punctuation.definition.parameters.begin, punctuation.definition.parameters.end, punctuation.section.parens.begin, punctuation.section.parens.end, punctuation.section.group.begin, punctuation.section.group.end, punctuation.section.brackets.begin, punctuation.section.brackets.end, punctuation.section.braces.begin, punctuation.section.braces.end, meta.group, meta.brackets#6F746E
markup.heading, entity.name.section.markdown#5F7587bold
markup.bold, markup.italic#A05F56
support.type.property-name.json#8C7660
invalid, invalid.illegal#FFFDFC