Makurai Theme

Name: Makurai Theme
Author: Skardy

Publisher: SkardyThemes in package: 3

just another vscode theme ~

GitHub

Color themes

VS Code preview

Full workbench mockup using this variant's colors and tokenColors.

Makurai Theme — Makurai Darker

colors

Workbench UI color keys from the theme JSON colors map.

activityBar.background#08090d
activityBar.foreground#ffffff
activityBar.inactiveForeground#ffffff66
activityBarBadge.background#f29718
activityBarBadge.foreground#000000
badge.background#4d4d4d
badge.foreground#ffffff
breadcrumb.activeSelectionForeground#e0e0e0
breadcrumb.background#08090d
breadcrumb.focusForeground#e0e0e0
breadcrumb.foreground#cccccccc
button.background#f29718
button.foreground#000000
button.hoverBackground#ff7733
button.secondaryBackground#3a3d41
button.secondaryForeground#ffffff
button.secondaryHoverBackground#45494e
checkbox.background#15161b
checkbox.border#00000000
checkbox.foreground#cccccc
debugExceptionWidget.background#15161b
debugExceptionWidget.border#3d424d
debugToolBar.background#15161b
debugToolBar.border#3d424d
diffEditor.border#444444
diffEditor.insertedTextBackground#9bb95533
diffEditor.removedTextBackground#ff000033
dropdown.background#15161b
dropdown.border#00000000
dropdown.foreground#cccccc
editor.background#08090d
editor.findMatchBackground#515c6a
editor.findMatchBorder#74879f
editor.findMatchHighlightBackground#ea5c0055
editor.findMatchHighlightBorder#ffffff00
editor.findRangeHighlightBackground#3a3d4166
editor.findRangeHighlightBorder#ffffff00
editor.foldBackground#264f784d
editor.foreground#f8f8f0
editor.hoverHighlightBackground#264f7840
editor.inactiveSelectionBackground#3a3d41
editor.lineHighlightBackground#ffffff0a
editor.lineHighlightBorder#282828
editor.rangeHighlightBackground#ffffff0b
editor.rangeHighlightBorder#ffffff00
editor.selectionBackground#3d424d
editor.selectionHighlightBackground#add6ff26
editor.selectionHighlightBorder#495F77
editor.wordHighlightBackground#575757b8
editor.wordHighlightStrongBackground#004972b8
editorBracketMatch.background#ffffff00
editorBracketMatch.border#5C6773
editorCodeLens.foreground#999999
editorCursor.background#000000
editorCursor.foreground#ffdb29
editorError.background#b73a3400
editorError.border#ffffff00
editorError.foreground#ff3333
editorGroup.border#444444
editorGroup.emptyBackground#08090d
editorGroupHeader.tabsBackground#08090d
editorGroupHeader.tabsBorder#08090d
editorGutter.addedBackground#587c0c
editorGutter.background#08090d
editorGutter.commentRangeForeground#c5c5c5
editorGutter.deletedBackground#94151b
editorGutter.foldingControlForeground#c5c5c5
editorGutter.modifiedBackground#0c7d9d
editorHoverWidget.background#15161b
editorHoverWidget.border#5c6773
editorHoverWidget.foreground#adada8
editorIndentGuide.activeBackground#5c6773
editorIndentGuide.background#2d3640
editorInfo.background#4490BF00
editorInfo.border#4490BF00
editorInfo.foreground#75beff
editorLineNumber.activeForeground#5C6773
editorLineNumber.foreground#25282e
editorLink.activeForeground#39bae6
editorMarkerNavigation.background#2d2d30
editorMarkerNavigationError.background#f48771
editorMarkerNavigationInfo.background#75beff
editorMarkerNavigationWarning.background#cca700
editorOverviewRuler.background#08090d
editorOverviewRuler.border#00000000
editorRuler.foreground#5a5a5a
editorSuggestWidget.background#15161b
editorSuggestWidget.border#5c6773
editorSuggestWidget.foreground#f8f8f0
editorSuggestWidget.highlightForeground#f29718
editorSuggestWidget.selectedBackground#3d424d89
editorWarning.background#A9904000
editorWarning.border#ffffff00
editorWarning.foreground#cca700
editorWhitespace.foreground#e3e4e229
editorWidget.background#15161b
editorWidget.foreground#cccccc
editorWidget.resizeBorder#5c6773
focusBorder#f29718
foreground#cccccc
gitDecoration.addedResourceForeground#95fb79
gitDecoration.conflictingResourceForeground#6c6cc4
gitDecoration.deletedResourceForeground#ff3333
gitDecoration.ignoredResourceForeground#8c8c8c
gitDecoration.modifiedResourceForeground#ffee99
gitDecoration.stageDeletedResourceForeground#ff3333
gitDecoration.stageModifiedResourceForeground#ffee99
gitDecoration.submoduleResourceForeground#39bae6
gitDecoration.untrackedResourceForeground#f29718
icon.foreground#cccccc
input.background#15161b
input.border#00000000
input.foreground#cccccc
input.placeholderForeground#a6a6a6
inputOption.activeBackground#007fd466
inputOption.activeBorder#007acc00
inputOption.activeForeground#ffffff
list.activeSelectionBackground#094771
list.activeSelectionForeground#ffffff
list.dropBackground#3d424d
list.focusBackground#264f7887
list.focusForeground#cccccc
list.highlightForeground#f29718
list.hoverBackground#264f78
list.hoverForeground#cccccc
list.inactiveSelectionBackground#3d424d
list.inactiveSelectionForeground#cccccc
listFilterWidget.background#653723
listFilterWidget.noMatchesOutline#be1100
listFilterWidget.outline#00000000
menu.background#15161b
menu.border#00000085
menu.foreground#cccccc
menu.selectionBackground#264f78
menu.selectionBorder#00000000
menu.selectionForeground#ffffff
menu.separatorBackground#bbbbbb
menubar.selectionBackground#3d424d87
menubar.selectionForeground#cccccc
merge.commonContentBackground#282828
merge.commonHeaderBackground#383838
merge.currentContentBackground#27403B
merge.currentHeaderBackground#367366
merge.incomingContentBackground#28384B
merge.incomingHeaderBackground#395F8F
minimap.background#08090d
minimap.errorHighlight#ff3333
minimap.findMatchHighlight#515c6a
minimap.selectionHighlight#3d424d
minimap.warningHighlight#cca700
minimapGutter.addedBackground#587c0c
minimapGutter.deletedBackground#94151b
minimapGutter.modifiedBackground#0c7d9d
notificationCenter.border#3d424d
notificationCenterHeader.background#15161b
notificationCenterHeader.foreground#f8f8f0
notifications.background#15161b
notifications.border#303031
notifications.foreground#cccccc
notificationsErrorIcon.foreground#ff3333
notificationsInfoIcon.foreground#39bae6
notificationsWarningIcon.foreground#ffd100
notificationToast.border#3d424d
panel.background#08090d
panel.border#3d424d
panelSection.border#80808059
panelTitle.activeBorder#e7e7e7
panelTitle.activeForeground#e7e7e7
panelTitle.inactiveForeground#e7e7e799
peekView.border#f8f8f0
peekViewEditor.background#3d424d
peekViewEditor.matchHighlightBackground#264f78
peekViewEditor.matchHighlightBorder#3e6c9b
peekViewEditorGutter.background#3d424d
peekViewResult.background#15161b
peekViewResult.fileForeground#ffffff
peekViewResult.lineForeground#bbbbbb
peekViewResult.matchHighlightBackground#ea5c004d
peekViewResult.selectionBackground#3399ff33
peekViewResult.selectionForeground#ffffff
peekViewTitle.background#15161b
peekViewTitleDescription.foreground#ccccccb3
peekViewTitleLabel.foreground#ffffff
pickerGroup.border#3d424d
pickerGroup.foreground#39bae6
progressBar.background#ffdb29
scrollbar.shadow#08090d
scrollbarSlider.activeBackground#bfbfbf66
scrollbarSlider.background#79797966
scrollbarSlider.hoverBackground#646464b3
selection.background#264f78
settings.focusedRowBackground#ffffff07
settings.headerForeground#cccccc
sideBar.background#08090d
sideBar.dropBackground#3d424d
sideBar.foreground#cccccc
sideBarSectionHeader.background#00000000
sideBarSectionHeader.border#cccccc33
sideBarSectionHeader.foreground#cccccc
sideBarTitle.foreground#bbbbbb
statusBar.background#08090d
statusBar.debuggingBackground#ff7733
statusBar.debuggingBorder#ffffff00
statusBar.debuggingForeground#000000
statusBar.foreground#ffffff
statusBar.noFolderBackground#08090d
statusBar.noFolderForeground#cccccc
statusBarItem.activeBackground#FFFFFF25
statusBarItem.hoverBackground#ffffff1f
statusBarItem.remoteBackground#f29718
statusBarItem.remoteForeground#000000
tab.activeBackground#25282e
tab.activeBorder#f29718
tab.activeBorderTop#00000000
tab.activeForeground#ffffff
tab.border#08090d00
tab.hoverBackground#3d424d
tab.inactiveBackground#08090d
tab.inactiveForeground#ffffff80
terminal.ansiBlack#000000
terminal.ansiBlue#82aaff
terminal.ansiBrightBlack#666666
terminal.ansiBrightBlue#82aaff
terminal.ansiBrightCyan#82aaff
terminal.ansiBrightGreen#95FB79
terminal.ansiBrightMagenta#D2A6FF
terminal.ansiBrightRed#f14c4c
terminal.ansiBrightWhite#f8f8f0
terminal.ansiBrightYellow#FFEE99
terminal.ansiCyan#82aaff
terminal.ansiGreen#95FB79
terminal.ansiMagenta#D2A6FF
terminal.ansiRed#cd3131
terminal.ansiWhite#f8f8f0
terminal.ansiYellow#ffee99
terminal.border#80808059
terminal.foreground#f8f8f0
terminal.selectionBackground#3d424d4c
terminalCursor.background#000000
terminalCursor.foreground#FFEE99
textLink.foreground#3794ff
titleBar.activeBackground#08090d
titleBar.activeForeground#cccccc
titleBar.border#00000000
titleBar.inactiveBackground#08090d
titleBar.inactiveForeground#cccccc99
tree.indentGuidesStroke#585858
walkThrough.embeddedEditorBackground#00000050
widget.shadow#0000005c

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
keyword.operator	#f8f8f0	—
keyword.control, constant.character.escape, storage	#ff7733	—
keyword.operator.quantifier.regexp, constant.numeric, string.regexp, constant.language, variable.other.constant	#d2a6ff	—
keyword.other.special-method, entity.name.function, meta.require, support.function.any-method, variable.function, entity.other.attribute-name, meta.function-call.generic	#ffee99	—
punctuation.definition.string, string.quoted	#95fb79	—
punctuation.definition, punctuation.section, punctuation.separator	#f8f8f0	—
meta.tag, invalid, meta.import, variable.other.constant.object, entity.name.type.namespace, entity.name.type.module	#f8f8f0	—
entity.name.type, entity.name.type.class, variable.other.class, support.class, entity.other.inherited-class	#82aaff	—
punctuation.definition.comment, comment.line, comment.block, punctuation.definition.tag	#5c6773	italic
meta.diff.header.from-file,meta.diff.header.to-file,punctuation.definition.from-file.diff,punctuation.definition.to-file.diff	#ffee99	—
markup.inserted.diff	#95fb79	—
markup.deleted.diff	#f8f8f0	—
token.info-token	#ffee99	—
token.warn-token	#d2a6ff	—
token.error-token	#f44747	—
token.debug-token	#ff7733	—
markup.inline.raw, punctuation.definition.markdown, markup.fenced_code.block.markdown, punctuation.definition.quote.begin.markdown, markup.quote.markdown, meta.image.inline, meta.link.inline, punctuation.definition.raw.markdown	#95fb79	—
markup.underline.link, punctuation.definition.metadata.markdown	#39bae6	—
string.other.link.description.markdown, punctuation.definition.link.description.end.markdown, punctuation.definition.link.title.end.markdown, punctuation.definition.link.title.begin.markdown, punctuation.definition.link.description.begin.markdown, string.other.link.title.markdown	#82aaff	—
punctuation.definition.quote.begin.markdown, punctuation.definition.list.begin.markdown	#ffee99	—
markup.heading, punctuation.definition.heading.markdown	#ff7733	—

Shiki preview

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

export interface User {
  id: string;
  name: string;
  role: "admin" | "member";
  tags: string[];
}

/**
 * Fetch user data by ID
 * @param id  
 * @returns User object or null if ID is invalid
 */
export async function fetchUser(id: string): Promise<User | null> {
  if (!id) {
    return null;
  }

  const response = await fetch(`/api/users/${id}`, {
    method: "GET",
    headers: { Accept: "application/json" },
  });

  if (!response.ok) {
    throw new Error(`HTTP ${response.status}`);
  }

  return (await response.json()) as User;
}

function greet(user: User): string {
  // Simple greeting function that uses the user's name
  return `Hello, ${user.name}!`;
}