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#BCC1CB
  • activityBar.border#B0B6C0
  • activityBar.foreground#1A2B32
  • activityBar.inactiveForeground#555D6B
  • activityBarBadge.background#2E6B15
  • activityBarBadge.foreground#EEF1F0
  • badge.background#2E6B15
  • badge.foreground#EEF1F0
  • breadcrumb.activeSelectionForeground#2E6B15
  • breadcrumb.background#F2F4F7
  • breadcrumb.focusForeground#1A2B32
  • breadcrumb.foreground#555D6B
  • breadcrumbPicker.background#E9EBF0
  • button.background#2E6B15
  • button.foreground#EEF1F0
  • button.hoverBackground#5C8A28
  • button.secondaryBackground#E6E9EF
  • button.secondaryForeground#1A2B32
  • button.secondaryHoverBackground#DEE1E8
  • contrastBorder#D4D8E0
  • debugIcon.breakpointDisabledForeground#9CA3AF
  • debugIcon.breakpointForeground#C0281E
  • debugIcon.pauseForeground#8F5500
  • debugIcon.startForeground#2E6B15
  • debugIcon.stopForeground#C0281E
  • debugToolBar.background#E9EBF0
  • debugToolBar.border#2E6B15
  • diffEditor.diagonalFill#DEE1E8
  • diffEditor.insertedLineBackground#6F9A3520
  • diffEditor.insertedTextBackground#6F9A3528
  • diffEditor.removedLineBackground#C0281E20
  • diffEditor.removedTextBackground#C0281E28
  • editor.background#F2F4F7
  • editor.findMatchBackground#BBDB6070
  • editor.findMatchHighlightBackground#BBDB6040
  • editor.findRangeHighlightBackground#6F9A3515
  • editor.foreground#1A2B32
  • editor.inactiveSelectionBackground#6F9A3520
  • editor.lineHighlightBackground#E6E9EF
  • editor.lineHighlightBorder#00000000
  • editor.rangeHighlightBackground#6F9A3518
  • editor.selectionBackground#6F9A3548
  • editor.selectionHighlightBackground#6F9A3530
  • editor.wordHighlightBackground#6F9A3528
  • editor.wordHighlightStrongBackground#6F9A3538
  • editorBracketMatch.background#6F9A3530
  • editorBracketMatch.border#2E6B15
  • editorCursor.foreground#1A2B32
  • editorError.border#C0281E00
  • editorError.foreground#C0281E
  • editorGroupHeader.noTabsBackground#E6E9EF
  • editorGroupHeader.tabsBackground#E6E9EF
  • editorGroupHeader.tabsBorder#D4D8E0
  • editorGutter.addedBackground#2E6B15
  • editorGutter.deletedBackground#C0281E
  • editorGutter.modifiedBackground#006A8F
  • editorHint.border#6F9A3500
  • editorHint.foreground#2E6B15
  • editorHoverWidget.background#E9EBF0
  • editorHoverWidget.border#2E6B15
  • editorIndentGuide.activeBackground1#6F9A3548
  • editorIndentGuide.background1#E0E3EA
  • editorInfo.border#0780A800
  • editorInfo.foreground#006A8F
  • editorLineNumber.activeForeground#4A5568
  • editorLineNumber.foreground#A8B0BE
  • editorOverviewRuler.addedForeground#2E6B15
  • editorOverviewRuler.border#E0E3EA
  • editorOverviewRuler.deletedForeground#C0281E
  • editorOverviewRuler.errorForeground#C0281E
  • editorOverviewRuler.infoForeground#006A8F
  • editorOverviewRuler.modifiedForeground#006A8F
  • editorOverviewRuler.warningForeground#8F5500
  • editorRuler.foreground#E0E3EA
  • editorSuggestWidget.background#E9EBF0
  • editorSuggestWidget.border#D4D8E0
  • editorSuggestWidget.foreground#1A2B32
  • editorSuggestWidget.highlightForeground#2E6B15
  • editorSuggestWidget.selectedBackground#6F9A3540
  • editorWarning.border#C4730A00
  • editorWarning.foreground#8F5500
  • editorWhitespace.foreground#CDD1DA
  • editorWidget.background#E9EBF0
  • editorWidget.border#D4D8E0
  • editorWidget.foreground#1A2B32
  • extensionButton.prominentBackground#2E6B15
  • extensionButton.prominentForeground#EEF1F0
  • extensionButton.prominentHoverBackground#1A2B32
  • focusBorder#2E6B15
  • gitDecoration.addedResourceForeground#2E6B15
  • gitDecoration.conflictingResourceForeground#8F5500
  • gitDecoration.deletedResourceForeground#C0281E
  • gitDecoration.ignoredResourceForeground#9CA3AF
  • gitDecoration.modifiedResourceForeground#006A8F
  • gitDecoration.submoduleResourceForeground#7C22CC
  • gitDecoration.untrackedResourceForeground#2E6B15
  • input.background#F8F9FA
  • input.border#C4C9D4
  • input.foreground#1A2B32
  • input.placeholderForeground#9CA3AF
  • inputOption.activeBackground#6F9A3522
  • inputOption.activeBorder#2E6B15
  • inputOption.activeForeground#1A2B32
  • inputValidation.errorBackground#C0281E18
  • inputValidation.errorBorder#C0281E
  • inputValidation.infoBackground#0780A818
  • inputValidation.infoBorder#006A8F
  • inputValidation.warningBackground#C4730A18
  • inputValidation.warningBorder#8F5500
  • list.activeSelectionBackground#6F9A3545
  • list.activeSelectionForeground#1A2B32
  • list.dropBackground#6F9A3535
  • list.focusBackground#6F9A3555
  • list.focusForeground#1A2B32
  • list.highlightForeground#2E6B15
  • list.hoverBackground#B8BDC7
  • list.hoverForeground#1A2B32
  • list.inactiveSelectionBackground#6F9A3530
  • list.inactiveSelectionForeground#374151
  • menu.background#E9EBF0
  • menu.foreground#1A2B32
  • menu.selectionBackground#6F9A3530
  • menu.selectionForeground#1A2B32
  • menu.separatorBackground#D4D8E0
  • menubar.selectionBackground#6F9A3530
  • menubar.selectionForeground#1A2B32
  • merge.border#D4D8E0
  • merge.currentContentBackground#6F9A3528
  • merge.currentHeaderBackground#6F9A3532
  • merge.incomingContentBackground#0780A828
  • merge.incomingHeaderBackground#0780A832
  • minimap.background#F0F2F5
  • minimap.errorHighlight#C0281E
  • minimap.findMatchHighlight#BBDB6060
  • minimap.selectionHighlight#6F9A3538
  • minimap.warningHighlight#8F5500
  • minimapSlider.activeBackground#9CA3AF68
  • minimapSlider.background#9CA3AF28
  • minimapSlider.hoverBackground#9CA3AF48
  • notificationCenter.border#D4D8E0
  • notificationCenterHeader.background#DEE1E8
  • notificationCenterHeader.foreground#1A2B32
  • notificationLink.foreground#006A8F
  • notifications.background#E9EBF0
  • notifications.border#2E6B15
  • notifications.foreground#1A2B32
  • panel.background#F2F4F7
  • panel.border#D4D8E0
  • panelSection.border#D4D8E0
  • panelSectionHeader.background#E6E9EF
  • panelSectionHeader.foreground#1A2B32
  • panelTitle.activeBorder#2E6B15
  • panelTitle.activeForeground#1A2B32
  • panelTitle.inactiveForeground#555D6B
  • peekView.border#2E6B15
  • peekViewEditor.background#E6E9EF
  • peekViewEditor.matchHighlightBackground#BBDB6050
  • peekViewResult.background#E9EBF0
  • peekViewResult.matchHighlightBackground#BBDB6050
  • peekViewResult.selectionBackground#6F9A3540
  • peekViewTitle.background#DEE1E8
  • peekViewTitleDescription.foreground#555D6B
  • peekViewTitleLabel.foreground#1A2B32
  • pickerGroup.border#D4D8E0
  • pickerGroup.foreground#006A8F
  • progressBar.background#2E6B15
  • quickInput.background#F2F4F7
  • scrollbarSlider.activeBackground#9CA3AF80
  • scrollbarSlider.background#9CA3AF40
  • scrollbarSlider.hoverBackground#9CA3AF60
  • settings.headerForeground#1A2B32
  • settings.modifiedItemIndicator#8F5500
  • sideBar.background#C8CDD6
  • sideBar.border#B0B6C0
  • sideBar.foreground#1A2B32
  • sideBarSectionHeader.background#BCC1CB
  • sideBarSectionHeader.border#B0B6C0
  • sideBarSectionHeader.foreground#1A2B32
  • sideBarTitle.foreground#1A2B32
  • statusBar.background#5C8A28
  • statusBar.border#4A7020
  • statusBar.debuggingBackground#8F5500
  • statusBar.debuggingForeground#EEF1F0
  • statusBar.foreground#EEF1F0
  • statusBar.noFolderBackground#DEE1E8
  • statusBar.noFolderForeground#1A2B32
  • symbolIcon.arrayForeground#006A8F
  • symbolIcon.classForeground#8F5500
  • symbolIcon.colorForeground#2E6B15
  • symbolIcon.constantForeground#8F5500
  • symbolIcon.constructorForeground#8F5500
  • symbolIcon.enumeratorForeground#8F5500
  • symbolIcon.enumeratorMemberForeground#006A8F
  • symbolIcon.eventForeground#8F5500
  • symbolIcon.fieldForeground#0369A1
  • symbolIcon.fileForeground#1A2B32
  • symbolIcon.folderForeground#2E6B15
  • symbolIcon.functionForeground#2E6B15
  • symbolIcon.interfaceForeground#8F5500
  • symbolIcon.keyForeground#2E6B15
  • symbolIcon.keywordForeground#0369A1
  • symbolIcon.methodForeground#2E6B15
  • symbolIcon.moduleForeground#8F5500
  • symbolIcon.namespaceForeground#8F5500
  • symbolIcon.nullForeground#7C22CC
  • symbolIcon.numberForeground#8F5500
  • symbolIcon.objectForeground#0369A1
  • symbolIcon.operatorForeground#006A8F
  • symbolIcon.packageForeground#8F5500
  • symbolIcon.propertyForeground#0369A1
  • symbolIcon.referenceForeground#006A8F
  • symbolIcon.snippetForeground#2E6B15
  • symbolIcon.stringForeground#1A8040
  • symbolIcon.structForeground#8F5500
  • symbolIcon.textForeground#1A2B32
  • symbolIcon.typeParameterForeground#8F5500
  • symbolIcon.unitForeground#8F5500
  • symbolIcon.variableForeground#0369A1
  • tab.activeBackground#F2F4F7
  • tab.activeBorder#2E6B15
  • tab.activeBorderTop#2E6B15
  • tab.activeForeground#1A2B32
  • tab.border#D4D8E0
  • tab.hoverBackground#DEE1E8
  • tab.hoverForeground#1A2B32
  • tab.inactiveBackground#E6E9EF
  • tab.inactiveForeground#555D6B
  • tab.unfocusedActiveForeground#374151
  • tab.unfocusedInactiveForeground#9CA3AF
  • terminal.ansiBlack#1A1A1A
  • terminal.ansiBlue#0369A1
  • terminal.ansiBrightBlack#6B7280
  • terminal.ansiBrightBlue#0284C7
  • terminal.ansiBrightCyan#06B6D4
  • terminal.ansiBrightGreen#2E6B15
  • terminal.ansiBrightMagenta#9333EA
  • terminal.ansiBrightRed#EF4444
  • terminal.ansiBrightWhite#F8F9FA
  • terminal.ansiBrightYellow#D4900A
  • terminal.ansiCyan#0891B2
  • terminal.ansiGreen#5A8A28
  • terminal.ansiMagenta#7C22CC
  • terminal.ansiRed#C0281E
  • terminal.ansiWhite#F0F2F5
  • terminal.ansiYellow#8F5500
  • terminal.background#F2F4F7
  • terminal.border#D4D8E0
  • terminal.foreground#1A2B32
  • terminal.selectionBackground#6F9A3548
  • textBlockQuote.background#F0F2F5
  • textBlockQuote.border#8F5500
  • textCodeBlock.background#1A1A1A
  • textLink.activeForeground#1A2B32
  • textLink.foreground#2E6B15
  • textPreformat.foreground#A8C040
  • titleBar.activeBackground#5C8A28
  • titleBar.activeForeground#EEF1F0
  • titleBar.border#4A7020
  • titleBar.inactiveBackground#4A7020
  • titleBar.inactiveForeground#C8D4C0

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#555D6Bitalic
string, string.quoted, string.template#166E35
string.template meta.template.expression#1A2B32
punctuation.definition.template-expression#006A8F
constant.numeric, constant.language.numeric#9A4E00
constant.language, constant.language.boolean, constant.language.null, constant.language.undefined#7C22CC
keyword, keyword.control, storage.type, storage.modifier#0369A1—
keyword.control.import, keyword.control.export, keyword.control.from#7C22CC—
keyword.operator, keyword.operator.arithmetic, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.logical#006A8F
storage.type.function.arrow#006A8F—
entity.name.function, meta.function-call, support.function#2E6B15
variable.parameter, meta.parameters variable#0369A1
entity.name.class, entity.name.type.class, support.class#9A4E00—
variable, variable.other#1A2B32
variable.other.property, variable.other.object.property, support.variable.property, meta.object-literal.key#0369A1
variable.other.constant, variable.other.enummember#9A4E00
variable.language.this, variable.language.super#7C22CC
entity.name.tag, meta.tag#0369A1
entity.other.attribute-name#9A4E00
support.class.component, entity.name.tag.tsx, entity.name.tag.jsx#9A4E00—
entity.other.attribute-name.class.css, entity.other.attribute-name.class.scss#2E6B15
entity.other.attribute-name.id.css, entity.other.attribute-name.id.scss#9A4E00
support.type.property-name.css, support.type.property-name.scss#0369A1
support.constant.property-value.css, support.constant.property-value.scss#2E6B15
keyword.other.unit.css, keyword.other.unit.scss#9A4E00
support.type.property-name.json#0369A1—
string.quoted.double.json#166E35
constant.numeric.json#9A4E00
constant.language.json#7C22CC
punctuation.definition.dictionary.begin.json, punctuation.definition.dictionary.end.json, punctuation.definition.array.begin.json, punctuation.definition.array.end.json, punctuation.separator.dictionary.key-value.json, punctuation.separator.dictionary.pair.json, punctuation.separator.array.json#7A8494
entity.name.type, support.type#9A4E00
entity.name.type.interface#9A4E00
entity.name.type.parameter#7C22CC
meta.function.decorator.python, entity.name.function.decorator.python#9A4E00
variable.language.special.self.python#7C22CC
support.function.magic.python#7C22CC
storage.type.annotation.java#9A4E00
meta.import.java, storage.modifier.import.java#7C22CC—
entity.name.package.java, support.other.package.java#0369A1
entity.name.type.class.java, support.class.java#9A4E00
storage.modifier.static.java#7C22CC
keyword.other.DML.sql, keyword.other.DDL.sql#0369A1—
markup.heading, entity.name.section.markdown#1A2B32—
markup.bold#9A4E00—
markup.italic#006A8Fitalic
markup.inline.raw, markup.fenced_code.block.markdown#2E6B15
markup.underline.link#006A8Funderline
markup.quote#555D6B
invalid, invalid.illegal#C0281E
invalid.deprecated#8F5500strikethrough
string.regexp#7C22CC
constant.character.escape.regexp#9A4E00—
constant.character.escape#9A4E00
punctuation#4A5568
punctuation.separator, punctuation.terminator#555D6B
variable.other.php, punctuation.definition.variable.php#0369A1
keyword.control.php, keyword.other.php, storage.type.php#0369A1—
entity.name.function.php, support.function.php, support.function.builtin.php#2E6B15
entity.name.type.class.php, support.class.php, variable.other.class.php#9A4E00—
constant.other.php, support.constant.core.php, variable.other.constant.php#7C22CC
entity.name.function.method.php, support.function.magic.php#2E6B15