HiC Color Theme
Publisher: Kade PowellThemes in package: 5
High contrast 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#122738
- activityBar.border#0d3a58
- activityBar.foreground#ffffff
- activityBarBadge.background#ffc600
- activityBarBadge.foreground#000000
- badge.background#ffc600
- badge.foreground#000000
- button.background#0088ff
- button.foreground#ffffff
- button.hoverBackground#ff9d00
- contrastBorder#ffffff00
- debugExceptionWidget.background#081117
- debugExceptionWidget.border#aaaaaa
- debugToolBar.background#081117
- descriptionForeground#aaaaaa
- diffEditor.insertedTextBackground#3ad90033
- diffEditor.insertedTextBorder#3ad90055
- diffEditor.removedTextBackground#ee3a4333
- diffEditor.removedTextBorder#ee3a4355
- dropdown.background#081117
- dropdown.border#15232d
- dropdown.foreground#ffffff
- editor.background#081117
- editor.findMatchBackground#ff720066
- editor.findMatchHighlightBackground#cad40f66
- editor.findRangeHighlightBackground#243e51
- editor.foreground#ffffff
- editor.hoverHighlightBackground#ffc60033
- editor.inactiveSelectionBackground#003b8b
- editor.lineHighlightBackground#1f4662
- editor.lineHighlightBorder#234e6d
- editor.rangeHighlightBackground#1f4662
- editor.selectionBackground#0050a4
- editor.selectionHighlightBackground#0050a480
- editor.wordHighlightBackground#ffffff21
- editor.wordHighlightStrongBackground#ffffff21
- editorBracketMatch.background#0d3a58
- editorBracketMatch.border#ffc60080
- editorCodeLens.foreground#aaaaaa
- editorCursor.foreground#ffc600
- editorError.border#0d3a58
- editorError.foreground#a22929
- editorGroup.border#122738
- editorGroup.dropBackground#12273899
- editorGroupHeader.noTabsBackground#081117
- editorGroupHeader.tabsBackground#081117
- editorGroupHeader.tabsBorder#15232d
- editorGutter.addedBackground#3c9f4a
- editorGutter.background#081117
- editorGutter.deletedBackground#a22929
- editorGutter.modifiedBackground#26506d
- editorHoverWidget.background#15232d
- editorHoverWidget.border#0d3a58
- editorIndentGuide.background#3b5364
- editorLineNumber.foreground#aaaaaa
- editorLink.activeForeground#aaaaaa
- editorMarkerNavigation.background#3b536433
- editorMarkerNavigationError.background#a22929
- editorMarkerNavigationWarning.background#ffc600
- editorOverviewRuler.border#0d3a58
- editorOverviewRuler.commonContentForeground#ffc60055
- editorOverviewRuler.currentContentForeground#ee3a4355
- editorOverviewRuler.incomingContentForeground#3ad90055
- editorRuler.foreground#1f4662
- editorSuggestWidget.background#15232d
- editorSuggestWidget.border#15232d
- editorSuggestWidget.foreground#aaaaaa
- editorSuggestWidget.highlightForeground#ffc600
- editorSuggestWidget.selectedBackground#081117
- editorWarning.border#ffffff00
- editorWarning.foreground#ffc600
- editorWhitespace.foreground#ffffff1a
- editorWidget.background#15232d
- editorWidget.border#0d3a58
- errorForeground#a22929
- extensionButton.prominentBackground#0088ff
- extensionButton.prominentForeground#ffffff
- extensionButton.prominentHoverBackground#ff9d00
- focusBorder#0d3a58
- foreground#aaaaaa
- gitDecoration.conflictingResourceForeground#ff7200
- gitDecoration.deletedResourceForeground#ff628c
- gitDecoration.ignoredResourceForeground#808080
- gitDecoration.modifiedResourceForeground#ffc600
- gitDecoration.untrackedResourceForeground#3ad900
- input.background#081117
- input.border#0d3a58
- input.foreground#ffc600
- input.placeholderForeground#aaaaaa
- inputOption.activeBorder#8dffff
- inputValidation.errorBackground#081117
- inputValidation.errorBorder#ffc600
- inputValidation.infoBackground#081117
- inputValidation.infoBorder#0d3a58
- inputValidation.warningBackground#081117
- inputValidation.warningBorder#ffc600
- list.activeSelectionBackground#081117
- list.activeSelectionForeground#aaaaaa
- list.dropBackground#0d3a58
- list.focusBackground#0d3a58
- list.focusForeground#aaaaaa
- list.highlightForeground#ffc600
- list.hoverBackground#081117
- list.hoverForeground#aaaaaa
- list.inactiveSelectionBackground#0d3a58
- list.inactiveSelectionForeground#aaaaaa
- menu.background#122738
- menu.selectionForeground#ffffff
- menubar.selectionBackground#0d3a58
- merge.border#ffffff00
- merge.commonContentBackground#c97d0c
- merge.commonHeaderBackground#c97d0c
- merge.currentContentBackground#2f7366
- merge.currentHeaderBackground#2f7366
- merge.incomingContentBackground#185294
- merge.incomingHeaderBackground#185294
- notificationCenter.border#ffc600
- notificationCenterHeader.background#122738
- notificationCenterHeader.foreground#aaaaaa
- notificationLink.foreground#ffc600
- notifications.background#122738
- notifications.border#ffc600
- notifications.foreground#aaaaaa
- notificationToast.border#ffc600
- panel.background#081117
- panel.border#0d3a58
- panelTitle.activeBorder#ffc600
- panelTitle.activeForeground#ffc600
- panelTitle.inactiveForeground#aaaaaa
- peekView.border#ffc600
- peekViewEditor.background#081117
- peekViewEditor.matchHighlightBackground#08111700
- peekViewEditorGutter.background#122738
- peekViewResult.background#15232d
- peekViewResult.fileForeground#aaaaaa
- peekViewResult.lineForeground#ffffff
- peekViewResult.matchHighlightBackground#0d3a58
- peekViewResult.selectionBackground#0d3a58
- peekViewResult.selectionForeground#ffffff
- peekViewTitle.background#15232d
- peekViewTitleDescription.foreground#aaaaaa
- peekViewTitleLabel.foreground#ffc600
- pickerGroup.border#0d3a58
- pickerGroup.foreground#aaaaaa
- progressBar.background#ffc600
- scrollbar.shadow#0088ff70
- scrollbarSlider.activeBackground#355166cc
- scrollbarSlider.background#1f466280
- scrollbarSlider.hoverBackground#406179cc
- selection.background#027dff
- sideBar.background#081117
- sideBar.border#0d3a58
- sideBar.foreground#aaaaaa
- sideBarSectionHeader.background#081117
- sideBarSectionHeader.foreground#aaaaaa
- sideBarTitle.foreground#aaaaaa
- statusBar.background#081117
- statusBar.border#0d3a58
- statusBar.debuggingBackground#15232d
- statusBar.debuggingBorder#ffc600
- statusBar.debuggingForeground#ffc600
- statusBar.foreground#aaaaaa
- statusBar.noFolderBackground#15232d
- statusBar.noFolderBorder#0d3a58
- statusBar.noFolderForeground#aaaaaa
- statusBarItem.activeBackground#0088ff
- statusBarItem.hoverBackground#0d3a58
- statusBarItem.prominentBackground#15232d
- statusBarItem.prominentHoverBackground#0d3a58
- tab.activeBackground#081117
- tab.activeBorder#ffc600
- tab.activeForeground#ffffff
- tab.border#15232d
- tab.inactiveBackground#081117
- tab.inactiveForeground#aaaaaa
- tab.unfocusedActiveForeground#aaaaaa
- tab.unfocusedInactiveForeground#aaaaaa
- terminal.ansiBlack#000000
- terminal.ansiBlue#0088ff
- terminal.ansiBrightBlack#0050a4
- terminal.ansiBrightBlue#0088ff
- terminal.ansiBrightCyan#80fcff
- terminal.ansiBrightGreen#3ad900
- terminal.ansiBrightMagenta#fb94ff
- terminal.ansiBrightRed#ff628c
- terminal.ansiBrightWhite#ffffff
- terminal.ansiBrightYellow#ffc600
- terminal.ansiCyan#80fcff
- terminal.ansiGreen#3ad900
- terminal.ansiMagenta#fb94ff
- terminal.ansiRed#ff628c
- terminal.ansiWhite#ffffff
- terminal.ansiYellow#ffc600
- terminal.background#081117
- terminal.foreground#ffffff
- terminalCursor.background#ffc600
- terminalCursor.foreground#ffc600
- textBlockQuote.background#081117
- textBlockQuote.border#0088ff
- textCodeBlock.background#081117
- textLink.activeForeground#0088ff
- textLink.foreground#0088ff
- textPreformat.foreground#ffc600
- textSeparator.foreground#0d3a58
- titleBar.activeBackground#122738
- titleBar.activeForeground#ffffff
- titleBar.inactiveBackground#081117
- titleBar.inactiveForeground#ffffff33
- walkThrough.embeddedEditorBackground#0d3a58
- widget.shadow#00000026
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| comment, punctuation.definition.comment | #0088FF | italic |
| constant | #FF628C | — |
| entity | #FFC600 | — |
| invalid | #F44542 | — |
| storage.type.function | #FF9D00 | — |
| keyword, storage.type.class, keyword.control.default.ts | #FF9D00 | — |
| meta | #9EFFFF | — |
| meta.jsx.children, meta.jsx.children.js, meta.jsx.children.tsx | #FFFFFF | — |
| meta.brace | #E1EFFF | — |
| punctuation | #E1EFFF | — |
| punctuation.definition.parameters | #FFEE80 | — |
| punctuation.definition.template-expression | #FFEE80 | — |
| storage | #FFC600 | — |
| storage.type.function.arrow | #FFC600 | — |
| string, punctuation.definition.string | #A5FF90 | — |
| string.template, punctuation.definition.string.template | #3AD900 | — |
| support | #80FFBB | — |
| support.function | #FF9D00 | — |
| support.variable.property.dom | #E1EFFF | — |
| variable | #E1EFFF | — |
| source.css entity, source.stylus entity | #3AD900 | — |
| entity.other.attribute-name.id.css | #FFB454 | — |
| entity.name.tag | #9EFFFF | — |
| source.css support, source.stylus support | #A5FF90 | — |
| source.css constant, source.css support.constant, source.stylus constant, source.stylus support.constant | #FFEE80 | — |
| source.css string, source.css punctuation.definition.string, source.stylus string, source.stylus punctuation.definition.string | #FFEE80 | — |
| source.css variable, source.stylus variable | #9EFFFF | — |
| text.html.basic entity.name | #9EFFFF | — |
| meta.toc-list.id.html | #A5FF90 | — |
| text.html.basic entity.other | #FFC600 | italic |
| meta.tag.metadata.script.html entity.name.tag.html | #FFC600 | — |
| punctuation.definition.string.begin, punctuation.definition.string.end | #92FC79 | — |
| source.ini entity | #E1EFFF | — |
| source.ini keyword | #FFC600 | — |
| source.ini punctuation.definition | #FFEE80 | — |
| source.ini punctuation.separator | #FF9D00 | — |
| source.js storage.type.function, source.ts storage.type.function | #FB94FF | — |
| variable.language, entity.name.type.class.js | #FB94FF | — |
| entity.other.inherited-class.js | #CCCCCC | — |
| variable.parameter.function.language.special.self.python | #FB94FF | — |
| source.json support | #FFC600 | — |
| source.json string, source.json punctuation.definition.string | #E1EFFF | — |
| punctuation.definition.heading.markdown | #E1EFFF | — |
| entity.name.section.markdown, markup.heading.setext.1.markdown, markup.heading.setext.2.markdown | #FFC600 | bold |
| meta.paragraph.markdown | #E1EFFF | — |
| beginning.punctuation.definition.quote.markdown | #FFC600 | — |
| markup.quote.markdown meta.paragraph.markdown | #9EFFFF | italic |
| meta.separator.markdown | #FFC600 | — |
| markup.bold.markdown | #9EFFFF | bold |
| markup.italic.markdown | #9EFFFF | italic |
| beginning.punctuation.definition.list.markdown | #FFC600 | — |
| string.other.link.title.markdown | #A5FF90 | — |
| string.other.link.title.markdown, string.other.link.description.markdown, string.other.link.description.title.markdown | #A5FF90 | — |
| markup.underline.link.markdown, markup.underline.link.image.markdown | #9EFFFF | — |
| fenced_code.block.language, markup.inline.raw.markdown | #9EFFFF | — |
| fenced_code.block.language, markup.inline.raw.markdown | #9EFFFF | — |
| text.jade entity.name | #9EFFFF | — |
| text.jade entity.other.attribute-name.tag | — | italic |
| text.jade string.interpolated | #FFEE80 | — |
| source.ts entity.name.type | #80FFBB | — |
| source.ts keyword | #FFC600 | — |
| source.ts punctuation.definition.parameters | #E1EFFF | — |
| meta.arrow.ts punctuation.definition.parameters | #FFEE80 | — |
| source.php entity | #9EFFFF | — |
| variable.other.php | #FFC600 | — |
| storage.type.cs | #9EFFFF | — |
| entity.name.variable.property.cs | #9EFFFF | — |
| storage.modifier.cs | #80FFBB | — |
| modifier, this, comment, storage.modifier, entity.other.attribute-name.js, entity.other.attribute-name.js, entity.other.attribute-name.ts, entity.other.attribute-name.tsx, entity.other.attribute-name.html | — | italic |
| keyword.control.export | #FF9D00 | italic |
| meta.return.type.ts | #FF0088 | italic |
| token.info-token | #6796E6 | — |
| token.warn-token | #CD9731 | — |
| token.error-token | #F44747 | — |
| token.debug-token | #B267E6 | — |
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#bd93f910
- activityBar.activeBorder#ff79c6
- activityBar.background#090b17
- activityBar.foreground#f8f8f2
- activityBar.inactiveForeground#6272a4
- activityBarBadge.background#ff79c6
- activityBarBadge.foreground#f8f8f2
- badge.background#44475a
- badge.foreground#f8f8f2
- breadcrumb.activeSelectionForeground#f8f8f2
- breadcrumb.background#090b17
- breadcrumb.focusForeground#f8f8f2
- breadcrumb.foreground#6272a4
- breadcrumbPicker.background#090b17
- button.background#44475a
- button.foreground#f8f8f2
- button.secondaryBackground#090b17
- button.secondaryForeground#f8f8f2
- button.secondaryHoverBackground#343746
- debugToolBar.background#21222c
- diffEditor.insertedTextBackground#50fa7b20
- diffEditor.removedTextBackground#ff555550
- dropdown.background#343746
- dropdown.border#090b17
- dropdown.foreground#f8f8f2
- editor.background#090b17
- editor.findMatchBackground#ffb86c80
- editor.findMatchHighlightBackground#ffffff40
- editor.findRangeHighlightBackground#44475a75
- editor.foldBackground#21222c80
- editor.foreground#f8f8f2
- editor.hoverHighlightBackground#8be9fd50
- editor.lineHighlightBorder#44475a
- editor.rangeHighlightBackground#bd93f915
- editor.selectionBackground#44475a
- editor.selectionHighlightBackground#424450
- editor.snippetFinalTabstopHighlightBackground#090b17
- editor.snippetFinalTabstopHighlightBorder#50fa7b
- editor.snippetTabstopHighlightBackground#090b17
- editor.snippetTabstopHighlightBorder#6272a4
- editor.wordHighlightBackground#8be9fd50
- editor.wordHighlightStrongBackground#50fa7b50
- editorBracketHighlight.foreground1#f8f8f2
- editorBracketHighlight.foreground2#ff79c6
- editorBracketHighlight.foreground3#8be9fd
- editorBracketHighlight.foreground4#50fa7b
- editorBracketHighlight.foreground5#bd93f9
- editorBracketHighlight.foreground6#ffb86c
- editorBracketHighlight.unexpectedBracket.foreground#ff5555
- editorCodeLens.foreground#6272a4
- editorError.foreground#ff5555
- editorGroup.border#bd93f9
- editorGroup.dropBackground#44475a70
- editorGroupHeader.tabsBackground#090b17
- editorGutter.addedBackground#50fa7b80
- editorGutter.deletedBackground#ff555580
- editorGutter.modifiedBackground#8be9fd80
- editorHoverWidget.background#090b17
- editorHoverWidget.border#6272a4
- editorIndentGuide.activeBackground#ffffff45
- editorIndentGuide.background#ffffff1a
- editorLineNumber.foreground#6272a4
- editorLink.activeForeground#8be9fd
- editorMarkerNavigation.background#21222c
- editorOverviewRuler.addedForeground#50fa7b80
- editorOverviewRuler.border#090b17
- editorOverviewRuler.currentContentForeground#50fa7b
- editorOverviewRuler.deletedForeground#ff555580
- editorOverviewRuler.errorForeground#ff555580
- editorOverviewRuler.incomingContentForeground#bd93f9
- editorOverviewRuler.infoForeground#8be9fd80
- editorOverviewRuler.modifiedForeground#8be9fd80
- editorOverviewRuler.selectionHighlightForeground#ffb86c
- editorOverviewRuler.warningForeground#ffb86c80
- editorOverviewRuler.wordHighlightForeground#8be9fd
- editorOverviewRuler.wordHighlightStrongForeground#50fa7b
- editorRuler.foreground#ffffff1a
- editorSuggestWidget.background#21222c
- editorSuggestWidget.foreground#f8f8f2
- editorSuggestWidget.selectedBackground#44475a
- editorWarning.foreground#8be9fd
- editorWhitespace.foreground#ffffff1a
- editorWidget.background#21222c
- errorForeground#ff5555
- extensionButton.prominentBackground#50fa7b90
- extensionButton.prominentForeground#f8f8f2
- extensionButton.prominentHoverBackground#50fa7b60
- focusBorder#6272a4
- foreground#f8f8f2
- gitDecoration.conflictingResourceForeground#ffb86c
- gitDecoration.deletedResourceForeground#ff5555
- gitDecoration.ignoredResourceForeground#6272a4
- gitDecoration.modifiedResourceForeground#8be9fd
- gitDecoration.untrackedResourceForeground#50fa7b
- input.background#090b17
- input.border#090b17
- input.foreground#f8f8f2
- input.placeholderForeground#6272a4
- inputOption.activeBorder#bd93f9
- inputValidation.errorBorder#ff5555
- inputValidation.infoBorder#ff79c6
- inputValidation.warningBorder#ffb86c
- list.activeSelectionBackground#44475a
- list.activeSelectionForeground#f8f8f2
- list.dropBackground#44475a
- list.errorForeground#ff5555
- list.focusBackground#44475a75
- list.highlightForeground#8be9fd
- list.hoverBackground#44475a75
- list.inactiveSelectionBackground#44475a75
- list.warningForeground#ffb86c
- listFilterWidget.background#343746
- listFilterWidget.noMatchesOutline#ff5555
- listFilterWidget.outline#424450
- merge.currentHeaderBackground#50fa7b90
- merge.incomingHeaderBackground#bd93f990
- panel.background#090b17
- panel.border#bd93f9
- panelTitle.activeBorder#ff79c6
- panelTitle.activeForeground#f8f8f2
- panelTitle.inactiveForeground#6272a4
- peekView.border#44475a
- peekViewEditor.background#090b17
- peekViewEditor.matchHighlightBackground#f1fa8c80
- peekViewResult.background#21222c
- peekViewResult.fileForeground#f8f8f2
- peekViewResult.lineForeground#f8f8f2
- peekViewResult.matchHighlightBackground#f1fa8c80
- peekViewResult.selectionBackground#44475a
- peekViewResult.selectionForeground#f8f8f2
- peekViewTitle.background#090b17
- peekViewTitleDescription.foreground#6272a4
- peekViewTitleLabel.foreground#f8f8f2
- pickerGroup.border#bd93f9
- pickerGroup.foreground#8be9fd
- progressBar.background#ff79c6
- scrollbar.shadow#8be8fd86
- selection.background#bd93f9
- settings.checkboxBackground#21222c
- settings.checkboxBorder#090b17
- settings.checkboxForeground#f8f8f2
- settings.dropdownBackground#21222c
- settings.dropdownBorder#090b17
- settings.dropdownForeground#f8f8f2
- settings.headerForeground#f8f8f2
- settings.modifiedItemIndicator#ffb86c
- settings.numberInputBackground#21222c
- settings.numberInputBorder#090b17
- settings.numberInputForeground#f8f8f2
- settings.textInputBackground#21222c
- settings.textInputBorder#090b17
- settings.textInputForeground#f8f8f2
- sideBar.background#090b17
- sideBarSectionHeader.background#090b17
- sideBarSectionHeader.border#090b17
- sideBarTitle.foreground#f8f8f2
- statusBar.background#090b17
- statusBar.debuggingBackground#ff5555
- statusBar.debuggingForeground#090b17
- statusBar.foreground#f8f8f2
- statusBar.noFolderBackground#090b17
- statusBar.noFolderForeground#f8f8f2
- statusBarItem.prominentBackground#ff5555
- statusBarItem.prominentHoverBackground#ffb86c
- statusBarItem.remoteBackground#bd93f9
- statusBarItem.remoteForeground#090b17
- tab.activeBackground#090b17
- tab.activeBorderTop#ff79c6
- tab.activeForeground#f8f8f2
- tab.border#090b17
- tab.inactiveBackground#090b17
- tab.inactiveForeground#6272a4
- terminal.ansiBlack#21222c
- terminal.ansiBlue#bd93f9
- terminal.ansiBrightBlack#6272a4
- terminal.ansiBrightBlue#d6acff
- terminal.ansiBrightCyan#a4ffff
- terminal.ansiBrightGreen#69ff94
- terminal.ansiBrightMagenta#ff92df
- terminal.ansiBrightRed#ff6e6e
- terminal.ansiBrightWhite#ffffff
- terminal.ansiBrightYellow#ffffa5
- terminal.ansiCyan#8be9fd
- terminal.ansiGreen#50fa7b
- terminal.ansiMagenta#ff79c6
- terminal.ansiRed#ff5555
- terminal.ansiWhite#f8f8f2
- terminal.ansiYellow#f1fa8c
- terminal.background#090b17
- terminal.foreground#f8f8f2
- titleBar.activeBackground#21222c
- titleBar.activeForeground#f8f8f2
- titleBar.inactiveBackground#090b17
- titleBar.inactiveForeground#6272a4
- walkThrough.embeddedEditorBackground#21222c
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| emphasis | — | italic |
| strong | — | bold |
| header | #BD93F9 | — |
| meta.diff, meta.diff.header | #6272A4 | — |
| markup.inserted | #50FA7B | — |
| markup.deleted | #FF5555 | — |
| markup.changed | #FFB86C | — |
| invalid | #FF5555 | underline italic |
| invalid.deprecated | #F8F8F2 | underline italic |
| entity.name.filename | #F1FA8C | — |
| markup.error | #FF5555 | — |
| markup.underline | — | underline |
| markup.bold | #FFB86C | bold |
| markup.heading | #BD93F9 | bold |
| markup.italic | #F1FA8C | italic |
| beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext | #8BE9FD | — |
| markup.inline.raw, markup.raw.restructuredtext | #50FA7B | — |
| markup.underline.link, markup.underline.link.image | #8BE9FD | — |
| meta.link.reference.def.restructuredtext, punctuation.definition.directive.restructuredtext, string.other.link.description, string.other.link.title | #FF79C6 | — |
| entity.name.directive.restructuredtext, markup.quote | #F1FA8C | italic |
| meta.separator.markdown | #6272A4 | — |
| fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown | #50FA7B | — |
| punctuation.definition.constant.restructuredtext | #BD93F9 | — |
| markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end | #BD93F9 | — |
| meta.paragraph.markdown punctuation.definition.string.begin, meta.paragraph.markdown punctuation.definition.string.end | #F8F8F2 | — |
| markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.begin, markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.end | #F1FA8C | — |
| entity.name.type.class, entity.name.class | #8BE9FD | normal |
| keyword.expressions-and-types.swift, keyword.other.this, variable.language, variable.language punctuation.definition.variable.php, variable.other.readwrite.instance.ruby, variable.parameter.function.language.special | #BD93F9 | italic |
| entity.other.inherited-class | #8BE9FD | italic |
| comment, punctuation.definition.comment, unused.comment, wildcard.comment | #6272A4 | — |
| comment keyword.codetag.notation, comment.block.documentation keyword, comment.block.documentation storage.type.class | #FF79C6 | — |
| comment.block.documentation entity.name.type | #8BE9FD | italic |
| comment.block.documentation entity.name.type punctuation.definition.bracket | #8BE9FD | — |
| comment.block.documentation variable | #FFB86C | italic |
| constant, variable.other.constant | #BD93F9 | — |
| constant.character.escape, constant.character.string.escape, constant.regexp | #FF79C6 | — |
| entity.name.tag | #FF79C6 | — |
| entity.other.attribute-name.parent-selector | #FF79C6 | — |
| entity.other.attribute-name | #50FA7B | italic |
| entity.name.function, meta.function-call.object, meta.function-call.php, meta.function-call.static, meta.method-call.java meta.method, meta.method.groovy, support.function.any-method.lua, keyword.operator.function.infix | #50FA7B | — |
| entity.name.variable.parameter, meta.at-rule.function variable, meta.at-rule.mixin variable, meta.function.arguments variable.other.php, meta.selectionset.graphql meta.arguments.graphql variable.arguments.graphql, variable.parameter | #FFB86C | italic |
| meta.decorator variable.other.readwrite, meta.decorator variable.other.property | #50FA7B | italic |
| meta.decorator variable.other.object | #50FA7B | — |
| keyword, punctuation.definition.keyword | #FF79C6 | — |
| keyword.control.new, keyword.operator.new | — | bold |
| meta.selector | #FF79C6 | — |
| support | #8BE9FD | italic |
| support.function.magic, support.variable, variable.other.predefined | #BD93F9 | regular |
| support.function, support.type.property-name | — | regular |
| constant.other.symbol.hashkey punctuation.definition.constant.ruby, entity.other.attribute-name.placeholder punctuation, entity.other.attribute-name.pseudo-class punctuation, entity.other.attribute-name.pseudo-element punctuation, meta.group.double.toml, meta.group.toml, meta.object-binding-pattern-variable punctuation.destructuring, punctuation.colon.graphql, punctuation.definition.block.scalar.folded.yaml, punctuation.definition.block.scalar.literal.yaml, punctuation.definition.block.sequence.item.yaml, punctuation.definition.entity.other.inherited-class, punctuation.function.swift, punctuation.separator.dictionary.key-value, punctuation.separator.hash, punctuation.separator.inheritance, punctuation.separator.key-value, punctuation.separator.key-value.mapping.yaml, punctuation.separator.namespace, punctuation.separator.pointer-access, punctuation.separator.slice, string.unquoted.heredoc punctuation.definition.string, support.other.chomping-indicator.yaml, punctuation.separator.annotation | #FF79C6 | — |
| keyword.operator.other.powershell, keyword.other.statement-separator.powershell, meta.brace.round, meta.function-call punctuation, punctuation.definition.arguments.begin, punctuation.definition.arguments.end, punctuation.definition.entity.begin, punctuation.definition.entity.end, punctuation.definition.tag.cs, punctuation.definition.type.begin, punctuation.definition.type.end, punctuation.section.scope.begin, punctuation.section.scope.end, punctuation.terminator.expression.php, storage.type.generic.java, string.template meta.brace, string.template punctuation.accessor | #F8F8F2 | — |
| meta.string-contents.quoted.double punctuation.definition.variable, punctuation.definition.interpolation.begin, punctuation.definition.interpolation.end, punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded.begin, punctuation.section.embedded.coffee, punctuation.section.embedded.end, punctuation.section.embedded.end source.php, punctuation.section.embedded.end source.ruby, punctuation.definition.variable.makefile | #FF79C6 | — |
| entity.name.function.target.makefile, entity.name.section.toml, entity.name.tag.yaml, variable.other.key.toml | #8BE9FD | — |
| constant.other.date, constant.other.timestamp | #FFB86C | — |
| variable.other.alias.yaml | #50FA7B | italic underline |
| storage, meta.implementation storage.type.objc, meta.interface-or-protocol storage.type.objc, source.groovy storage.type.def | #FF79C6 | regular |
| entity.name.type, keyword.primitive-datatypes.swift, keyword.type.cs, meta.protocol-list.objc, meta.return-type.objc, source.go storage.type, source.groovy storage.type, source.java storage.type, source.powershell entity.other.attribute-name, storage.class.std.rust, storage.type.attribute.swift, storage.type.c, storage.type.core.rust, storage.type.cs, storage.type.groovy, storage.type.objc, storage.type.php, storage.type.haskell, storage.type.ocaml | #8BE9FD | italic |
| entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type | #FFB86C | — |
| storage.modifier | #FF79C6 | — |
| string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp | #F1FA8C | — |
| punctuation.definition.group.capture.regexp | #FF79C6 | — |
| string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end | #FF5555 | — |
| punctuation.definition.character-class.regexp | #8BE9FD | — |
| punctuation.definition.group.regexp | #FFB86C | — |
| punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp | #FF5555 | — |
| meta.assertion.look-ahead.regexp | #50FA7B | — |
| string | #F1FA8C | — |
| punctuation.definition.string.begin, punctuation.definition.string.end | #E9F284 | — |
| punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end | #8BE9FE | — |
| string.quoted.docstring.multi, string.quoted.docstring.multi.python punctuation.definition.string.begin, string.quoted.docstring.multi.python punctuation.definition.string.end, string.quoted.docstring.multi.python constant.character.escape | #6272A4 | — |
| variable, constant.other.key.perl, support.variable.property, variable.other.constant.js, variable.other.constant.ts, variable.other.constant.tsx | #F8F8F2 | — |
| meta.import variable.other.readwrite, meta.variable.assignment.destructured.object.coffee variable | #FFB86C | italic |
| meta.import variable.other.readwrite.alias, meta.export variable.other.readwrite.alias, meta.variable.assignment.destructured.object.coffee variable variable | #F8F8F2 | normal |
| meta.selectionset.graphql variable | #F1FA8C | — |
| meta.selectionset.graphql meta.arguments variable | #F8F8F2 | — |
| entity.name.fragment.graphql, variable.fragment.graphql | #8BE9FD | — |
| constant.other.symbol.hashkey.ruby, keyword.operator.dereference.java, keyword.operator.navigation.groovy, meta.scope.for-loop.shell punctuation.definition.string.begin, meta.scope.for-loop.shell punctuation.definition.string.end, meta.scope.for-loop.shell string, storage.modifier.import, punctuation.section.embedded.begin.tsx, punctuation.section.embedded.end.tsx, punctuation.section.embedded.begin.jsx, punctuation.section.embedded.end.jsx, punctuation.separator.list.comma.css, constant.language.empty-list.haskell | #F8F8F2 | — |
| source.shell variable.other | #BD93F9 | — |
| support.constant | #BD93F9 | normal |
| meta.scope.prerequisites.makefile | #F1FA8C | — |
| meta.attribute-selector.scss | #F1FA8C | — |
| punctuation.definition.attribute-selector.end.bracket.square.scss, punctuation.definition.attribute-selector.begin.bracket.square.scss | #F8F8F2 | — |
| meta.preprocessor.haskell | #6272A4 | — |
| log.error | #FF5555 | bold |
| log.warning | #F1FA8C | bold |
| token.info-token | #6796E6 | — |
| token.warn-token | #CD9731 | — |
| token.error-token | #F44747 | — |
| token.debug-token | #B267E6 | — |
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#224439
- activityBar.activeBorder#43ffc762
- activityBar.background#284e41
- activityBar.border#25463b
- activityBar.foreground#ffffff
- activityBar.inactiveForeground#99e9c8
- activityBarBadge.background#fad000
- activityBarBadge.foreground#1e3f33
- badge.background#fad000
- badge.foreground#1e3f33
- breadcrumb.activeSelectionForeground#ffffff
- breadcrumb.focusForeground#fad000
- breadcrumb.foreground#99e9c8
- breadcrumbPicker.background#1e3f33
- button.background#fad000
- button.foreground#224439
- button.hoverBackground#62ff67
- contrastActiveBorder#ffffff00
- contrastBorder#ffffff00
- debugExceptionWidget.background#1e3f33
- debugExceptionWidget.border#99e9c8
- debugIcon.continueForeground#fad000
- debugIcon.disconnectForeground#fad000
- debugIcon.pauseForeground#fad000
- debugIcon.restartForeground#3ad900
- debugIcon.startForeground#fad000
- debugIcon.stepBackForeground#fad000
- debugIcon.stepIntoForeground#fad000
- debugIcon.stepOutForeground#fad000
- debugIcon.stepOverForeground#fad000
- debugIcon.stopForeground#ec3a37f5
- debugToolBar.background#1e3f33
- descriptionForeground#99e9c8
- diffEditor.insertedTextBackground#00ff000e
- diffEditor.insertedTextBorder#00ff009a
- diffEditor.removedTextBackground#ff000d1a
- diffEditor.removedTextBorder#ff000d81
- dropdown.background#1e3f33
- dropdown.border#1e3f33
- dropdown.foreground#ffffff
- editor.background#00130c
- editor.findMatchBackground#ff7300ab
- editor.findMatchHighlightBackground#ffff0336
- editor.findRangeHighlightBackground#ffff0336
- editor.foreground#ffffff
- editor.hoverHighlightBackground#ff730056
- editor.inactiveSelectionBackground#75b897c0
- editor.lineHighlightBackground#1f4136
- editor.lineHighlightBorder#1f4136
- editor.linkedEditingBackground#46df9daa
- editor.rangeHighlightBackground#1f4136
- editor.selectionBackground#62ff6788
- editor.selectionHighlightBackground#46df9d46
- editor.snippetFinalTabstopHighlightBackground#43ffc762
- editor.snippetFinalTabstopHighlightBorder#43ffc762
- editor.snippetTabstopHighlightBackground#43ffc762
- editor.snippetTabstopHighlightBorder#43ffc762
- editor.wordHighlightBackground#ffffff0d
- editor.wordHighlightStrongBackground#ffffff0d
- editorBracketMatch.background#70fccb46
- editorBracketMatch.border#70fccb46
- editorCodeLens.foreground#99e9c8
- editorCursor.foreground#fad000
- editorError.foreground#ec3a37f5
- editorGroup.border#224439
- editorGroup.dropBackground#224439d0
- editorGroupHeader.noTabsBackground#00130c
- editorGroupHeader.tabsBackground#00130c
- editorGroupHeader.tabsBorder#1f4136
- editorGutter.addedBackground#35ad68
- editorGutter.background#00130c
- editorGutter.deletedBackground#ec3a37f5
- editorGutter.modifiedBackground#70fccb46
- editorHoverWidget.background#16332a
- editorHoverWidget.border#16332a
- editorIndentGuide.activeBackground#99e9c842
- editorIndentGuide.background#99e9c80f
- editorLineNumber.foreground#99e9c8
- editorLink.activeForeground#99e9c8
- editorMarkerNavigation.background#3b536433
- editorMarkerNavigationError.background#ec3a37f5
- editorMarkerNavigationWarning.background#fad000
- editorOverviewRuler.border#99e9c81c
- editorOverviewRuler.commonContentForeground#ffc60055
- editorOverviewRuler.currentContentForeground#ee3a4355
- editorOverviewRuler.incomingContentForeground#3ad90055
- editorRuler.foreground#99e9c81c
- editorSuggestWidget.background#1f4136
- editorSuggestWidget.border#1f4136
- editorSuggestWidget.foreground#99e9c8
- editorSuggestWidget.highlightForeground#fad000
- editorSuggestWidget.selectedBackground#00130c
- editorWarning.border#ffffff00
- editorWarning.foreground#fad000
- editorWhitespace.foreground#ffffff1a
- editorWidget.background#224439
- editorWidget.border#1f4136
- errorForeground#ec3a37f5
- extensionButton.prominentBackground#37f075
- extensionButton.prominentForeground#ffffff
- extensionButton.prominentHoverBackground#ff9d00
- focusBorder#1e3f33
- foreground#99e9c8
- gitDecoration.conflictingResourceForeground#ff7200
- gitDecoration.deletedResourceForeground#ec3a37f5
- gitDecoration.ignoredResourceForeground#99e9c881
- gitDecoration.modifiedResourceForeground#fad000
- gitDecoration.untrackedResourceForeground#3ad900
- input.background#00130c
- input.border#1e3f33
- input.foreground#fad000
- input.placeholderForeground#99e9c8
- inputOption.activeBackground#37f075
- inputOption.activeBorder#1e3f33
- inputValidation.errorBackground#00130c
- inputValidation.errorBorder#fad000
- inputValidation.infoBackground#00130c
- inputValidation.infoBorder#00130c
- inputValidation.warningBackground#00130c
- inputValidation.warningBorder#fad000
- list.activeSelectionBackground#00130c
- list.activeSelectionForeground#ffffff
- list.dropBackground#00130c
- list.focusBackground#00130c
- list.focusForeground#ffffff
- list.highlightForeground#fad000
- list.hoverBackground#00130c
- list.hoverForeground#c5fff1
- list.inactiveSelectionBackground#00130c
- list.inactiveSelectionForeground#aaaaaa
- listFilterWidget.background#00130c
- listFilterWidget.noMatchesOutline#ec3a37f5
- listFilterWidget.outline#00130c
- menu.separatorBackground#99e9c8
- merge.border#ffffff00
- merge.commonContentBackground#99e9c881
- merge.commonHeaderBackground#99e9c881
- merge.currentContentBackground#3ad90093
- merge.currentHeaderBackground#3ad90093
- merge.incomingContentBackground#ff730086
- merge.incomingHeaderBackground#ff730086
- notificationCenter.border#1e3f33
- notificationCenterHeader.background#43ffc7
- notificationCenterHeader.foreground#ffffff
- notificationLink.foreground#ffffff
- notifications.background#1e3f33
- notifications.border#00130c
- notifications.foreground#c5fff1
- notificationToast.border#1e3f33
- panel.background#1e3f33
- panel.border#fad000
- panelTitle.activeBorder#fad000
- panelTitle.activeForeground#fad000
- panelTitle.inactiveForeground#99e9c8
- peekView.border#fad000
- peekViewEditor.background#1e3f33
- peekViewEditor.matchHighlightBackground#19354900
- peekViewEditorGutter.background#191935
- peekViewResult.background#1e3f33
- peekViewResult.fileForeground#aaaaaa
- peekViewResult.lineForeground#ffffff
- peekViewResult.matchHighlightBackground#00130c
- peekViewResult.selectionBackground#00130c
- peekViewResult.selectionForeground#ffffff
- peekViewTitle.background#1f4136
- peekViewTitleDescription.foreground#aaaaaa
- peekViewTitleLabel.foreground#fad000
- pickerGroup.border#1e3f33
- pickerGroup.foreground#99e9c8
- progressBar.background#fad000
- scrollbar.shadow#99e9c881
- scrollbarSlider.activeBackground#fad000
- scrollbarSlider.background#99e9c881
- scrollbarSlider.hoverBackground#21fca4
- selection.background#62ff67
- settings.checkboxBackground#1e3f33
- settings.checkboxBorder#1e3f33
- settings.checkboxForeground#e5e4fb
- settings.dropdownBackground#1e3f33
- settings.dropdownBorder#1e3f33
- settings.dropdownForeground#e5e4fb
- settings.dropdownListBorder#00130c
- settings.headerForeground#ffffff
- settings.modifiedItemIndicator#fad000
- settings.numberInputBackground#1e3f33
- settings.numberInputBorder#1e3f33
- settings.numberInputForeground#e5e4fb
- settings.textInputBackground#1e3f33
- settings.textInputBorder#1e3f33
- settings.textInputForeground#e5e4fb
- sideBar.background#224439
- sideBar.border#25254b
- sideBar.foreground#99e9c8
- sideBarSectionHeader.background#1e3f33
- sideBarSectionHeader.border#1e3f33
- sideBarSectionHeader.foreground#99e9c8
- sideBarTitle.foreground#99e9c8
- statusBar.background#1e3f33
- statusBar.border#1e3f33
- statusBar.debuggingBackground#fad000
- statusBar.debuggingForeground#1e3f33
- statusBar.foreground#99e9c8
- statusBar.noFolderBackground#1e3f33
- statusBar.noFolderForeground#99e9c8
- statusBarItem.activeBackground#21fca4
- statusBarItem.hoverBackground#21fca4
- statusBarItem.prominentBackground#1e3f33
- statusBarItem.prominentHoverBackground#00130c
- tab.activeBackground#00130c
- tab.activeBorder#fad000
- tab.activeForeground#ffffff
- tab.activeModifiedBorder#99e9c8
- tab.border#1e3f33
- tab.inactiveBackground#00130c
- tab.inactiveForeground#99e9c8
- tab.inactiveModifiedBorder#99e9c866
- tab.unfocusedActiveForeground#99e9c8
- tab.unfocusedActiveModifiedBorder#99e9c866
- tab.unfocusedInactiveForeground#99e9c8
- tab.unfocusedInactiveModifiedBorder#99e9c866
- terminal.ansiBlack#000000
- terminal.ansiBlue#43ffc7
- terminal.ansiBrightBlack#5c5c61
- terminal.ansiBrightBlue#43ffc7
- terminal.ansiBrightCyan#80fcff
- terminal.ansiBrightGreen#3ad900
- terminal.ansiBrightMagenta#fb94ff
- terminal.ansiBrightRed#ec3a37f5
- terminal.ansiBrightWhite#ffffff
- terminal.ansiBrightYellow#fad000
- terminal.ansiCyan#80fcff
- terminal.ansiGreen#3ad900
- terminal.ansiMagenta#ff2c70
- terminal.ansiRed#ec3a37f5
- terminal.ansiWhite#ffffff
- terminal.ansiYellow#fad000
- terminal.background#1e3f33
- terminal.foreground#ffffff
- terminalCursor.background#fad000
- terminalCursor.foreground#fad000
- textBlockQuote.background#1e3f33
- textBlockQuote.border#43ffc7
- textCodeBlock.background#1e3f33
- textLink.activeForeground#62ff67
- textLink.foreground#62ff67
- textPreformat.foreground#fad000
- textSeparator.foreground#1e3f33
- titleBar.activeBackground#1e3f33
- titleBar.activeForeground#ffffff
- titleBar.inactiveBackground#1e3f33
- titleBar.inactiveForeground#99e9c8
- walkThrough.embeddedEditorBackground#1e3f33
- widget.shadow#00000026
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| comment, punctuation.definition.comment | #62ff67 | — |
| entity | #FAD000 | — |
| constant | #FF628C | — |
| keyword, storage.type.class.js | #FF9D00 | — |
| meta | #9EFFFF | — |
| invalid | #EC3A37F5 | — |
| meta.brace, punctuation.definition.parameters.begin.js, punctuation.definition.parameters.end.js | #E1EFFF | — |
| punctuation | #E1EFFF | — |
| punctuation.definition.parameters | #FFEE80 | — |
| punctuation.definition.template-expression | #FFEE80 | — |
| storage | #FAD000 | — |
| storage.type.function.arrow | #FAD000 | — |
| string, punctuation.definition.string | #A5FF90 | — |
| string.template, punctuation.definition.string.template | #3AD900 | — |
| support | #80FFBB | — |
| support.function | #FF9D00 | — |
| support.variable.property.dom | #9EFFFF | — |
| variable | #E1EFFF | — |
| source.ini entity, meta.embedded.block.ini, source.ini | #E1EFFF | — |
| source.ini keyword, keyword.other.definition.ini | #FAD000 | — |
| source.ini punctuation.definition | #FFEE80 | — |
| source.ini punctuation.separator, punctuation.separator.key-value.ini | #FF9D00 | — |
| source.css entity, source.stylus entity | #3AD900 | — |
| entity.other.attribute-name.class.css | #9EFFFF | — |
| entity.other.attribute-name.id.css, entity.other.attribute-name.pseudo-class.css | #FFB454 | — |
| entity.name.tag | #9EFFFF | — |
| source.css support, entity.name.tag.css, source.stylus support | #A5FF90 | — |
| source.css constant, source.css support.constant, source.stylus constant, source.stylus support.constant | #FFEE80 | — |
| source.css string, source.css punctuation.definition.string, source.stylus string, source.stylus punctuation.definition.string | #FFEE80 | — |
| source.css variable, source.stylus variable | #9EFFFF | — |
| text.html.basic entity.name, punctuation.definition.tag.html, entity.name.tag.inline.any.html, meta.tag.other.html, meta.tag.inline.any.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, entity.name.tag, meta.tag.other.html, meta.tag.other.js, meta.tag.other.tsx, entity.name.tag.tsx, entity.name.tag.js, entity.name.tag, meta.tag.js, meta.tag.tsx, meta.tag.html | #9EFFFF | — |
| meta.toc-list.id.html | #A5FF90 | — |
| text.html.basic entity.other | #FAD000 | — |
| meta.tag.metadata.script.html entity.name.tag.html | #FAD000 | — |
| punctuation.definition.string.begin, punctuation.definition.string.end | #92FC79 | — |
| meta.tag.inline.any.html, meta.tag.other | #FF9D00 | — |
| source.json support | #FAD000 | — |
| source.json string, source.json punctuation.definition.string | #92FC79 | — |
| source.js storage.type.function | #FB94FF | — |
| variable.language, entity.name.type.class.js | #FB94FF | — |
| entity.other.inherited-class | #FFEE80 | — |
| storage.type.extends.js, storage.type.class.jsdoc | #FF9D00 | — |
| punctuation.definition.block.tag.jsdoc | #FF9D00 | — |
| variable.other.jsdoc, entity.name.type.instance.jsdoc | #9EFFFF | — |
| variable.other.constant | #9EFFFF | — |
| punctuation.definition.tag.begin.js, punctuation.definition.tag.end.js | #9EFFFF | — |
| meta.jsx.children.js | #FFFFFF | — |
| storage.type, storage.type.class, storage.modifier, keyword.control, keyword.operator | #FF9D00 | — |
| punctuation.definition.bracket.curly | #494685 | — |
| keyword.operator.assignment.tsx, keyword.operator.assignment.jsx | #FF9D00 | — |
| keyword.operator.assignment | #FF9D00 | — |
| meta.jsx.children.tsx | #FFFFFF | — |
| meta.object-literal.key.js | #80FFBB | — |
| entity.name.type.class.tsx, entity.name.type.class.jsx, variable.other.readwrite.alias.tsx, variable.other.readwrite.tsx, variable.other.readwrite.alias.ts, variable.other.readwrite.alias.jsx, variable.other.readwrite.alias.js, variable.other.object.tsx, variable.other.object.jsx, variable.other.object, support.class.component.tsx, support.class.component.jsx, entity.name.type.tsx, entity.name.type.jsx, variable.other.readwrite, variable.other.object.js | #9EFFFF | — |
| variable.other.property, variable.other.object.property | #FFEE80 | — |
| JSXNested | #FFFFFF | — |
| variable.parameter | #9EFFFF | — |
| variable.parameter.function.language.special.self.python | #9EFFFF | — |
| meta.function-call.python, meta.function-call.generic.python, support.function.builtin.python | #FAD000 | — |
| source.ts entity.name.type | #80FFBB | — |
| source.ts keyword | #FAD000 | — |
| source.ts punctuation.definition.parameters | #E1EFFF | — |
| meta.arrow.ts punctuation.definition.parameters | #FFEE80 | — |
| source.ts storage | #9EFFFF | — |
| entity.name.section.markdown, markup.heading.setext.1.markdown, markup.heading.setext.2.markdown | #FAD000 | bold |
| markup.inserted.diff, punctuation.definition.inserted.diff | #8EFA00 | — |
| markup.deleted.diff, punctuation.definition.deleted.diff | #F16E6B | — |
| meta.embedded.block.diff | #FFFFFF | — |
| meta.paragraph.markdown | #FFFFFF | — |
| punctuation.definition.from-file.diff, meta.diff.header.from-file | #62ff67 | — |
| markup.inline.raw.string.markdown | #99e9c8 | — |
| beginning.punctuation.definition.quote.markdown | #FAD000 | — |
| markup.quote.markdown meta.paragraph.markdown, punctuation.definition.quote.begin.markdown | #99e9c8 | — |
| meta.separator.markdown | #FAD000 | — |
| markup.bold.markdown | — | bold |
| markup.italic.markdown | — | italic |
| beginning.punctuation.definition.list.markdown, punctuation.definition.list.begin.markdown, markup.list.unnumbered.markdown | #FAD000 | — |
| string.other.link.description.title.markdown punctuation.definition.string.markdown, meta.link.inline.markdown string.other.link.description.title.markdown, string.other.link.description.title.markdown punctuation.definition.string.begin.markdown, string.other.link.description.title.markdown punctuation.definition.string.end.markdown, meta.image.inline.markdown string.other.link.description.title.markdown | #A5FF90 | |
| meta.link.inline.markdown string.other.link.title.markdown, meta.link.reference.markdown string.other.link.title.markdown, meta.link.reference.def.markdown markup.underline.link.markdown | #FAD000 | underline |
| markup.underline.link.markdown, string.other.link.description.title.markdown | #99e9c8 | — |
| fenced_code.block.language, markup.inline.raw.markdown | #9EFFFF | — |
| punctuation.definition.markdown, punctuation.definition.raw.markdown, punctuation.definition.heading.markdown, punctuation.definition.bold.markdown, punctuation.definition.italic.markdown | #494685 | — |
| meta.link.inline.markdown punctuation.definition.string.begin.markdown, meta.link.inline.markdown punctuation.definition.string.end.markdown, meta.link.reference.markdown punctuation.definition.string.begin.markdown, meta.link.reference.markdown punctuation.definition.string.end.markdown, string.other.link.description.markdown | #FAD000 | — |
| meta.image.inline.markdown punctuation.definition.string.begin.markdown, meta.image.inline.markdown punctuation.definition.string.end.markdown, string.other.link.description.markdown | #FF9D00 | — |
| markup.underline.link.markdown, punctuation.definition.metadata.markdown, markup.underline.link.image.markdown, constant.other.reference.link.markdown, punctuation.definition.constant.markdown, punctuation.definition.constant.begin.markdown, punctuation.definition.constant.end.markdown | #99e9c8 | — |
| text.jade entity.name | #9EFFFF | — |
| storage.type.function.pug | #FF9D00 | — |
| variable.parameter.function.js | #9EFFFF | — |
| variable.control.import.include.pug | #92FC79 | — |
| text.jade string.interpolated | #FFEE80 | — |
| storage.type.cs | #9EFFFF | — |
| entity.name.variable.property.cs | #9EFFFF | — |
| storage.modifier.cs | #80FFBB | — |
| source.php entity, variable.other.class.php | #9EFFFF | — |
| keyword.other.phpdoc.php | #FF9D00 | — |
| entity.name.function.php, support.function.basic_functions.php, meta.function-call.php, variable.other.property | #FAD000 | — |
| variable.other.php, punctuation.definition.variable.php, variable.other.global.php, variable.language.this.php | #9EFFFF | — |
| storage.modifier.php, keyword.other.namespace.php | #FF9D00 | — |
| entity.name.tag.yaml | #FAD000 | — |
| punctuation.definition.block.sequence.item.yaml | #E1EFFF | — |
| storage.type.function.php, meta.function.parameters.php | #FB94FF | — |
| keyword.blade | #FF9D00 | — |
| begin.bracket.round.blade.php, end.bracket.round.blade.php | #E1EFFF | — |
| support.function.construct.begin.blade, support.function.construct.end.blade | #FFEE80 | — |
| keyword.package.go, keyword.import.go | #FF9D00 | — |
| keyword.function.go | #FB94FF | — |
| variable.other.assignment.go | #9EFFFF | — |
| punctuation.definition.string.begin.go, punctuation.definition.string.end.go, support.function.go | #FAD000 | — |
| punctuation.section.embedded.end.ruby, punctuation.section.embedded.begin.ruby, punctuation.section.scope.begin.ruby, punctuation.section.scope.end.ruby | #FFEE80 | — |
| variable.other.constant.ruby | #80FFBB | — |
| entity.name.type.class.ruby | #FB94FF | — |
| variable.other.block.ruby, variable.other.ruby | #9EFFFF | — |
| punctuation.separator.other.ruby | #FF9D00 | — |
| keyword.other.special-method.ruby | #FFEE80 | — |
| storage.type.function.shell | #FB94FF | — |
| variable.other.special.shell, punctuation.definition.variable.shell | #FF9D00 | — |
| variable.graphql | #FAEFA5 | — |
| keyword.operation.graphql | #FB94FF | — |
| source.sql | #E1EFFF | — |
| source.sql keyword.other, support.function.mysqli.php | #FAEFA5 | — |
| support.function.mysqli.php, source.sql support.function | #FAD000 | — |
| string.regexp, string.regexp keyword.other | #E1EFFF | — |
| keyword.other.DML.sql | #FF9D00 | — |
| punctuation.definition.table.array.toml | #E1EFFF | — |
| entity.other.attribute-name.table.array.toml, entity.other.attribute-name.table.toml | #FF9D00 | — |
| keyword.key.toml | #FAD000 | — |
| keyword.other.special-method.dockerfile | #FAD000 | — |
| keyword.other.rust | #FF9D00 | — |
| keyword.other.fn.rust | #FB94FF | — |
| keyword.other.env | #FF9D00 | — |
| variable.other.env | #FAD000 | — |
| source.env | #E1EFFF | — |
| keyword.other.template.begin.env, keyword.other.template.end.env, keyword.operator.assignment.env | #FF9D00 | — |
| variable.object.property | #9EFFFF | — |
| string.regexp.js | #FB94FF | — |
| keyword.rainbow2 | #FF9D00 | — |
| markup.deleted | #F16E6B | — |
| markup.inserted | #8EFA00 | — |
| markup.underline | — | underline |
| modifier, this, comment, storage.modifier, entity.other.attribute-name, entity.other.attribute-name.html, punctuation.definition.comment, text.html.basic entity.other, entity.other.attribute-name, markup.quote.markdown meta.paragraph.markdown, markup.italic.markdown, text.jade entity.other.attribute-name.tag, keyword.control.from, entity.other.attribute-name.tag.pug | — | italic |
| token.info-token | #6796E6 | — |
| token.warn-token | #CD9731 | — |
| token.error-token | #F44747 | — |
| token.debug-token | #B267E6 | — |
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#242b2e
- activityBar.border#30373a
- activityBar.foreground#d4d4d4
- activityBarBadge.background#5986b3
- activityBarBadge.foreground#d4d4d4
- badge.background#30373a
- badge.foreground#d4d4d4
- breadcrumb.activeSelectionForeground#6699cc
- breadcrumb.background#242b2e
- breadcrumb.focusForeground#6699cc
- breadcrumb.foreground#d4d4d4
- breadcrumbPicker.background#1d2325
- button.background#a94348
- button.foreground#d4d4d4
- button.hoverBackground#e15a60
- debugExceptionWidget.background#1d2325
- debugExceptionWidget.border#30373a
- diffEditor.insertedTextBackground#3d4f3b
- diffEditor.insertedTextBorder#ffffff4d
- diffEditor.removedTextBackground#5e2629
- diffEditor.removedTextBorder#ffffff4d
- dropdown.background#242b2e
- dropdown.border#30373a
- dropdown.foreground#d4d4d4
- editor.background#1d2325
- editor.findMatchBackground#ffffff3d
- editor.findMatchHighlightBackground#ffffff1f
- editor.foreground#d4d4d4
- editor.hoverHighlightBackground#ffffff1f
- editor.inactiveSelectionBackground#ffffff1f
- editor.lineHighlightBackground#ffffff0f
- editor.rangeHighlightBackground#30373a
- editor.selectionBackground#ffffff3d
- editor.wordHighlightBackground#ffffff00
- editor.wordHighlightStrongBackground#ffffff00
- editorBracketMatch.background#ffffff00
- editorBracketMatch.border#ffffff4d
- editorCodeLens.foreground#7f7f7f
- editorCursor.foreground#d4d4d4
- editorError.border#242b2e
- editorError.foreground#e15a60
- editorGroup.border#30373a
- editorGroup.dropBackground#30373a
- editorGroup.emptyBackground#242b2e
- editorGroup.focusedEmptyBorder#30373a
- editorGroupHeader.noTabsBackground#30373a
- editorGroupHeader.tabsBackground#1d2325
- editorGroupHeader.tabsBorder#30373a
- editorGutter.addedBackground#99c794
- editorGutter.background#1d2325
- editorGutter.deletedBackground#e15a60
- editorGutter.modifiedBackground#6699cc
- editorHoverWidget.background#1d2325
- editorHoverWidget.border#30373a
- editorIndentGuide.activeBackground#7f7f7f
- editorIndentGuide.background#ffffff1f
- editorLineNumber.activeForeground#7f7f7f
- editorLineNumber.foreground#545454
- editorLink.activeForeground#6699cc
- editorMarkerNavigation.background#1d2325
- editorMarkerNavigationError.background#e15a60
- editorMarkerNavigationWarning.background#fac863
- editorOverviewRuler.addedForeground#99c794
- editorOverviewRuler.border#30373a
- editorOverviewRuler.currentContentForeground#a94348
- editorOverviewRuler.deletedForeground#e15a60
- editorOverviewRuler.errorForeground#e15a60
- editorOverviewRuler.findMatchForeground#ffffff0f
- editorOverviewRuler.incomingContentForeground#a94348
- editorOverviewRuler.infoForeground#6699cc
- editorOverviewRuler.modifiedForeground#6699cc
- editorOverviewRuler.rangeHighlightForeground#ffffff0f
- editorOverviewRuler.selectionHighlightForeground#ffffff0f
- editorOverviewRuler.warningForeground#fac863
- editorOverviewRuler.wordHighlightForeground#ffffff0f
- editorOverviewRuler.wordHighlightStrongForeground#ffffff0f
- editorRuler.foreground#ffffff1f
- editorSuggestWidget.background#1d2325
- editorSuggestWidget.border#30373a
- editorSuggestWidget.foreground#d4d4d4
- editorSuggestWidget.selectedBackground#30373a
- editorWarning.border#242b2e
- editorWarning.foreground#fac863
- editorWhitespace.foreground#545454
- editorWidget.background#1d2325
- editorWidget.border#30373a
- errorForeground#e15a60
- extensionButton.prominentBackground#a94348
- extensionButton.prominentForeground#d4d4d4
- extensionButton.prominentHoverBackground#a94348
- focusBorder#30373a
- foreground#d4d4d4
- gitDecoration.conflictingResourceForeground#e15a60
- gitDecoration.deletedResourceForeground#e15a60
- gitDecoration.ignoredResourceForeground#7f7f7f
- gitDecoration.modifiedResourceForeground#6699cc
- gitDecoration.untrackedResourceForeground#99c794
- input.background#1d2325
- input.border#30373a
- input.foreground#d4d4d4
- input.placeholderForeground#7f7f7f
- inputOption.activeBorder#7f7f7f
- inputValidation.errorBackground#a94348
- inputValidation.errorBorder#30373a
- inputValidation.infoBackground#a94348
- inputValidation.infoBorder#30373a
- inputValidation.warningBackground#a94348
- inputValidation.warningBorder#30373a
- list.activeSelectionBackground#30373a
- list.activeSelectionForeground#d4d4d4
- list.dropBackground#30373a
- list.errorForeground#e15a60
- list.focusBackground#30373a
- list.focusForeground#d4d4d4
- list.highlightForeground#d4d4d4
- list.hoverBackground#30373a
- list.hoverForeground#d4d4d4
- list.inactiveSelectionBackground#30373a
- list.inactiveSelectionForeground#d4d4d4
- list.warningForeground#fac863
- listFilterWidget.background#242b2e
- listFilterWidget.noMatchesOutline#e15a60
- listFilterWidget.outline#30373a
- merge.border#30373a
- merge.currentContentBackground#1d2325
- merge.currentHeaderBackground#1d2325
- merge.incomingContentBackground#1d2325
- merge.incomingHeaderBackground#1d2325
- notificationCenter.border#30373a
- notificationCenterHeader.background#1d2325
- notificationCenterHeader.foreground#d4d4d4
- notificationLink.foreground#6699cc
- notifications.background#1d2325
- notifications.border#30373a
- notifications.foreground#d4d4d4
- notificationToast.border#30373a
- panel.background#242b2e
- panel.border#30373a
- panelTitle.activeBorder#30373a
- panelTitle.activeForeground#d4d4d4
- panelTitle.inactiveForeground#7f7f7f
- peekView.border#30373a
- peekViewEditor.background#1d2325
- peekViewEditor.matchHighlightBackground#ffffff1f
- peekViewEditorGutter.background#1d2325
- peekViewResult.background#1d2325
- peekViewResult.fileForeground#d4d4d4
- peekViewResult.lineForeground#d4d4d4
- peekViewResult.matchHighlightBackground#ffffff1f
- peekViewResult.selectionBackground#30373a
- peekViewResult.selectionForeground#d4d4d4
- peekViewTitle.background#1d2325
- peekViewTitleDescription.foreground#7f7f7f
- peekViewTitleLabel.foreground#d4d4d4
- pickerGroup.border#30373a
- pickerGroup.foreground#7f7f7f
- progressBar.background#fac863
- scrollbar.shadow#ffffff00
- scrollbarSlider.activeBackground#ffffff2e
- scrollbarSlider.background#ffffff0f
- scrollbarSlider.hoverBackground#ffffff1f
- selection.background#fac863
- settings.checkboxBackground#1d2325
- settings.checkboxBorder#30373a
- settings.checkboxForeground#d4d4d4
- settings.dropdownBackground#1d2325
- settings.dropdownBorder#30373a
- settings.dropdownForeground#d4d4d4
- settings.headerForeground#d4d4d4
- settings.modifiedItemIndicator#6699cc
- settings.numberInputBackground#1d2325
- settings.numberInputBorder#30373a
- settings.numberInputForeground#d4d4d4
- settings.textInputBackground#1d2325
- settings.textInputBorder#30373a
- settings.textInputForeground#d4d4d4
- sideBar.background#1d2325
- sideBar.border#30373a
- sideBar.foreground#d4d4d4
- sideBarSectionHeader.background#30373a
- sideBarSectionHeader.border#1d2325
- sideBarSectionHeader.foreground#d4d4d4
- sideBarTitle.foreground#7f7f7f
- statusBar.background#242b2e
- statusBar.border#30373a
- statusBar.debuggingBackground#242b2e
- statusBar.debuggingForeground#d4d4d4
- statusBar.foreground#7f7f7f
- statusBar.noFolderBackground#242b2e
- statusBar.noFolderForeground#7f7f7f
- statusBarItem.activeBackground#242b2e
- statusBarItem.hoverBackground#242b2e
- statusBarItem.prominentBackground#242b2e
- statusBarItem.prominentHoverBackground#242b2e
- tab.activeBackground#242b2e
- tab.activeForeground#d4d4d4
- tab.activeModifiedBorder#6699cc
- tab.border#30373a
- tab.hoverBackground#242b2e
- tab.inactiveBackground#1d2325
- tab.inactiveForeground#7f7f7f
- tab.inactiveModifiedBorder#5986b3
- tab.unfocusedActiveForeground#d4d4d4
- tab.unfocusedActiveModifiedBorder#6699cc
- tab.unfocusedHoverBackground#242b2e
- tab.unfocusedInactiveForeground#7f7f7f
- tab.unfocusedInactiveModifiedBorder#5986b3
- terminal.ansiBlack#7f7f7f
- terminal.ansiBlue#6699cc
- terminal.ansiBrightBlack#7f7f7f
- terminal.ansiBrightBlue#6699cc
- terminal.ansiBrightCyan#5fb3b3
- terminal.ansiBrightGreen#99c794
- terminal.ansiBrightMagenta#c594c5
- terminal.ansiBrightRed#e15a60
- terminal.ansiBrightWhite#d4d4d4
- terminal.ansiBrightYellow#fac863
- terminal.ansiCyan#5fb3b3
- terminal.ansiGreen#99c794
- terminal.ansiMagenta#c594c5
- terminal.ansiRed#e15a60
- terminal.ansiWhite#d4d4d4
- terminal.ansiYellow#fac863
- terminal.border#30373a
- titleBar.activeBackground#242b2e
- titleBar.activeForeground#7f7f7f
- titleBar.border#30373a
- titleBar.inactiveBackground#242b2e
- titleBar.inactiveForeground#7f7f7f
- walkThrough.embeddedEditorBackground#1d2325
- widget.shadow#ffffff00
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| comment, punctuation.definition.comment | #7F7F7F | italic |
| variable | #D4D4D4 | — |
| keyword, storage.type, storage.modifier | #C594C5 | — |
| keyword.operator, constant.other.color, punctuation, punctuation.definition.tag, punctuation.separator.inheritance.php, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, punctuation.section.embedded, keyword.other.template, keyword.other.substitution | #5FB3B3 | — |
| entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter | #EB606B | — |
| entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method, meta.block-level | #6699CC | — |
| support.other.variable, string.other.link | #F2777A | — |
| constant.numeric, constant.language, support.constant, constant.character, variable.parameter, keyword.other.unit | #F99157 | — |
| string, constant.other.symbol, constant.other.key, entity.other.inherited-class, markup.heading, markup.inserted.git_gutter, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js | #99C794 | — |
| entity.name.class, entity.name.type.class, support.type, support.class, support.orther.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter | #FAC863 | — |
| entity.name.module.js, variable.import.parameter.js, variable.other.class.js | #E15A60 | — |
| variable.language | #E15A60 | italic |
| entity.name.method.js | #D8DEE9 | — |
| meta.class-method.js entity.name.function.js, variable.function.constructor | #D8DEE9 | — |
| entity.other.attribute-name | #BB80B3 | — |
| markup.inserted | #99C794 | — |
| markup.deleted | #E15A60 | — |
| markup.changed | #BB80B3 | — |
| string.regexp | #5FB3B3 | — |
| constant.character.escape | #5FB3B3 | — |
| *url*, *link*, *uri* | — | underline |
| constant.numeric.line-number.find-in-files - match | #AB7967 | — |
| entity.name.filename.find-in-files | #99C794 | — |
| tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js | #6699CC | italic |
| source.js constant.other.object.key.js string.unquoted.label.js | #E15A60 | italic |
| token.info-token | #6796E6 | — |
| token.warn-token | #CD9731 | — |
| token.error-token | #F44747 | — |
| token.debug-token | #B267E6 | — |
| source.js entity.other.attribute-name.js | — | italic |
| text.html.basic entity.other.attribute-name.html | — | italic |