Skip to main content
Home Theme VS Code One Monokai Dark Soft A theme base on one monokai from Azemoh, using soft colors.
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 #2F333D activityBar.foreground #D7DAE0 activityBarBadge.background #528bff activityBarBadge.foreground #F8FAFD button.background #528bff diffEditor.insertedTextBackground #00809B33 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 Dark Soft — One Monokai Dark Soft
dropdown.background #1d1f23
dropdown.border #181A1F
editor.background #282c34
editor.findMatchBackground #42557B
editor.findMatchHighlightBackground #314365
editor.lineHighlightBackground #383E4A
editor.selectionBackground #3E4451
editorCursor.foreground #f8f8f0
editorError.foreground #c24038
editorGroup.border #181A1F
editorGroup.emptyBackground #181A1F
editorGroupHeader.tabsBackground #21252B
editorHoverWidget.background #21252B
editorHoverWidget.border #181A1F
editorIndentGuide.background1 #3B4048
editorLineNumber.foreground #495162
editorRuler.foreground #484848
editorSuggestWidget.background #21252B
editorSuggestWidget.border #181A1F
editorSuggestWidget.selectedBackground #2c313a
editorUnnecessaryCode.opacity #000000c0
editorWhitespace.foreground #484a50
editorWidget.background #21252B
input.background #1d1f23
list.activeSelectionBackground #2c313a
list.activeSelectionForeground #d7dae0
list.focusBackground #383E4A
list.highlightForeground #C5C5C5
list.hoverBackground #292d35
list.inactiveSelectionBackground #2c313a
list.inactiveSelectionForeground #d7dae0
notifications.background #21252b
scrollbarSlider.activeBackground #747D9180
scrollbarSlider.background #4E566680
scrollbarSlider.hoverBackground #5A637580
sideBar.background #21252b
sideBarSectionHeader.background #282c34
statusBar.background #21252B
statusBar.debuggingBackground #21252B
statusBar.foreground #9da5b4
statusBar.noFolderBackground #21252B
statusBarItem.hoverBackground #2c313a
tab.activeBackground #383E4A
tab.border #181A1F
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 #282c34
titleBar.activeForeground #9da5b4
titleBar.inactiveBackground #282C34
titleBar.inactiveForeground #6B717D constant.language #56b6c2 —
constant.character, constant.other #56b6c2 —
variable.language #e06c75 —
keyword, keyword.operator.logical, keyword.operator.constructor #e06c75 —
entity.name.class, entity.name.module, entity.name.type, storage.identifier, support.class #56b6c2 —
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 #98c379 —
variable.other, variable.other.property, variable.other.block #d19a66 italic
entity.other.inherited-class #98c379 —
storage.modifier.import, storage.modifier.package #61afef —
entity.name.function, support.function #61afef —
variable.parameter, entity.name.variable.parameter, parameter.variable #d19a66 italic
entity.name.function-call #abb2bf —
function.support.builtin, function.support.core #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.raw.inline.markdown, 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 Dark Soft | Coding Theme