MKANET Theme V2

Name: MKANET Theme V2
Author: Michael K. Avanessian

Publisher: Michael K. AvanessianThemes in package: 1

Color theme designed from scratch to reduce eye strain

GitHub

VS Code preview

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

MKANET Theme V2 — MKANET V2

fetchUser.ts

index.ts

README.md

main*

Copilot

Ln 5, Col 12

Spaces: 2

UTF-8

TypeScript

Light+

colors

Workbench UI color keys from the theme JSON colors map.

activityBar.background#201f1d
activityBar.border#242424
activityBar.foreground#E2B63D
activityBar.inactiveForeground#606060
activityBarBadge.background#0a85d8
activityBarBadge.foreground#DFDFDF
badge.background#0a85d8
badge.foreground#DFDFDF
breadcrumb.activeSelectionForeground#003d83
breadcrumb.background#A5A5A5
breadcrumb.focusForeground#0046d2
breadcrumb.foreground#000000
descriptionForeground#3e5263
dropdown.background#2D2D2D
dropdown.border#000000
dropdown.foreground#C1C1C1
editor.background#C0C0C0
editor.findMatchBackground#6BB2FF
editor.findMatchHighlightBackground#A4B6C188
editor.foreground#464668
editor.lineHighlightBackground#B7B7B7
editor.rangeHighlightBackground#0084ff2d
editor.selectionBackground#6BB2FF
editor.selectionHighlightBackground#A4B6C1
editor.wordHighlightStrongBackground#A4B6C188
editorBracketMatch.background#7FAEFF
editorBracketMatch.border#93B5BF
editorCursor.foreground#8000FF
editorGroup.border#444444
editorGroup.dropBackground#53595d54
editorGroupHeader.tabsBackground#252526
editorGutter.addedBackground#04A30C
editorGutter.deletedBackground#CE1A1A
editorGutter.modifiedBackground#DD7A00
editorHoverWidget.background#A8A8A8
editorHoverWidget.border#595959
editorIndentGuide.activeBackground1#B7B7B7
editorIndentGuide.background1#B7B7B7
editorLineNumber.activeForeground#BAEEFF
editorLineNumber.foreground#858585
editorOverviewRuler.addedForeground#00F300
editorOverviewRuler.border#757575
editorOverviewRuler.deletedForeground#a31515
editorOverviewRuler.errorForeground#FF0000
editorOverviewRuler.findMatchForeground#6BB2FF
editorOverviewRuler.infoForeground#6C00C4
editorOverviewRuler.modifiedForeground#DD7A00
editorOverviewRuler.rangeHighlightForeground#00a5ff
editorOverviewRuler.selectionHighlightForeground#A4B6C1
editorOverviewRuler.warningForeground#117711
editorOverviewRuler.wordHighlightForeground#00a5ff
editorOverviewRuler.wordHighlightStrongForeground#A4B6C188
editorSuggestWidget.background#3A3A3A
editorSuggestWidget.foreground#C6C6C6
editorSuggestWidget.highlightForeground#C6C6C6
editorSuggestWidget.selectedBackground#094771
editorUnnecessaryCode.opacity#00000077
editorWarning.foreground#117711
editorWhitespace.foreground#BFBFBF
editorWidget.background#363638
editorWidget.border#424242
editorWidget.foreground#636C79
errorForeground#EA6262
focusBorder#0b0049
foreground#6A6A6A
gitDecoration.addedResourceForeground#00F300
gitDecoration.conflictingResourceForeground#6C00C4
gitDecoration.deletedResourceForeground#a31515
gitDecoration.ignoredResourceForeground#8e8e90
gitDecoration.modifiedResourceForeground#DD7A00
gitDecoration.submoduleResourceForeground#003BFF
gitDecoration.untrackedResourceForeground#007100
icon.foreground#C5C5C5
input.background#A3A3A3
input.border#363638
input.foreground#1D1D30
input.placeholderForeground#7C828C
inputValidation.errorBackground#f2dede
inputValidation.infoBackground#d6ecf2
inputValidation.warningBackground#f6f5d2
inputValidation.warningForeground#FF0000
keybindingLabel.background#8080802b
keybindingLabel.border#33333399
keybindingLabel.bottomBorder#11111199
keybindingLabel.foreground#cccccc
list.activeSelectionBackground#0B204487
list.activeSelectionForeground#FFECAD
list.errorForeground#d15645
list.focusBackground#36364050
list.focusForeground#FFF8E2C3
list.highlightForeground#0097fB
list.hoverBackground#36364050
list.hoverForeground#FFF8E2C3
list.inactiveSelectionBackground#0B204487
list.inactiveSelectionForeground#FFECAD
list.warningForeground#117711
menu.background#2B2B2B
menu.foreground#A6A6A6
menu.selectionBackground#363638DD
menu.selectionForeground#FFF8E2
menubar.selectionBackground#37373775
menubar.selectionForeground#FFFFFF
minimap.findMatchHighlight#90b0c4
notificationCenterHeader.background#1b4484
notificationLink.foreground#006ab1
notifications.background#A9ACB1
notifications.border#1b4484
notifications.foreground#676b74
notificationToast.border#1E1E1E
panel.background#000000
panel.border#5765E5
panelTitle.activeForeground#5765E5
peekView.border#5046A3
peekViewEditor.background#AEAEAE
peekViewEditor.matchHighlightBackground#79A5D1
peekViewEditorGutter.background#AEAEAE
peekViewResult.background#969696
peekViewResult.fileForeground#f0f0f0
peekViewResult.lineForeground#f0f0f0
peekViewResult.matchHighlightBackground#A3A3A300
peekViewResult.selectionBackground#032D4F
peekViewTitle.background#264b88
peekViewTitleDescription.foreground#ccccccb3
peekViewTitleLabel.foreground#ffffff
progressBar.background#2f6eff
quickInput.background#101010e0
quickInput.foreground#AAAAAAB9
scrollbar.shadow#2B2B2B
scrollbarSlider.activeBackground#7F7F7F
settings.checkboxBackground#3A3A3A
settings.checkboxBorder#3C3C3C
settings.checkboxForeground#f0f0f0
settings.dropdownBackground#3A3A3A
settings.dropdownBorder#3C3C3C
settings.dropdownForeground#f0f0f0
settings.dropdownListBorder#3C3C3C
settings.headerForeground#0059b1
settings.modifiedItemIndicator#0c7d9d
settings.numberInputBackground#3A3A3A
settings.numberInputForeground#f0f0f0
settings.textInputBackground#3A3A3A
settings.textInputForeground#f0f0f0
sideBar.background#0D0D0D
sideBar.border#1c005edd
sideBar.dropBackground#0000001a
sideBar.foreground#a6a6a6
sideBarSectionHeader.background#201f1d
sideBarSectionHeader.foreground#D69733
sideBarTitle.foreground#9E6B1A
statusBar.background#3E3E3E
statusBar.foreground#6AA2E2
statusBar.noFolderBackground#3E3E3E
tab.activeForeground#000000
tab.activeModifiedBorder#c0c0c0
tab.border#252526
tab.inactiveBackground#8F8F8F
tab.inactiveForeground#000000
tab.inactiveModifiedBorder#8f8f8f
tab.unfocusedActiveModifiedBorder#c0c0c0
tab.unfocusedInactiveModifiedBorder#8f8f8f
terminal.ansiBlack#000000
terminal.ansiBlue#000080
terminal.ansiBrightBlack#808080
terminal.ansiBrightBlue#0096FF
terminal.ansiBrightCyan#00FFFF
terminal.ansiBrightGreen#00FF00
terminal.ansiBrightMagenta#FF00FF
terminal.ansiBrightRed#FF0000
terminal.ansiBrightWhite#FFFFFF
terminal.ansiBrightYellow#FFFF00
terminal.ansiCyan#008080
terminal.ansiGreen#008000
terminal.ansiMagenta#800080
terminal.ansiRed#800000
terminal.ansiWhite#C0C0C0
terminal.ansiYellow#808000
terminal.background#000000
terminal.border#1e0065dd
terminal.foreground#C0C0C0
terminal.selectionBackground#a5c8ff44
terminalCursor.foreground#c23621
textBlockQuote.background#A8A8A8
textBlockQuote.border#bbbbbb
textCodeBlock.background#dcdcdc66
textLink.activeForeground#006ab1
textLink.foreground#006ab1
textPreformat.foreground#a31515
textSeparator.foreground#0000002e
titleBar.activeBackground#464646
titleBar.activeForeground#CCCCCC
tree.indentGuidesStroke#494949
walkThrough.embeddedEditorBackground#A5A5A5
widget.shadow#161616

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
mcol_D50500FF	#FFFFFFFF	—
mcol_0000E2FF	#FFFFFFFF	—
mcol_000093FF	#FFFFFFFF	—
comment	#888888	—
keyword	#006003	italic
keyword.operator	—
storage	#5E4E00	—
entity.name.function	#2323E0	bold
entity.name.tag	#004B89	—
constant.numeric	#128C00	—
constant	#af0075	—
constant.language	#8183E8	—
variable.language, variable.other	#D50500	—
string	#750F00	—
constant.character.escape, string source	#7c7ca1	—
meta.preprocessor	#1A921C	—
keyword.control.import	#006003	—
support.function.any-method	#126714	—
entity.name.type	#937000	bold
entity.other.inherited-class	#A59872	italic
variable.parameter	#A30B0B	italic
storage.type.method	#70727E	—
meta.section entity.name.section, declaration.section entity.name.section	—	italic
support.function	#2323E0	—
support.class, support.type	#6D79DE	—
support.constant	#06960E	—
support.variable	#21439C	—
keyword.operator.js	#687687	—
invalid	#FF0B00	—
meta.tag.preprocessor.xml	#68685B	—
meta.tag.sgml.doctype, meta.tag.sgml.doctype entity, meta.tag.sgml.doctype string, meta.tag.preprocessor.xml, meta.tag.preprocessor.xml entity, meta.tag.preprocessor.xml string	#888888	—
string.quoted.docinfo.doctype.DTD	—	italic
meta.tag, declaration.tag	#1C02FF	—
entity.name.tag	—	—
entity.other.attribute-name	—	italic
markup.heading	#0C07FF	—
markup.quote	#000000	italic
markup.list	#B90690	—
punctuation.definition.variable.powershell	#005757	—
variable.other.member.powershell	#217196	—
meta.function-call.generic.python	#2323E0	—
Highlight	#6BB2FF	—
Caret	#8000FF	—

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