Ayu Next
Publisher: RomanThemes in package: 1
🔥 This is a Dark theme (Mirage), screenshots inside
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#191E2A
- activityBar.activeBorder#FFCC66
- activityBar.activeFocusBorder#FFCC66
- activityBar.background#1F2430
- activityBar.border#191E2A
- activityBar.dropBorder#FF9944
- activityBar.foreground#CBCCC6
- activityBar.inactiveForeground#707A8C
- activityBarBadge.background#FFCC66
- activityBarBadge.foreground#1F2430
- badge.background#1F2430
- badge.foreground#707A8C
- button.background#eeb85a
- button.foreground#1F2430
- button.hoverBackground#ffd580
- commandCenter.activeBackground#1a1d29
- commandCenter.activeBorder#0000
- commandCenter.activeForeground#CBCCC6
- commandCenter.background#1F2430
- commandCenter.border#0000
- commandCenter.foreground#CBCCC6
- commandCenter.inactiveBorder#0000
- commandCenter.inactiveForeground#CBCCC6
- contrastActiveBorder#0000
- contrastBorder#0000
- debugExceptionWidget.background#232834
- debugExceptionWidget.border#191e2a
- debugToolBar.background#232834
- debugToolBar.border#0000
- debugView.exceptionLabelBackground#eeb85a
- debugView.exceptionLabelForeground#1F2430
- diffEditor.insertedTextBackground#bae67e26
- diffEditor.removedTextBackground#f29e7426
- dropdown.background#171C24
- dropdown.border#0000
- dropdown.foreground#707a8c
- dropdown.listBackground#1F2430
- editor.background#1F2430
- editor.findMatchBackground#0000
- editor.findMatchBorder#FF9944
- editor.findMatchHighlightBackground#0000
- editor.findMatchHighlightBorder#ffcc66ae
- editor.findRangeHighlightBackground#0000
- editor.findRangeHighlightBorder#FF9944
- editor.focusedStackFrameHighlightBackground#ff00ff
- editor.foldBackground#24AEF317
- editor.foreground#CBCCC6
- editor.hoverHighlightBackground#3D516ACC
- editor.inactiveSelectionBackground#3d516a
- editor.lineHighlightBackground#191E2A
- editor.rangeHighlightBackground#0000
- editor.selectionBackground#3d516a
- editor.selectionHighlightBackground#0000
- editor.selectionHighlightBorder#FF9944
- editor.wordHighlightBackground#FF9944
- editor.wordHighlightStrongBackground#FF9944
- editorBracketMatch.background#707a8c4d
- editorBracketMatch.border#707a8c99
- editorCodeLens.foreground#CBCCC6
- editorCursor.foreground#ffcc66
- editorError.foreground#E74C3C
- editorGroup.border#191e2a
- editorGroup.dropBackground#FFFFFF17
- editorGroup.emptyBackground#232834
- editorGroup.focusedEmptyBorder#191e2a
- editorGroupHeader.border#191e2a
- editorGroupHeader.noTabsBackground#1F2430
- editorGroupHeader.tabsBackground#1F2430
- editorGroupHeader.tabsBorder#191e2a
- editorGutter.addedBackground#A6CC70
- editorGutter.deletedBackground#F27983
- editorGutter.modifiedBackground#77A8D9
- editorHoverWidget.background#20232F
- editorHoverWidget.border#191e2a
- editorHoverWidget.foreground#ffffff73
- editorHoverWidget.statusBarBackground#232834
- editorIndentGuide.activeBackground#171C24
- editorIndentGuide.background#707a8c4d
- editorLineNumber.activeForeground#707a8ccc
- editorLineNumber.foreground#707a8c66
- editorLink.activeForeground#ffcc66
- editorMarkerNavigation.background#232834
- editorMarkerNavigationWarning.background#ffcc66
- editorOverviewRuler.addedForeground#A6CC70
- editorOverviewRuler.background#1F2430
- editorOverviewRuler.border#0000
- editorOverviewRuler.currentContentForeground#707a8c4d
- editorOverviewRuler.deletedForeground#F27983
- editorOverviewRuler.errorForeground#E74C3C
- editorOverviewRuler.findMatchForeground#ffcc66ae
- editorOverviewRuler.modifiedForeground#77A8D9
- editorOverviewRuler.selectionHighlightForeground#ffcc66ae
- editorOverviewRuler.warningForeground#ffcc66
- editorRuler.foreground#707a8c4d
- editorSuggestWidget.background#191E2A
- editorSuggestWidget.border#191E2A
- editorSuggestWidget.foreground#CBCCC6
- editorSuggestWidget.highlightForeground#ffcc66
- editorSuggestWidget.selectedBackground#3D516ACC
- editorWarning.foreground#ffcc66
- editorWhitespace.foreground#cccccc25
- editorWidget.background#232834
- extensionBadge.remoteBackground#FFCC66ae
- extensionBadge.remoteForeground#1F2430ae
- extensionButton.prominentBackground#ffcc66
- extensionButton.prominentForeground#1F2430
- extensionButton.prominentHoverBackground#fac761
- extensionIcon.preReleaseForeground#3D516ACC
- extensionIcon.sponsorForeground#E74C3C
- extensionIcon.starForeground#ffcc66
- extensionIcon.verifiedForeground#ffcc66
- focusBorder#0000
- foreground#707a8c
- gitDecoration.addedResourceForeground#FEF2C0
- gitDecoration.conflictingResourceForeground#E74C3C
- gitDecoration.deletedResourceForeground#F27983
- gitDecoration.ignoredResourceForeground#707a8c
- gitDecoration.modifiedResourceForeground#77A8D9
- gitDecoration.submoduleResourceForeground#d4bfffb3
- gitDecoration.untrackedResourceForeground#A6CC70
- icon.foreground#CBCCC6
- input.background#1a1d29
- input.border#0000
- input.foreground#CBCCC6
- input.placeholderForeground#707A8C
- inputOption.activeBackground#0000
- inputOption.activeBorder#FFCC66a5
- inputValidation.errorBackground#1F2430
- inputValidation.errorBorder#E74C3C
- inputValidation.errorForeground#E74C3C
- inputValidation.infoBackground#1F2430
- inputValidation.infoBorder#5ccfe6
- inputValidation.infoForeground#77A8D9
- inputValidation.warningBackground#1F2430
- inputValidation.warningBorder#FF9944
- inputValidation.warningForeground#ffcc66
- list.activeSelectionBackground#191E2A
- list.activeSelectionForeground#CBCCC6
- list.deemphasizedForeground#8c8c8c
- list.dropBackground#FFFFFF17
- list.errorForeground#E74C3C
- list.filterMatchBackground#ffcc660d
- list.filterMatchBorder#ffcc6659
- list.focusBackground#191E2A
- list.focusForeground#CBCCC6
- list.highlightForeground#ffcc66
- list.hoverBackground#191E2A
- list.hoverForeground#CBCCC6
- list.inactiveFocusBackground#191E2A
- list.inactiveSelectionBackground#191E2A
- list.inactiveSelectionForeground#CBCCC6
- list.invalidItemForeground#707A8C
- list.warningForeground#FFCC66
- listFilterWidget.background#653723
- listFilterWidget.noMatchesOutline#E74C3C
- listFilterWidget.outline#0000
- menu.background#1F2430
- menu.border#0000
- menu.foreground#CBCCC6
- menu.selectionBackground#171C24
- menu.selectionBorder#FFCC66ae
- menu.selectionForeground#FFFFFF
- menu.separatorBackground#33415e
- menubar.selectionBackground#171C24
- menubar.selectionBorder#0000
- menubar.selectionForeground#FFFFFF
- panel.background#1F2430
- panel.border#191e2a
- panelInput.border#1F2430
- panelSection.border#191e2a
- panelSection.dropBackground#FFFFFF17
- panelSectionHeader.background#1F2430
- panelSectionHeader.foreground#707A8C
- panelTitle.activeBorder#ffcc66
- panelTitle.activeForeground#cbccc6
- panelTitle.inactiveForeground#707A8C
- peekView.border#191e2a
- peekViewEditor.background#232834
- peekViewEditor.matchHighlightBackground#ffcc6633
- peekViewResult.background#232834
- peekViewResult.fileForeground#707a8c
- peekViewResult.matchHighlightBackground#ffcc6633
- peekViewTitle.background#232834
- peekViewTitleDescription.foreground#707a8c
- peekViewTitleLabel.foreground#707a8c
- pickerGroup.border#191e2a
- pickerGroup.foreground#484f5e
- problemsErrorIcon.foreground#E74C3C
- problemsInfoIcon.foreground#75beff
- problemsWarningIcon.foreground#ffcc66
- progressBar.background#ffcc66
- quickInput.background#1F2430
- quickInput.foreground#707A8C
- quickInputList.focusBackground#191E2A
- quickInputList.focusForeground#FFFFFF
- quickInputList.focusIconForeground#CBCCC6
- quickInputTitle.background#1F2430
- sash.hoverBorder#3D516A
- scrollbar.shadow#191e2a
- scrollbarSlider.activeBackground#707a8c
- scrollbarSlider.background#707a8c66
- scrollbarSlider.hoverBackground#707a8c96
- selection.background#2a3546fd
- settings.headerForeground#cbccc6
- settings.modifiedItemIndicator#77a8d9
- sideBar.background#1F2430
- sideBar.border#191e2a
- sideBar.dropBackground#FFFFFF17
- sideBar.foreground#707A8C
- sideBarSectionHeader.background#1F2430
- sideBarSectionHeader.border#191E2A95
- sideBarSectionHeader.foreground#707a8c
- sideBarTitle.foreground#CBCCC6
- statusBar.background#1F2430
- statusBar.border#191e2a
- statusBar.debuggingBackground#89D185
- statusBar.debuggingBorder#0000
- statusBar.debuggingForeground#1F2430
- statusBar.foreground#707a8c
- statusBar.noFolderBackground#232834
- statusBar.noFolderBorder#141925
- statusBar.noFolderForeground#707A8C
- statusBarItem.activeBackground#171C24
- statusBarItem.errorBackground#F27983
- statusBarItem.errorForeground#cbccc6
- statusBarItem.hoverBackground#191E2A
- statusBarItem.prominentBackground#191e2a
- statusBarItem.prominentForeground#20232F
- statusBarItem.prominentHoverBackground#00000030
- statusBarItem.remoteBackground#20232F
- statusBarItem.remoteForeground#cbccc6
- tab.activeBackground#171C24
- tab.activeBorder#171C24
- tab.activeBorderTop#ffcc66
- tab.activeForeground#CBCCC6
- tab.activeModifiedBorder#FF9944
- tab.border#171C24
- tab.hoverBackground#191E2A
- tab.hoverBorder#0000
- tab.hoverForeground#CBCCC6
- tab.inactiveBackground#1F2430
- tab.inactiveForeground#707A8C
- tab.inactiveModifiedBorder#805500
- tab.unfocusedActiveBackground#171C24
- tab.unfocusedActiveBorder#0000
- tab.unfocusedActiveBorderTop#ffcc66
- tab.unfocusedActiveForeground#707A8C
- tab.unfocusedActiveModifiedBorder#805500
- tab.unfocusedHoverBackground#191E2A
- tab.unfocusedHoverBorder#171C24
- tab.unfocusedHoverForeground#CBCCC6
- tab.unfocusedInactiveBackground#1F2430
- tab.unfocusedInactiveForeground#707A8C
- tab.unfocusedInactiveModifiedBorder#805500
- terminal.ansiBlack#191e2a
- terminal.ansiBlue#6dcbfa
- terminal.ansiBrightBlack#686868
- terminal.ansiBrightBlue#73d0ff
- terminal.ansiBrightCyan#95e6cb
- terminal.ansiBrightGreen#bae67e
- terminal.ansiBrightMagenta#D4BFFFAE
- terminal.ansiBrightRed#f28779
- terminal.ansiBrightWhite#FFFFFF
- terminal.ansiBrightYellow#ffd580
- terminal.ansiCyan#90e1c6
- terminal.ansiGreen#a6cc70
- terminal.ansiMagenta#cfbafa
- terminal.ansiRed#ed8274
- terminal.ansiWhite#c7c7c7
- terminal.ansiYellow#fad07b
- terminal.background#1F2430
- terminal.foreground#cbccc6
- terminal.selectionBackground#232834
- terminalCursor.background#232834
- textBlockQuote.background#232834
- textLink.activeForeground#ffcc66
- textLink.foreground#FFCC66ae
- textPreformat.foreground#cbccc6
- titleBar.activeBackground#1F2430
- titleBar.activeForeground#cbccc6
- titleBar.border#191e2a
- titleBar.inactiveBackground#1F2430
- titleBar.inactiveForeground#707a8c
- toolbar.hoverOutline#0000
- walkThrough.embeddedEditorBackground#232834
- widget.shadow#141925
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| source meta.class meta.field.declaration meta.type.annotation keyword.operator | #CBCCC6B3 | |
| source.ts meta.interface meta.field.declaration meta.type.annotation keyword.operator.type.annotation, source meta.type meta.object.type keyword.operator | #CBCCC6B3 | |
| source.ts punctuation.definition.typeparameters.begin, source.ts punctuation.definition.typeparameters.end | #FF9944 | |
| source meta.block | #CBCCC6 | |
| source punctuation.separator.comma | #f29e7499 | |
| source punctuation.terminator, source punctuation.separator.key-value | #CBCCC6B3 | |
| source punctuation.definition.template-expression.begin, source punctuation.definition.template-expression.end | #BAE67E | |
| source punctuation.definition.string.template.begin.js, source punctuation.definition.string.template.end.js, source string.template punctuation.definition.string.template.begin, source string.template punctuation.definition.string.template.end | #FF9944 | |
| source new.expr entity.name.type | #F29E74 | |
| source string.template meta.template.expression meta.embedded.line variable.other.readwrite, source string.template meta.template.expression meta.embedded.line variable.other | #CBCCC6 | |
| source.vue meta.objectliteral meta.object.member meta.objectliteral meta.method.declaration meta.block meta.function-call entity.name.function.js, source.vue meta.export.default meta.objectliteral meta.method.declaration meta.block meta.objectliteral meta.object.member meta.function-call entity.name.function.js, source.vue meta.function-call entity.name.function.js | #F27983 | |
| source.vue meta.block meta.function-call variable.other.object.js, source.vue meta.function-call variable.other.object.js | #59C9DE99 | |
| source.vue meta.export.default meta.objectliteral meta.object.member meta.function-call entity.name.function.js | #F27983 | |
| source.vue meta.export.default meta.objectliteral meta.object.member meta.objectliteral meta.method.declaration meta.block meta.function-call entity.name.function.js, source.vue meta.export.default meta.objectliteral meta.object.member meta.method.declaration meta.block meta.block meta.function-call entity.name.function.js, source.vue meta.export.default meta.objectliteral meta.object.member entity.name.function.js, source.vue meta.export.default meta.objectliteral meta.object.member meta.objectliteral meta.object.member meta.function-call entity.name.function.js, source.vue meta.export.default meta.objectliteral meta.method.declaration meta.block meta.var.expr meta.function-call entity.name.function.js, source.vue meta.export.default meta.objectliteral meta.method.declaration meta.block meta.function-call entity.name.function.js | #FFD580 | |
| source.vue punctuation.definition.tag.begin, source.vue punctuation.definition.tag.end | #5CCFE6 | |
| source.vue text.html.vue-html meta.tag.block.any | #5CCFE6 | |
| source.vue meta.export.default meta.objectliteral meta.object.member meta.objectliteral meta.object.member meta.object-literal.key entity.name.function.js | #FFD580 | |
| source.vue text.html.vue-html meta.tag.block.any.html meta.directive.vue source.directive.vue variable.other.readwrite.js | #D4BFFF | |
| source.vue text.html.vue-html expression.embedded.vue variable.other.readwrite.js | #D4BFFF | |
| source.vue variable.parameter | #CBCCC6 | |
| source.vue variable.object.property | #BAE67E | |
| source.vue support.function | #F27983 | |
| source.vue support.class.builtin | #5CCFE6 | |
| source.vue string.template variable.other.readwrite | #CBCCC6 | |
| source.vue meta.function-call support.function.console | #F27983 | |
| source.vue meta.definition.method entity.name.function | #FFD580 | |
| source.stylus meta.property-list.css | #FF9944 | |
| source.stylus meta.selector.stylus | #FF9944 | |
| source.stylus meta.property-value.css | #FF9944 | |
| source.stylus entity.name.function.stylus | #BAE67E | |
| source.stylus support.function.mixin.stylus | #5CCFE6 | |
| source.js meta.template.expression.js punctuation.definition.template-expression.begin.js, source.js meta.template.expression.js punctuation.definition.template-expression.end.js | #FF9944 | |
| source.js meta.template.expression.js meta.embedded.line.js variable.other.object.js | #CBCCC6 | |
| meta.function-call entity.name.function | #FFD580 | |
| source support.type.object.module | #F29E74 | |
| source meta.export.default meta.class meta.method.declaration meta.block meta.function-call support.function.console | #F27983 | |
| keyword.operator.new | #FA871C | |
| entity.name.type | #FFD580 | |
| source meta.export.default meta.class meta.method.declaration meta.block meta.var.expr new.expr entity.name.type | #F29E74 | |
| source meta.export.default meta.class meta.method.declaration meta.block variable.other.object.property | #CBCCC6 | |
| source meta.export.default meta.class meta.method.declaration meta.block meta.block meta.array.literal variable.other.property | #CBCCC6 | |
| source meta.export.default meta.class meta.method.declaration meta.block variable.other.property | #CBCCC6 | |
| support.class.console | #0097A7 | |
| string, constant.other.symbol | #bae67e | |
| variable.parameter, meta.parameter | #D4BFFFAE | |
| comment | #5c6773 | italic |
| variable.language.this | #5CCFE6 | italic |
| variable.language.super | #5CCFE6 | italic |
| meta.object-literal.key | #bae67e | |
| keyword.control.default | #FF9944 | |
| keyword.control.import | #F29E74 | |
| keyword.control.export | #F29E74 | |
| string.regexp, constant.character, constant.other | #95e6cb | |
| constant.numeric | #8C9EFF | |
| constant.language | #ffcc66 | |
| meta.constant, entity.name.constant | #d4bfff | |
| variable.member | #f28779 | |
| storage, storage.type.keyword | #FF9944 | |
| keyword | #FF9944 | |
| keyword.operator | #f29e74 | |
| punctuation.section | #cbccc6 | |
| punctuation.accessor | #f29e74 | |
| entity.other.inherited-class | #5ccfe6 | |
| storage.type.function | #FF9944 | |
| variable.parameter, meta.parameter | #d4bfff | |
| variable.function, variable.annotation, meta.function-call.generic, support.function.go | #ffd580 | |
| entity.name.import, entity.name.package | #bae67e | |
| entity.name.tag, meta.tag.sgml | #5ccfe6 | |
| punctuation.definition.tag.end, punctuation.definition.tag.begin, punctuation.definition.tag | #5ccfe680 | |
| entity.other.attribute-name | #ffd580 | |
| support.constant | #f29e74 | italic |
| storage.type.class | #FF9944 | bold |
| meta.decorator variable.other, meta.decorator punctuation.decorator, storage.type.annotation, variable.annotation, punctuation.definition.annotation | #ffe6b3 | |
| invalid | #E74C3C | |
| meta.diff, meta.diff.header | #c594c5 | |
| source.css entity.name.tag, source.sass entity.name.tag, source.scss entity.name.tag, source.less entity.name.tag, source.stylus entity.name.tag | #73d0ff | |
| source.css support.type, source.sass support.type, source.scss support.type, source.less support.type, source.stylus support.type | #5c6773 | |
| support.type.property-name | #5ccfe6 | |
| constant.numeric.line-number.find-in-files - match | #5c6773 | |
| constant.numeric.line-number.match | #FF9944 | |
| entity.name.filename.find-in-files | #bae67e | |
| message.error | #E74C3C | |
| markup.heading, markup.heading entity.name | #bae67e | bold |
| markup.underline.link, string.other.link | #5ccfe6 | |
| markup.italic | #f28779 | italic |
| markup.bold | #f28779 | bold |
| markup.italic markup.bold, markup.bold markup.italic | #f28779 | bold italic |
| markup.raw | #5c6773 | bold italic |
| markup.raw.inline | #5c6773 | bold italic |
| meta.separator | #5c6773 | bold |
| markup.quote | #95e6cb | italic |
| markup.list punctuation.definition.list.begin | #ffd580 | |
| markup.inserted | #a6cc70 | |
| markup.changed | #77a8d9 | |
| markup.deleted | #f27983 | |
| markup.strike | #ffe6b3 | |
| markup.table | #5ccfe6 | |
| text.html.markdown markup.inline.raw | #f29e74 | |
| text.html.markdown meta.dummy.line-break | #5c6773 | |
| punctuation.definition.markdown | #5c6773 |
Shiki preview
TypeScript sample highlighted with this variant's colors and tokenColors.
Loading...