MS Dev Theme

Name: MS Dev Theme
Author: Mohamed Suliman

Publisher: Mohamed SulimanThemes in package: 4

🔥 MS Dev Theme for VS Code by Mohamed Suliman.

GitHub

Color themes

VS Code preview

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

MS Dev Theme — Monokai Theme

fetchUser.ts

index.ts

README.md

srccomponentsfetchUser.tsfetchUser

Problems1

Output

Debug Console

Terminal

Ports

~/my-project $ pnpm dev
▲ Next.js ready on http://localhost:3000
✓ compiled client and server successfully in 412ms
wait - compiling /theme/vscode...
~/my-project

main*

Copilot

Ln 5, Col 12

Spaces: 2

UTF-8

TypeScript

Dark+

colors

Workbench UI color keys from the theme JSON colors map.

activityBar.activeBackground#0f0f0f
activityBar.activeBorder#ac6218
activityBar.background#0f0f0f
activityBar.border#000000
activityBar.dropBackground#262626
activityBar.foreground#dddddd
activityBar.inactiveForeground#888888
activityBarBadge.background#ac6218
activityBarBadge.foreground#dddddd
badge.background#363636
badge.foreground#dddddd
breadcrumb.activeSelectionForeground#dddddd
breadcrumb.background#161616
breadcrumb.focusForeground#dddddd
breadcrumb.foreground#666666
breadcrumbPicker.background#363636
button.background#ac6218
button.foreground#dddddd
button.hoverBackground#945210
debugExceptionWidget.background#363636
debugExceptionWidget.border#666666
debugToolBar.background#363636
debugToolBar.border#363636
descriptionForeground#dddddd
diffEditor.border#000000
diffEditor.insertedTextBackground#86b42b44
diffEditor.removedTextBackground#c4265e44
dropdown.background#363636
dropdown.border#363636
dropdown.foreground#dddddd
dropdown.listBackground#363636
editor.background#1f1f1f
editor.findMatchBackground#464646
editor.findMatchBorder#00000000
editor.findMatchHighlightBackground#363636
editor.findMatchHighlightBorder#00000000
editor.findRangeHighlightBackground#f2f2f20c
editor.focusedStackFrameHighlightBackground#b1b01124
editor.foreground#dddddd
editor.hoverHighlightBackground#363636
editor.inactiveSelectionBackground#464646
editor.lineHighlightBackground#292929
editor.lineHighlightBorder#292929
editor.rangeHighlightBackground#292929
editor.rangeHighlightBorder#292929
editor.selectionBackground#464646
editor.selectionForeground#dddddd
editor.selectionHighlightBackground#363636
editor.selectionHighlightBorder#00000000
editor.snippetFinalTabstopHighlightBackground#ffffff20
editor.snippetFinalTabstopHighlightBorder#00000000
editor.snippetTabstopHighlightBackground#ffffff20
editor.snippetTabstopHighlightBorder#00000000
editor.stackFrameHighlightBackground#b1b01124
editor.wordHighlightBackground#363636
editor.wordHighlightBorder#00000000
editor.wordHighlightStrongBackground#363636
editor.wordHighlightStrongBorder#00000000
editorBracketMatch.background#363636
editorBracketMatch.border#666666
editorCodeLens.foreground#666666
editorCursor.background#1f1f1f
editorCursor.foreground#f2f2f2
editorError.border#00000000
editorError.foreground#fe413f
editorGroup.background#161616
editorGroup.border#161616
editorGroup.dropBackground#ffffff12
editorGroup.emptyBackground#1f1f1f
editorGroup.focusedEmptyBorder#00000000
editorGroupHeader.noTabsBackground#161616
editorGroupHeader.tabsBackground#1f1f1f
editorGroupHeader.tabsBorder#161616
editorGutter.addedBackground#86b42b
editorGutter.background#1f1f1f
editorGutter.deletedBackground#c4265e
editorGutter.modifiedBackground#007acc
editorHint.border#00000000
editorHint.foreground#007acc
editorHoverWidget.background#363636
editorHoverWidget.border#666666
editorIndentGuide.activeBackground#363636
editorIndentGuide.background#363636
editorInfo.border#00000000
editorInfo.foreground#007acc
editorLineNumber.activeForeground#666666
editorLineNumber.foreground#666666
editorLink.activeForeground#66d9ef
editorMarkerNavigation.background#363636
editorMarkerNavigationError.background#fe413f
editorMarkerNavigationInfo.background#007acc
editorMarkerNavigationWarning.background#b1b011
editorOverviewRuler.addedForeground#86b42b
editorOverviewRuler.border#00000000
editorOverviewRuler.bracketMatchForeground#666666
editorOverviewRuler.currentContentForeground#ae81ff
editorOverviewRuler.deletedForeground#c4265e
editorOverviewRuler.errorForeground#fe413f
editorOverviewRuler.findMatchForeground#666666
editorOverviewRuler.incomingContentForeground#66d9ef
editorOverviewRuler.infoForeground#007acc
editorOverviewRuler.modifiedForeground#007acc
editorOverviewRuler.rangeHighlightForeground#007acc
editorOverviewRuler.warningForeground#b1b011
editorOverviewRuler.wordHighlightForeground#666666
editorOverviewRuler.wordHighlightStrongForeground#666666
editorPane.background#161616
editorRuler.foreground#363636
editorSuggestWidget.background#262626
editorSuggestWidget.border#363636
editorSuggestWidget.foreground#dddddd
editorSuggestWidget.highlightForeground#dddddd
editorSuggestWidget.selectedBackground#363636
editorUnnecessaryCode.border#00000000
editorWarning.border#00000000
editorWarning.foreground#b1b011
editorWhitespace.foreground#363636
editorWidget.background#363636
editorWidget.border#666666
editorWidget.resizeBorder#666666
errorForeground#dddddd
extensionButton.prominentBackground#363636
extensionButton.prominentForeground#dddddd
extensionButton.prominentHoverBackground#464646
focusBorder#00000000
foreground#dddddd
gitDecoration.addedResourceForeground#007acc
gitDecoration.conflictingResourceForeground#fe413f
gitDecoration.deletedResourceForeground#c4265e
gitDecoration.ignoredResourceForeground#777777
gitDecoration.modifiedResourceForeground#b3b42b
gitDecoration.submoduleResourceForeground#2bb3b4
gitDecoration.untrackedResourceForeground#86b42b
input.background#363636
input.border#363636
input.foreground#dddddd
input.placeholderForeground#888888
inputOption.activeBackground#464646
inputOption.activeBorder#464646
inputValidation.errorBackground#fe413f
inputValidation.errorBorder#fc5b58
inputValidation.errorForeground#dddddd
inputValidation.infoBackground#007acc
inputValidation.infoBorder#008ae5
inputValidation.infoForeground#dddddd
inputValidation.warningBackground#b1b011
inputValidation.warningBorder#c9c914
inputValidation.warningForeground#dddddd
list.activeSelectionBackground#262626
list.activeSelectionForeground#dddddd
list.dropBackground#363636
list.errorForeground#fe413f
list.focusBackground#1f1f1f
list.focusForeground#dddddd
list.highlightForeground#dddddd
list.hoverBackground#1f1f1f
list.hoverForeground#dddddd
list.inactiveSelectionBackground#262626
list.inactiveSelectionForeground#dddddd
list.invalidItemForeground#fe413f
list.warningForeground#b1b011
menu.background#363636
menu.foreground#dddddd
menu.selectionBackground#262626
menu.selectionBorder#00000000
menu.selectionForeground#dddddd
menu.separatorBackground#666666
menubar.selectionBackground#363636
menubar.selectionBorder#00000000
menubar.selectionForeground#dddddd
merge.border#000000aa
merge.currentContentBackground#ae81ff44
merge.currentHeaderBackground#ae81ff88
merge.incomingContentBackground#66d9ef44
merge.incomingHeaderBackground#66d9ef88
minimap.findMatchHighlight#b1b011
notificationCenter.border#464646
notificationCenterHeader.background#464646
notificationCenterHeader.foreground#dddddd
notificationLink.foreground#66d9ef
notifications.background#363636
notifications.border#464646
notifications.foreground#dddddd
notificationToast.border#363636
panel.background#262626
panel.border#161616
panel.dropBackground#363636
panelTitle.activeBorder#00000000
panelTitle.activeForeground#dddddd
panelTitle.inactiveForeground#666666
peekView.border#666666
peekViewEditor.background#262626
peekViewEditor.matchHighlightBackground#464646
peekViewEditor.matchHighlightBorder#00000000
peekViewEditorGutter.background#262626
peekViewResult.background#262626
peekViewResult.fileForeground#dddddd
peekViewResult.lineForeground#dddddd
peekViewResult.matchHighlightBackground#464646
peekViewResult.selectionBackground#464646
peekViewResult.selectionForeground#dddddd
peekViewTitle.background#262626
peekViewTitleDescription.foreground#dddddd
peekViewTitleLabel.foreground#dddddd
pickerGroup.border#262626
pickerGroup.foreground#666666
progressBar.background#363636
scrollbar.shadow#00000000
scrollbarSlider.activeBackground#f2f2f218
scrollbarSlider.background#f2f2f212
scrollbarSlider.hoverBackground#f2f2f224
selection.background#666666
settings.checkboxBackground#363636
settings.checkboxBorder#363636
settings.checkboxForeground#dddddd
settings.dropdownBackground#363636
settings.dropdownBorder#363636
settings.dropdownForeground#dddddd
settings.dropdownListBorder#666666
settings.headerForeground#dddddd
settings.inactiveSelectedItemBorder#00000000
settings.modifiedItemForeground#b3b42b
settings.numberInputBackground#363636
settings.numberInputBorder#363636
settings.numberInputForeground#dddddd
settings.textInputBackground#363636
settings.textInputBorder#363636
settings.textInputForeground#dddddd
sideBar.background#161616
sideBar.border#000000
sideBar.dropBackground#262626
sideBar.foreground#dddddd
sideBarSectionHeader.background#262626
sideBarSectionHeader.border#262626
sideBarSectionHeader.foreground#dddddd
sideBarTitle.foreground#dddddd
statusBar.background#161616
statusBar.border#000000
statusBar.debuggingBackground#007acc
statusBar.debuggingBorder#000000
statusBar.debuggingForeground#dddddd
statusBar.foreground#dddddd
statusBar.noFolderBackground#000000
statusBar.noFolderBorder#000000
statusBar.noFolderForeground#dddddd
statusBarItem.activeBackground#ffffff16
statusBarItem.hoverBackground#ffffff20
statusBarItem.prominentBackground#363636
statusBarItem.prominentHoverBackground#ffffff40
tab.activeBackground#1f1f1f
tab.activeBorder#1f1f1f
tab.activeBorderTop#ac6218
tab.activeForeground#dddddd
tab.activeModifiedBorder#dddddd
tab.border#161616
tab.hoverBackground#1f1f1f
tab.hoverBorder#161616
tab.inactiveBackground#1f1f1f
tab.inactiveForeground#666666
tab.inactiveModifiedBorder#666666
tab.unfocusedActiveBackground#1f1f1f
tab.unfocusedActiveBorder#1f1f1f
tab.unfocusedActiveBorderTop#666666
tab.unfocusedActiveForeground#dddddd
tab.unfocusedActiveModifiedBorder#dddddd
tab.unfocusedHoverBackground#1f1f1f
tab.unfocusedHoverBorder#161616
tab.unfocusedInactiveForeground#666666
tab.unfocusedInactiveModifiedBorder#666666
terminal.ansiBlack#333333
terminal.ansiBlue#6a7ec8
terminal.ansiBrightBlack#666666
terminal.ansiBrightBlue#819aff
terminal.ansiBrightCyan#66d9ef
terminal.ansiBrightGreen#a6e22e
terminal.ansiBrightMagenta#ae81ff
terminal.ansiBrightRed#f92672
terminal.ansiBrightWhite#f8f8f2
terminal.ansiBrightYellow#e2e22e
terminal.ansiCyan#56adbc
terminal.ansiGreen#86b42b
terminal.ansiMagenta#8c6bc8
terminal.ansiRed#c4265e
terminal.ansiWhite#e3e3dd
terminal.ansiYellow#b3b42b
terminal.background#262626
terminal.border#161616
terminal.foreground#dddddd
terminal.selectionBackground#ffffff24
terminalCursor.background#262626
terminalCursor.foreground#f2f2f2
textBlockQuote.background#363636
textBlockQuote.border#666666
textCodeBlock.background#161616
textLink.activeForeground#008ae5
textLink.foreground#007acc
textPreformat.foreground#e6db74
textSeparator.foreground#666666
titleBar.activeBackground#161616
titleBar.activeForeground#dddddd
titleBar.border#000000
titleBar.inactiveBackground#161616
titleBar.inactiveForeground#666666
walkThrough.embeddedEditorBackground#0f0f0f
welcomePage.buttonBackground#363636
welcomePage.buttonHoverBackground#464646
widget.shadow#00000088

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
—	#ddddddff	—
meta.embedded, source.groovy.embedded	#F8F8F2	—
comment	#75715E	—
string	#E6DB74	—
punctuation.definition.template-expression, punctuation.section.embedded	#F92672	—
meta.template.expression	#F8F8F2	—
constant.numeric	#AE81FF	—
constant.language	#AE81FF	—
constant.character, constant.other	#AE81FF	—
variable	#F8F8F2
keyword	#F92672	—
storage	#F92672
storage.type	#66D9EF	italic
entity.name.type, entity.name.class	#A6E22E	underline
entity.other.inherited-class	#A6E22E	italic underline
entity.name.function	#A6E22E
variable.parameter	#FD971F	italic
entity.name.tag	#F92672
entity.other.attribute-name	#A6E22E
support.function	#66D9EF
support.constant	#66D9EF
support.type, support.class	#66D9EF	italic
support.other.variable	—
invalid	#F8F8F0
invalid.deprecated	#F8F8F0	—
invalid.deprecated.html	#F9267299	—
meta.structure.dictionary.json string.quoted.double.json	#CFCFC2	—
meta.diff, meta.diff.header	#75715E	—
markup.deleted	#F92672	—
markup.inserted	#A6E22E	—
markup.changed	#E6DB74	—
constant.numeric.line-number.find-in-files - match	#AE81FFA0	—
entity.name.filename.find-in-files	#E6DB74	—
markup.quote	#F92672	—
markup.list	#E6DB74	—
markup.bold, markup.italic	#66D9EF	—
markup.inline.raw	#FD971F
markup.heading	#A6E22E	—
markup.heading.setext	#A6E22E
token.info-token	#6796e6	—
token.warn-token	#cd9731	—
token.error-token	#f44747	—
token.debug-token	#b267e6	—
variable.language	#FD971F	—

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