Skip to main content
Coding Theme

Mayukai Theme

Publisher: GulajavaMinistudioThemes in package: 9

Dark theme based on mixing swatch of Ayu Theme, Andromeda Theme, Monokai, Material Colors, Original Gruvbox Darktooth Colors, and Dracula Colors.

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.activeBorder#fe8019
  • activityBar.activeFocusBorder#fabd2f
  • activityBar.background#1d2021
  • activityBar.border#1d2021
  • activityBar.foreground#ebdbb2
  • activityBarBadge.background#fe8019
  • activityBarBadge.foreground#1d2021
  • badge.background#fe8019
  • badge.foreground#1d2021
  • button.background#fabd2f
  • button.foreground#282828
  • button.hoverBackground#d79921
  • debugExceptionWidget.background#1d2021
  • debugExceptionWidget.border#282828
  • debugToolBar.background#1d2021
  • diffEditor.insertedTextBackground#bae67e26
  • diffEditor.removedTextBackground#f29e7426
  • dropdown.background#504945
  • dropdown.border#665c54
  • dropdown.foreground#ebdbb2
  • dropdown.listBackground#504945
  • editor.background#282828
  • editor.findMatchBackground#ffcc660d
  • editor.findMatchBorder#fabd2f
  • editor.findMatchHighlightBackground#ffcc660d
  • editor.findMatchHighlightBorder#ffcc6659
  • editor.findRangeHighlightBackground#3c3836
  • editor.findRangeHighlightBorder#504945
  • editor.foreground#ebdbb2
  • editor.inactiveSelectionBackground#3c3836
  • editor.lineHighlightBackground#1d2021
  • editor.rangeHighlightBackground#1d2021
  • editor.selectionBackground#504945
  • editor.selectionHighlightBackground#3c3836
  • editor.selectionHighlightBorder#3c3836
  • editor.wordHighlightBackground#3c3836
  • editor.wordHighlightStrongBackground#ffcc6633
  • editorBracketMatch.background#665c54
  • editorBracketMatch.border#665c54
  • editorCodeLens.foreground#bdae93
  • editorCursor.foreground#ff4057
  • editorError.foreground#fb4934
  • editorGroup.border#1d2021
  • editorGroup.emptyBackground#282828
  • editorGroupHeader.noTabsBackground#282828
  • editorGroupHeader.tabsBackground#1d2021
  • editorGroupHeader.tabsBorder#282828
  • editorGutter.addedBackground#b8bb26
  • editorGutter.deletedBackground#d3869b
  • editorGutter.modifiedBackground#83a598
  • editorHoverWidget.background#1d2021
  • editorHoverWidget.border#282828
  • editorHoverWidget.foreground#ebdbb2
  • editorIndentGuide.activeBackground1#707a8cb3
  • editorIndentGuide.background1#707a8c4d
  • editorLineNumber.activeForeground#928374
  • editorLineNumber.foreground#7c6f64
  • editorLink.activeForeground#fabd2f
  • editorMarkerNavigation.background#282828
  • editorOverviewRuler.addedForeground#b8bb26
  • editorOverviewRuler.border#282828
  • editorOverviewRuler.deletedForeground#d3869b
  • editorOverviewRuler.errorForeground#fb4934
  • editorOverviewRuler.modifiedForeground#83a598
  • editorOverviewRuler.warningForeground#fabd2f
  • editorRuler.foreground#707a8c4d
  • editorSuggestWidget.background#1d2021
  • editorSuggestWidget.border#504945
  • editorSuggestWidget.foreground#ebdbb2
  • editorSuggestWidget.highlightForeground#fabd2f
  • editorSuggestWidget.selectedBackground#282828
  • editorWarning.foreground#fabd2f
  • editorWhitespace.foreground#707a8c66
  • editorWidget.background#1d2021
  • editorWidget.foreground#ebdbb2
  • errorForeground#fb4934
  • extensionButton.prominentBackground#fabd2f
  • extensionButton.prominentForeground#1d2021
  • extensionButton.prominentHoverBackground#fabd2f
  • focusBorder#bdae93
  • foreground#ebdbb2
  • gitDecoration.conflictingResourceForeground#b16286
  • gitDecoration.deletedResourceForeground#b16286
  • gitDecoration.ignoredResourceForeground#484f5e
  • gitDecoration.modifiedResourceForeground#8ec07c
  • gitDecoration.submoduleResourceForeground#d3869b
  • gitDecoration.untrackedResourceForeground#d79921
  • input.background#504945
  • input.border#504945
  • input.foreground#ebdbb2
  • input.placeholderForeground#ebdbb2
  • inputOption.activeBorder#fabd2f
  • inputValidation.errorBackground#3c3836
  • inputValidation.errorBorder#cc241d
  • inputValidation.infoBackground#665c54
  • inputValidation.infoBorder#83a598
  • inputValidation.warningBackground#3c3836
  • inputValidation.warningBorder#d79921
  • list.activeSelectionBackground#282828
  • list.activeSelectionForeground#fabd2f
  • list.errorForeground#fb4934
  • list.focusBackground#3c3836
  • list.focusForeground#fabd2f
  • list.highlightForeground#fabd2f
  • list.hoverBackground#3d424d66
  • list.hoverForeground#fabd2f
  • list.inactiveSelectionBackground#3d424d66
  • list.inactiveSelectionForeground#d79921
  • list.invalidItemForeground#586070
  • minimap.errorHighlight#fb4934
  • minimap.selectionHighlight#fabd2f
  • minimap.warningHighlight#fe8019
  • panel.background#3c3836
  • panel.border#504945
  • panelTitle.activeBorder#fabd2f
  • panelTitle.activeForeground#ebdbb2
  • panelTitle.inactiveForeground#a89984
  • peekView.border#3c3836
  • peekViewEditor.background#1d2021
  • peekViewEditor.matchHighlightBackground#ffcc6633
  • peekViewResult.background#1d2021
  • peekViewResult.fileForeground#83a598
  • peekViewResult.matchHighlightBackground#ffcc6633
  • peekViewTitle.background#282828
  • peekViewTitleDescription.foreground#83a598
  • peekViewTitleLabel.foreground#83a598
  • pickerGroup.border#1d2021
  • pickerGroup.foreground#484f5e
  • progressBar.background#fabd2f
  • quickInputList.focusBackground#3c3836
  • scrollbar.shadow#282828
  • scrollbarSlider.activeBackground#d5c4a18a
  • scrollbarSlider.background#a8998491
  • scrollbarSlider.hoverBackground#bdae93c2
  • selection.background#867c5e
  • settings.headerForeground#ebdbb2
  • settings.modifiedItemIndicator#83a598
  • sideBar.background#1d2021
  • sideBar.border#1d2021
  • sideBar.foreground#bdae93
  • sideBarSectionHeader.background#1d2021
  • sideBarSectionHeader.foreground#ebdbb2
  • sideBarTitle.foreground#707a8c
  • statusBar.background#3c3836
  • statusBar.border#3c3836
  • statusBar.debuggingBackground#d3869b
  • statusBar.debuggingForeground#282828
  • statusBar.foreground#a89984
  • statusBar.noFolderBackground#282828
  • statusBarItem.activeBackground#00000050
  • statusBarItem.hoverBackground#00000030
  • statusBarItem.prominentBackground#3c3836
  • statusBarItem.prominentHoverBackground#00000030
  • statusBarItem.remoteBackground#d79921
  • tab.activeBackground#282828
  • tab.activeBorderTop#fe8019
  • tab.activeForeground#ebdbb2
  • tab.border#1d2021
  • tab.hoverBackground#3c3836
  • tab.inactiveBackground#1d2021
  • tab.inactiveForeground#a89984
  • tab.unfocusedActiveBorderTop#707a8c
  • tab.unfocusedActiveForeground#707a8c
  • tab.unfocusedInactiveForeground#707a8c
  • terminal.ansiBlack#1d2021
  • terminal.ansiBlue#83a598
  • terminal.ansiBrightBlack#686868
  • terminal.ansiBrightBlue#83a598
  • terminal.ansiBrightCyan#83a598
  • terminal.ansiBrightGreen#8ec07c
  • terminal.ansiBrightMagenta#d3869b
  • terminal.ansiBrightRed#fb4934
  • terminal.ansiBrightWhite#ebdbb2
  • terminal.ansiBrightYellow#fabd2f
  • terminal.ansiCyan#83a598
  • terminal.ansiGreen#8ec07c
  • terminal.ansiMagenta#d3869b
  • terminal.ansiRed#fb4934
  • terminal.ansiWhite#ebdbb2
  • terminal.ansiYellow#fabd2f
  • terminal.background#3c3836
  • terminal.foreground#ebdbb2
  • terminalCursor.foreground#ff4057
  • textBlockQuote.background#232834
  • textLink.activeForeground#fabd2f
  • textLink.foreground#fabd2f
  • textPreformat.foreground#cbccc6
  • titleBar.activeBackground#1d2021
  • titleBar.activeForeground#cbccc6
  • titleBar.border#1d2021
  • titleBar.inactiveBackground#282828
  • titleBar.inactiveForeground#707a8c
  • walkThrough.embeddedEditorBackground#282828
  • widget.shadow#504945

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#7c6f64italic
string, constant.other.symbol#b8bb26
string.regexp, constant.character, constant.other#8ec07c
constant.other.color#fe8019
constant.numeric#d3869b
constant.numeric.css#d3869b
constant.language#fabd2f
constant.language.boolean#d3869b
variable#ebdbb2
variable.other.constant#d3869b
variable.member#d3869b
variable.language#fabd2fitalic
variable.language.prototype#d3869bitalic
variable.language.this#fe8019italic
support.variable#d3869b
storage#fabd2f
storage.type#fb4934italic
storage.modifier.async#fb4934italic
storage.type.class#fb4934italic
keyword#fb4934
keyword.other.unit#83a598
keyword.control.flow#fb4934
keyword.control.loop#fb4934
keyword.control.conditional#fb4934
keyword.operator#8ec07c
keyword.operator.new#fb4934
punctuation.separator, punctuation.terminator#928374
punctuation.section#ebdbb2
punctuation.accessor#8ec07c
source.java storage.type, source.haskell storage.type, source.c storage.type#83a598
entity.other.inherited-class#83a598
storage.type.function#8ec07c
storage.type.function.arrow#8ec07c
source.java storage.type.primitive#8ec07c
variable.parameter, meta.parameter#83a598italic
variable.function, variable.annotation, meta.function-call.generic, support.function.go#fabd2f
support.function, support.macro#fabd2f
support.function.console#fabd2f
entity.name.import, entity.name.package#8ec07c
entity.name#fb4934
entity.name.function#fabd2f
entity.name.class#fe8019
entity.name.tag, meta.tag.sgml#8ec07c
punctuation.definition.tag.end, punctuation.definition.tag.begin, punctuation.definition.tag#928374
text.html.derivative#ebdbb2
entity.other.attribute-name#fabd2fitalic
support.constant#d3869bitalic
support.type, support.class, source.go storage.type#fe8019
support.class.promise#fabd2f
meta.decorator variable.other, meta.decorator punctuation.decorator, storage.type.annotation#ebdbb2
meta.decorator punctuation.decorator#ebdbb2
invalid#fb3934
meta.diff, meta.diff.header#d3869b
source.ruby variable.other.readwrite#fabd2f
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#8ec07c
source.css support.type, source.sass support.type, source.scss support.type, source.less support.type, source.stylus support.type#83a598
support.type.property-name#8ec07c
entity.other.attribute-name.class.css#8ec07c
entity.other.attribute-name.id.css#fabd2f
support.type.property-name.css#ebdbb2
constant.numeric.line-number.find-in-files - match#83a598
constant.numeric.line-number.match#fe8019
entity.name.filename.find-in-files#8ec07c
message.error#fb4934
markup.heading, markup.heading entity.name#8ec07cbold
markup.underline.link, string.other.link#8ec07c
markup.italic#d3869bitalic
markup.bold#d3869bbold
markup.italic markup.bold, markup.bold markup.italicbold italic
markup.raw
markup.raw.inline
meta.separator#bdae93bold
markup.quote#83a598italic
markup.list punctuation.definition.list.begin#fabd2f
markup.inserted#b8bb26
markup.changed#83a598
markup.deleted#fb4934
markup.strike#bdae93
markup.table#82a598
text.html.markdown markup.inline.raw#fe8019
text.html.markdown meta.dummy.line-break#928374
punctuation.definition.markdown#928374
string.json support.type.property-name.json#fe8019
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#fabd2f
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#d79921
constant.language.json#d3869b
constant.numeric.json#d3869b
string.unquoted, constant.other.object.key#83a598
meta.brace.curly, meta.brace.round, meta.brace.square#d5c4a1
punctuation.quasi.element.begin, punctuation.quasi.element.end, punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end#fe8019
meta.object-literal.key#ebdbb2italic
entity.name.type#fe8019
entity.name.type.class#fe8019
support.type.primitive#fe8019
text.gitignore#d5c4a1italic

Shiki preview

TypeScript sample highlighted with this variant's colors and tokenColors.

Loading...