Skip to main content
Home Theme VS Code Material Theme for VSCode A beautifully crafted Visual Studio Code theme inspired by Material Design.
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 #1E272C activityBar.foreground #EEFFFF activityBarBadge.background #007ACC activityBarBadge.foreground #EEFFFF editor.background #263238 editor.foreground #EEFFFF tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle comment, comment.line.double-slash, comment.line.number-sign, punctuation.definition.comment #546E7A italic variable, string constant.other.placeholder #EEFFFF — invalid, invalid.illegal #FF5370 — keyword, storage.type, storage.modifier #C792EA — keyword.operator, punctuation
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
Material Theme for VSCode — Material Theme for VSCode - Dark
editor.lineHighlightBackground
#314549
editor.selectionBackground #546E7A80
editorCursor.foreground #FFCC00
editorGutter.addedBackground #C3E88D
editorGutter.background #263238
editorGutter.deletedBackground #FF5370
editorGutter.modifiedBackground #FFCB6B
sideBar.background #1E272C
sideBar.foreground #EEFFFF
sideBarTitle.foreground #BBBBBB
statusBar.background #1E272C
statusBar.debuggingBackground #FF5370
statusBar.foreground #EEFFFF
statusBar.noFolderBackground #1E272C
tab.activeBackground #314549
tab.activeForeground #EEFFFF
tab.inactiveBackground #1E272C
tab.inactiveForeground #BBBBBB entity.name.function, support.function, variable.language.super #82AAFF —
punctuation.definition.string.begin, punctuation.definition.string.end, punctuation.definition.string.begin.json, punctuation.definition.string.end.json, punctuation.definition.string.begin.terraform, punctuation.definition.string.end.terraform, punctuation.definition.string.begin.hcl, punctuation.definition.string.end.hcl, punctuation.definition.string.begin.js, punctuation.definition.string.end.js, punctuation.definition.string.begin.ts, punctuation.definition.string.end.ts, punctuation.definition.string.begin.jsx, punctuation.definition.string.end.jsx, punctuation.definition.string.begin.tsx, punctuation.definition.string.end.tsx, punctuation.definition.string.begin.python, punctuation.definition.string.end.python, punctuation.definition.string.begin.php, punctuation.definition.string.end.php, punctuation.definition.string.begin.cs, punctuation.definition.string.end.cs, punctuation.definition.string.begin.yaml, punctuation.definition.string.end.yaml, punctuation.definition.string.begin.xml, punctuation.definition.string.end.xml, punctuation.definition.string.begin.html, punctuation.definition.string.end.html, punctuation.definition.string.begin.shell, punctuation.definition.string.end.shell, source.terraform punctuation.definition.string.terraform, source.hcl punctuation.definition.string.hcl #89DDFF —
constant.language.boolean, constant.language.boolean.true, constant.language.boolean.false, constant.language.boolean.true.js, constant.language.boolean.false.js, constant.language.boolean.true.ts, constant.language.boolean.false.ts, constant.language.boolean.true.jsx, constant.language.boolean.false.jsx, constant.language.boolean.true.tsx, constant.language.boolean.false.tsx, constant.language.boolean.terraform, source.terraform constant.language.boolean.terraform, constant.language.boolean.hcl, source.hcl constant.language.boolean.hcl, constant.language.hcl, source.hcl.terraform constant.language.hcl, source.hcl constant.language.hcl, constant.language.boolean.yaml, constant.language.json, constant.language.boolean.python, constant.language.boolean.php, constant.language.boolean.cs #C792EA —
entity.name.class, support.class #FFCB6B —
entity.name.type, support.type #FFCB6B —
entity.other.attribute-name #C792EA —
source.cs keyword #C792EA —
keyword.preprocessor.region.cs, keyword.preprocessor.endregion.cs, meta.preprocessor.region.cs, meta.preprocessor.endregion.cs, string.unquoted.preprocessor.message.cs #546E7A —
source.cs entity.name.type #FFCB6B —
source.cs entity.name.function #82AAFF —
source.cs constant.numeric #F78C6C —
source.cs comment #546E7A italic
source.cs meta.attribute #C792EA —
source.cs keyword.control #89DDFF —
comment.block.documentation, comment.block.documentation.jsdoc #546E7A italic
entity.name.tag.jsdoc, keyword.other.jsdoc #FFCB6B —
support.type.jsdoc #FFCB6B —
punctuation.definition.block.tag.jsdoc, punctuation.definition.block.sequence.item.yaml, punctuation.definition.string.begin.yaml, punctuation.definition.string.end.yaml, punctuation.separator.key-value.mapping.yaml, punctuation.definition.tag.xml, punctuation.definition.string.begin.xml, punctuation.definition.string.end.xml #89DDFF —
support.type.object.module.js, support.type.object.module.ts #82AAFF —
support.type.primitive.ts, support.type.builtin.ts #FFCB6B —
entity.name.type.interface.ts, entity.other.inherited-class.ts #FFCB6B —
meta.type.parameters.ts #C792EA —
entity.name.tag.jsx, entity.name.tag.tsx #F07178 —
entity.other.attribute-name.jsx, entity.other.attribute-name.jsx #82AAFF —
punctuation.accessor.js, punctuation.accessor.jsx, punctuation.accessor.ts, punctuation.accessor.tsx, punctuation.decorator.js, punctuation.decorator.jsx, punctuation.decorator.ts, punctuation.decorator.tsx, punctuation.definition.string.template.begin.js, punctuation.definition.string.template.begin.jsx, punctuation.definition.string.template.begin.ts, punctuation.definition.string.template.begin.tsx, punctuation.definition.string.template.end.js, punctuation.definition.string.template.end.jsx, punctuation.definition.string.template.end.ts, punctuation.definition.string.template.end.tsx, punctuation.definition.tag.begin.jsx, punctuation.definition.tag.end.jsx, punctuation.definition.tag.begin.tsx, punctuation.definition.tag.end.tsx, punctuation.separator.comma.js, punctuation.separator.comma.jsx, punctuation.separator.comma.ts, punctuation.separator.comma.tsx, punctuation.separator.key-value.js, punctuation.separator.key-value.jsx, punctuation.separator.key-value.ts, punctuation.separator.key-value.tsx, punctuation.terminator.statement.js, punctuation.terminator.statement.jsx, punctuation.terminator.statement.ts, punctuation.terminator.statement.tsx #89DDFF —
punctuation.definition.template-expression.begin.js, punctuation.definition.template-expression.begin.ts, punctuation.definition.template-expression.end.js, punctuation.definition.template-expression.end.ts #C792EA —
constant.language.boolean.true.js, constant.language.boolean.false.js, constant.language.boolean.true.ts, constant.language.boolean.false.ts, constant.language.boolean.true.jsx, constant.language.boolean.false.jsx, constant.language.boolean.true.tsx, constant.language.boolean.false.tsx #C792EA —
constant.language.null.js, constant.language.null.ts, constant.language.null.jsx, constant.language.null.tsx, constant.language.undefined.js, constant.language.undefined.ts, constant.language.undefined.jsx, constant.language.undefined.tsx #F07178 —
meta.decorator.angular, entity.name.decorator.angular #C792EA —
text.html.angular #EEFFFF —
meta.object-literal.key.js, meta.object-literal.key.jsx, meta.object-literal.key.ts, meta.object-literal.key.tsx #DCD0E2 —
variable.object.property.ts, variable.object.property.tsx #DCD0E2 —
text.html.basic entity.other.attribute-name #FFCB6B italic
source.css support.type.property-name #B2CCD6 —
fenced_code.block.language.markdown, punctuation.definition.heading.markdown #B2CCD6 —
markup.underline.link #82AAFF underline
markup.italic #C792EA italic
punctuation.definition.bold.markdown, punctuation.definition.italic.markdown, punctuation.definition.markdown, punctuation.definition.list.begin.markdown, punctuation.definition.list.end.markdown, punctuation.definition.link.title.begin.markdown, punctuation.definition.link.title.end.markdown, punctuation.definition.metadata.markdown, punctuation.definition.quote.begin.markdown, punctuation.definition.string.begin.html, punctuation.definition.string.end.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html #89DDFF —
punctuation.separator.key-value.html #EEFFFF —
punctuation.separator.dictionary.key-value.json, punctuation.separator.dictionary.pair.json, punctuation.separator.array.json.comments #89DDFF —
support.type.property-name.json #82AAFF —
string.quoted.double.json #F78C6C —
constant.numeric.json #C3E88D —
constant.language.json #C792EA —
constant.language.null.json #FF5370 —
constant.language.boolean.yaml #82AAFF —
constant.language.null.yaml #C792EA —
constant.character.escape.octal.php, keyword.control.php, keyword.other.type.php, keyword.control.for.php, support.function.construct.php, punctuation.section.embedded.end.php, support.function.construct.output.php, punctuation.section.embedded.begin.php, keyword.operator.logical.php, storage.type.php, storage.modifier.php, storage.type.class.php, keyword.control.case.php, keyword.control.break.php, storage.type.function.php, keyword.control.switch.php, storage.modifier.extends.php, constant.character.escape.php, storage.modifier.final.php, keyword.control.while.php, storage.type.trait.php, keyword.control.yield.php, keyword.control.default.php, storage.type.interface.php, keyword.control.import.include.php, storage.modifier.implements.php, keyword.control.declare.php, keyword.control.exception.catch.php, keyword.control.exception.php, keyword.control.foreach.php, keyword.other.namespace.php, keyword.control.return.php, keyword.control.else.php, keyword.control.if.php, keyword.other.use.php, keyword.other.new.php #F78C6C —
constant.language.php, variable.other.php, variable.other.local.php, variable.other.global.php, variable.other.php.dollar.php, variable.other.global.safer.php, variable.other.php.dollar.bracket.php, punctuation.definition.variable.php, variable.language.this.php, variable.other.class.php, constant.other.class.php, constant.other.php, punctuation.definition.array.begin.php, punctuation.definition.array.end.php, punctuation.separator.key-value.php #B59BD1 —
support.constant.std.php, support.constant.ext.php, support.constant.core.php, constant.other.class.php #B59BD1 italic
support.function.constructor.php, support.function.array.php, support.function.math.php, support.function.json.php, meta.function-call.php, entity.name.function.php #82AAFF —
constant.other.php, keyword.operator.key.php, keyword.operator.class.php, keyword.operator.ternary.php, keyword.operator.assignment.php, punctuation.section.array.end.php, keyword.operator.return-value.php, punctuation.section.array.begin.php, keyword.operator.null-coalescing.php, meta.embedded.inline.phpx punctuation.definition.tag.begin.html, meta.embedded.inline.phpx punctuation.definition.tag.end.html, punctuation.definition.arguments.begin.bracket.round.php, punctuation.definition.arguments.end.bracket.round.php, keyword.operator.increment-decrement.php, punctuation.terminator.expression.php, punctuation.separator.delimiter.php, punctuation.separator.inheritance.php, keyword.definition.arrow.php, keyword.operator.string.php, source.sql.embedded.php, source.sql #E8E8E8 —
meta.class.php support.other.namespace.php, meta.class.php meta.class.body.php meta.method-call.php support.other.namespace.php, support.class.php, support.other.namespace.php, support.class.builtin.php, entity.name.type.class.php, entity.name.type.namespace.php, entity.other.inherited-class.php #E8E8E8 —
keyword.other.phpdoc.php, comment.block.documentation meta.other.type.phpdoc.php #E8E8E8 italic
source.php string #C3E88D —
source.php constant.numeric #4DD0E1 —
source.php comment #546E7A italic
constant.other.table-name.sql, variable.other.property.php #E1A2D3 —
meta.attribute.php, punctuation.decorator.php, meta.decorator entity.name.function.php, constant.other.character-class.regexp, meta.attribute.php support.attribute.php, meta.class.php meta.attribute.php support.other.namespace.php #D4C570 —
meta.embedded.block.php meta.method-call.php entity.name.variable.parameter.php, meta.embedded.block.php meta.attribute.php entity.name.variable.parameter.php, meta.embedded.block.php meta.attribute.php punctuation.separator.colon.php #7EAFE3 —
source.python keyword #F78C6C —
source.python meta.import #F78C6C —
source.python entity.name.function #82AAFF —
source.python variable.parameter #F67B56 —
source.python string, punctuation #C3E88D —
source.python constant.numeric #89DDFF —
source.python comment #546E7A italic
source.python entity.name.class #FFCB6B —
source.python meta.decorator #C792EA —
source.python support.type #89DDFF —
string.unquoted.argument.shell #EEFFFF —
constant.other.option.dash.shell #89DDFF —
constant.other.option, punctuation.definition.subshell.single.shell #C792EA —
punctuation.definition.string.begin.shell, punctuation.definition.string.end.shell, punctuation.separator.statement.and.shell, punctuation.terminator.statement.semicolon.shell #89DDFF —
punctuation.definition.string.begin.hcl, punctuation.definition.string.end.hcl #89DDFF —
source.hcl.terraform entity.name.type.terraform, source.hcl.terraform entity.name.type.hcl #C792EA bold
source.hcl.terraform variable.other.enummember.hcl #FFCB6B italic
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 } ! ` ;
}
Material Theme for VSCode | Coding Theme