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#ffa759
  • activityBar.activeFocusBorder#ffcc66
  • activityBar.background#0d131f
  • activityBar.border#0d131f
  • activityBar.foreground#b3b1ad
  • activityBarBadge.background#f07178
  • activityBarBadge.foreground#1f2430
  • badge.background#ffa759
  • badge.foreground#1f2430
  • button.background#ffb454
  • button.foreground#1f2430
  • button.hoverBackground#fac761
  • debugExceptionWidget.background#232834
  • debugExceptionWidget.border#191e2a
  • debugToolBar.background#232834
  • diffEditor.insertedTextBackground#bae67e26
  • diffEditor.removedTextBackground#f29e7426
  • dropdown.background#232834
  • dropdown.border#373e4c
  • dropdown.foreground#707a8c
  • editor.background#141824
  • editor.findMatchBackground#ffcc660d
  • editor.findMatchBorder#ffcc66
  • editor.findMatchHighlightBackground#ffcc660d
  • editor.findMatchHighlightBorder#ffcc6659
  • editor.findRangeHighlightBackground#262f3e
  • editor.findRangeHighlightBorder#1f243000
  • editor.foreground#CBCEBC
  • editor.inactiveSelectionBackground#262f3e
  • editor.lineHighlightBackground#3d424d46
  • editor.rangeHighlightBackground#191e2a
  • editor.selectionBackground#3d424d
  • editor.selectionHighlightBackground#262f3e
  • editor.selectionHighlightBorder#313e52
  • editor.wordHighlightBackground#262f3e
  • editor.wordHighlightStrongBackground#ffcc6633
  • editorBracketMatch.background#707a8c4d
  • editorBracketMatch.border#707a8c99
  • editorCodeLens.foreground#5c6773
  • editorCursor.foreground#ff4057
  • editorError.foreground#ff3333
  • editorGroup.border#141824
  • editorGroup.emptyBackground#191e2a
  • editorGroupHeader.noTabsBackground#1f2430
  • editorGroupHeader.tabsBackground#1f2430
  • editorGroupHeader.tabsBorder#141824
  • editorGutter.addedBackground#a6cc7099
  • editorGutter.deletedBackground#f2798399
  • editorGutter.modifiedBackground#77a8d999
  • editorHoverWidget.background#232834
  • editorHoverWidget.border#101521
  • editorHoverWidget.foreground#cbccc6
  • editorIndentGuide.activeBackground1#707a8cb3
  • editorIndentGuide.background1#707a8c4d
  • editorLineNumber.activeForeground#707a8ccc
  • editorLineNumber.foreground#707a8c66
  • editorLink.activeForeground#ffcc66
  • editorMarkerNavigation.background#232834
  • editorOverviewRuler.addedForeground#a6cc7099
  • editorOverviewRuler.border#141824
  • editorOverviewRuler.deletedForeground#f2798399
  • editorOverviewRuler.errorForeground#ff3333
  • editorOverviewRuler.modifiedForeground#77a8d999
  • editorOverviewRuler.warningForeground#ffcc66
  • editorRuler.foreground#707a8c4d
  • editorSuggestWidget.background#232834
  • editorSuggestWidget.border#101521
  • editorSuggestWidget.foreground#cbccc6
  • editorSuggestWidget.highlightForeground#ffcc66
  • editorSuggestWidget.selectedBackground#191e2a
  • editorWarning.foreground#ffcc66
  • editorWhitespace.foreground#707a8c66
  • editorWidget.background#232834
  • editorWidget.foreground#cbccc6
  • errorForeground#ff6666
  • extensionButton.prominentBackground#ffcc66
  • extensionButton.prominentForeground#1f2430
  • extensionButton.prominentHoverBackground#fac761
  • focusBorder#505867
  • foreground#707a8c
  • gitDecoration.conflictingResourceForeground#ed8274
  • gitDecoration.deletedResourceForeground#f27983b3
  • gitDecoration.ignoredResourceForeground#484f5e
  • gitDecoration.modifiedResourceForeground#a6cc70
  • gitDecoration.submoduleResourceForeground#d4bfffb3
  • gitDecoration.untrackedResourceForeground#ed9366
  • input.background#232834
  • input.border#373e4c
  • input.foreground#cbccc6
  • input.placeholderForeground#586070
  • inputOption.activeBorder#ffcc66
  • inputValidation.errorBackground#1f2430
  • inputValidation.errorBorder#ff3333
  • inputValidation.infoBackground#1f2430
  • inputValidation.infoBorder#95e6cb
  • inputValidation.warningBackground#1f2430
  • inputValidation.warningBorder#ffd580
  • list.activeSelectionBackground#191e2a
  • list.activeSelectionForeground#ffb454
  • list.errorForeground#ff6666
  • list.focusBackground#191e2a
  • list.focusForeground#ffcc66
  • list.highlightForeground#ffcc66
  • list.hoverBackground#3d424d66
  • list.hoverForeground#ffcc66
  • list.inactiveSelectionBackground#3d424d66
  • list.inactiveSelectionForeground#ffb454
  • list.invalidItemForeground#586070
  • panel.background#1b1c24
  • panel.border#101521
  • 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
  • progressBar.background#ffcc66
  • quickInputList.focusBackground#191e2a
  • scrollbar.shadow#141824
  • scrollbarSlider.activeBackground#707a8cb3
  • scrollbarSlider.background#707a8c66
  • scrollbarSlider.hoverBackground#707a8c99
  • selection.background#4e545f
  • settings.headerForeground#cbccc6
  • settings.modifiedItemIndicator#77a8d9
  • sideBar.background#101521
  • sideBar.border#101521
  • sideBar.foreground#b8b0b0
  • sideBarSectionHeader.background#101521
  • sideBarSectionHeader.foreground#707a8c
  • sideBarTitle.foreground#707a8c
  • statusBar.background#1f2430
  • statusBar.border#191e2a
  • statusBar.debuggingBackground#f29e74
  • statusBar.debuggingForeground#1f2430
  • statusBar.foreground#707a8c
  • statusBar.noFolderBackground#232834
  • statusBarItem.activeBackground#00000050
  • statusBarItem.hoverBackground#00000030
  • statusBarItem.prominentBackground#191e2a
  • statusBarItem.prominentHoverBackground#00000030
  • statusBarItem.remoteBackground#ff9940
  • tab.activeBackground#141824
  • tab.activeBorderTop#ffcc66
  • tab.activeForeground#edf0f5
  • tab.border#1f2430
  • tab.hoverBackground#3d424d66
  • tab.inactiveBackground#1f2430
  • tab.inactiveForeground#707a8c
  • tab.unfocusedActiveBorderTop#707a8c
  • tab.unfocusedActiveForeground#707a8c
  • tab.unfocusedInactiveForeground#707a8c
  • terminal.ansiBlack#191e2a
  • terminal.ansiBlue#95e6cb
  • terminal.ansiBrightBlack#686868
  • terminal.ansiBrightBlue#95e6cb
  • terminal.ansiBrightCyan#95e6cb
  • terminal.ansiBrightGreen#bae67e
  • terminal.ansiBrightMagenta#d4bfff
  • terminal.ansiBrightRed#f28779
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#ffd580
  • terminal.ansiCyan#95e6cb
  • terminal.ansiGreen#a6cc70
  • terminal.ansiMagenta#cfbafa
  • terminal.ansiRed#ed8274
  • terminal.ansiWhite#c7c7c7
  • terminal.ansiYellow#fad07b
  • terminal.background#1b1c24
  • terminal.foreground#cbccc6
  • terminalCursor.foreground#ff4057
  • textBlockQuote.background#232834
  • textLink.activeForeground#ffcc66
  • textLink.foreground#ffcc66
  • textPreformat.foreground#cbccc6
  • titleBar.activeBackground#1f2430
  • titleBar.activeForeground#cbccc6
  • titleBar.border#191e2a
  • titleBar.inactiveBackground#1f2430
  • titleBar.inactiveForeground#707a8c
  • walkThrough.embeddedEditorBackground#232834
  • widget.shadow#141925

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#5c6773italic
string, constant.other.symbol#A9DC76
string.regexp, constant.character, constant.other#78DCE8
constant.other.color#F29668
constant.numeric#78DCE8
constant.numeric.css#f07178
constant.language#f27983
constant.language.boolean#d4bfff
variable#cbcebc
variable.other.constant#C39AC9
variable.member#FF6188
variable.language#FC9867italic
variable.language.this#FC9867italic
support.variable#FC9867
storage#ffa759
storage.type#9CD1BBitalic
storage.modifier#FF6188italic
storage.modifier.async#FF6188italic
storage.type.class#9CD1BBitalic
keyword#ffa759
keyword.control#FF6188
keyword.operator#ff6188
keyword.operator.new#ff6188
punctuation.separator, punctuation.terminator#cbccc6b3
punctuation.section#cbcebc
punctuation.definition#CBCCC6B3
punctuation.accessor#f29e74
source.java storage.type, source.haskell storage.type, source.c storage.type#9CD1BB
entity.other.inherited-class#9CD1BB
storage.type.function#9CD1BB
storage.type.function.arrow#FF6188
source.java storage.type.primitive#9CD1BB
variable.parameter, meta.parameter#FC9867italic
variable.function, variable.annotation, meta.function-call.generic, support.function.go#FFD866
support.function, support.macro#FFD866
support.function.console#FFD866
entity.name.import, entity.name.package#A9DC76
entity.name#f28779
entity.name.function#FFD866
entity.name.class#ff8f40
entity.name.tag, meta.tag.sgml#fc4085
punctuation.definition.tag.end, punctuation.definition.tag.begin, punctuation.definition.tag#b3b1ad
text.html.derivative#cbcebc
entity.other.attribute-name#ffcc66italic
support.constant#9CD1BBitalic
support.type, support.class, source.go storage.type#9CD1BB
support.class.promise#9CD1BB
meta.decorator variable.other, meta.decorator punctuation.decorator, storage.type.annotation#cbcebc
invalid#ff3333
meta.diff, meta.diff.header#c594c5
source.ruby variable.other.readwrite#FFD866
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#95e6cb
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#A9DC76
entity.other.attribute-name.class.css#A9DC76
entity.other.attribute-name.id.css#FFD866
support.type.property-name.css#cbcebc
constant.numeric.line-number.find-in-files - match#5c6773
constant.numeric.line-number.match#ffa759
entity.name.filename.find-in-files#A9DC76
message.error#FF6188
markup.heading, markup.heading entity.name#A9DC76bold
markup.underline.link, string.other.link#95e6cb
markup.italic#f28779italic
markup.bold#f28779bold
markup.italic markup.bold, markup.bold markup.italicbold italic
markup.raw
markup.raw.inline
meta.separator#5c6773bold
markup.quote#95e6cbitalic
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
string.json support.type.property-name.json#f29e74
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#e6b450
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#f2ae49
constant.language.json#d4bfff
constant.numeric.json#f27983
string.unquoted, constant.other.object.key#e6b450
meta.brace.curly, meta.brace.round, meta.brace.square#b3b1ad
punctuation.quasi.element.begin, punctuation.quasi.element.end, punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end#FC9867
meta.object-literal.key#CBCCC6italic
entity.name.type#9CD1BB
entity.name.type.class#9CD1BB
support.type.primitive#9CD1BB
text.gitignore#FFD866italic

Shiki preview

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

Loading...