Skip to main content
Home Theme VS Code Martial Theme Theme for Visual Studio Code inspired in Martial Arts.
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 #22232f activityBar.foreground #d7dae0 activityBarBadge.background #a22e21 activityBarBadge.foreground #ffffff badge.background #131215 button.background #19191d tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle meta.embedded #abb2bf — punctuation.definition.delayed.unison,punctuation.definition.list.begin.unison,punctuation.definition.list.end.unison,punctuation.definition.ability.begin.unison,punctuation.definition.ability.end.unison,punctuation.operator.assignment.as.unison,punctuation.separator.pipe.unison,punctuation.separator.delimiter.unison,punctuation.definition.hash.unison #e06c75 — variable.other.generic-type.haskell #ffbf00 — storage.type.haskell #d19a66
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
button.secondaryBackground
#1f2127
button.secondaryForeground #c0bdbd
checkbox.border #404754
debugToolBar.background #22232f
descriptionForeground #abb2bf
diffEditor.insertedTextBackground #00809b33
dropdown.background #22232f
dropdown.border #22232f
editor.background #252634
editor.findMatchBackground #42557b
editor.findMatchBorder #aa4444
editor.findMatchHighlightBackground #16469e2f
editor.foreground #abb2bf
editor.lineHighlightBackground #2c313c
editor.selectionBackground #ffffff25
editor.selectionHighlightBackground #ffffff10
editor.selectionHighlightBorder #dddddd28
editor.wordHighlightBackground #d2e0ff2f
editor.wordHighlightBorder #7f848e
editor.wordHighlightStrongBackground #abb2bf26
editor.wordHighlightStrongBorder #7f848e
editorBracketHighlight.foreground1 #20f369
editorBracketHighlight.foreground2 #c678dd
editorBracketHighlight.foreground3 #3284f0
editorBracketMatch.background #515a6b
editorBracketMatch.border #515a6b
editorCursor.background #ffffffc9
editorCursor.foreground #bb4545
editorError.foreground #912822
editorGroup.background #181a1f
editorGroup.border #181a1f
editorGroupHeader.tabsBackground #22232f
editorGutter.addedBackground #109868
editorGutter.deletedBackground #9A353D
editorGutter.modifiedBackground #948B60
editorHoverWidget.background #22232f
editorHoverWidget.border #181a1f
editorHoverWidget.highlightForeground #61afef
editorIndentGuide.activeBackground #c8c8c859
editorIndentGuide.background #3b4048
editorInlayHint.background #2c313c
editorInlayHint.foreground #abb2bf
editorLineNumber.activeForeground #abb2bf
editorLineNumber.foreground #495162
editorMarkerNavigation.background #47427c
editorOverviewRuler.addedBackground #109868
editorOverviewRuler.deletedBackground #9A353D
editorOverviewRuler.modifiedBackground #948B60
editorRuler.foreground #22232f
editorSuggestWidget.background #22232f
editorSuggestWidget.border #ffffff
editorSuggestWidget.foreground #ebe567
editorSuggestWidget.highlightForeground #ec5f5fd2
editorSuggestWidget.selectedBackground #16161636
editorWarning.foreground #d19a66
editorWhitespace.foreground #22232f
editorWidget.background #22232f
focusBorder #3e4452
gitDecoration.ignoredResourceForeground #636b78
input.background #4a494941
input.foreground #bfbbab
list.activeSelectionBackground #dd97970a
list.activeSelectionForeground #d7dae0
list.focusBackground #ebd232
list.focusForeground #f0f0f0
list.highlightForeground #eeeb3a
list.hoverBackground #2c313a
list.hoverForeground #abb2bf
list.inactiveSelectionBackground #ffffe02e
list.inactiveSelectionForeground #d7dae0
list.warningForeground #d19a66
menu.foreground #abb2bf
menu.separatorBackground #22232f
minimapGutter.addedBackground #109868
minimapGutter.deletedBackground #9A353D
minimapGutter.modifiedBackground #948B60
panel.border #c07171
panelSectionHeader.background #22232f
peekViewEditor.background #1b1d23
peekViewEditor.matchHighlightBackground #29244b
peekViewResult.background #22262b
scrollbar.shadow #3c3f5f
scrollbarSlider.activeBackground #e4d82fbf
scrollbarSlider.background #8f8e7528
scrollbarSlider.hoverBackground #8f8e7528
settings.focusedRowBackground #282c34
settings.headerForeground #fff
sideBar.background #22232f
sideBar.foreground #abb2bf
sideBarSectionHeader.background #7835358a
sideBarSectionHeader.foreground #abb2bf
statusBar.background #22232f
statusBar.debuggingBackground #cc6633
statusBar.debuggingBorder #ff000000
statusBar.debuggingForeground #ffffff
statusBar.foreground #c1bf7d
statusBar.noFolderBackground #22232f
statusBarItem.remoteBackground #c45555
statusBarItem.remoteForeground #f8fafd
tab.activeBackground #282938
tab.activeBorder #ffffff50
tab.activeForeground #dcdcdc3e
tab.border #22232f
tab.hoverBackground #22232f
tab.inactiveBackground #22232f
tab.unfocusedHoverBackground #22232f
terminal.ansiBlack #264eb2
terminal.ansiBlue #f0ea4a
terminal.ansiBrightBlack #4f5666
terminal.ansiBrightBlue #f0ea4a
terminal.ansiBrightCyan #f0ea4a
terminal.ansiBrightGreen #a5e075
terminal.ansiBrightMagenta #de73ff
terminal.ansiBrightRed #ff616e
terminal.ansiBrightWhite #e6e6e6
terminal.ansiBrightYellow #f0ea4a
terminal.ansiCyan #4c41c7
terminal.ansiGreen #8cc265
terminal.ansiMagenta #c162de
terminal.ansiRed #e05561
terminal.ansiWhite #d7dae0
terminal.ansiYellow #f0ea4a
terminal.background #22232f
terminal.border #3e4452
terminal.foreground #abb2bf
terminal.selectionBackground #abb2bf30
textBlockQuote.background #2e3440
textBlockQuote.border #4b5362
textLink.foreground #61788b
textPreformat.foreground #d19a66
titleBar.activeBackground #22232f
titleBar.activeForeground #9da5b4
titleBar.inactiveBackground #22232f
titleBar.inactiveForeground #6b717d
tree.indentGuidesStroke #ffffff1d
walkThrough.embeddedEditorBackground #2e3440
welcomePage.buttonHoverBackground #404754 support.variable.magic.python #e06c75 —
punctuation.separator.period.python,punctuation.separator.element.python,punctuation.parenthesis.begin.python,punctuation.parenthesis.end.python #abb2bf —
variable.parameter.function.language.special.self.python #e5c07b —
variable.parameter.function.language.special.cls.python #e5c07b —
storage.modifier.lifetime.rust #abb2bf —
support.function.std.rust #61afef —
entity.name.lifetime.rust #e5c07b —
variable.language.rust #e06c75 —
support.constant.edge #c678dd —
constant.other.character-class.regexp #e06c75 —
keyword.operator.word #c678dd —
keyword.operator.quantifier.regexp #d19a66 —
variable.parameter.function #abb2bf —
comment markup.link #5c6370 —
markup.changed.diff #e5c07b —
meta.diff.header.from-file,meta.diff.header.to-file,punctuation.definition.from-file.diff,punctuation.definition.to-file.diff #61afef —
markup.inserted.diff #98c379 —
markup.deleted.diff #e06c75 —
meta.function.c,meta.function.cpp #e06c75 —
punctuation.section.block.begin.bracket.curly.cpp,punctuation.section.block.end.bracket.curly.cpp,punctuation.terminator.statement.c,punctuation.section.block.begin.bracket.curly.c,punctuation.section.block.end.bracket.curly.c,punctuation.section.parens.begin.bracket.round.c,punctuation.section.parens.end.bracket.round.c,punctuation.section.parameters.begin.bracket.round.c,punctuation.section.parameters.end.bracket.round.c #abb2bf —
punctuation.separator.key-value #abb2bf —
keyword.operator.expression.import #61afef —
support.constant.math #e5c07b —
support.constant.property.math #d19a66 —
variable.other.constant #e5c07b —
storage.type.annotation.java, storage.type.object.array.java #e5c07b —
punctuation.section.block.begin.java,punctuation.section.block.end.java,punctuation.definition.method-parameters.begin.java,punctuation.definition.method-parameters.end.java,meta.method.identifier.java,punctuation.section.method.begin.java,punctuation.section.method.end.java,punctuation.terminator.java,punctuation.section.class.begin.java,punctuation.section.class.end.java,punctuation.section.inner-class.begin.java,punctuation.section.inner-class.end.java,meta.method-call.java,punctuation.section.class.begin.bracket.curly.java,punctuation.section.class.end.bracket.curly.java,punctuation.section.method.begin.bracket.curly.java,punctuation.section.method.end.bracket.curly.java,punctuation.separator.period.java,punctuation.bracket.angle.java,punctuation.definition.annotation.java,meta.method.body.java #abb2bf —
storage.modifier.import.java,storage.type.java,storage.type.generic.java #e5c07b —
keyword.operator.instanceof.java #c678dd —
meta.definition.variable.name.java #e06c75 —
keyword.operator.logical #56b6c2 —
keyword.operator.bitwise #56b6c2 —
keyword.operator.channel #56b6c2 —
support.constant.property-value.scss,support.constant.property-value.css #d19a66 —
keyword.operator.css,keyword.operator.scss,keyword.operator.less #56b6c2 —
support.constant.color.w3c-standard-color-name.css,support.constant.color.w3c-standard-color-name.scss #d19a66 —
punctuation.separator.list.comma.css #abb2bf —
support.constant.color.w3c-standard-color-name.css #d19a66 —
support.type.vendored.property-name.css #56b6c2 —
support.module.node,support.type.object.module,support.module.node #e5c07b —
entity.name.type.module #e5c07b —
variable.other.readwrite,meta.object-literal.key,support.variable.property,support.variable.object.process,support.variable.object.node #e06c75 —
support.constant.json #d19a66 —
keyword.operator.expression.instanceof, keyword.operator.new, keyword.operator.ternary, keyword.operator.optional, keyword.operator.expression.keyof #c678dd —
support.type.object.console #e06c75 —
support.variable.property.process #d19a66 —
entity.name.function,support.function.console #61afef —
keyword.operator.misc.rust #abb2bf —
keyword.operator.sigil.rust #c678dd —
keyword.operator.delete #c678dd —
support.type.object.dom #56b6c2 —
support.variable.dom,support.variable.property.dom #e06c75 —
keyword.operator.arithmetic,keyword.operator.comparison,keyword.operator.decrement,keyword.operator.increment,keyword.operator.relational #56b6c2 —
keyword.operator.assignment.c,keyword.operator.comparison.c,keyword.operator.c,keyword.operator.increment.c,keyword.operator.decrement.c,keyword.operator.bitwise.shift.c,keyword.operator.assignment.cpp,keyword.operator.comparison.cpp,keyword.operator.cpp,keyword.operator.increment.cpp,keyword.operator.decrement.cpp,keyword.operator.bitwise.shift.cpp #c678dd —
punctuation.separator.delimiter #abb2bf —
punctuation.separator.c,punctuation.separator.cpp #c678dd —
support.type.posix-reserved.c,support.type.posix-reserved.cpp #56b6c2 —
keyword.operator.sizeof.c,keyword.operator.sizeof.cpp #c678dd —
variable.parameter.function.language.python #d19a66 —
support.type.python #56b6c2 —
keyword.operator.logical.python #c678dd —
variable.parameter.function.python #d19a66 —
punctuation.definition.arguments.begin.python,punctuation.definition.arguments.end.python,punctuation.separator.arguments.python,punctuation.definition.list.begin.python,punctuation.definition.list.end.python #abb2bf —
meta.function-call.generic.python #61afef —
constant.character.format.placeholder.other.python #d19a66 —
keyword.operator.assignment.compound #c678dd —
keyword.operator.assignment.compound.js,keyword.operator.assignment.compound.ts #56b6c2 —
entity.name.namespace #e5c07b —
variable.language #e5c07b —
token.variable.parameter.java #abb2bf —
import.storage.java #e5c07b —
token.package.keyword #c678dd —
entity.name.function, meta.require, support.function.any-method, variable.function #61afef —
entity.name.type.namespace #e5c07b —
support.class, entity.name.type.class #e5c07b —
entity.name.class.identifier.namespace.type #e5c07b —
entity.name.class, variable.other.class.js, variable.other.class.ts #e5c07b —
variable.other.class.php #e06c75 —
keyword.control #eaea7f italic
control.elements, keyword.operator.less #d19a66 —
keyword.other.special-method #61afef —
keyword.operator.expression.delete,keyword.operator.expression.in,keyword.operator.expression.of,keyword.operator.expression.instanceof,keyword.operator.new,keyword.operator.expression.typeof,keyword.operator.expression.void #c678dd —
token.storage.type.java #e5c07b —
support.type.property-name #abb2bf —
support.type.property-name.toml, support.type.property-name.table.toml, support.type.property-name.array.toml #e06c75 —
support.constant.property-value #abb2bf —
support.constant.font-name #d19a66 —
constant.other.symbol #56b6c2 —
punctuation.definition.constant #d19a66 —
entity.other.attribute-name #d19a66 —
entity.other.attribute-name.id #61afef —
entity.other.attribute-name.class.css #d19a66 —
markup.heading punctuation.definition.heading, entity.name.section #61afef —
keyword.other.unit #e06c75 —
markup.bold,todo.bold #d19a66 —
punctuation.definition.bold #e5c07b —
markup.italic, punctuation.definition.italic,todo.emphasis #c678dd —
entity.name.section.markdown #e06c75 —
punctuation.definition.heading.markdown #e06c75 —
punctuation.definition.list.begin.markdown #e5c07b —
markup.heading.setext #abb2bf —
punctuation.definition.bold.markdown #d19a66 —
markup.inline.raw.markdown #98c379 —
markup.inline.raw.string.markdown #98c379 —
punctuation.definition.raw.markdown #e5c07b —
punctuation.definition.list.markdown #e5c07b —
punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown, punctuation.definition.metadata.markdown #e06c75 —
beginning.punctuation.definition.list.markdown #e06c75 —
punctuation.definition.metadata.markdown #e06c75 —
markup.underline.link.markdown,markup.underline.link.image.markdown #c678dd —
string.other.link.title.markdown,string.other.link.description.markdown #61afef —
markup.raw.monospace.asciidoc #98c379 —
punctuation.definition.asciidoc #e5c07b —
markup.list.asciidoc #e5c07b —
markup.link.asciidoc,markup.other.url.asciidoc #c678dd —
string.unquoted.asciidoc,markup.other.url.asciidoc #61afef —
punctuation.section.embedded, variable.interpolation #e06c75 —
punctuation.section.embedded.begin,punctuation.section.embedded.end #c678dd —
invalid.illegal.bad-ampersand.html #abb2bf —
invalid.illegal.unrecognized-tag.html #e06c75 —
invalid.deprecated #ffffff —
invalid.deprecated.entity.other.attribute-name.html #d19a66 —
invalid.unimplemented #ffffff —
source.json meta.structure.dictionary.json > string.quoted.json #e06c75 —
source.json meta.structure.dictionary.json > string.quoted.json > punctuation.string #e06c75 —
source.json meta.structure.dictionary.json > value.json > string.quoted.json,source.json meta.structure.array.json > value.json > string.quoted.json,source.json meta.structure.dictionary.json > value.json > string.quoted.json > punctuation,source.json meta.structure.array.json > value.json > string.quoted.json > punctuation #98c379 —
source.json meta.structure.dictionary.json > constant.language.json,source.json meta.structure.array.json > constant.language.json #56b6c2 —
support.type.property-name.json #e06c75 —
support.type.property-name.json punctuation #e06c75 —
text.html.laravel-blade source.php.embedded.line.html entity.name.tag.laravel-blade #c678dd —
text.html.laravel-blade source.php.embedded.line.html support.constant.laravel-blade #c678dd —
support.other.namespace.use.php,support.other.namespace.use-as.php,entity.other.alias.php,meta.interface.php #e5c07b —
keyword.operator.error-control.php #c678dd —
keyword.operator.type.php #c678dd —
punctuation.section.array.begin.php #abb2bf —
punctuation.section.array.end.php #abb2bf —
invalid.illegal.non-null-typehinted.php #f44747 —
storage.type.php,meta.other.type.phpdoc.php,keyword.other.type.php,keyword.other.array.phpdoc.php #e5c07b —
meta.function-call.php,meta.function-call.object.php,meta.function-call.static.php #61afef —
punctuation.definition.parameters.begin.bracket.round.php,punctuation.definition.parameters.end.bracket.round.php,punctuation.separator.delimiter.php,punctuation.section.scope.begin.php,punctuation.section.scope.end.php,punctuation.terminator.expression.php,punctuation.definition.arguments.begin.bracket.round.php,punctuation.definition.arguments.end.bracket.round.php,punctuation.definition.storage-type.begin.bracket.round.php,punctuation.definition.storage-type.end.bracket.round.php,punctuation.definition.array.begin.bracket.round.php,punctuation.definition.array.end.bracket.round.php,punctuation.definition.begin.bracket.round.php,punctuation.definition.end.bracket.round.php,punctuation.definition.begin.bracket.curly.php,punctuation.definition.end.bracket.curly.php,punctuation.definition.section.switch-block.end.bracket.curly.php,punctuation.definition.section.switch-block.start.bracket.curly.php,punctuation.definition.section.switch-block.begin.bracket.curly.php,punctuation.definition.section.switch-block.end.bracket.curly.php #abb2bf —
support.constant.core.rust #d19a66 —
support.constant.ext.php,support.constant.std.php,support.constant.core.php,support.constant.parser-token.php #d19a66 —
entity.name.goto-label.php,support.other.php #61afef —
keyword.operator.logical.php,keyword.operator.bitwise.php,keyword.operator.arithmetic.php #56b6c2 —
keyword.operator.regexp.php #c678dd —
keyword.operator.comparison.php #56b6c2 —
keyword.operator.heredoc.php,keyword.operator.nowdoc.php #c678dd —
meta.function.decorator.python #61afef —
support.token.decorator.python,meta.function.decorator.identifier.python #56b6c2 —
function.parameter #abb2bf —
function.parameter.ruby, function.parameter.cs #abb2bf —
constant.language.symbol.ruby #56b6c2 —
constant.language.symbol.hashkey.ruby #56b6c2 —
inline-color-decoration rgb-value #d19a66 —
support.type.primitive.ts,support.type.builtin.ts,support.type.primitive.tsx,support.type.builtin.tsx #e5c07b —
block.scope.end,block.scope.begin #abb2bf —
entity.name.variable.local.cs #e06c75 —
token.error-token #f44747 —
token.debug-token #c678dd —
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded #c678dd —
meta.template.expression #abb2bf —
keyword.operator.module #c678dd —
support.type.type.flowtype #61afef —
support.type.primitive #e5c07b —
meta.property.object #e06c75 —
variable.parameter.function.js #e06c75 —
keyword.other.template.begin #98c379 —
keyword.other.template.end #98c379 —
keyword.other.substitution.begin #c3af79 —
keyword.other.substitution.end #98c379 —
keyword.operator.assignment #56b6c2 —
keyword.operator.assignment.go #e5c07b —
keyword.operator.arithmetic.go, keyword.operator.address.go #c678dd —
entity.name.package.go #e5c07b —
support.type.prelude.elm #56b6c2 —
support.constant.elm #d19a66 —
punctuation.quasi.element #c678dd —
constant.character.entity #e06c75 —
entity.other.attribute-name.pseudo-element, entity.other.attribute-name.pseudo-class #56b6c2 —
entity.global.clojure #e5c07b —
meta.symbol.clojure #e06c75 —
constant.keyword.clojure #56b6c2 —
meta.arguments.coffee, variable.parameter.function.coffee #e06c75 —
meta.scope.prerequisites.makefile #e06c75 —
storage.modifier.import.groovy #e5c07b —
meta.method.groovy #61afef —
meta.definition.variable.name.groovy #e06c75 —
meta.definition.class.inherited.classes.groovy #c3b279 —
support.variable.semantic.hlsl #e5c07b —
support.type.texture.hlsl, support.type.sampler.hlsl, support.type.object.hlsl, support.type.object.rw.hlsl, support.type.fx.hlsl, support.type.object.hlsl #c678dd —
text.variable, text.bracketed #e06c75 —
support.type.swift, support.type.vb.asp #e5c07b —
entity.name.function.xi #e5c07b —
entity.name.class.xi #56b6c2 —
constant.character.character-class.regexp.xi #e06c75 —
constant.regexp.xi #c678dd —
keyword.control.xi #56b6c2 —
beginning.punctuation.definition.quote.markdown.xi #98c379 —
beginning.punctuation.definition.list.markdown.xi #7f848e —
constant.character.xi #61afef —
constant.other.color.rgb-value.xi #ffffff —
punctuation.definition.tag.xi #5c6370 —
entity.name.label.cs, entity.name.scope-resolution.function.call, entity.name.scope-resolution.function.definition #e5c07b —
entity.name.label.cs, markup.heading.setext.1.markdown, markup.heading.setext.2.markdown #e06c75 —
meta.brace.square #abb2bf —
comment, punctuation.definition.comment #7f848e italic
markup.quote.markdown #5c6370 —
punctuation.definition.block.sequence.item.yaml #abb2bf —
constant.language.symbol.elixir, constant.language.symbol.double-quoted.elixir #56b6c2 —
entity.name.variable.parameter.cs #e5c07b —
entity.name.variable.field.cs #e06c75 —
markup.underline — underline
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php #BE5046 —
support.other.namespace.php #abb2bf —
variable.parameter.function.latex #e06c75 —
variable.other.object #e5c07b —
variable.other.constant.property #e06c75 —
entity.other.inherited-class #e5c07b —
variable.other.readwrite.c #e06c75 —
entity.name.variable.parameter.php,punctuation.separator.colon.php,constant.other.php #abb2bf —
constant.numeric.decimal.asm.x86_64 #c678dd —
support.other.parenthesis.regexp #d19a66 —
constant.character.escape #56b6c2 —
keyword.operator.expression.is #c678dd —
entity.name.label #e06c75 —
entity.other.attribute-name.js,entity.other.attribute-name.ts,entity.other.attribute-name.jsx,entity.other.attribute-name.tsx,variable.parameter,variable.language.super — italic
comment.line.double-slash,comment.block.documentation — italic
markup.italic.markdown — 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 } !` ;
}
Martial Theme | Coding Theme