Skip to main content
Home Theme VS Code EX-Alter Monokai++ D.A.R.K. Monokai++ Dark, but I adjusted some stuff
VS Code preview Full workbench mockup using this variant's colors and tokenColors.
colors Workbench UI color keys from the theme JSON colors map.
activityBar.background #080808 activityBar.foreground #d5d8dab3 activityBarBadge.background #e95378 activityBarBadge.foreground #06060c badge.background #2e303e badge.foreground #d5d8da tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle entity.name.function.preprocessor, meta.preprocessor.macro, storage.modifier.import, storage.type.generic #CCCCCC — invalid — — comment #696D70 — string, string.quoted, punctuation.definition.string.begin, punctuation.definition.string.end #E6DB74 — string.regexp
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
EX-Alter Monokai++ D.A.R.K. — EX-Alter Monokai++ D.A.R.K.
breadcrumbPicker.background
#232530
button.background #2e303e
debugToolBar.background #1c1e26
diffEditor.insertedTextBackground #09f7a01a
diffEditor.removedTextBackground #f43e5c1a
dropdown.background #232530
dropdown.listBackground #2e303e
editor.background #0a0a0a
editor.findMatchBackground #000000
editor.findMatchHighlightBackground #1b1b1b
editor.findRangeHighlightBackground #6c6f931a
editor.foldBackground #2020201c
editor.foreground #cccccc
editor.hoverHighlightBackground #6c6f934d
editor.inactiveSelectionBackground #402725
editor.lineHighlightBackground #38383841
editor.rangeHighlightBackground #2e303e80
editor.selectionBackground #59201b
editor.selectionHighlightBackground #1b1b1b
editor.wordHighlightBackground #402725
editor.wordHighlightStrongBackground #402725
editorBracketMatch.background #6c6f9380
editorBracketMatch.border #6c6f9300
editorCodeLens.foreground #6c6f9380
editorCursor.background #1c1e26
editorCursor.foreground #cccccc
editorError.foreground #f43e5c
editorGroup.border #1a1c23
editorGroup.dropBackground #6c6f934d
editorGroupHeader.tabsBackground #0e0e0e
editorGutter.addedBackground #09f7a0b3
editorGutter.deletedBackground #f43e5cb3
editorGutter.modifiedBackground #21bfc2b3
editorIndentGuide.activeBackground #8b8b8b
editorIndentGuide.background #292626a4
editorLineNumber.activeForeground #d5d8da80
editorLineNumber.foreground #d5d8da1a
editorOverviewRuler.addedForeground #09f7a080
editorOverviewRuler.border #2e303eb3
editorOverviewRuler.bracketMatchForeground #d5d8da80
editorOverviewRuler.deletedForeground #f43e5c80
editorOverviewRuler.errorForeground #f43e5ce6
editorOverviewRuler.findMatchForeground #6c6f93
editorOverviewRuler.modifiedForeground #21bfc280
editorOverviewRuler.warningForeground #27d79780
editorRuler.foreground #6c6f934d
editorSuggestWidget.highlightForeground #e95378
editorWarning.foreground #27d797b3
editorWhitespace.foreground #2a2a2b46
editorWidget.background #141414
editorWidget.border #232530
errorForeground #f43e5c
extensionButton.prominentBackground #e95378
extensionButton.prominentHoverBackground #e9436d
focusBorder #1a1c23
foreground #d5d8da
gitDecoration.addedResourceForeground #27d797b3
gitDecoration.deletedResourceForeground #f43e5c
gitDecoration.ignoredResourceForeground #d5d8da4d
gitDecoration.modifiedResourceForeground #fab38e
gitDecoration.untrackedResourceForeground #27d797
input.background #141414
inputOption.activeBorder #e9436d80
inputValidation.errorBackground #f43e5c80
inputValidation.errorBorder #f43e5c00
list.activeSelectionBackground #2e303e80
list.activeSelectionForeground #d5d8da
list.dropBackground #6c6f9380
list.errorForeground #f43e5ce6
list.focusBackground #2e303e80
list.focusForeground #d5d8da
list.highlightForeground #e95378
list.hoverBackground #2e303e80
list.hoverForeground #d5d8da
list.inactiveFocusBackground #2e303e80
list.inactiveSelectionBackground #2e303e4d
list.inactiveSelectionForeground #d5d8da
list.warningForeground #27d797b3
panelTitle.activeBorder #e95378
peekView.border #1a1c23
peekViewEditor.background #232530
peekViewEditor.matchHighlightBackground #6c6f9380
peekViewResult.background #232530
peekViewResult.matchHighlightBackground #6c6f9380
peekViewResult.selectionBackground #2e303e80
peekViewTitle.background #232530
pickerGroup.foreground #e95378e6
progressBar.background #e95378
scrollbar.shadow #16161c
scrollbarSlider.activeBackground #6c6f9380
scrollbarSlider.background #6c6f931a
scrollbarSlider.hoverBackground #6c6f934d
selection.background #6c6f9380
sideBar.background #0e0e0e
sideBar.dropBackground #6c6f934d
sideBar.foreground #fffffff1
sideBarSectionHeader.background #0e0e0e
sideBarSectionHeader.foreground #d5d8dab3
statusBar.background #0e0e0e
statusBar.debuggingBackground #240510
statusBar.debuggingForeground #ffffff
statusBar.foreground #ffffffad
statusBar.noFolderBackground #1c1e26
statusBarItem.hoverBackground #2e303e
statusBarItem.prominentBackground #2e303e
statusBarItem.prominentHoverBackground #6c6f93
statusBarItem.remoteBackground #e3597956
statusBarItem.remoteForeground #ffffffa8
tab.activeBackground #0e0e0e
tab.activeBorder #e95378
tab.border #1c1e2600
tab.inactiveBackground #0e0e0e
terminal.ansiBlue #26bbd9
terminal.ansiBrightBlue #3fc4de
terminal.ansiBrightCyan #6be4e6
terminal.ansiBrightGreen #3fdaa4
terminal.ansiBrightMagenta #f075b5
terminal.ansiBrightRed #ec6a88
terminal.ansiBrightYellow #fbc3a7
terminal.ansiCyan #59e1e3
terminal.ansiGreen #29d398
terminal.ansiMagenta #ee64ac
terminal.ansiRed #e95678
terminal.ansiYellow #fab795
terminal.foreground #d5d8da
terminal.selectionBackground #6c6f934d
terminalCursor.background #d5d8da
terminalCursor.foreground #6c6f9380
textLink.activeForeground #e9436d
textLink.foreground #e95378
titleBar.activeBackground #0e0e0e
titleBar.inactiveBackground #1c1e26
walkThrough.embeddedEditorBackground #232530
widget.shadow #16161c #49E0FD
constant.language, constant.numeric, support.variable.magic #AE81FF —
constant.character, constant.other.placeholder, support.other.escape.special.regexp #E62A19 —
entity.name.variable.property, keyword, meta.preprocessor #F92672 —
storage, support.constant, punctuation.section.class #49E0FD —
keyword.type, storage.type, support.class, support.type #2BE98A —
variable.language, variable.other.member, variable.parameter, variable.other.readwrite.member, entity.other.attribute-name #FD971F —
punctuation.accessor, punctuation.section.embedded, punctuation.separator, punctuation.definition.attribute, storage.type.function.arrow, punctuation.definition.template-expression, punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.template-string.element.begin, punctuation.template-string.element.end #F92672 —
punctuation.separator.parameters #FD971F —
entity.name.function, support.function, variable.function #B0EC38 —
markup.heading #F92672 bold
markup.underline — underline
markup.inline, markup.raw.inline #AE81FF —
keyword.operator.dereference.java, meta.preprocessor.haskell, punctuation.separator.java, variable.parameter.java, variable.parameter.js, meta.group.js, meta.group.go, punctuation.section.class.begin.python, support.variable.dom.js, constant.character.brace, constant.character.end, constant.character.paren, constant.character.quote, support.class.js, punctuation.section.group.begin.js, punctuation.section.group.end.js, meta.template.expression, meta.group.braces, source.groovy.embedded.source, punctuation.section.class.end.groovy, variable.other.bracket.shell, variable.other.readwrite.shell, meta.group.expansion.command.parens.shell, variable.other.normal.shell, string.interpolated.dollar.shell, meta.function.shell punctuation.section.parens.begin.shell, meta.function.shell punctuation.section.parens.end.shell, string.other.math.shell #CCCCCC —
constant.other.symbol.prolog, support.function.be.latex, support.function.general.tex, support.function.section.latex, punctuation.dollar.js, punctuation.separator.parameters.python, support.function.definition.latex, constant.language.module.events, constant.language.module.http, constant.language.directive.module.main, constant.language.directive.module.events, constant.language.directive.module.http, variable.language.this.js, variable.parameter.option.shell, punctuation.definition.variable.shell, punctuation.section.expansion.parameter.begin.shell, punctuation.section.expansion.parameter.end.shell, punctuation.section.parens.begin.shell, punctuation.section.parens.end.shell, string.interpolated.dollar.shell punctuation.definition.string.begin.shell, string.interpolated.dollar.shell punctuation.definition.string.end.shell, string.other.math.shell punctuation.definition.string.begin.shell, string.other.math.shell punctuation.definition.string.end.shell #F92672 —
entity.name.type.go, entity.name.type.namespace.php, meta.import.scala, punctuation.separator.inheritance.php, storage.type.js, support.other.module.haskell, support.other.namespace.use.php, variable.other.constant.ruby, entity.name.section.puppet, entity.name.function.decorator.python #49E0FD —
keyword.control.def.ruby, keyword.declaration.scala, keyword.declaration.stable.scala, keyword.declaration.volatile.scala, keyword.other.fn.rust, keyword.other.rust, meta.structure.dictionary.key.json, storage.class.std.rust #2BE98A —
meta.function-call.object.php, meta.function-call.static.php, variable.other.makefile, variable.other.prolog, variable.other.property.js, support.variable.property.dom.js, meta.property.object.js, support.variable.property.js, variable.other.object.property.js, variable.other.property.cpp #FD971F —
meta.method.groovy, punctuation.definition.logical-expression.shell, meta.function-call.generic.python #B0EC38 —
constant.other.boolean.toml #AE81FF —
string.other.link.title.markdown, string.other.link.description.markdown #49E0FD —
beginning.punctuation.definition.list.markdown, punctuation.definition.list_item.markdown, punctuation.definition.list.markdown, punctuation.definition.heading.markdown, punctuation.definition.bold.markdown, punctuation.definition.italic.markdown, punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown, punctuation.definition.bold.begin.markdown, punctuation.definition.bold.end.markdown, punctuation.definition.italic.begin.markdown, punctuation.definition.italic.end.markdown, punctuation.definition.heading.begin.markdown, punctuation.definition.heading.end.markdown, punctuation.definition.raw.begin.markdown, punctuation.definition.raw.end.markdown, punctuation.definition.metadata.markdown, punctuation.definition.raw.markdown, markup.underline.link.image.markdown, markup.underline.link.markdown #696D70 normal
markup.deleted.diff #F92672 —
markup.inserted.diff #2BE98A —
meta.diff.range.unified #AE81FF —
markup.deleted.git_gutter #F92672 —
markup.inserted.git_gutter #2BE98A —
markup.changed.git_gutter #AE81FF —
markup.ignored.git_gutter #696D70 —
markup.untracked.git_gutter #696D70 —
punctuation.definition.comment #B1B1A4 —
token.error-token #F44747 —
token.debug-token #B267E6 —
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 } !` ;
}
fetchUser.ts
index.ts
README.md
src
components
fetchUser.ts
src
components
fetchUser.ts
fetchUser 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
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*
Button.tsx
31
$
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 } !` ;
}
EX-Alter Monokai++ D.A.R.K. | Coding Theme