Skip to main content
Home Theme VS Code One Monokai Pro 🎨 A beautiful dark theme inspired by One Monokai with enhanced bold keywords and refined color palette for better code readability
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 #21252B activityBar.foreground #D7DAE0 activityBarBadge.background #528bff activityBarBadge.foreground #F8FAFD button.background #528bff debugToolBar.background #21252B tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle comment, string.comment #676f7d — string, string.template #e5c07b — constant.numeric #c678dd — string.embedded.begin, string.embedded.end, punctuation.definition.template-expression, punctuation.section.embedded #c678dd — punctuation.section.embedded.begin.js, punctuation.section.embedded.end.js, punctuation.section.embedded.begin.erb, punctuation.section.embedded.end.erb, source.elixir.embedded, punctuation.separator, punctuation.accessor, meta.brace
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
One Monokai Pro — One Monokai Darker
diffEditor.insertedTextBackground
#00809B33
dropdown.background #1a1d23
dropdown.border #15171C
editor.background #1e2227
editor.findMatchBackground #42557B
editor.findMatchHighlightBackground #31436500
editor.lineHighlightBackground #2a2f38
editor.selectionBackground #3a404d
editorCursor.foreground #f8f8f0
editorError.foreground #c24038
editorGroup.border #15171C
editorGroup.emptyBackground #15171C
editorGroupHeader.tabsBackground #21252B
editorHoverWidget.background #1A1D23
editorHoverWidget.border #15171C
editorIndentGuide.activeBackground1 #4a5162
editorIndentGuide.background1 #353a42
editorLineNumber.foreground #4a5162
editorRuler.foreground #404040
editorSuggestWidget.background #21252B
editorSuggestWidget.border #15171C
editorSuggestWidget.selectedBackground #252a33
editorUnnecessaryCode.opacity #000000c0
editorWhitespace.foreground #404248
editorWidget.background #21252B
input.background #1a1d23
list.activeSelectionBackground #252a33
list.activeSelectionForeground #d7dae0
list.focusBackground #2a2f38
list.highlightForeground #C5C5C5
list.hoverBackground #232831
list.inactiveSelectionBackground #252a33
list.inactiveSelectionForeground #d7dae0
notifications.background #21252B
scrollbarSlider.activeBackground #747D9180
scrollbarSlider.background #4E566680
scrollbarSlider.hoverBackground #5A637580
sideBar.background #1e2227
sideBarSectionHeader.background #1e2227
statusBar.background #21252B
statusBar.debuggingBackground #21252B
statusBar.foreground #9da5b4
statusBar.noFolderBackground #21252B
statusBarItem.hoverBackground #252a33
tab.activeBackground #2a2f38
tab.border #15171C
tab.inactiveBackground #21252B
terminal.ansiBlack #2d3139
terminal.ansiBlue #528bff
terminal.ansiBrightBlack #7f848e
terminal.ansiBrightBlue #528bff
terminal.ansiBrightCyan #56b6c2
terminal.ansiBrightGreen #98c379
terminal.ansiBrightMagenta #7e0097
terminal.ansiBrightRed #f44747
terminal.ansiBrightWhite #d7dae0
terminal.ansiBrightYellow #e5c07b
terminal.ansiCyan #56b6c2
terminal.ansiGreen #98c379
terminal.ansiMagenta #c678dd
terminal.ansiRed #e06c75
terminal.ansiWhite #d7dae0
terminal.ansiYellow #e5c07b
terminal.foreground #abb2bf
titleBar.activeBackground #1e2227
titleBar.activeForeground #9da5b4
titleBar.inactiveBackground #1e2227
titleBar.inactiveForeground #6B717D constant.language #56b6c2 bold
constant.character, constant.other #56b6c2 —
variable.language #e06c75 bold
keyword.control, keyword.control.flow, keyword.control.conditional, keyword.control.loop, keyword.control.return, keyword.control.exception, keyword.control.import, keyword.control.export #e06c75 bold
storage.type, storage.modifier, keyword.other.class, keyword.other.function, keyword.other.var, keyword.other.let, keyword.other.const #e06c75 bold
keyword, keyword.operator.logical, keyword.operator.constructor, keyword.other #e06c75 —
entity.name.class, entity.name.module, entity.name.type, storage.identifier, support.class #61afef bold
variable.other.object, variable.other.constant, variable.other.global, variable.other.readwrite.class, variable.other.readwrite.instance, variable.other.readwrite.batchfile, variable.readwrite, variable.readwrite.other.block #61afef —
variable.other, variable.other.block #abb2bf —
variable.other.property, variable.other.property.python, meta.attribute.python #98c379 —
entity.other.inherited-class #98c379 —
storage.modifier.import, storage.modifier.package #61afef bold
entity.name.function, support.function #98c379 —
variable.parameter, entity.name.variable.parameter, parameter.variable #d19a66 italic
entity.name.function-call, variable.function, meta.function-call.python, meta.function-call.generic.python #98c379 —
function.support.builtin, function.support.core, support.function.builtin.python, support.function.magic.python #98c379 —
meta.function-call.python variable.function.python, meta.function-call.arguments.python variable.function.python, variable.function.python, meta.function-call.python, meta.function-call.generic.python, support.function.python, variable.other.property.python #98c379 —
entity.name.tag, entity.name.tag.class.js #e06c75 —
entity.name.tag.class, entity.name.tag.id #56b6c2 —
entity.other.attribute-name #98c379 —
support.type, support.variable #56b6c2 —
support.dictionary.json #56b6c2 —
support.type.property-name.css, support.type.property-name.scss, support.type.property-name.less, support.type.property-name.sass #abb2bf —
entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-class.scss, entity.other.attribute-name.pseudo-class.less, entity.other.attribute-name.pseudo-class.sass, entity.other.attribute-name.pseudo-element.css, entity.other.attribute-name.pseudo-element.scss, entity.other.attribute-name.pseudo-element.less, entity.other.attribute-name.pseudo-element.sass #56b6c2 —
support.constant.css, support.constant.scss, support.constant.less, support.constant.sass #98c379 —
variable.css, variable.scss, variable.less, variable.sass #56b6c2 —
variable.css.string, variable.scss.string, variable.less.string, variable.sass.string #e5c07b —
unit.css, unit.scss, unit.less, unit.sass #c678dd —
function.css, function.scss, function.less, function.sass #56b6c2 —
invalid.deprecated #F8F8F0 —
support.type.property-name.json #56b6c2 —
string.detected-link #61afef —
meta.diff, meta.diff.header #75715E —
constant.numeric.line-number.find-in-files - match #56b6c2A0 —
entity.name.filename.find-in-files #e5c07b —
markup.italic, markup.italic.markdown — italic
punctuation.definition.italic.markdown, punctuation.definition.bold.markdown, punctuation.definition.heading.markdown #676f7d —
punctuation.definition.italic.markdown — italic
markup.underline.link.markdown #61afef —
markup.bold.markdown — bold
markup.heading.markdown #e06c75 bold
markup.quote.markdown #98c379 —
meta.separator.markdown #c678dd bold
markup.inline.raw, markup.raw.block.markdown #56b6c2 —
punctuation.definition.list_item.markdown #ffffff bold
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 } !` ;
}
One Monokai Pro | Coding Theme