Skip to main content
Coding Theme

VS Code preview

Full workbench mockup using this variant's colors and tokenColors.

Loading...

colors

Workbench UI color keys from the theme JSON colors map.

  • activityBar.background#000
  • activityBar.foreground#fff
  • activityBarBadge.background#526fff
  • activityBarBadge.foreground#ffffff
  • badge.background#526fff
  • badge.foreground#ffffff
  • breadcrumb.activeSelectionForeground#4e4e4e
  • breadcrumb.background#cecece
  • breadcrumb.focusForeground#4e4e4e
  • breadcrumb.foreground#000000cc
  • breadcrumbPicker.background#eaeaeb
  • button.background#5871ef
  • button.foreground#ffffff
  • button.hoverBackground#6b83ed
  • debugView.valueChangedHighlight#569cd6
  • diffEditor.insertedTextBackground#00809b33
  • dropdown.background#ffffff
  • dropdown.border#dbdbdc
  • editor.background#f8f8f8
  • editor.findMatchBackground#c2c6b26d
  • editor.findMatchHighlightBackground#526fff33
  • editor.findMatchHighlightBorder#c4c4c4
  • editor.findRangeHighlightBackground#b4b4b44d
  • editor.findRangeHighlightBorder#c4c4c4
  • editor.focusedStackFrameHighlightBackground#cee7ce49
  • editor.foreground#383a42
  • editor.hoverHighlightBackground#add6ff26
  • editor.lineHighlightBackground#383a420c
  • editor.lineHighlightBorder#eeeeee
  • editor.rangeHighlightBackground#fdff0033
  • editor.rangeHighlightBorder#c4c4c4
  • editor.selectionBackground#e5e5e6
  • editor.selectionHighlightBackground#ffffff00
  • editor.selectionHighlightBorder#c4c4c4
  • editor.snippetFinalTabstopHighlightBackground#c4c4c4
  • editor.snippetFinalTabstopHighlightBorder#0a326480
  • editor.snippetTabstopHighlightBackground#cee7ce49
  • editor.snippetTabstopHighlightBorder#c4c4c4
  • editor.stackFrameHighlightBackground#ffff6673
  • editor.symbolHighlightBackground#526fff33
  • editor.symbolHighlightBorder#c4c4c4
  • editor.wordHighlightBackground#ffffff00
  • editor.wordHighlightBorder#c4c4c4
  • editor.wordHighlightStrongBackground#add6ff26
  • editor.wordHighlightStrongBorder#c4c4c4
  • editorCursor.foreground#526fff
  • editorGroup.border#dbdbdc
  • editorGroupHeader.tabsBackground#eaeaeb
  • editorHoverWidget.background#eaeaeb
  • editorHoverWidget.border#dbdbdc
  • editorIndentGuide.activeBackground#626772
  • editorIndentGuide.background#383a4233
  • editorLineNumber.activeForeground#383a42
  • editorLineNumber.foreground#9d9d9f
  • editorOverviewRuler.rangeHighlightForeground#007acc99
  • editorOverviewRuler.selectionHighlightForeground#a0a0a0cc
  • editorOverviewRuler.wordHighlightForeground#a0a0a0cc
  • editorOverviewRuler.wordHighlightStrongForeground#c0a0c0cc
  • editorRuler.foreground#383a4233
  • editorSuggestWidget.background#eaeaeb
  • editorSuggestWidget.border#dbdbdc
  • editorSuggestWidget.highlightForeground#000000
  • editorSuggestWidget.selectedBackground#ffffff
  • editorWhitespace.foreground#383a4233
  • editorWidget.background#eaeaeb
  • editorWidget.border#e5e5e6
  • extensionButton.prominentBackground#3bba54
  • extensionButton.prominentHoverBackground#4cc263
  • focusBorder#526fff
  • input.background#ffffff
  • input.border#dbdbdc
  • list.activeSelectionBackground#dbdbdc
  • list.activeSelectionForeground#232324
  • list.focusBackground#dbdbdc
  • list.highlightForeground#121417
  • list.hoverBackground#dbdbdc66
  • list.inactiveSelectionBackground#dbdbdc
  • list.inactiveSelectionForeground#232324
  • menu.background#f5f5f5
  • menu.border#969696
  • menu.foreground#363636
  • minimap.errorHighlight#ff1212b3
  • minimap.findMatchHighlight#d18616
  • minimap.selectionHighlight#add6ff
  • minimap.warningHighlight#bf8803
  • notebook.symbolHighlightBackground#fdff0033
  • panel.background#eaeaeb
  • peekView.border#526fff
  • peekViewEditor.background#ffffff
  • peekViewEditor.matchHighlightBackground#f5d802de
  • peekViewEditor.matchHighlightBorder#c4c4c4
  • peekViewResult.background#eaeaeb
  • peekViewResult.matchHighlightBackground#ea5c004d
  • peekViewResult.selectionBackground#dbdbdc
  • peekViewTitle.background#ffffff
  • pickerGroup.border#526fff
  • problemsErrorIcon.foreground#ff1500
  • problemsInfoIcon.foreground#0088ff
  • problemsWarningIcon.foreground#ffb300
  • scrollbarSlider.activeBackground#747d9180
  • scrollbarSlider.background#4e566680
  • scrollbarSlider.hoverBackground#5a637580
  • sideBar.background#eaeaeb
  • sideBar.foreground#000000
  • sideBarSectionHeader.background#cecece
  • statusBar.background#eaeaeb
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#424243
  • statusBar.noFolderBackground#eaeaeb
  • statusBarItem.hoverBackground#dbdbdc
  • tab.activeBackground#fafafa
  • tab.activeForeground#121417
  • tab.border#dbdbdc
  • tab.inactiveBackground#eaeaeb
  • terminal.ansiBlack#000000ba
  • terminal.ansiBlue#2804cc
  • terminal.ansiBrightBlack#000000
  • terminal.ansiBrightBlue#3700ffa7
  • terminal.ansiBrightCyan#0066ff
  • terminal.ansiBrightGreen#147a23
  • terminal.ansiBrightMagenta#9a2cba
  • terminal.ansiBrightRed#c92222
  • terminal.ansiBrightWhite#787878
  • terminal.ansiBrightYellow#985b00
  • terminal.ansiCyan#a1c7ffba
  • terminal.ansiGreen#14ce14
  • terminal.ansiMagenta#992cba
  • terminal.ansiRed#ff4646
  • terminal.ansiWhite#787878ba
  • terminal.ansiYellow#949800
  • terminal.background#f1f1f1
  • terminal.border#ffffffab
  • terminal.foreground#323232
  • terminal.selectionBackground#d3d3d3db
  • terminalCursor.background#f1f1f1
  • terminalCursor.foreground#323232
  • titleBar.activeBackground#000
  • titleBar.activeForeground#FFF
  • titleBar.inactiveBackground#eaeaeb
  • titleBar.inactiveForeground#424243

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php#ff0000bold
keyword.control.if.php, keyword.control.foreach.php, keyword.control.while.php, keyword.control.switch.php, keyword.control.case.php, keyword.control.default.php, keyword.control.return.php, keyword.control.elseif.php, keyword.control.else.php, keyword.control.for.php#159428italic bold
keyword.operator.logical.phpitalic
keyword.other.new.php#159428italic
meta.function-call.php, support.function.construct.output.php, keyword.other.namespace.php, storage.type.class.php, keyword.control.exception.php, keyword.control.exception.catch.php, storage.type.function.php, storage.modifier.php, keyword.control.exit.php#0000bc
storage.modifier.extends.php, storage.modifier.implements.php#0000ffitalic
constant.language.php#ab9b00bold
constant.other.php#cf6d12
support.constant.ext.php, support.function.constructor.php#000000italic
constant.numeric.decimal.php#c92222
support.class.php, entity.name.type.class.php#9a2cbaitalic bold
entity.name.function.php#9a2cbaitalic
variable.other.property.php, variable.other.class.php#9a2cba
storage.modifier.phpitalic
support.function.construct.php, keyword.other.type.php, meta.function.parameter.typehinted.php storage.type.php#159428
variable.other.php, variable.language.this.php, variable.language.this.php, variable.other.global.safer.php, variable.other.global.php#0066ff
storage.type.php#159428italic
string.quoted.double.php variable.other.php, meta.embedded.block.php string.regexp.single-quoted.php, string.regexp.double-quoted.php variable.other.php#830e0e
string.quoted.single.php, string.regexp.double-quoted.php#e60909
string.quoted.double.php, punctuation.definition.string.begin.php, punctuation.definition.string.end.php#FF0000
support.other.namespace.php#773f9c
keyword.control.import.include.php#147a23
keyword.other.use.php#147a23
keyword.other.phpdoc.php#9A9A9Abold
meta.tag.metadata.doctype.html#000000italic
punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html#000000
entity.name.tag.html#0000cd
entity.other.attribute-name.html#b700b7
string.quoted.double.html#001dff
meta.tag.structure.button.start.html entity.name.tag.html, meta.tag.structure.button.start.html punctuation.definition.tag.begin.html, meta.tag.structure.button.start.html punctuation.definition.tag.end.html, meta.tag.structure.button.start.html entity.other.attribute-name.html, meta.tag.structure.button.end.html entity.name.tag.html, meta.tag.structure.button.end.html punctuation.definition.tag.begin.html, meta.tag.structure.button.end.html punctuation.definition.tag.end.html, meta.tag.structure.form.start.html entity.name.tag.html, meta.tag.structure.form.start.html punctuation.definition.tag.begin.html, meta.tag.structure.form.start.html punctuation.definition.tag.end.html, meta.tag.structure.form.start.html entity.other.attribute-name.html, meta.tag.structure.form.end.html entity.name.tag.html, meta.tag.structure.form.end.html punctuation.definition.tag.begin.html, meta.tag.structure.form.end.html punctuation.definition.tag.end.html, meta.tag.structure.input.void.html entity.name.tag.html, meta.tag.structure.input.void.html punctuation.definition.tag.begin.html, meta.tag.structure.input.void.html punctuation.definition.tag.end.html, meta.tag.structure.input.void.html entity.other.attribute-name.html, meta.tag.structure.label.start.html entity.name.tag.html, meta.tag.structure.label.start.html punctuation.definition.tag.begin.html, meta.tag.structure.label.start.html punctuation.definition.tag.end.html, meta.tag.structure.label.end.html entity.name.tag.html, meta.tag.structure.label.end.html punctuation.definition.tag.begin.html, meta.tag.structure.label.end.html punctuation.definition.tag.end.html, meta.tag.structure.label.start.html entity.other.attribute-name.html, meta.tag.structure.textarea.start.html entity.name.tag.html, meta.tag.structure.textarea.start.html punctuation.definition.tag.begin.html, meta.tag.structure.textarea.start.html punctuation.definition.tag.end.html, meta.tag.structure.textarea.end.html entity.name.tag.html, meta.tag.structure.textarea.end.html punctuation.definition.tag.begin.html, meta.tag.structure.textarea.end.html punctuation.definition.tag.end.html, meta.tag.structure.textarea.start.html entity.other.attribute-name.html, meta.tag.structure.option.start.html entity.name.tag.html, meta.tag.structure.option.start.html punctuation.definition.tag.begin.html, meta.tag.structure.option.start.html punctuation.definition.tag.end.html, meta.tag.structure.option.end.html entity.name.tag.html, meta.tag.structure.option.end.html punctuation.definition.tag.begin.html, meta.tag.structure.option.end.html punctuation.definition.tag.end.html, meta.tag.structure.option.start.html entity.other.attribute-name.html, meta.tag.structure.select.start.html entity.name.tag.html, meta.tag.structure.select.start.html punctuation.definition.tag.begin.html, meta.tag.structure.select.start.html punctuation.definition.tag.end.html, meta.tag.structure.select.end.html entity.name.tag.html, meta.tag.structure.select.end.html punctuation.definition.tag.begin.html, meta.tag.structure.select.end.html punctuation.definition.tag.end.html, meta.tag.structure.select.start.html entity.other.attribute-name.html#ff7300
meta.tag.structure.button.start.html string.quoted.double.html, meta.tag.structure.input.void.html string.quoted.double.html, meta.tag.structure.label.start.html string.quoted.double.html, meta.tag.structure.form.start.html string.quoted.double.html, meta.tag.structure.textarea.start.html string.quoted.double.html, meta.tag.structure.option.start.html string.quoted.double.html, meta.tag.structure.select.start.html string.quoted.double.html#a45d2e
entity.name.tag.structure.any.html, entity.name.tag.other.html, entity.name.tag.inline.any.html, entity.name.tag.block.any.html', punctuation.definition.tag.html, entity.name.tag.script.html, punctuation.definition.tag.end.html, entity.name.tag.block.any.html#0000cd
storage.type.js, storage.type.function.js, constant.language.null.js, constant.language.boolean.true.js, constant.language.boolean.false.js#bb00ffitalic
variable.other.constant.js, variable.other.constant.object.js, variable.other.readwrite.js, variable.other.object.js#0066ff
variable.other.object.property.js, variable.other.property.js#b700b7
entity.name.function.js#0000bc
keyword.operator.new.js, keyword.operator.typeof.js, keyword.operator.void.js, keyword.operator.in.js, keyword.operator.instanceof.js, keyword.operator.relational.js, keyword.operator.increment.js, keyword.operator.assignment.js, keyword.control.export.js, keyword.control.import.js, keyword.control.trycatch.js, keyword.control.switch.js, keyword.control.loop.js, keyword.control.conditional.js, meta.object-literal.key.js, keyword.control.flow.js#159428italic
string.quoted.single.js, string.quoted.double.js#c92222
variable.language.this.js#ab9b00
variable.parameter.js, meta.function-call.js#f0701f
support.class.builtin.js#a11117
support.function.js#567217
meta.brace.square.js, meta.brace.round.js, meta.brace.curly.js, punctuation.definition.block.js#000000
meta.object.member.js, constant.numeric.decimal.js#F0701F
string.regexp.js#ff0000
meta.group.regexp#c10b0b
keyword.operator.quantifier.regexp#ba1313
constant.other.character-class.regexp#773f9c
comment#8f8f8f
support.type.property-name.json#5830b8
string.quoted.double.json.comments, string.quoted.double.json#c53d3d
support.type.property-name.css, support.type.vendored.property-name.css#5830b8
keyword.control.at-rule.font-face.css#f036c1bold
variable.css, variable.argument.css#006718italic
string.quoted.single.css#319225
support.constant.property-value.css#508de9
constant.numeric.css#dd4343
keyword.control.at-rule.import.cssbold
variable.parameter.url.css#783386
entity.name.tag.css#333986
entity.name.tag.css#ab3faabold
entity.other.attribute-name.id.css, entity.other.attribute-name.class.css#ab3faaitalic
keyword.control.at-rule.media.css#000000bold
support.type.property-name.media.css, meta.at-rule.media.header.css#c59100italic
keyword.other.important.css#dd0000bold
keyword.other.DML.sql, keyword.other.sql, string.quoted.single.sql, string.quoted.double.sql.php#dd0000
string.quoted.other.backtick.sql#c10ba8
source.sql.embedded.php variable.other.php, source.sql.embedded.php variable.other.property.php, source.sql.embedded.php keyword.operator.class.php#830e0e
source.sql.embedded.php variable.other.php, source.sql.embedded.php variable.other.property.php, source.sql.embedded.php keyword.operator.class.php#830e0e
support.function.string.sql#d405c3
meta.function.extinf.m3u#dd0000
support.constant.m3u, keyword.control.m3u#000000bold
string.unquoted.m3u#0009b3
keyword.other.definition.ini#dd0000
keyword.other.definition.ini#dd0000
punctuation.separator.key-value.inibold
entity.name.section.group-title.ini#000bd8
keyword.rewrite.apacheconf, keyword.core.apacheconf, keyword.headers.apacheconf, keyword.expires.apacheconf, keyword.expires.apacheconf, keyword.php.apacheconf, keyword.setenvif.apacheconf, keyword.alias.apacheconf#000bd8
string.regexp.apacheconf#b90000
string.replacement.apacheconf, entity.mime-type.apacheconf#338e21
entity.tag.apacheconfitalic bold
string.value.apacheconf#882c7citalic
keyword.control.twig, keyword.operator.comparison.twig#338e21italic
punctuation.section.tag.twig#bf2323bold
variable.other.twig#ff0000
variable.other.property.twig#9B013D
entity.other.attribute-name.id.html#B700B7
meta.tag.sgml.doctype.html#0000CDitalic
keyword.operator.logical.twig#91008a
string.quoted.double.twig#ff6600
support.function.twig#3987b8
text.html.markdown#000000
markup.heading.markdown#0066ff
fenced_code.block.language.markdown, markup.fenced_code.block.markdown#0000bc
markup.list.unnumbered.markdown, markup.list.numbered.markdown#cf6d12
markup.bold.markdownbold
markup.italic.markdownitalic
markup.quote.markdown, markup.raw.block.markdown#626262
string.other.link.title.markdown, meta.link.inline.markdown#5830b8
source.python#000000
keyword.control.import.python, keyword.control.import.from.python#9a2cba
entity.name.type.class.python#9A2CBA
variable.language.python#0066ffitalic
storage.type.class.python#0000bc
keyword.control.import.python, keyword.control.import.from.python#9a2cba
keyword.other.python#CE9178
keyword.operator.arithmetic.python#FF0000
keyword.operator.logical.pythonitalic
constant.language.pythonitalic
meta.function-call.python#0000ff
keyword.control.flow.python#159428
keyword.control.flow.python#159428
meta.item-access.python#b04d9a
string.quoted.double.single-line.python#c92222
string.quoted.single.single-line.python, string.quoted.single.block.python#ee2929
constant.numeric.integer.decimal.python, constant.numeric.float.python#ff0000
variable.parameter.function.python#9A2CBA
meta.function-call.arguments.python#9A2CBA
storage.type.function.python#5830B8
entity.name.function.python#773f9c
constant.character.escape.linefeed.python#830e0e
keyword.command.batchfile#0000ff
keyword.operator.at.batchfile#0066ff
variable.other.readwrite.batchfile#3987b8
keyword.operator.assignment.batchfile#f036c1
variable.parameter.batchfile#f0701f
keyword.control.conditional.batchfile#159428italic
keyword.other.special-method.batchfile#9A2CBA
string.quoted.double.batchfile#c92222
keyword.control.statement.batchfile#b04d9a
string.quoted.double.batchfile variable.other.readwrite.batchfile#ff0000

Shiki preview

TypeScript sample highlighted with this variant's colors and tokenColors.

Loading...

GuiSaldanha Light - Coding Theme