Miezhiko Theme

Name: Miezhiko Theme
Author: Маша Miezhiko

Publisher: Маша MiezhikoThemes in package: 1

Miezhiko theme for VScode.

GitHub

VS Code preview

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

Miezhiko Theme — Miezhiko Theme

fetchUser.ts

index.ts

README.md

main*

Copilot

Ln 5, Col 12

Spaces: 2

UTF-8

TypeScript

Dark+

colors

Workbench UI color keys from the theme JSON colors map.

activityBar.background#1D252C
activityBar.border#333F4A
activityBar.foreground#fff
activityBarBadge.background#b7c5d3
activityBarBadge.foreground#181e24
badge.background#363133aa
badge.foreground#f1c4c4
breadcrumb.activeSelectionForeground#41505e
breadcrumb.focusForeground#b7c5d3
breadcrumb.foreground#d27272
breadcrumbPicker.background#28323a
button.background#1D252C
button.foreground#fff
button.hoverBackground#ec8c996e
contrastBorder#ffffff00
dropdown.background#41505e
dropdown.border#41505e
dropdown.foreground#fff
editor.background#1D252C
editor.findMatchBackground#b7c5d380
editor.findMatchHighlightBackground#b7c5d330
editor.findRangeHighlightBackground#791e1e
editor.foreground#B7C5D3
editor.hoverHighlightBackground#333F4A
editor.inactiveSelectionBackground#1D252C
editor.lineHighlightBackground#28313a
editor.lineHighlightBorder#28313a
editor.rangeHighlightBackground#28313a
editor.selectionBackground#28323a
editor.selectionHighlightBackground#28313a
editor.wordHighlightBackground#3d454d
editor.wordHighlightStrongBackground#41505e
editorBracketMatch.background#4e6e99
editorBracketMatch.border#26506D
editorCodeLens.foreground#B7C5D3
editorCursor.foreground#b7c5d3
editorError.border#333F4A
editorError.foreground#e27e8d
editorGroup.border#1D252C
editorGroup.dropBackground#333F4A
editorGroup.emptyBackground#1D252C
editorGroupHeader.noTabsBackground#333F4A
editorGroupHeader.tabsBackground#181e24
editorGroupHeader.tabsBorder#333F4A
editorGutter.addedBackground#8bd49c
editorGutter.background#1D252C
editorGutter.deletedBackground#e27e8d
editorGutter.modifiedBackground#26506D
editorHoverWidget.background#15232d
editorHoverWidget.border#333F4A
editorIndentGuide.background#28323a
editorLineNumber.foreground#41505E
editorLink.activeForeground#b7c5d3
editorMarkerNavigation.background#1D252C
editorMarkerNavigationError.background#d95468
editorMarkerNavigationWarning.background#d98e48
editorOverviewRuler.border#333F4A
editorOverviewRuler.commonContentForeground#ebe98355
editorOverviewRuler.currentContentForeground#ee3a4355
editorOverviewRuler.incomingContentForeground#3ad90055
editorRuler.foreground#1F4662
editorSuggestWidget.background#15232d
editorSuggestWidget.border#15232d
editorSuggestWidget.foreground#b7c5d3
editorSuggestWidget.highlightForeground#eb8a83
editorSuggestWidget.selectedBackground#28323a
editorWarning.border#ffffff00
editorWarning.foreground#ebbf83
editorWhitespace.foreground#ffffff1a
editorWidget.background#15232d
editorWidget.border#333F4A
errorForeground#e27e8d
extensionButton.prominentBackground#dd72727a
extensionButton.prominentForeground#fff
extensionButton.prominentHoverBackground#dd717170
focusBorder#333F4A
foreground#f5eaf5
gitDecoration.addedResourceForeground#5ed694
gitDecoration.conflictingResourceForeground#ebc548
gitDecoration.deletedResourceForeground#d14040
gitDecoration.ignoredResourceForeground#978c94
gitDecoration.modifiedResourceForeground#f7b2c7
gitDecoration.submoduleResourceForeground#db7851
gitDecoration.untrackedResourceForeground#6ac0b9
icon.foreground#dd7183
input.background#333F4A
input.border#333F4A
input.foreground#b7c5d3
input.placeholderForeground#b7c5d3
inputOption.activeBorder#539afc
inputValidation.errorBackground#e27e8d
inputValidation.errorBorder#d95468
inputValidation.errorForeground#fff
inputValidation.infoBackground#5ec4ff
inputValidation.infoBorder#539afc
inputValidation.warningBackground#ebbf83
inputValidation.warningBorder#d98e48
list.activeSelectionBackground#1D252C
list.activeSelectionForeground#b7c5d3
list.dropBackground#333F4A
list.focusBackground#333F4A
list.focusForeground#b7c5d3
list.highlightForeground#f35e72
list.hoverBackground#1D252C
list.hoverForeground#b7c5d3
list.inactiveSelectionBackground#333F4A
list.inactiveSelectionForeground#b7c5d3
menu.background#333F4A
menubar.selectionBackground#171d23
menubar.selectionForeground#dd7183
minimap.findMatchHighlight#ecc3e15d
minimap.selectionHighlight#ecc3e15d
notificationCenterHeader.background#070307
notifications.background#2c272c
notifications.foreground#dd7171
panel.background#171d23
panel.border#171d23
panelTitle.activeBorder#41505E
panelTitle.activeForeground#41505E
panelTitle.inactiveForeground#b7c5d3
peekView.border#333F4A
peekViewEditor.background#15232d
peekViewEditor.matchHighlightBackground#333F4A
peekViewEditorGutter.background#333F4A
peekViewResult.background#15232d
peekViewResult.fileForeground#b7c5d3
peekViewResult.lineForeground#fff
peekViewResult.matchHighlightBackground#333F4A
peekViewResult.selectionBackground#333F4A
peekViewResult.selectionForeground#fff
peekViewTitle.background#15232d
peekViewTitleDescription.foreground#b7c5d3
peekViewTitleLabel.foreground#e69fab
pickerGroup.border#333F4A
pickerGroup.foreground#dd718c
progressBar.background#dd718c
quickInput.background#1D252C
quickInput.foreground#f0a0b4
scrollbar.shadow#00000000
scrollbarSlider.activeBackground#333F4A
scrollbarSlider.background#41505E80
scrollbarSlider.hoverBackground#41505ECC
selection.background#ff9aab98
sideBar.background#171d23
sideBar.border#1D252C
sideBar.foreground#ebe5e9
sideBarSectionHeader.background#1D252C
sideBarSectionHeader.foreground#f5eaf5
sideBarTitle.foreground#b7c5d3
statusBar.background#171d23
statusBar.border#1D252C
statusBar.debuggingBackground#171d23
statusBar.debuggingForeground#e09595
statusBar.foreground#f5eaf5
statusBar.noFolderBackground#171d23
statusBar.noFolderForeground#f5eaf5
statusBarItem.activeBackground#333F4A
statusBarItem.hoverBackground#333F4A
statusBarItem.prominentBackground#171d23
statusBarItem.prominentHoverBackground#333F4A
tab.activeBackground#1D252C
tab.activeBorder#1D252C
tab.activeForeground#fff
tab.border#171d23
tab.inactiveBackground#171d23
tab.inactiveForeground#f5eaf5
tab.unfocusedActiveForeground#b7c5d3
tab.unfocusedInactiveForeground#b7c5d3
terminal.ansiBlack#38313b
terminal.ansiBlue#5782df
terminal.ansiBrightBlack#6b5d72
terminal.ansiBrightBlue#88a4e2
terminal.ansiBrightCyan#6ac0b9
terminal.ansiBrightGreen#99ca82
terminal.ansiBrightMagenta#a770db
terminal.ansiBrightRed#db6363
terminal.ansiBrightWhite#f5eaf5
terminal.ansiBrightYellow#ebc548
terminal.ansiCyan#3ca89a
terminal.ansiGreen#62ad44
terminal.ansiMagenta#9045d6
terminal.ansiRed#d14040
terminal.ansiWhite#a597a1
terminal.ansiYellow#fac000
terminal.background#171d23
terminal.foreground#f5eaf5
terminalCursor.background#dd7183aa
terminalCursor.foreground#dd7e71aa
textBlockQuote.background#B7C5D3
textBlockQuote.border#B7C5D3
textCodeBlock.background#B7C5D3
textLink.activeForeground#f14161
textLink.foreground#d27272
textPreformat.foreground#a1717d
textSeparator.foreground#a17177
titleBar.activeBackground#171d23
titleBar.activeForeground#ffffff
titleBar.inactiveBackground#1D252C
titleBar.inactiveForeground#f0eaed33
walkThrough.embeddedEditorBackground#1D252C
widget.shadow#00000026

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
punctuation.separator, punctuation.terminator	#dd717f	—
punctuation.definition.parameters	#718CA1	—
entity	#70e1e8	—
invalid	#d95468	—
meta.brace	#718CA1	—
storage.type.class.js	#008B94	—
meta	#718CA1	—
comment.line, comment.block, punctuation.definition.comment	#978c94	italic
entity.name.type, entity.other.inherited-class, support.class	#008B94	—
entity.name.function, support.function, meta.function-call.generic	#e98f9e	—
variable.parameter, entity.name.variable.parameter, meta.at-rule.function variable, meta.at-rule.mixin variable, meta.function.arguments, meta.selectionset.graphql meta.arguments.graphql variable.arguments.graphql	#dd93a3	—
keyword, storage	#5ec4ff	—
storage.type, support.type	#89cfeb
constant.numeric, constant.language, constant.character, constant, keyword.other	#e27e8d
keyword.operator	#5ec4ff
string	#64afa9	—
support.variable, variable	#999698	—
constant.character.escape	#559fe4	—
source.json meta.structure.dictionary.json support.type.property-name.json	#c08c90	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#f5a8bb	—
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	#bdb0b8	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.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	#e4cdcd	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.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	#56d8c2	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.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	#ffffff	—
entity.other.attribute-name	#e06767	—
meta.tag	#559fe4	—
entity.name.tag	#618ae2	—
entity.other.attribute-name.class	#dba15e	—
entity.other.attribute-name.id	#dfa0ae	—
support.constant.property-value	#6de2a8	—
markup.heading, markup.heading entity.name	#618be7	—
markup.list punctuation.definition.list.begin	#dd7183	—
markup.underline.link	#dd809c	—
markup.bold	#63dbc7	bold
markup.italic	#d9db63	italic
markup.italic markup.bold, markup.bold markup.italic	—	italic bold
text.html.markdown markup.inline.raw	#71e0d7	—
markup.quote	#99ca82	italic
source.css, source.stylus, source.scss, entity.other.attribute-name.class.css	#68A1F0	—
punctuation.definition.constant.css	#d95454	—
constant.other.color.rgb-value.hex.css	#E27E8Dff	—
entity.other.inherited-class.js, variable.other.readwrite.alias.js, meta.import.js, punctuation.accessor.js, punctuation.accessor.jsx, punctuation.accessor.ts, punctuation.accessor.tsx, variable.other.readwrite.ts, variable.other.readwrite.tsx, variable.other.readwrite.js, variable.other.readwrite.jsx	#B7C5D3	—
variable.other.constant.js, variable.other.constant.js.jsx, variable.other.constant.ts, variable.other.constant.property.ts, variable.other.constant.property.js, variable.other.constant.property.tsx, variable.other.constant.tsx, support.constant.json.js, support.constant.json.ts, support.constant.json.tsx, variable.other.constant.object.js, variable.object.property.js, variable.object.property.jsx, variable.object.property.ts, variable.object.property.tsx	#8BD49C	—
variable.parameter.function.language.special.self.python	#b62d3f	—
storage.type.function.python	#b62d2d	—
meta.function-call.arguments.python	#d48b95	—
meta.function-call.generic.python	#008b94	—
source.json support	#718CA1	—
source.json string, source.json punctuation.definition.string, punctuation.definition.string.end.json, punctuation.definition.string.begin.json	#B7C5D3	—
support.type.primitive.ts	#33ced8	italic
entity.name.tag.yaml	#77a9e0	—

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}!`;
}