Aurora Theme - Official
Publisher: Md Abdur RakibThemes in package: 10
Aurora Theme - Professional developer themes featuring carefully curated color palettes for enhanced productivity and reduced eye strain. Includes 7 dark and 5 light variants.
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.dropBackground#0d3a58
- activityBar.foreground#fff
- activityBarBadge.background#ffc600
- activityBarBadge.foreground#000
- badge.background#ffc600
- badge.foreground#000
- button.background#0088ff
- button.foreground#fff
- button.hoverBackground#ff9d00
- contrastBorder#ffffff00
- debugExceptionWidget.background#193549
- debugExceptionWidget.border#aaa
- debugToolBar.background#193549
- descriptionForeground#aaa
- diffEditor.insertedTextBackground#3ad90033
- diffEditor.insertedTextBorder#3ad90055
- diffEditor.removedTextBackground#ee3a4333
- diffEditor.removedTextBorder#ee3a4355
- dropdown.background#193549
- dropdown.border#15232d
- dropdown.foreground#fff
- editor.background#193549
- editor.findMatchBackground#FF720066
- editor.findMatchHighlightBackground#CAD40F66
- editor.findRangeHighlightBackground#243E51
- editor.foreground#fff
- 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#aaa
- editorCursor.foreground#ffc600
- editorError.border#0d3a58
- editorError.foreground#A22929
- editorGroup.background#A22929
- editorGroup.border#122738
- editorGroup.dropBackground#12273899
- editorGroupHeader.noTabsBackground#193549
- editorGroupHeader.tabsBackground#122738
- editorGroupHeader.tabsBorder#15232d
- editorGutter.addedBackground#3C9F4A
- editorGutter.background#12273866
- editorGutter.deletedBackground#A22929
- editorGutter.modifiedBackground#26506D
- editorHoverWidget.background#15232d
- editorHoverWidget.border#0d3a58
- editorIndentGuide.background#3B5364
- editorInlayHint.background#0000001a
- editorInlayHint.foreground#ff68b8
- editorLineNumber.foreground#aaa
- editorLink.activeForeground#aaa
- 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#aaa
- editorSuggestWidget.highlightForeground#ffc600
- editorSuggestWidget.selectedBackground#193549
- editorWarning.border#ffffff00
- editorWarning.foreground#ffc600
- editorWhitespace.foreground#ffffff52
- editorWidget.background#15232d
- editorWidget.border#0d3a58
- errorForeground#A22929
- extensionButton.prominentBackground#0088ff
- extensionButton.prominentForeground#fff
- extensionButton.prominentHoverBackground#ff9d00
- focusBorder#0d3a58
- foreground#aaa
- gitDecoration.conflictingResourceForeground#FF7200
- gitDecoration.deletedResourceForeground#ff628c
- gitDecoration.ignoredResourceForeground#808080
- gitDecoration.modifiedResourceForeground#ffc600
- gitDecoration.untrackedResourceForeground#3ad900
- input.background#193549
- input.border#0d3a58
- input.foreground#ffc600
- input.placeholderForeground#aaa
- inputOption.activeBorder#8dffff
- inputValidation.errorBackground#193549
- inputValidation.errorBorder#ffc600
- inputValidation.infoBackground#193549
- inputValidation.infoBorder#0D3A58
- inputValidation.warningBackground#193549
- inputValidation.warningBorder#ffc600
- list.activeSelectionBackground#193549
- list.activeSelectionForeground#aaa
- list.dropBackground#0d3a58
- list.focusBackground#0d3a58
- list.focusForeground#aaa
- list.highlightForeground#ffc600
- list.hoverBackground#193549
- list.hoverForeground#aaa
- list.inactiveSelectionBackground#0d3a58
- list.inactiveSelectionForeground#aaa
- menu.background#122738
- menu.selectionForeground#fff
- 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#aaa
- notificationLink.foreground#ffc600
- notifications.background#122738
- notifications.border#ffc600
- notifications.foreground#aaa
- notificationToast.border#ffc600
- panel.background#122738
- panel.border#ffc600
- panelTitle.activeBorder#ffc600
- panelTitle.activeForeground#ffc600
- panelTitle.inactiveForeground#aaa
- peekView.border#ffc600
- peekViewEditor.background#193549
- peekViewEditor.matchHighlightBackground#19354900
- peekViewEditorGutter.background#122738
- peekViewResult.background#15232d
- peekViewResult.fileForeground#aaa
- peekViewResult.lineForeground#fff
- peekViewResult.matchHighlightBackground#0d3a58
- peekViewResult.selectionBackground#0d3a58
- peekViewResult.selectionForeground#fff
- peekViewTitle.background#15232d
- peekViewTitleDescription.foreground#aaa
- peekViewTitleLabel.foreground#ffc600
- pickerGroup.border#0d3a58
- pickerGroup.foreground#aaa
- progressBar.background#ffc600
- scrollbar.shadow#00000000
- scrollbarSlider.activeBackground#355166cc
- scrollbarSlider.background#1F466280
- scrollbarSlider.hoverBackground#406179cc
- selection.background#027dff
- sideBar.background#15232d
- sideBar.border#0d3a58
- sideBar.foreground#aaa
- sideBarSectionHeader.background#193549
- sideBarSectionHeader.foreground#aaaaaa
- sideBarTitle.foreground#aaaaaa
- statusBar.background#15232d
- statusBar.border#0d3a58
- statusBar.debuggingBackground#15232d
- statusBar.debuggingBorder#ffc600
- statusBar.debuggingForeground#ffc600
- statusBar.foreground#aaa
- statusBar.noFolderBackground#15232d
- statusBar.noFolderBorder#0d3a58
- statusBar.noFolderForeground#aaa
- statusBarItem.activeBackground#0088ff
- statusBarItem.hoverBackground#0d3a58
- statusBarItem.prominentBackground#15232d
- statusBarItem.prominentHoverBackground#0d3a58
- tab.activeBackground#193549
- tab.activeBorder#ffc600
- tab.activeForeground#fff
- tab.border#15232D
- tab.inactiveBackground#122738
- tab.inactiveForeground#aaa
- tab.unfocusedActiveForeground#aaa
- tab.unfocusedInactiveForeground#aaa
- 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#122738
- terminal.foreground#ffffff
- terminalCursor.background#ffc600
- terminalCursor.foreground#ffc600
- textBlockQuote.background#193549
- textBlockQuote.border#0088ff
- textCodeBlock.background#193549
- textLink.activeForeground#0088ff
- textLink.foreground#0088ff
- textPreformat.foreground#ffc600
- textSeparator.foreground#0d3a58
- titleBar.activeBackground#15232D
- titleBar.activeForeground#ffffff
- titleBar.inactiveBackground#193549
- titleBar.inactiveForeground#ffffff33
- walkThrough.embeddedEditorBackground#0d3a58
- welcomePage.buttonBackground#193549
- welcomePage.buttonHoverBackground#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 | #fff | — |
| 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 | #ccc | — |
| 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 |
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#ffffff1a
- activityBarBadge.background#007acc
- badge.background#ffffff1a
- editor.activeLineNumber.foreground#cccccc
- editor.background#242424
- editor.foreground#cccccc
- editor.lineHighlightBackground#ffffff0b
- editor.selectionBackground#204182cc
- editorGutter.background#ffffff0b
- editorSuggestWidget.background#303030
- editorSuggestWidget.highlightForeground#cc6e2f
- editorSuggestWidget.selectedBackground#204182cc
- sideBar.background#242424
- sideBar.border#ffffff1a
- statusBar.background#ffffff1a
- statusBar.foreground#cccccc
- tab.activeBackground#ffffff1a
- tab.activeBorder#0c7d9d
- tab.inactiveBackground#ffffff0b
- titleBar.activeBackground#ffffff1a
- titleBar.activeForeground#cccccc
- titleBar.inactiveBackground#ffffff10
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| comment | #707070 | — |
| keyword.operator,keyword.operator.logical,keyword.operator.relational,keyword.operator.assignment,keyword.operator.comparison,keyword.operator.ternary,keyword.operator.arithmetic,keyword.operator.spread | #CCCCCC | — |
| string,string.character.escape,string.template.quoted,string.template.quoted.punctuation,string.template.quoted.punctuation.single,string.template.quoted.punctuation.double,string.type.declaration.annotation,string.template.quoted.punctuation.tag | #6A8759 | — |
| punctuation.definition.template-expression.begin,punctuation.definition.template-expression.end | #CC8242 | — |
| expression.string,meta.template.expression | #CCCCCC | — |
| constant.numeric | #7A9EC2 | — |
| constant.language,variable.language | #CC8242 | — |
| constant.character, constant.other | #9E7BB0 | — |
| keyword,keyword.operator.new,keyword.operator.delete,keyword.operator.static,keyword.operator.this,keyword.operator.expression | #CC8242 | — |
| entity.name.type,meta.return.type,meta.type.annotation,meta.type.parameters,support.type.primitive | #7A9EC2 | — |
| storage,storage.type,storage.modifier,storage.arrow | #CC8242 | — |
| class.instance.constructor,new.expr entity.name.type | #FFC66D | — |
| support.function, entity.name.function | #FFC66D | — |
| annotation.meta.ts, annotation.meta.tsx | #CCCCCC | — |
| variable.parameter, operator.rest.parameters | #CCCCCC | — |
| variable.property,variable.other.property,variable.other.object.property,variable.object.property,support.variable.property | #9E7BB0 | — |
| quote.module | #6A8759 | — |
| markup.heading | #CC8242 | — |
| punctuation.definition.tag.html, punctuation.definition.tag.begin, punctuation.definition.tag.end, entity.name.tag | #FFC66D | — |
| entity.other.attribute-name | #CCCCCC | — |
| meta.object-literal.key | #9E7BB0 | — |
| storage.modifier.ts | #CC8242 | — |
| ts.cast.expr,ts.meta.entity.class.method.new.expr.cast,ts.meta.entity.type.name.new.expr.cast,ts.meta.entity.type.name.var-single-variable.annotation,tsx.cast.expr,tsx.meta.entity.class.method.new.expr.cast,tsx.meta.entity.type.name.new.expr.cast,tsx.meta.entity.type.name.var-single-variable.annotation | #7A9EC2 | — |
| ts.meta.type.support,ts.meta.type.entity.name,ts.meta.class.inherited-class,tsx.meta.type.support,tsx.meta.type.entity.name,tsx.meta.class.inherited-class,type-declaration,enum-declaration | #7A9EC2 | — |
| function-declaration,method-declaration,method-overload-declaration,type-fn-type-parameters | #FFC66D | — |
| comment.block.documentation | #6A8759 | — |
| storage.type.class.jsdoc | #CC8242 | — |
| constant.language.import-export-all | #CCCCCC | — |
| objectliteral.key.separator, punctuation.separator.key-value | #CCCCCC | — |
| regex | — | italic |
| ts.meta.entity.name.namespace,tsx.meta.entity.name.namespace | #CCCCCC | — |
| regex.character-class | #CCCCCC | — |
| entity.name.type.class | #CCCCCC | — |
| entity.other.inherited-class | #7A9EC2 | — |
| entity.name.type.instance.jsdoc | #FFC66D | — |
| yaml.entity.name,yaml.string.entity.name | #CC8242 | — |
| yaml.string.out | #CCCCCC | — |
| meta.brace.square.ts,block.support.module,block.support.type.module,block.support.function.variable,punctuation.definition.typeparameters.begin,punctuation.definition.typeparameters.end | #CCCCCC | — |
| string.regexp | #CC8242 | — |
| punctuation.definition.group.regexp,punctuation.definition.character-class.regexp | #FFC66D | — |
| constant.other.character-class.regexp, constant.character.escape.ts | #CCCCCC | — |
| expr.regex.or.operator | #CCCCCC | — |
| string.template.tag,string.template.punctuation.tag,string.quoted.punctuation.tag,string.quoted.embedded.tag, string.quoted.double.tag | #6A8759 | — |
| tag.punctuation.begin.arrow.parameters.embedded,tag.punctuation.end.arrow.parameters.embedded | #CCCCCC | — |
| object-literal.object.member.key.field.other,object-literal.object.member.key.accessor,object-literal.object.member.key.array.brace.square | #CCCCCC | — |
| property-list.property-value,property-list.constant | #A5C261 | — |
| support.type.property-name.variable.css,support.type.property-name.variable.scss,variable.scss | #7A9EC2 | — |
| entity.other.attribute-name.class.css,entity.other.attribute-name.class.scss,entity.other.attribute-name.parent-selector-suffix.css,entity.other.attribute-name.parent-selector-suffix.scss | #FFC66D | — |
| property-list.property-value.rgb-value, keyword.other.unit.css,keyword.other.unit.scss | #7A9EC2 | — |
| property-list.property-value.function | #FFC66D | — |
| support.constant.property-value.css,support.constant.property-value.scss | #A5C261 | — |
| css.entity.name.tag,scss.entity.name.tag | #CC8242 | — |
| meta.selector.css, entity.attribute-name.id, entity.other.attribute-name.pseudo-class.css,entity.other.attribute-name.pseudo-element.css | #FFC66D | — |
| keyword.scss,keyword.css | #CC8242 | — |
| triple-slash.tag | #CCCCCC | italic |
| token.info-token | #6796e6 | — |
| token.warn-token | #cd9731 | — |
| token.error-token | #f44747 | — |
| token.debug-token | #b267e6 | — |
| keyword.operator.logical.python | #CC8242 | — |
| support.class.dart | #CC8242 | — |
| variable.language.php, variable.other.php | #9E7BB0 | — |
| variable.other.readwrite.perl | #9E7BB0 | — |
| variable.other.property.php | #CC8242 | — |
| support.variable.property.php | #FFC66D | — |
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#011627
- activityBar.border#219fd544
- activityBar.foreground#99d0f7
- activityBarBadge.background#219fd5
- activityBarBadge.foreground#ffffff
- badge.background#219fd5
- badge.foreground#ffffff
- button.background#03648a
- button.foreground#ffffff
- button.hoverBackground#219fd5
- contrastActiveBorder#122d42
- contrastBorder#122d42
- debugExceptionWidget.background#011627
- debugToolBar.background#022846
- diffEditor.insertedTextBackground#99b76d23
- diffEditor.insertedTextBorder#addb6733
- diffEditor.removedTextBackground#ef535033
- diffEditor.removedTextBorder#ef53504d
- editor.background#011627
- editor.findMatchHighlightBackground#103362
- editor.foreground#a7dbf7
- editor.hoverHighlightBackground#0c4994
- editor.inactiveSelectionBackground#7e57c25a
- editor.lineHighlightBackground#0c499477
- editor.rangeHighlightBackground#103362
- editor.selectionBackground#103362
- editor.selectionHighlightBackground#103362
- editor.wordHighlightBackground#103362
- editor.wordHighlightStrongBackground#103362
- editorBracketMatch.background#219fd54d
- editorCursor.foreground#219fd5
- editorError.foreground#ef5350
- editorGroup.border#219fd544
- editorGroupHeader.tabsBackground#011627
- editorGutter.background#011627
- editorHoverWidget.background#011627
- editorHoverWidget.border#5f7e97
- editorIndentGuide.activeBackground#C792EA
- editorIndentGuide.background#0e2c45
- editorLineNumber.foreground#219fd5
- editorOverviewRuler.commonContentForeground#7e57c2
- editorOverviewRuler.currentContentForeground#7e57c2
- editorOverviewRuler.incomingContentForeground#7e57c2
- editorSuggestWidget.background#2C3043
- editorSuggestWidget.border#2B2F40
- editorSuggestWidget.foreground#d6deeb
- editorSuggestWidget.highlightForeground#ffffff
- editorSuggestWidget.selectedBackground#5f7e97
- editorWarning.foreground#ffca28
- editorWhitespace.foreground#3B3A32
- editorWidget.background#0b2942
- editorWidget.border#262A39
- errorForeground#EF5350
- foreground#d6deeb
- gitDecoration.modifiedResourceForeground#219fd5
- gitDecoration.untrackedResourceForeground#5ABEB0
- input.background#0b253a
- input.border#5f7e97
- input.foreground#ffffffcc
- input.placeholderForeground#5f7e97
- inputOption.activeBorder#ffffff
- inputValidation.errorBackground#ef5350
- inputValidation.errorBorder#ef5350
- inputValidation.infoBackground#219fd5
- inputValidation.infoBorder#219fd5
- inputValidation.warningBackground#f7ecb5
- inputValidation.warningBorder#f7ecb5
- inputValidation.warningForeground#000000
- list.activeSelectionBackground#219fd5
- list.dropBackground#011627
- list.focusBackground#03648a
- list.focusForeground#ffffff
- list.highlightForeground#ffffff
- list.hoverBackground#011627
- list.hoverForeground#219fd5
- list.inactiveSelectionBackground#0e293f
- list.inactiveSelectionForeground#5f7e97
- list.invalidItemForeground#975f94
- notificationLink.foreground#80CBC4
- notifications.background#011627
- notifications.foreground#ffffffcc
- notificationToast.border#219fd544
- panel.background#011627
- panel.border#219fd5
- panelTitle.activeBorder#5f7e97
- panelTitle.activeForeground#219fd5
- panelTitle.inactiveForeground#5f7e97
- peekView.border#f7ecb5
- peekViewEditor.background#011627
- peekViewEditor.matchHighlightBackground#7e57c25a
- peekViewResult.background#011627
- peekViewResult.matchHighlightBackground#7e57c25a
- peekViewResult.selectionBackground#2E3250
- peekViewResult.selectionForeground#cecece
- peekViewTitle.background#011627
- peekViewTitleDescription.foreground#697098
- peekViewTitleLabel.foreground#cecece
- pickerGroup.border#219fd544
- quickInput.list.focusBackground#219fd5
- scrollbar.shadow#010b14
- scrollbarSlider.activeBackground#084d8180
- scrollbarSlider.background#084d8180
- scrollbarSlider.hoverBackground#084d8180
- selection.background#4373c2
- sideBar.background#011627
- sideBar.border#219fd544
- sideBar.foreground#7799bb
- sideBarSectionHeader.background#011627
- sideBarSectionHeader.foreground#7799bb
- sideBarTitle.foreground#7799bb
- statusBar.background#219fd5
- statusBar.debuggingBackground#b15a91
- statusBar.noFolderBackground#011627
- statusBarItem.activeBackground#03648a
- statusBarItem.hoverBackground#03648a
- statusBarItem.prominentBackground#03648a
- statusBarItem.prominentHoverBackground#03648a
- tab.activeBackground#0b2942
- tab.activeBorderTop#219fd5
- tab.activeForeground#d2dee7
- tab.inactiveBackground#010e1a
- tab.inactiveForeground#5f7e97
- terminal.ansiBlack#011627
- textLink.activeForeground#98c8ed
- textLink.foreground#219fd5
- titleBar.activeBackground#112233
- titleBar.activeForeground#eeefff
- titleBar.border#303030
- titleBar.inactiveBackground#000a11
- walkThrough.embeddedEditorBackground#001111
- welcomePage.buttonBackground#011627
- welcomePage.buttonHoverBackground#011627
- widget.shadow#219fd5
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| — | #bce7ff | — |
| meta.paragraph.markdown, string.other.link.description.title.markdown | #EEFFFF | — |
| entity.name.section.markdown, punctuation.definition.heading.markdown | #5ABEB0 | — |
| punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown, markup.quote.markdown | #82AAFF | — |
| markup.quote.markdown | #82AAFF | italic |
| markup.bold.markdown, punctuation.definition.bold.markdown | #57cdff | bold |
| markup.italic.markdown, punctuation.definition.italic.markdown | #C792EA | italic |
| markup.inline.raw.string.markdown, markup.fenced_code.block.markdown | #f7ecb5 | italic |
| punctuation.definition.metadata.markdown | #f3b8c2 | — |
| markup.underline.link.image.markdown, markup.underline.link.markdown | #6dbdfa | — |
| comment | #999999 | italic |
| punctuation.definition.string | #6bff81 | — |
| string | #bcf0c0 | — |
| string.quoted, variable.other.readwrite.js | #bcf0c0 | |
| constant.numeric | #8dec95 | — |
| constant.language.boolean | #8dec95 | — |
| constant | #A170C6 | — |
| constant.language, punctuation.definition.constant, variable.other.constant | #92b6f4 | — |
| constant.character, constant.other | #82AAFF | — |
| variable | #a4ceee | italic |
| variable.other.object.js | #d6deeb | italic |
| variable.other.readwrite.alias.ts, variable.other.readwrite.alias.tsx, variable.other.readwrite.ts, variable.other.readwrite.tsx, variable.other.object.ts, variable.other.object.tsx, variable.object.property.ts, variable.object.property.tsx, variable.other.ts, variable.other.tsx, variable.tsx, variable.ts | #d6deeb | — |
| meta.class entity.name.type.class.tsx | #d29ffcff | — |
| entity.name.type.tsx, entity.name.type.module.tsx | #d29ffcff | — |
| meta.method.declaration storage.type.ts, meta.method.declaration storage.type.tsx | #a1bde6 | — |
| variable.other.object.property | #f7ecb5 | italic |
| variable.instance, variable.other.instance, variable.readwrite.instance, variable.other.readwrite.instance, variable.other.property | #7fdbca | — |
| variable.other.readwrite.js, variable.parameter | #d7dbe0 | — |
| string.template meta.template.expression | #c63ed3 | — |
| string.template punctuation.definition.string | #fff | — |
| storage | #6dbdfa | |
| keyword, storage.type, storage.modifier, variable.language.this | #00bff9 | italic |
| keyword.operator | #00bff9 | italic |
| storage, meta.var.expr, meta.class meta.method.declaration meta.var.expr storage.type.js, storage.type.property.js, storage.type.property.ts | #c792ea | italic |
| variable.other.meta.import.js, meta.import.js variable.other, variable.other.meta.export.js, meta.export.js variable.other | #d3eed6 | — |
| entity.name.class | #f7ecb5 | — |
| entity.other.inherited-class | #4FB4D8 | |
| variable.other.readwrites, meta.definition.variable | #f7ecb5 | |
| support.variable.property | #7fdbca | — |
| entity.name.function | #87aff4 | italic |
| variable.parameter | #d7dbe0 | |
| entity.name.tag | #6dbdfa | |
| entity.name.type | #d29ffc | — |
| entity.other.attribute-name | #f7ecb5 | italic |
| punctuation.decorator | #f7ecb5 | italic |
| punctuation.definition.block, punctuation.definition.tag | #ffffff | — |
| support.function | #f7ecb5 | |
| support.constant | #ec9cd2 | |
| support.type, support.class | #7fdbca | — |
| support.other.variable | #CBCDD2 | — |
| invalid | #6dbdfa | italic bold underline |
| invalid.deprecated | #6dbdfa | bold italic underline |
| support.type.property-name.json | #91dacd | — |
| support.constant.json | #addb67 | — |
| meta.structure.dictionary.value.json string.quoted.double | #e0aff5 | — |
| string.quoted.double.json punctuation.definition.string.json | #80CBC4 | — |
| meta.structure.dictionary.json meta.structure.dictionary.value constant.language | #f29fd8 | — |
| source.json support | #6dbdfa | — |
| source.json string, source.json punctuation.definition.string | #ece7cd | — |
| markup.list | #6dbdfa | — |
| markup.heading punctuation.definition.heading, entity.name.section | #4FB4D8 | |
| text.html.markdown meta.paragraph meta.link.inline, text.html.markdown meta.paragraph meta.link.inline punctuation.definition.string.begin.markdown, text.html.markdown meta.paragraph meta.link.inline punctuation.definition.string.end.markdown | #78bd65 | — |
| meta.paragraph.markdown | #ffffff | — |
| markup.quote | #78bd65 | italic |
| meta.link | #78BD65 | — |
| source.dockerfile | #99d0f7 | — |
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#002933
- activityBar.foreground#14c5ab
- activityBar.inactiveForeground#9e9e9e
- activityBarBadge.background#404954
- activityBarBadge.foreground#ffffff
- button.background#14c5ab
- button.foreground#002933
- button.hoverBackground#19f9d7c7
- contrastActiveBorder#14c5ab
- contrastBorder#14c5ab
- debugToolBar.background#002933
- dropdown.background#002933
- dropdown.listBackground#002933
- editor.background#002933
- editor.foreground#E6E6E6
- editor.lineHighlightBackground#000000
- editor.lineHighlightBorder#14c5ab
- editor.selectionBackground#000000
- editor.selectionForeground#ffffff00
- editorCursor.foreground#ffffff
- editorGroupHeader.tabsBackground#002933
- editorLineNumber.activeForeground#d4d4d4dc
- editorWhitespace.foreground#34383D
- editorWidget.background#002933
- extensionButton.prominentBackground#14c5ab
- extensionButton.prominentForeground#404954
- extensionButton.prominentHoverBackground#19f9d7c7
- focusBorder#00b7ff
- input.background#002933
- inputValidation.infoBackground#002933
- list.activeSelectionBackground#000000
- list.activeSelectionForeground#d4d4d4
- list.focusBackground#09698180
- list.focusForeground#d4d4d4
- list.highlightForeground#aeb1b0
- list.hoverBackground#09698180
- list.hoverForeground#d4d4d4
- list.inactiveFocusBackground#002933
- list.inactiveSelectionBackground#000000
- list.inactiveSelectionForeground#aeb1b0
- notification.background#002933
- notification.buttonBackground#14c5ab
- notification.buttonForeground#002933
- notification.buttonHoverBackground#19f9d7d3
- panel.background#002933
- panel.dropBorder#14c5ab
- panelTitle.activeBorder#14c5ab
- scrollbarSlider.activeBackground#19eece9c
- scrollbarSlider.background#14c5ab9c
- scrollbarSlider.hoverBackground#19eece9c
- settings.dropdownBorder#14c5ab
- settings.modifiedItemIndicator#00b7ff
- sideBar.background#002933
- sideBar.foreground#aeb1b0
- sideBarSectionHeader.foreground#aeb1b1
- sideBarTitle.foreground#aeb1b1
- statusBar.background#002933
- statusBar.debuggingBackground#002933
- statusBar.foreground#14c5ab
- statusBar.noFolderBackground#002933
- statusBarItem.activeBackground#002933
- statusBarItem.prominentBackground#002933
- statusBarItem.prominentHoverBackground#09698180
- tab.activeBackground#002933
- tab.activeBorder#14c5ab
- tab.activeForeground#ffffff
- tab.hoverBorder#bcbdbd
- tab.inactiveBackground#002933
- tab.inactiveForeground#9e9e9e
- textLink.activeForeground#ffffff
- textLink.foreground#00b7ff
- titleBar.activeBackground#002933
- titleBar.activeForeground#aeb1b0
- titleBar.inactiveBackground#002933
- titleBar.inactiveForeground#aeb1b0
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| comment, string.quoted.docstring.multi.python, punctuation.definition.string.begin.python, punctuation.definition.string.end.python, string.quoted.docstring.raw.multi.python | #9e9e9e | bold italic |
| storage.type, keyword.control.import, keyword.control.from, support.class.error | #ff0e56 | — |
| string.quoted.double, string.template | #00b7ff | — |
| punctuation.definition.string.begin, punctuation.definition.string.end, punctuation.definition.string.template.begin, punctuation.definition.string.template.end | #00acc1 | — |
| meta.brace.round, punctuation.terminator.statement | #ffffff | — |
| punctuation.separator.comma, punctuation.definition.block, punctuation.definition.parameters.begin, punctuation.definition.parameters.end | #ffffff | — |
| keyword.control.loop | #09cbdd | — |
| keyword.control.flow, keyword.operator.new | #00e5ffcc | — |
| punctuation.accessor, meta.brace.square, keyword.operator.arithmetic, keyword.operator.comparison, keyword.operator.assignment, keyword.operator.relational, keyword.operator, punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, constant.language.import-export-all, entity.other.attribute-name | #ffbe79 | — |
| keyword.control.switch | #079ba8 | — |
| string.quoted.single | #00b7ff | — |
| variable.language.this, constant.language.boolean.true, constant.language.boolean.false, constant.language.undefined, constant.language.null | #ff6a9b | — |
| variable.other.object.property, variable.other.property, meta.template.expression, support.variable.property, variable.language.super, support.class.component.js, entity.name.tag, entity.name.tag.style.html | #ff0e56 | — |
| meta.jsx.children.js, meta.jsx.children.tsx | #ffffffec | — |
| meta.embedded.line, variable.other.object, variable.other.readwrite, entity.name.type.class, entity.name.type, entity.other.inherited-class, variable.parameter, variable.object.property, support.function, storage.modifier.async | #8be1f7 | — |
| constant.numeric.decimal | #ff5622de | — |
| support.class.console, support.function.console, meta.object-literal.key | #ffbe79 | — |
| support.variable.dom, storage.modifier | #079ba8 | — |
| entity.name.function | #09cbdd | — |
| storage.type.function | #ff6a9b | — |
| support.type.property-name.json, punctuation.support.type.property-name.begin.json, punctuation.support.type.property-name.end.json | #ffbe79 | — |
| keyword.control.conditional, keyword.control.trycatch | #09cbdd | — |
| support.function.dom | #ffbe79e3 | — |
| constant.language.json | #00acc1 | — |
| constant.language.json, constant.numeric.json | #ff0e56 | — |
| entity.name.tag.script.html, entity.name.tag.structure.any.html, entity.name.tag.html, entity.name.tag.inline.any.html, entity.name.tag.block.any.html, entity.name.tag.other.html, meta.tag.sgml.doctype.html | #ff0e56 | — |
| entity.other.attribute-name.html, entity.other.attribute-name.id.html | #ffbe79ee | — |
| punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, punctuation.definition.tag.begin.js, punctuation.definition.tag.begin.tsx, punctuation.definition.tag.end.js, punctuation.definition.tag.end.tsx | #ffffff | — |
| meta.tag.structure.any.html, meta.tag.inline.any.html | #ffffff | — |
| text.html.basic | #bdbdbd | — |
| meta.toc-list.id.html | #64ffdbda | — |
| entity.name.tag.xml, entity.name.tag.localname.xml, entity.name.tag.namespace.xml | #ff0e56 | — |
| punctuation.definition.tag.xml, meta.tag.preprocessor.xml, punctuation.separator.namespace.xml | #ffffff | — |
| string.quoted.double.xml | #728e9e | — |
| entity.other.attribute-name.xml, entity.other.attribute-name.localname.xml | #33fae9ad | — |
| text.xml | #8bdbe9e3 | — |
| entity.name.tag.yaml | #e4e0bd | — |
| source.yaml | #00ffffcc | — |
| string.unquoted.plain.out.yaml | #00b7ffDA | — |
| meta.flow-sequence.yaml | #ff0e56 | — |
| string.unquoted.plain.in.yaml | #00ffffcc | — |
| keyword.other.definition.ini, meta.rule.indent_style.editorconfig, keyword.other.definition.root.editorconfig, meta.section.editorconfig | #ffbe79 | — |
| source.ini constant.language.tab.editorconfig, punctuation.separator.key-value.editorconfig | #00b7ff | — |
| entity.other.attribute-name.class.css, entity.other.attribute-name.id.css, variable.argument.css | #ffbe79 | — |
| support.type.property-name.css, support.constant.color.w3c-extended-color-name.css, support.constant.color.w3c-standard-color-name.css | #b9d8e6 | — |
| entity.name.tag.css | #ff2c6be0 | — |
| constant.numeric.css | #ffbe79 | — |
| keyword.other.unit, keyword.control.at-rule.include.scss, meta.definition.variable.scss, keyword.control.at-rule.import.scss, keyword.control.return.scss, entity.name.tag.wildcard.css, entity.name.tag.wildcard.scss, keyword.control.at-rule.mixin.scss | #ff0e56 | — |
| punctuation.section.property-list.begin.bracket.curly.scss, punctuation.section.property-list.end.bracket.curly.scss, punctuation.section.property-list.begin.bracket.curly.css, punctuation.section.property-list.end.bracket.curly.css, punctuation.separator.list.comma.css, punctuation.section.function.begin.bracket.round.css, punctuation.section.function.end.bracket.round.css, punctuation.definition.entity.begin.bracket.square.css, punctuation.definition.entity.end.bracket.square.css | #ffffff | — |
| punctuation.terminator.rule.css, punctuation.separator.key-value.css | #a7a2a2 | — |
| punctuation.definition.constant.css | #a0b9c4c0 | — |
| constant.other.color.rgb-value.hex.css, entity.name.tag.reference.scss | #dd8aa3 | — |
| support.type.vendored.property-name.css | #a7a2a2 | — |
| keyword.control.at-rule.keyframes.css, entity.other.attribute-name.placeholder.css, keyword.control.at-rule.media.css, support.type.property-name.media.css, support.constant.media.css, support.constant.font-name.css, keyword.other.important.scss, keyword.control.at-rule.media.scss, keyword.control.operator.css.scss, entity.other.keyframe-offset.css, entity.other.attribute-name.css, keyword.control.at-rule.import.css, keyword.control.for.scss, keyword.control.if.scss, meta.at-rule.include.scss | #dd8aa3 | — |
| variable.parameter.keyframe-list.css, meta.property-value.css | #8be1f7 | — |
| support.constant.property-value.css | #8be1f7 | — |
| entity.other.attribute-name.pseudo-element.css, entity.other.attribute-name.pseudo-class.css | #a0b9c4fa | — |
| entity.other.keyframe-offset.percentage.css, meta.property-list.scss | #ffffff | — |
| variable.scss, support.function.url.css, entity.other.attribute-name.attribute.scss, punctuation.definition.attribute-selector.begin.bracket.square.scss, punctuation.definition.attribute-selector.end.bracket.square.scss | #00b7ff | — |
| markup.heading.markdown, punctuation.definition.metadata.markdown, punctuation.definition.list.begin.markdown, meta.separator.markdown, punctuation.definition.quote.begin.markdown | #ffbe79 | — |
| meta.paragraph.markdown | #9e9e9e | — |
| beginning.punctuation.definition.list.markdown | #64ffdbda | — |
| entity.name.tag.template.html, keyword.control.export | #ff0e56 | — |
| text.html.vue-html | #ffffff | — |
| keyword.control.default, support.class.builtin, meta.function-call, keyword.control.as | #64ffdbda | — |
| support.type.object.module, string.regexp.js, string.regexp.tsx, support.variable.object.node | #64ffdbda | — |
| support.variable.object.process, variable.other.constant.property, variable.other.constant | #a1d7da | — |
| punctuation.definition.variable.php | #ffbe79 | — |
| variable.other.php, variable.other.global.php, variable.other.global.safer.php | #26e0d7f3 | — |
| constant.language.php, constant.other.php | #ff0e56 | — |
| keyword.control.return.php | #09cbdd | — |
| keyword.other.new.php, keyword.other.use.php, keyword.other.namespace.php, keyword.other.use-as.php, keyword.other.function.use.php, keyword.other.clone.php, keyword.control.yield.php, keyword.control.break.php, keyword.control.die.php | #ff6a9b | — |
| support.class.builtin.php, entity.name.function.php, entity.other.alias.php, support.constant.std.php, constant.other.class.php | #64f5ffda | — |
| support.class.php, support.other.namespace.php, variable.other.class.php, variable.other.property.php, support.constant.core.php, support.constant.ext.php, support.class.exception.php | #a0e3e7 | — |
| storage.modifier.php | #09cbdd | — |
| keyword.control.case.php, keyword.control.switch.php, keyword.control.default.php, keyword.control.if.php, keyword.control.foreach.php, keyword.control.continue.php, keyword.other.class.php, keyword.control.elseif.php, keyword.control.else.php, keyword.control.while.php, keyword.control.for.php, keyword.control.do.php | #a7deec | — |
| punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php | #a7deec | — |
| keyword.control.exception.php, keyword.control.exception.catch.php, keyword.control.import.include.php | #eb9485 | — |
| string.regexp.single-quoted.php | #eb9485 | — |
| keyword.other.phpdoc.php, keyword.other.type.php | #53a5b9 | — |
| source.python, storage.type.string.python | #a7deec | — |
| meta.member.access.python, meta.function-call.arguments.python, meta.item-access.python | #a7deec | — |
| variable.language.special.self.python | #a7deec | — |
| meta.attribute.python | #ee475e | — |
| meta.function-call.generic.python | #09cbdd | — |
| constant.numeric.dec.python | #ff5622de | — |
| string.quoted.single.python, punctuation.definition.string.end.python, punctuation.definition.string.begin.python | #00abc1da | — |
| constant.language.python | #f48fb1dc | — |