Skip to main content
CodingTheme

Color themes

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#001d24
  • breadcrumbPicker.background#001014
  • dropdown.background#212f33
  • editor.background#00161b
  • editor.findMatchBackground#ffe792cc
  • editor.findMatchHighlightBackground#ffe79244
  • editor.foreground#f8f8f8
  • editor.inactiveSelectionBackground#c5dfe933
  • editor.lineHighlightBackground#00161b
  • editor.selectionBackground#c5dfe988
  • editorCursor.foreground#ff5e00
  • editorGroup.border#ffffff44
  • editorGroupHeader.tabsBackground#ffffff1f
  • editorHoverWidget.background#001d24
  • editorHoverWidget.border#ffffff22
  • editorIndentGuide.background#28364266
  • editorLineNumber.foreground#5a707578
  • editorRuler.foreground#ffffff1f
  • editorSuggestWidget.background#001014
  • editorWhitespace.foreground#f3ffb51a
  • editorWidget.background#001014
  • input.background#212f33
  • list.hoverBackground#ffffff22
  • list.inactiveSelectionBackground#ffffff22
  • panel.background#001317
  • peekViewResult.background#00161b
  • peekViewTitle.background#007acc
  • scrollbarSlider.activeBackground#ffffff44
  • scrollbarSlider.background#ffffff22
  • scrollbarSlider.hoverBackground#ffffff66
  • sideBar.background#001014
  • statusBar.background#001d24
  • statusBar.noFolderBackground#001d24
  • tab.border#00161b
  • tab.inactiveBackground#00101466
  • titleBar.activeBackground#001d24
  • widget.shadow#00000000

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, comment.block.python string.quoted, string.quoted.docstring.multi.python#406A80
constant#FF3A83
entity#FFC600
storage#F6F080
keyword#FFA826
string#31C871
support#9DF39F
variable#FF7A9A
entity.other.inherited-class#F6F080
string.quoted source, string constant, string source.ruby.embedded#9DF39F
string.regexp - source.regexp#FFC266
string variable#F6F080
support.function#FFC266
support.constant#FF7A9A
declaration.tag, declaration.tag entity, meta.tag - meta.tag.js, entity.name.tag, entity.name.tag.jsx#9EFFFFAB
text.html meta.tag meta.attribute-with-value source.js , text.html meta.tag meta.attribute-with-value source.css#F8F8F8
entity.other.attribute-name.id.html#FF7A9A
entity.other.attribute-name.html, entity.other.attribute-name.jsx#F6F080
entity.other.attribute-name.class.html#4DD2FF
punctuation.definition.tag.end, punctuation.definition.tag.begin, punctuation.definition.tag, punctuation.separator.key-value.html#65A4A487
constant.character.entity.html#F6F080
entity.name.tag.script.html, meta.tag.metadata.script.html entity.name.tag.html#FFC600
entity.name.tag.style.html, entity.other.attribute-name.style.html, meta.tag.metadata.style.html entity.name.tag.html#CCB3FF
meta.selector.css entity.name.tag, source.less entity.name.tag.css, keyword.control.html.elements, entity.name.tag.scss, entity.name.tag.css.sass.symbol#9EFFFF
meta.selector.css entity.other.attribute-name.id, source.less entity.other.attribute-name.id.css, entity.other.attribute-name.id.css#FFC266
meta.selector.css entity.other.attribute-name.class, source.less entity.other.attribute-name.class.css, entity.other.attribute-name.class.css, entity.other.attribute-name.class.css#F6F080
support.type.property-name.css#9DF39F
keyword.control.at-rule.import.css#F6F080
meta.property-value support.constant.named-color.css, meta.property-value constant#FF3A83
keyword.other.unit.css, source.less keyword.unit.css, keyword.other.unit.scss, support.type.map.key.scss#FF7A9A
keyword.other.important.css, keyword.other.important.scss#FF3A83bold
support.type.custom-property.css, source.less variable.other.less, source.less variable.declaration.less, variable.scss, meta.property-list.css.sass variable.other.value, sass-script-maps variable.other, variable.scss#CCB3FF
support.type.custom-property.css punctuation.definition.custom-property.css#CCB3FF88
entity.other.pseudo-class.css punctuation.definition.entity.css#FFC60088
meta.preprocessor.at-rule keyword.control.at-rule#FFA826
support.function.misc.scss#FFC600
meta.at-rule.include.scss entity.name.function.scss#FFC266
entity.other.attribute-name.pseudo-class.css.sass#FFC600
constant.other.color.rgb-value.css.sass, constant.numeric.color.hex-value.scss#FFC266
comment.punctuation.comma.sass#F8F8F8
support.function.name.sass.no-completions keyword.control.at-rule.css.sass, keyword.control.at-rule.function.scss, keyword.control.at-rule.mixin.scss#4DD2FF
support.function.name.sass.library keyword.control.at-rule.css.sass, keyword.control.at-rule.include.scss#AE81FF
entity.name.tag.reference.scss#FFA826
support.function.interpolation.sass#9DF39F
variable.other.readwrite, variable.other.object, meta.import variable.other.readwrite.alias#F8F8F8
variable.function, meta.function-call entity.name.function#F8F8F8
meta.function-call meta.brace.round, meta.function-call.method meta.group punctuation.definition.group#FFC266
source punctuation.separator.key-value#F8F8F8
variable.function.constructor#FFC600
keyword.control.as, keyword.control.default, keyword.control.export, keyword.control.from, keyword.control.import, keyword.control.import-export, source keyword.operator.module, source support.type.object.module#AE81FF
source variable.parameter.function, meta.parameters variable.parameter, meta.arrow variable.parameter#FFC266
meta.arrow meta.block punctuation.definition.block, meta.function.arrow punctuation.definition.parameters.begin, meta.function.arrow punctuation.definition.parameters.end, meta.objectliteral meta.method.declaration punctuation.definition.block, meta.parameters punctuation.definition.parameters.begin, meta.parameters punctuation.definition.parameters.end#F6F080
meta.function.arrow storage.type.function.arrow, meta.arrow storage.type.function.arrow#FFC600
constant.other.object.key string.unquoted.label, source meta.object-literal meta.object-literal.key, meta.object-literal.key, meta.object.member.object-literal.key, meta.object-literal.key entity.name.function#CCB3FF
source meta.object-literal meta.brace.curly, meta.object-literal punctuation.definition.block, meta.block meta.objectliteral punctuation.definition.block, meta.objectliteral punctuation.definition.block#CCB3FF
source meta.class storage.type.class, source meta.class storage.type.extends, storage.modifier.extends#FFA826
meta.class.property variable.other.property#FFC600
source variable.other.constant#FF3A83
meta.import punctuation.definition.block, meta.import punctuation.separator.comma, meta.parameters meta.parameter.object-binding-pattern punctuation.definition.binding-pattern.object, punctuation.definition.binding-pattern.object.ts#FF7A9A
source punctuation.accessor#FFC266
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, source string.interpolated keyword.other.substitution.begin, source string.interpolated keyword.other.substitution.end, source string.interpolated keyword.other.template.begin, source string.interpolated keyword.other.template.end#9DF39F
meta.decorator meta.function-call entity.name.function#9DF39F
meta.decorator punctuation.decorator#9DF39FAA
punctuation.section.embedded#9EFFFF
meta.jsx.js entity.other.attribute-name.jsx, variable.other.attribute.jsx, source meta.tag entity.other.attribute-name#9DF39F
meta.interpolation.jsx punctuation.definition.attribute.begin.jsx, meta.interpolation.jsx punctuation.definition.interpolation.begin.jsx, meta.interpolation.jsx punctuation.definition.interpolation.end.jsx, meta.jsx.js keyword.operator.assignment.jsx, meta.tag.js keyword.operator.assignment.js, punctuation.section.embedded.begin.jsx, punctuation.section.embedded.end.jsx, punctuation.separator.attribute-value.jsx#65A4A4
string.text.jsx#F8F8F8
entity.name.tag support.class.component#4DD2FF
variable.other.object.property, variable.other.property, meta.class variable.object.property, support.variable.property.dom#F8F8F8
storage.modifier.async#4DD2FF
entity.name.type, support.type.primitive, support.type.builtin, meta.return.type.arrow.ts entity.name.type, meta.return.type.arrow.ts support.type.primitive, meta.return.type support.type.primitive, meta.return.type entity.name.type#4DD2FF
meta.interface.ts variable.object.property.ts#CCB3FF
entity.other.attribute-name.angular.html#FF3A83
source.angular.embedded.html#FFC266
variable.other.readwrite.instance.coffee#9DF39F
meta.brace.round.coffee, meta.brace.square.coffee#F6F080
punctuation.section.embedded.coffee#31C871
variable.assignment.coffee variable.assignment.coffee#F6F080
meta.delimiter.method.period.coffee#FFA826
meta.brace.curly.coffee#9DF39F
comment.block.coffee storage.type.annotation.coffeescript#4DD2FF
source.json meta.structure string, source.json meta.structure support#9DF39F
source.json meta meta.structure string, source.json meta meta.structure support#F6F080
source.json meta meta meta.structure string, source.json meta meta meta.structure support#FFC266
source.json meta meta meta meta.structure string, source.json meta meta meta meta.structure support#FF7A9A
source.json meta meta meta meta meta.structure string, source.json meta meta meta meta meta.structure support#CCB3FF
source.json meta meta meta meta meta meta.structure string, source.json meta meta meta meta meta meta.structure support#4DD2FF
source.json meta meta meta meta meta meta meta.structure string, source.json meta meta meta meta meta meta meta.structure support#FFC600
source.json meta meta meta meta meta meta meta meta.structure string, source.json meta meta meta meta meta meta meta meta.structure support#FFA826
meta.function.method.with-arguments.ruby variable.parameter.function.ruby#F6F080
meta.function.method.with-arguments.ruby variable.parameter.function.ruby punctuation.separator.object.ruby#F8F8F8
string.quoted.other punctuation.definition#9DF39F
source.ruby constant.other.symbol#CCB3FF
entity.name.type.class.ruby#9DF39F
entity.name.type.module.ruby#9DF39F
punctuation.separator.inheritance.ruby#F8F8F8
variable.other.constant.ruby#FF7A9A
variable.language.ruby, keyword.other.special-method.ruby#FFC266
variable.other.block.ruby#F6F080
meta.class.ruby entity.name.type.class.ruby entity.other.inherited-class.ruby punctuation.separator.inheritance.ruby#FFA826
text.html.ruby text.html.basic source.ruby.rails.embedded.html punctuation.section.embedded.ruby#FF7A9A87
source.ruby.rspec meta.rspec string.quoted, source.ruby.rspec meta.rspec string.ruby#4DD2FF
keyword.other.rspec#FFC266
keyword.other.rspec.behaviour, keyword.other.rspec.example#FFC600
punctuation.definition.entry.yaml, entity.name.tag.yaml#F6F080
source.ini keyword.name.ini#F6F080
source.ini entity.section.ini#FF3A83
source.ini punctuation.definition.section.ini#FF7A9A
source.regexp string#F8F8F8
string.regexp punctuation.definition.group#F6F080
embedding.php text.html.basic punctuation.section.embedded#CCB3FF
punctuation.separator.namespace.php#9DF39F66
comment.block.documentation.phpdoc.php keyword.other.phpdoc.php#4DD2FF
variable.other.php, keyword.operator.class.php#F8F8F8
punctuation.definition.variable.php#FF7A9A99
variable.function.php#F6F080
meta.class.php storage.type.class.php, meta.class.php storage.modifier.extends.php, meta.class.php meta.block.php punctuation.definition.block.php#FFA826
entity.other.inherited-class.php#FF7A9A
meta.class.php meta.block.php meta.function.php storage.modifier.php, meta.class.php meta.block.php storage.modifier.php#FFC266
meta.function.php meta.block.php punctuation.definition.block.end.php, meta.function.php meta.block.php punctuation.definition.block.begin.php#F6F080
keyword.control.source.behat, keyword.language.gherkin.feature.scenario, keyword.language.gherkin.feature#CCB3FF
string.language.gherkin.scenario.title.title, string.language.gherkin.feature.title#FFC266
keyword.operator.step.behat, keyword.language.gherkin.feature.step#4DD2FF
source.feature.generic string.quoted.examples.behat, text.gherkin.feature keyword.control.cucumber.table#9DF39F55
source.feature.generic string.interpolated.behat#FF7A9A
text.gherkin.feature keyword.control.cucumber.table source#9DF39F
source comment.block.documentation storage.type.class.jsdoc#4DD2FF
source comment.block.documentation entity.name.type.instance.jsdoc#4DD2FFbold
token.info-token#6796e6
token.warn-token#cd9731
token.error-token#f44747
token.debug-token#b267e6
markup.heading.markdown entity.name.section.markdown#F6F080bold
markup.heading.markdown punctuation.definition.heading.markdown#F6F08066
markup.bold.markdownbold
markup.italic.markdownitalic
punctuation.definition.bold.markdown, punctuation.definition.italic.markdown#65A4A487
string.other.link.title.markdown#CCB3FF
markup.underline.link.markdown#4DD2FF
punctuation.definition.list.begin.markdown#FF7A9A
markup.inline.raw#9DF39F
punctuation.definition.raw#31c8703d
markup.fenced_code.block.markdown#9DF39F
markup.fenced_code.block.markdown punctuation.definition.markdown#31C871
keyword.other.import.java#AE81FF
storage.type.java, storage.type.generic.java, storage.type.primitive.java#4DD2FF
variable.other.definition.java, meta.method-call.java entity.name.function.java, meta.import.java storage.modifier.import.java#F8F8F8
punctuation.separator.java, punctuation.separator.period.java#FFA826
storage.type.annotation.java#CCB3FF
storage.type.annotation.java punctuation.definition.annotation.java#CCB3FF66
meta.method-call.java punctuation.definition.parameters.begin.bracket.round.java, meta.method-call.java punctuation.definition.parameters.end.bracket.round.java#FFC266
punctuation.section.method.begin.bracket.curly.java, punctuation.section.method.end.bracket.curly.java#F6F080

Shiki preview

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

Loading...

PlasticAB by Allen Bargi - VS Code Theme