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.activeBackground#707a8cb3
  • editorIndentGuide.background#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
  • quickInput.list.focusBackground#191e2a
  • 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#bae67e
string.regexp, constant.character, constant.other#95e6cb
constant.other.color#F29668
constant.numeric, variable.other.enummember#9dd2bb
constant.numeric.css#f07178
constant.language#f29668
constant.language.boolean#d4bfff
variable#cbcebc
variable.other.constant#cbcebc
variable.other.readwrite, entity.name.variable#cbcebc
variable.other.property#cbcebc
variable.other.assignment.go#d4bfff
variable.other.constant.property#d4bfff
variable.member#f28779
variable.language#ffa759italic
variable.language.this#f28779italic
support.variable#ffa759
storage#ffa759
storage.modifier#ffa759italic
storage.type#ffa759italic
storage.modifier.async#f07178italic
storage.type.class#f07178italic
keyword#ffa759
keyword.control.flow#f07178
keyword.control.loop#f07178
keyword.control.conditional#f07178
keyword.control.trycatch#f07178
keyword.operator#ff6188
keyword.operator.new#f07178
punctuation.separator, punctuation.terminator#cbccc6b3
punctuation.definition#cbccc6b3
punctuation.section#cbcebc
punctuation.accessor#f29e74
source.java storage.type, source.haskell storage.type, source.c storage.type#95e6cb
entity.other.inherited-class#FF8F40
storage.type.function#ffa759
storage.type.function.arrow#f07178
source.java storage.type.primitive#95e6cb
variable.parameter, meta.parameter#d4bfffitalic
variable.function, variable.annotation, meta.function-call.generic, support.function.go#ffcc66
support.function, support.macro#ffcc66
support.function.console#ffcc66
entity.name.import, entity.name.package#bae67e
entity.name#f28779
entity.name.namespace#ffb454
entity.name.function, support.function#ffcc66
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#f28779italic
support.type, support.class, source.go storage.type#f28779
support.class.component#9CD1BB
support.class.dart#9cd1bb
support.class.promise#ffa759
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#ffd580
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#bae67e
entity.other.attribute-name.class.css#bae67e
entity.other.attribute-name.id.css#ffcc66
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#bae67e
message.error#ff3333
markup.heading, markup.heading entity.name#bae67ebold
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#ffa759
meta.object-literal.key#cbcebcitalic
entity.name.type#ff8f40
entity.name.type.class#ff8f40
support.type.primitive#ff8f40
text.gitignore#ffd76ditalic

Shiki preview

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

Loading...