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#00010a
  • activityBar.border#00010a
  • activityBar.foreground#b3b1ad
  • activityBarBadge.background#f07178
  • activityBarBadge.foreground#0a0e14
  • badge.background#e6b450
  • badge.foreground#0a0e14
  • button.background#e6b450
  • button.foreground#0a0e14
  • button.hoverBackground#e1af4b
  • debugExceptionWidget.background#0d1016
  • debugExceptionWidget.border#01060e
  • debugToolBar.background#0d1016
  • diffEditor.insertedTextBackground#c2d94c26
  • diffEditor.removedTextBackground#f2966826
  • dropdown.background#0d1016
  • dropdown.border#191e25
  • dropdown.foreground#3d424d
  • editor.background#080c11
  • editor.findMatchBackground#e6b4500d
  • editor.findMatchBorder#e6b450
  • editor.findMatchHighlightBackground#e6b4500d
  • editor.findMatchHighlightBorder#e6b45059
  • editor.findRangeHighlightBackground#121922
  • editor.findRangeHighlightBorder#0a0e1400
  • editor.foreground#dadbc0
  • editor.inactiveSelectionBackground#121922
  • editor.lineHighlightBackground#eaf2f10c
  • editor.rangeHighlightBackground#01060e
  • editor.selectionBackground#3d424d
  • editor.selectionHighlightBackground#121922
  • editor.selectionHighlightBorder#1d2936
  • editor.wordHighlightBackground#121922
  • editor.wordHighlightStrongBackground#e6b45033
  • editorBracketMatch.background#3d424d4d
  • editorBracketMatch.border#3d424d99
  • editorCodeLens.foreground#626a73
  • editorCursor.foreground#ff4057
  • editorError.foreground#ff3333
  • editorGroup.border#01060e
  • editorGroup.emptyBackground#0a0e14
  • editorGroupHeader.noTabsBackground#0a0e14
  • editorGroupHeader.tabsBackground#0a0e14
  • editorGroupHeader.tabsBorder#080c11
  • editorGutter.addedBackground#91b36299
  • editorGutter.deletedBackground#d96c7599
  • editorGutter.modifiedBackground#6994bf99
  • editorHoverWidget.background#0d1016
  • editorHoverWidget.border#000000
  • editorHoverWidget.foreground#cbccc6
  • editorIndentGuide.activeBackground1#3d424db3
  • editorIndentGuide.background1#3d424d66
  • editorLineNumber.activeForeground#3d424de6
  • editorLineNumber.foreground#3d424d99
  • editorLink.activeForeground#e6b450
  • editorMarkerNavigation.background#0d1016
  • editorOverviewRuler.addedForeground#91b36299
  • editorOverviewRuler.border#0a0e14
  • editorOverviewRuler.deletedForeground#d96c7599
  • editorOverviewRuler.errorForeground#ff3333
  • editorOverviewRuler.modifiedForeground#6994bf99
  • editorOverviewRuler.warningForeground#e6b450
  • editorRuler.foreground#3d424d66
  • editorSuggestWidget.background#0d1016
  • editorSuggestWidget.border#000000
  • editorSuggestWidget.foreground#cbccc6
  • editorSuggestWidget.highlightForeground#e6b450
  • editorSuggestWidget.selectedBackground#01060e
  • editorWarning.foreground#e6b450
  • editorWhitespace.foreground#3d424d99
  • editorWidget.background#0d1016
  • editorWidget.foreground#cbccc6
  • errorForeground#d95757
  • extensionButton.prominentBackground#e6b450
  • extensionButton.prominentForeground#0a0e14
  • extensionButton.prominentHoverBackground#e1af4b
  • focusBorder#292d36
  • foreground#3d424d
  • gitDecoration.conflictingResourceForeground#d96c75
  • gitDecoration.deletedResourceForeground#d96c75b3
  • gitDecoration.ignoredResourceForeground#242831
  • gitDecoration.modifiedResourceForeground#a6cc70
  • gitDecoration.submoduleResourceForeground#ffee99b3
  • gitDecoration.untrackedResourceForeground#f29668
  • input.background#0d1016
  • input.border#191e25
  • input.foreground#b3b1ad
  • input.placeholderForeground#2e323c
  • inputOption.activeBorder#e6b450
  • inputValidation.errorBackground#0a0e14
  • inputValidation.errorBorder#ff3333
  • inputValidation.infoBackground#0a0e14
  • inputValidation.infoBorder#95e6cb
  • inputValidation.warningBackground#0a0e14
  • inputValidation.warningBorder#ffb454
  • list.activeSelectionBackground#191e2a
  • list.activeSelectionForeground#ffb454
  • list.errorForeground#d95757
  • list.focusBackground#01060e
  • list.focusForeground#ffcc66
  • list.highlightForeground#e6b450
  • list.hoverBackground#3d424d66
  • list.hoverForeground#ffcc66
  • list.inactiveSelectionBackground#3d424d66
  • list.inactiveSelectionForeground#ffb454
  • list.invalidItemForeground#2e323c
  • panel.background#060b0f
  • panel.border#00010a
  • panelTitle.activeBorder#e6b450
  • panelTitle.activeForeground#b3b1ad
  • panelTitle.inactiveForeground#3d424d
  • peekView.border#01060e
  • peekViewEditor.background#0d1016
  • peekViewEditor.matchHighlightBackground#e6b45033
  • peekViewResult.background#0d1016
  • peekViewResult.fileForeground#3d424d
  • peekViewResult.matchHighlightBackground#e6b45033
  • peekViewTitle.background#0d1016
  • peekViewTitleDescription.foreground#3d424d
  • peekViewTitleLabel.foreground#3d424d
  • pickerGroup.border#01060e
  • pickerGroup.foreground#242831
  • progressBar.background#e6b450
  • quickInputList.focusBackground#01060e
  • scrollbar.shadow#01060e
  • scrollbarSlider.activeBackground#3d424db3
  • scrollbarSlider.background#3d424d66
  • scrollbarSlider.hoverBackground#3d424d99
  • selection.background#4e545f
  • settings.headerForeground#b3b1ad
  • settings.modifiedItemIndicator#6994bf
  • sideBar.background#03080f
  • sideBar.border#03080f
  • sideBar.foreground#b8b0b0
  • sideBarSectionHeader.background#03080f
  • sideBarSectionHeader.foreground#3d424d
  • sideBarTitle.foreground#707a8c
  • statusBar.background#0a0e14
  • statusBar.border#01060e
  • statusBar.debuggingBackground#f29668
  • statusBar.debuggingForeground#0a0e14
  • statusBar.foreground#3d424d
  • statusBar.noFolderBackground#0d1016
  • statusBarItem.activeBackground#00000050
  • statusBarItem.hoverBackground#00000030
  • statusBarItem.prominentBackground#01060e
  • statusBarItem.prominentHoverBackground#00000030
  • statusBarItem.remoteBackground#ff9940
  • tab.activeBackground#080c11
  • tab.activeBorderTop#e6b450
  • tab.activeForeground#cbccc6
  • tab.border#0a0e14
  • tab.hoverBackground#3d424d66
  • tab.inactiveBackground#0a0e14
  • tab.inactiveForeground#3d424d
  • tab.unfocusedActiveBorderTop#3d424d
  • tab.unfocusedActiveForeground#3d424d
  • tab.unfocusedInactiveForeground#3d424d
  • terminal.ansiBlack#01060e
  • terminal.ansiBlue#95e6cb
  • terminal.ansiBrightBlack#686868
  • terminal.ansiBrightBlue#95e6cb
  • terminal.ansiBrightCyan#95e6cb
  • terminal.ansiBrightGreen#c2d94c
  • terminal.ansiBrightMagenta#ffee99
  • terminal.ansiBrightRed#f07178
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#ffb454
  • terminal.ansiCyan#90e1c6
  • terminal.ansiGreen#91b362
  • terminal.ansiMagenta#fae994
  • terminal.ansiRed#ea6c73
  • terminal.ansiWhite#c7c7c7
  • terminal.ansiYellow#f9af4f
  • terminal.background#060b0f
  • terminal.foreground#b3b1ad
  • terminalCursor.foreground#ff4057
  • textBlockQuote.background#0d1016
  • textLink.activeForeground#e6b450
  • textLink.foreground#e6b450
  • textPreformat.foreground#b3b1ad
  • titleBar.activeBackground#0a0e14
  • titleBar.activeForeground#b3b1ad
  • titleBar.border#01060e
  • titleBar.inactiveBackground#0a0e14
  • titleBar.inactiveForeground#3d424d
  • walkThrough.embeddedEditorBackground#0d1016
  • widget.shadow#00010a

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#5c6773italic
string, constant.other.symbol#C2D94C
string.regexp, constant.character, constant.other#95e6cb
constant.other.color#F29668
constant.numeric#9dd2bb
constant.numeric.css#f07178
constant.language#f29668
constant.language.boolean#d4bfff
variable#dadbc0
variable.other.constant#d4bfff
variable.member#f28779
variable.language#ffa759italic
variable.language.this#f28779italic
support.variable#ffa759
storage#ffa759
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.section#dadbc0
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#FFB454
entity.name.import, entity.name.package#bae67e
entity.name#f28779
entity.name.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#dadbc0
entity.other.attribute-name#FFB454italic
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#dadbc0
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#dadbc0
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#ffb454italic
entity.name.type#ff8f40
entity.name.type.class#f07178
support.type.primitive#ff8f40
text.gitignore#ffd76ditalic

Shiki preview

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

Loading...