MKANET Theme

Name: MKANET Theme
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 — MKANET

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#B2B2B2
breadcrumb.focusForeground#0040c0
breadcrumb.foreground#000000
descriptionForeground#3e5263
dropdown.background#3C3C3C
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#426eff
editorHoverWidget.background#A8A8A8
editorHoverWidget.border#595959
editorIndentGuide.activeBackground#B7B7B7
editorIndentGuide.background#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#FFC700
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#808080
editorWidget.border#7c7c7c
errorForeground#C40000
focusBorder#262626
foreground#535353
gitDecoration.addedResourceForeground#00F300
gitDecoration.conflictingResourceForeground#6C00C4
gitDecoration.deletedResourceForeground#a31515
gitDecoration.ignoredResourceForeground#8e8e90
gitDecoration.modifiedResourceForeground#FFC700
gitDecoration.submoduleResourceForeground#003BFF
gitDecoration.untrackedResourceForeground#007100
gitlens.gutterForegroundColor#59708E
gitlens.gutterUncommittedForegroundColor#689B15
gitlens.lineHighlightBackgroundColor#afafaf
gitlens.trailingLineForegroundColor#A09682
input.background#c0c0c0
input.border#041728
input.foreground#000000
input.placeholderForeground#8695A8
inputValidation.errorBackground#f2dede
inputValidation.infoBackground#d6ecf2
inputValidation.warningBackground#f6f5d2
inputValidation.warningForeground#FF0000
list.activeSelectionBackground#031626
list.activeSelectionForeground#E3E3E3
list.errorForeground#d15645
list.focusBackground#1A1A1A
list.focusForeground#CCCCCC
list.hoverBackground#1A1A1A
list.inactiveSelectionBackground#031626
list.inactiveSelectionForeground#E3E3E3
list.warningForeground#117711
menu.background#373737
menu.foreground#A6A6A6
menubar.selectionForeground#FFFFFF
minimap.findMatchHighlight#90b0c4
notificationCenterHeader.background#1b4484
notificationLink.foreground#006ab1
notifications.background#A7AAAF
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
scrollbar.shadow#2B2B2B
scrollbarSlider.activeBackground#7F7F7F
settings.checkboxBackground#6e6e6e
settings.checkboxBorder#3C3C3C
settings.checkboxForeground#f0f0f0
settings.dropdownBackground#6e6e6e
settings.dropdownBorder#3C3C3C
settings.dropdownForeground#f0f0f0
settings.dropdownListBorder#3C3C3C
settings.headerForeground#0059b1
settings.modifiedItemIndicator#0c7d9d
settings.numberInputBackground#6e6e6e
settings.numberInputForeground#f0f0f0
settings.textInputBackground#6e6e6e
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#ff0000
tab.border#252526
tab.inactiveBackground#8F8F8F
tab.inactiveForeground#000000
tab.inactiveModifiedBorder#ff0000
tab.unfocusedActiveModifiedBorder#ff0000
tab.unfocusedInactiveModifiedBorder#ff0000
terminal.ansiBlack#000000
terminal.ansiBlue#492ee1
terminal.ansiBrightBlack#818383
terminal.ansiBrightBlue#5833ff
terminal.ansiBrightCyan#14f0f0
terminal.ansiBrightGreen#31e722
terminal.ansiBrightMagenta#f935f8
terminal.ansiBrightRed#fc391f
terminal.ansiBrightWhite#e9ebeb
terminal.ansiBrightYellow#eaec23
terminal.ansiCyan#33bbc8
terminal.ansiGreen#25bc24
terminal.ansiMagenta#d338d3
terminal.ansiRed#c23621
terminal.ansiWhite#cbcccd
terminal.ansiYellow#adad27
terminal.background#000000
terminal.border#31008b
terminal.foreground#00a5ff
terminal.selectionBackground#a5c8ff44
terminalCursor.foreground#c1c1c1
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
widget.shadow#1d1d1d

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
constant.numeric	#128C00	—
constant	#af0075	—
constant.language	#8183E8	—
variable.language, variable.other	#D50500	—
string	#750F00	—
constant.character.escape, string source	#9D9CBF	—
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	#1C6D93	—
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}!`;
}