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#1D2026
  • activityBar.activeBorder#4F7CAC
  • activityBar.background#14161A
  • activityBar.border#30353E
  • activityBar.foreground#D7DAE0
  • activityBar.inactiveForeground#747C88
  • activityBarBadge.background#466F98
  • activityBarBadge.foreground#FFFFFF
  • badge.background#466F98
  • badge.foreground#FFFFFF
  • breadcrumb.activeSelectionForeground#78A6D2
  • breadcrumb.background#181A1F
  • breadcrumb.focusForeground#D7DAE0
  • breadcrumb.foreground#8E96A2
  • button.background#466F98
  • button.foreground#FFFFFF
  • button.hoverBackground#5D8FC1
  • button.secondaryBackground#252932
  • button.secondaryForeground#D7DAE0
  • button.secondaryHoverBackground#303540
  • checkbox.background#252932
  • checkbox.border#39404B
  • checkbox.foreground#D7DAE0
  • descriptionForeground#9097A3
  • diffEditor.insertedLineBackground#728F7912
  • diffEditor.insertedTextBackground#728F792B
  • diffEditor.removedLineBackground#E56B6F12
  • diffEditor.removedTextBackground#E56B6F2B
  • disabledForeground#626975
  • dropdown.background#1D2026
  • dropdown.border#39404B
  • dropdown.foreground#D7DAE0
  • editor.background#181A1F
  • editor.findMatchBackground#D78B6755
  • editor.findMatchBorder#D78B67
  • editor.findMatchHighlightBackground#D78B672E
  • editor.findRangeHighlightBackground#4F7CAC14
  • editor.foreground#D7DAE0
  • editor.hoverHighlightBackground#4F7CAC1A
  • editor.inactiveSelectionBackground#4F7CAC26
  • editor.lineHighlightBackground#1D2026
  • editor.lineHighlightBorder#00000000
  • editor.rangeHighlightBackground#4F7CAC14
  • editor.selectionBackground#4F7CAC4D
  • editor.selectionHighlightBackground#4F7CAC22
  • editor.wordHighlightBackground#4F7CAC1F
  • editor.wordHighlightStrongBackground#78A6D22B
  • editorBracketHighlight.foreground1#4F7CAC
  • editorBracketHighlight.foreground2#E56B6F
  • editorBracketHighlight.foreground3#E2A07E
  • editorBracketHighlight.foreground4#89A6B8
  • editorBracketHighlight.foreground5#4FA3A5
  • editorBracketHighlight.foreground6#D98B72
  • editorBracketHighlight.unexpectedBracket.foreground#E56B6F
  • editorBracketMatch.background#4F7CAC2B
  • editorBracketMatch.border#78A6D2
  • editorCodeLens.foreground#747C88
  • editorCursor.foreground#78A6D2
  • editorError.foreground#E56B6F
  • editorGroup.border#30353E
  • editorGroupHeader.noTabsBackground#181A1F
  • editorGroupHeader.tabsBackground#14161A
  • editorGutter.addedBackground#728F79
  • editorGutter.deletedBackground#E56B6F
  • editorGutter.modifiedBackground#4F7CAC
  • editorHint.foreground#728F79
  • editorHoverWidget.background#1D2026
  • editorHoverWidget.border#39404B
  • editorHoverWidget.foreground#D7DAE0
  • editorIndentGuide.activeBackground1#4F7CAC77
  • editorIndentGuide.background1#2A2F37
  • editorInfo.foreground#4F7CAC
  • editorLineNumber.activeForeground#5D8FC1
  • editorLineNumber.foreground#555D68
  • editorLink.activeForeground#78A6D2
  • editorOverviewRuler.addedForeground#728F79
  • editorOverviewRuler.deletedForeground#E56B6F
  • editorOverviewRuler.modifiedForeground#4F7CAC
  • editorPane.background#181A1F
  • editorRuler.foreground#343A43
  • editorSuggestWidget.background#1D2026
  • editorSuggestWidget.border#39404B
  • editorSuggestWidget.foreground#D7DAE0
  • editorSuggestWidget.highlightForeground#78A6D2
  • editorSuggestWidget.selectedBackground#4F7CAC44
  • editorWarning.foreground#D78B67
  • editorWhitespace.foreground#343A43
  • editorWidget.background#1D2026
  • editorWidget.border#39404B
  • editorWidget.foreground#D7DAE0
  • errorForeground#E56B6F
  • focusBorder#4F7CAC
  • foreground#D7DAE0
  • gitDecoration.addedResourceForeground#728F79
  • gitDecoration.conflictingResourceForeground#D78B67
  • gitDecoration.deletedResourceForeground#E56B6F
  • gitDecoration.ignoredResourceForeground#626975
  • gitDecoration.modifiedResourceForeground#4F7CAC
  • gitDecoration.renamedResourceForeground#4FA3A5
  • gitDecoration.untrackedResourceForeground#8EA596
  • icon.foreground#B8BEC8
  • input.background#252932
  • input.border#39404B
  • input.foreground#D7DAE0
  • input.placeholderForeground#747C88
  • inputOption.activeBackground#4F7CAC33
  • inputOption.activeBorder#4F7CAC
  • inputValidation.errorBackground#3D2324
  • inputValidation.errorBorder#E56B6F
  • inputValidation.infoBackground#20343A
  • inputValidation.infoBorder#4F7CAC
  • inputValidation.warningBackground#3A3520
  • inputValidation.warningBorder#D78B67
  • list.activeSelectionBackground#4F7CAC44
  • list.activeSelectionForeground#FFFFFF
  • list.errorForeground#E56B6F
  • list.focusBackground#4F7CAC33
  • list.focusForeground#FFFFFF
  • list.highlightForeground#5D8FC1
  • list.hoverBackground#252932CC
  • list.hoverForeground#FFFFFF
  • list.inactiveSelectionBackground#252932
  • list.inactiveSelectionForeground#D7DAE0
  • list.warningForeground#D78B67
  • menu.background#1D2026
  • menu.foreground#D7DAE0
  • menu.selectionBackground#4F7CAC44
  • menu.selectionForeground#FFFFFF
  • menu.separatorBackground#39404B
  • menubar.selectionBackground#4F7CAC2B
  • menubar.selectionForeground#FFFFFF
  • minimap.background#181A1F
  • minimap.findMatchHighlight#D78B6788
  • minimap.selectionHighlight#4F7CAC55
  • notificationCenter.border#39404B
  • notificationCenterHeader.background#1D2026
  • notificationLink.foreground#5D8FC1
  • notifications.background#1D2026
  • notifications.border#39404B
  • notifications.foreground#D7DAE0
  • panel.background#181A1F
  • panel.border#30353E
  • panelInput.border#39404B
  • panelTitle.activeBorder#4F7CAC
  • panelTitle.activeForeground#D7DAE0
  • panelTitle.inactiveForeground#747C88
  • peekView.border#4F7CAC
  • peekViewEditor.background#14161A
  • peekViewEditor.matchHighlightBackground#D78B6744
  • peekViewResult.background#1D2026
  • peekViewResult.selectionBackground#4F7CAC44
  • peekViewTitle.background#22262D
  • progressBar.background#4F7CAC
  • scrollbar.shadow#00000066
  • scrollbarSlider.activeBackground#78A6D277
  • scrollbarSlider.background#747C8833
  • scrollbarSlider.hoverBackground#4F7CAC55
  • selection.background#4F7CAC44
  • sideBar.background#1D2026
  • sideBar.border#30353E
  • sideBar.foreground#D7DAE0
  • sideBarSectionHeader.background#22262D
  • sideBarSectionHeader.border#30353E
  • sideBarSectionHeader.foreground#D7DAE0
  • sideBarTitle.foreground#D7DAE0
  • statusBar.background#1D2026
  • statusBar.border#30353E
  • statusBar.debuggingBackground#B95D5F
  • statusBar.debuggingForeground#FFFFFF
  • statusBar.foreground#D7DAE0
  • statusBar.noFolderBackground#22262D
  • statusBarItem.hoverBackground#4F7CAC33
  • statusBarItem.prominentBackground#466F98
  • statusBarItem.prominentForeground#FFFFFF
  • statusBarItem.prominentHoverBackground#5D8FC1
  • tab.activeBackground#181A1F
  • tab.activeBorderTop#4F7CAC
  • tab.activeForeground#F0F2F5
  • tab.activeModifiedBorder#728F79
  • tab.border#14161A
  • tab.inactiveBackground#1D2026
  • tab.inactiveForeground#8E96A2
  • tab.inactiveModifiedBorder#728F7988
  • tab.unfocusedActiveForeground#B8BEC8
  • tab.unfocusedInactiveForeground#626975
  • terminal.ansiBlack#181A1F
  • terminal.ansiBlue#4F7CAC
  • terminal.ansiBrightBlack#747C88
  • terminal.ansiBrightBlue#6B95BE
  • terminal.ansiBrightCyan#6AB8BA
  • terminal.ansiBrightGreen#8EA596
  • terminal.ansiBrightMagenta#E3A08C
  • terminal.ansiBrightRed#ED8588
  • terminal.ansiBrightWhite#FFFFFF
  • terminal.ansiBrightYellow#EDB498
  • terminal.ansiCyan#4FA3A5
  • terminal.ansiGreen#728F79
  • terminal.ansiMagenta#D98B72
  • terminal.ansiRed#E56B6F
  • terminal.ansiWhite#D7DAE0
  • terminal.ansiYellow#D78B67
  • terminal.background#181A1F
  • terminal.foreground#D7DAE0
  • terminal.selectionBackground#4F7CAC44
  • terminalCursor.foreground#78A6D2
  • textBlockQuote.background#1D2026
  • textBlockQuote.border#4FA3A5
  • textCodeBlock.background#22252B
  • textLink.activeForeground#78A6D2
  • textLink.foreground#5D8FC1
  • textPreformat.foreground#89A6B8
  • titleBar.activeBackground#181A1F
  • titleBar.activeForeground#D7DAE0
  • titleBar.border#30353E
  • titleBar.inactiveBackground#14161A
  • titleBar.inactiveForeground#747C88
  • tree.indentGuidesStroke#39404B

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#5C6370italic
string, string.quoted, string.template#89A6B8
constant.numeric#D98B72
keyword, storage.type, storage.modifier, keyword.control#E56B6F
entity.name.function, support.function, meta.function-call#4F7CAC
entity.name.type, entity.name.class, support.type, support.class#E2A07E
variable, meta.object-literal.key#D7DAE0
variable.parameter, meta.function.parameters#E56B6F
constant.language, constant.character, constant.other#4FA3A5
entity.name.tag, punctuation.definition.tag#E56B6F
entity.other.attribute-name#D98B72
keyword.operator, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.logical#4FA3A5
constant.character.escape, string.regexp, string.regexp punctuation#4FA3A5
support.constant, support.variable, variable.language#4FA3A5
meta.import keyword, meta.export keyword, keyword.control.import, keyword.control.from, keyword.control.export#E56B6F
support.type.property-name.css, meta.property-name.css, support.type.vendored.property-name.css#4F7CAC
constant.other.color, support.constant.color#D98B72
markup.underline.link, string.other.link#5D8FC1underline
punctuation, meta.brace, meta.delimiter#928F89
markup.heading, markup.heading entity.name, punctuation.definition.heading.markdown#8FA5A6bold
markup.heading.1.markdown, markup.heading.1.markdown entity.name, punctuation.definition.heading.markdown markup.heading.1#5D8FC1bold
markup.heading.2.markdown, markup.heading.2.markdown entity.name, punctuation.definition.heading.markdown markup.heading.2#D98B72bold
markup.heading.3.markdown, markup.heading.3.markdown entity.name, punctuation.definition.heading.markdown markup.heading.3#89A6B8bold
markup.heading.4.markdown, markup.heading.4.markdown entity.name, punctuation.definition.heading.markdown markup.heading.4#E2A07Ebold
markup.heading.5.markdown, markup.heading.5.markdown entity.name, punctuation.definition.heading.markdown markup.heading.5#4FA3A5bold
markup.heading.6.markdown, markup.heading.6.markdown entity.name, punctuation.definition.heading.markdown markup.heading.6#9097A3bold
markup.bold#E56B6Fbold
markup.italic#D98B72italic
markup.fenced_code.block#89A6B8
markup.inline.raw.markdown, markup.inline.raw#E58A91bold
punctuation.definition.raw.markdown, punctuation.definition.raw.begin.markdown, punctuation.definition.raw.end.markdown#C96F76
markup.quote, markup.quote.markdown, punctuation.definition.quote.begin.markdown#9097A3italic
punctuation.definition.list.begin.markdown, punctuation.definition.list.begin.markdown markup.list.numbered, punctuation.definition.list.begin.markdown markup.list.unnumbered#D98B72
markup.strikethrough#77736Dstrikethrough
meta.separator.markdown#57534E
markup.raw.block, markup.raw.block.markdown, punctuation.definition.markdown#89A6B8
meta.link.inline.markdown, meta.image.inline.markdown#D7DAE0
string.other.link.title.markdown, string.other.link.description.markdown#E2A07E
constant.other.reference.link.markdown#D98B72
invalid, invalid.illegal#E56B6Funderline