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#1F2017
  • activityBar.border#302F31
  • activityBar.foreground#61674C
  • activityBar.inactiveForeground#41462F
  • activityBarBadge.background#748341
  • activityBarBadge.foreground#080805
  • badge.background#748341
  • badge.foreground#080805
  • button.background#748341
  • button.foreground#080805
  • button.secondaryBackground#4b4c4c
  • button.secondaryForeground#D3C5B9
  • button.separator#4b4c4c
  • chat.requestBorder#4b4c4c
  • chat.slashCommandBackground#4b4c4c
  • chat.slashCommandForeground#D3C5B9
  • checkbox.background#4b4c4c
  • checkbox.foreground#D3C5B9
  • debugToolBar.background#1f2017
  • descriptionForeground#D3C5B9
  • disabledForeground#5A5B5B
  • dropdown.background#1E1E1E
  • dropdown.border#4b4c4c
  • dropdown.foreground#D3C5B9
  • dropdown.listBackground#1E1E1E
  • editor.background#1F2017
  • editor.foreground#D3C5B9
  • editor.inactiveSelectionBackground#d3c5b921
  • editor.lineHighlightBackground#89a13918
  • editor.lineHighlightBorder#1F2017
  • editor.selectionBackground#89a13925
  • editor.wordHighlightBackground#eb6ea43f
  • editor.wordHighlightStrongBackground#eb6ea460
  • editorCommentsWidget.replyInputBackground#4b4c4c
  • editorGroup.border#4b4c4c
  • editorGroupHeader.tabsBackground#24251A
  • editorLineNumber.activeForeground#D3C5B9
  • editorLineNumber.foreground#83786D
  • editorWidget.background#1F2017
  • editorWidget.resizeBorder#4b4c4c
  • errorForeground#e45454
  • extensionIcon.verifiedForeground#89a139ef
  • focusBorder#00000000
  • foreground#D3C5B9
  • gitDecoration.addedResourceForeground#C1D8AC
  • gitDecoration.deletedResourceForeground#EB6159
  • gitDecoration.ignoredResourceForeground#696A6A
  • gitDecoration.modifiedResourceForeground#FDD876
  • gitDecoration.renamedResourceForeground#84B9CB
  • gitDecoration.stageDeletedResourceForeground#EB6EA5
  • gitDecoration.stageModifiedResourceForeground#F4A57A
  • gitDecoration.untrackedResourceForeground#CEB4B9
  • icon.foreground#8A936C
  • input.background#1E1E1E
  • input.border#4b4c4c
  • inputOption.activeBackground#4b4c4c
  • inputOption.activeBorder#D3C5B9
  • inputOption.activeForeground#D3C5B9
  • inputValidation.errorBorder#e45454
  • inputValidation.infoBackground#1B2E44
  • inputValidation.infoBorder#6C9BD2
  • inputValidation.warningBackground#513F00
  • inputValidation.warningBorder#e0c46c
  • keybindingLabel.background#4b4c4c
  • keybindingLabel.foreground#D3C5B9
  • list.activeSelectionBackground#242517
  • list.activeSelectionForeground#FDFDFD
  • list.activeSelectionIconForeground#89a139
  • list.dropBackground#2A2826
  • list.highlightForeground#EAD6A6
  • list.hoverBackground#1f2017
  • list.hoverForeground#E8E6E4
  • list.inactiveSelectionBackground#1F2017
  • list.inactiveSelectionForeground#E8E6E4
  • list.inactiveSelectionIconForeground#89a139
  • list.invalidItemForeground#9E8B8E
  • list.warningForeground#FFDF85
  • listFilterWidget.background#1F2017
  • menu.background#1F2017
  • menu.foreground#6E7656
  • menu.selectionBackground#565E3B
  • menu.selectionForeground#E8E6E4
  • menu.separatorBackground#4b4c4c
  • minimap.selectionHighlight#89a13925
  • notifications.background#1F2017
  • notificationsErrorIcon.foreground#e45454
  • notificationsInfoIcon.foreground#6C9BD2
  • notificationsWarningIcon.foreground#e0c46c
  • panel.background#161717
  • panel.border#302F31
  • panelTitle.activeForeground#D3C5B9
  • peekView.border#89a139
  • peekViewEditor.background#1F2017
  • peekViewResult.background#1F2017
  • peekViewResult.fileForeground#D3C5B9
  • peekViewResult.lineForeground#D3C5B9
  • peekViewResult.matchHighlightBackground#89a13980
  • peekViewTitleLabel.foreground#D3C5B9
  • pickerGroup.border#4b4c4c
  • profileBadge.background#89a139
  • profileBadge.foreground#080805
  • progressBar.background#89a139
  • quickInput.background#1F2017
  • quickInput.foreground#969E7D
  • quickInputList.focusBackground#565E3B
  • quickInputList.focusForeground#D3C5B9
  • sash.hoverBorder#4b4c4c
  • selection.background#D3C5B970
  • settings.focusedRowBackground#191A12
  • settings.modifiedItemIndicator#89a139
  • sideBar.background#191A12
  • sideBar.border#302F31
  • sideBar.foreground#C4BEB8
  • sideBarSectionHeader.background#25261C
  • sideBarSectionHeader.border#302F31
  • statusBar.background#1F2017
  • statusBar.border#302F31
  • statusBar.debuggingBackground#080805
  • statusBar.debuggingForeground#89a139
  • statusBar.foreground#606847
  • statusBar.noFolderBackground#1F2017
  • statusBarItem.remoteBackground#748341
  • statusBarItem.remoteForeground#1F2017
  • statusBarItem.remoteHoverBackground#A3BE48
  • statusBarItem.remoteHoverForeground#1F2017
  • symbolIcon.arrayForeground#84a1a8
  • symbolIcon.booleanForeground#8C6589
  • symbolIcon.classForeground#FFE200
  • symbolIcon.constantForeground#FDD876
  • symbolIcon.constructorForeground#BE84B8
  • symbolIcon.enumeratorForeground#F8B400
  • symbolIcon.enumeratorMemberForeground#3A8FB7
  • symbolIcon.fieldForeground#82A9DA
  • symbolIcon.folderForeground#ff0000
  • symbolIcon.functionForeground#BE84B8
  • symbolIcon.interfaceForeground#7EBEA5
  • symbolIcon.keywordForeground#EB9793
  • symbolIcon.methodForeground#BE84B8
  • symbolIcon.moduleForeground#F9F1C0
  • symbolIcon.namespaceForeground#F9F1C0
  • symbolIcon.numberForeground#AA8C63
  • symbolIcon.propertyForeground#94A8B0
  • symbolIcon.snippetForeground#F7EFE3
  • symbolIcon.stringForeground#7B7C7D
  • symbolIcon.textForeground#EFCD9A
  • symbolIcon.variableForeground#82A9DA
  • tab.activeBackground#1F2017
  • tab.activeForeground#E8E6E4
  • tab.inactiveBackground#1C1D12
  • tab.inactiveForeground#D3C5B9
  • terminal.border#302F31
  • terminal.foreground#D3C5B9
  • textBlockQuote.background#4b4c4c
  • textBlockQuote.border#89a139
  • textCodeBlock.background#4b4c4c
  • textLink.activeForeground#89a139
  • textLink.foreground#748341
  • textPreformat.background#4b4c4c
  • textPreformat.foreground#CDB39B
  • titleBar.activeBackground#1F2017
  • titleBar.activeForeground#8A936C
  • titleBar.border#302F31
  • titleBar.inactiveBackground#1F2017
  • titleBar.inactiveForeground#6C754F
  • widget.border#4b4c4c

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
constant.other.color, constant.other.symbol.hashkey.ruby punctuation.definition.constant.ruby, constant.other.symbol.ruby punctuation.definition.constant.ruby, constant.other.symbol.ruby punctuation.definition.constant.ruby, entity.name.function.definition.special.constructor, entity.name.function.definition.special.member.destructor., entity.name.section, entity.name.type, entity.name.type.annotation.kotlin, entity.name.variable.parameter, keyword, keyword.control, keyword.control.class.ruby, keyword.control.def.ruby, keyword.control.default, keyword.function.go, keyword.operator, keyword.other.fn.rust, keyword.other.new, keyword.other.substitution, keyword.other.template, markdown.heading, markup punctuation.definition, markup.bold.markdown, markup.heading, markup.inline.raw punctuation.definition.raw, markup.list punctuation.definition, markup.list.bullet, markup.other.anchor, meta.function.parameters variable punctuation.definition.variable.php, meta.function.parameters variable.other, parameter.variable.function, punctuation.accessor, punctuation.bracket.angle, punctuation.definition.preprocessor, punctuation.section, punctuation.section.directive, punctuation.separator, punctuation.separator.hash.cs, punctuation.terminator, source.go keyword.operator, source.ruby punctuation.definition.variable, source.wsd keyword.other.activity, storage.type.annotation, storage.type.function.arrow, storage.type.function.coffee, storage.type.function.pug, storage.type.function.python, storage.type.generic.wildcard, storage.type.objc, support.function.builtin.rust, support.function.textbf, variable.parameter—bold
entity.name.lifetime.rust, fenced_code.block.language, markup.fenced_code punctuation.definition, markup.quote markup.bold, markup.quote punctuation.definition, meta.attribute.id entity.other.attribute-name, source.rust meta.attribute.rust, storage.modifier.lifetime.rust, text.html punctuation.section.embedded, variable.other.c—bold italic
comment, comment.block.documentation punctuation.definition.bracket, markup.fenced_code, markup.fenced_code punctuation.definition, markup.other.anchor support.constant, punctuation.definition.bold.markdown, punctuation.definition.comment, punctuation.definition.heading, punctuation.definition.italic.markdown, punctuation.definition.strikethrough.markdown, punctuation.definition.tag#5B6356—
constant, constant.character.entity, constant.character.format.placeholder, constant.character.math, constant.other.placeholder, entity.name.function.preprocessor.c, entity.name.type.type-parameter.cs, entity.other.attribute-name.class, entity.other.attribute-name.mjml, markup.quote, meta.attribute.id entity.other.attribute-name, meta.definition.attribute-entry punctuation.separator, meta.tag.attributes entity.other.attribute-name, punctuation.bracket.angle, punctuation.definition.constant, punctuation.definition.entity, source.cpp variable.other.enummember, source.cs entity.other.attribute-name, source.vue entity.other.attribute-name, source.vue meta.directive punctuation.separator.key-value, storage.type.scala, support.class.math, support.constant, support.constant punctuation.definition.variable, support.variable.class.hideshow, support.variable.magic, text.html entity.other.attribute-name, text.xml entity.other.attribute-name, variable.other.constant#D09D62—
binding.fsharp keyword, comment.block.documentation punctuation.definition.block.tag, comment.block.documentation punctuation.definition.inline.tag, entity.name.tag, function.anonymous keyword, function.anonymous keyword.symbol.fsharp, keyword.control.class, keyword.control.clojure, keyword.control.def, keyword.control.fun, keyword.declaration.dart, keyword.function.go, keyword.other.base.cs, keyword.other.declaration-specifier.swift, keyword.other.fn.rust, keyword.other.julia, keyword.other.rust, keyword.other.skinparam.keyword, keyword.other.this.cs, keyword.other.var.cs, markup.block entity.name.tag, markup.deleted.diff, markup.meta.attribute-list, meta.class.identifier storage.modifier, meta.embedded.block variable.language punctuation.definition.variable.php, meta.function.lua keyword.control.lua, meta.function.powershell storage.type.powershell, meta.separator, punctuation.definition.bold, punctuation.definition.italic, punctuation.terminator.function, source.go keyword, source.julia storage.modifier, source.r meta.function.r keyword.control.r, source.scala keyword.declaration, source.wsd keyword.other.class, source.wsd keyword.other.linebegin, storage.modifier.static.rust, storage.modifier.super, storage.type, storage.type.def, support.type.exception.python, variable.language, variable.language punctuation.definition.variable, variable.parameter.function.language.special#c0c6c9—
entity.name.function, entity.name.section.fsharp entity.name.section.fsharp, markup.link, meta.class.body.groovy meta.method.body.java storage.type.groovy, meta.function-call.generic.python, meta.method-call.groovy meta.method.groovy, punctuation.decorator, punctuation.definition.decorator, string.other.link, support.function.any-method, support.other.variable, support.type.property-name, support.type.vendored, support.variable.class.function, text.tex punctuation.definition.function, text.tex support.function, variable.function#A1A46D—
comment.block.documentation entity.name.type, comment.block.documentation.phpdoc.php keyword.other.type.php, constant.other.reference, constant.other.symbol.hashkey.ruby, constant.other.symbol.hashkey.ruby punctuation.definition.constant.ruby, entity.name.lifetime.rust, entity.name.type, entity.name.type.annotation.kotlin, entity.other.attribute-name.id, entity.other.attribute-name.id punctuation.definition.entity, keyword.type, markup punctuation.definition, markup.mark, markup.raw.monospace, meta.type.annotation entity.name.type, meta.type.parameters entity.name.type, punctuation.definition.storage.type.objc, punctuation.definition.typeparameters, punctuation.separator.clause-head-body, source.apex storage.type, source.cpp storage.type.cpp, source.go storage.type, source.groovy storage.type, source.hlsl storage.type.basic, source.hlsl support.type.other, source.java storage.type, source.python support.type.python, source.scala entity.name.class, source.swift support.type, storage.class.std.rust, storage.modifier.lifetime.rust, storage.type.built-in, storage.type.c, storage.type.core.rust, storage.type.cs, storage.type.integral, storage.type.objc, storage.type.php, storage.type.powershell, storage.type.primitive, storage.type.r, storage.type.user-defined, support.class.builtin, support.type.builtin, support.type.julia, support.type.primitive, support.type.vb, support.variable.property#f09199—
invalid, invalid.illegal#EE827C—
abstract.definition.fsharp entity, abstract.definition.fsharp keyword, comment, comment.block.documentation storage.type.class, comment.block.documentation.phpdoc.php keyword, comment.block.documentation.scala keyword, comment.block.documentation.scala variable.parameter, comment.block.javadoc.java keyword, comment.block.javadoc.java variable.parameter.java, comment.line.roxygen.r keyword, comment.line.roxygen.r variable.parameter.r, constant.other.math, constant.other.placeholder, constant.other.symbol.hashkey.ruby, constant.other.symbol.hashkey.ruby punctuation.definition.constant.ruby, constant.other.symbol.ruby, constant.other.table-name, entity.alias.import.go, entity.name.footnote, entity.name.scope-resolution.function.call, entity.name.type.kotlin, entity.name.type.numeric, entity.name.type.primitive, entity.other, function.anonymous keyword, keyword.control.clojure, keyword.control.export, keyword.control.inheritance.coffee, keyword.import, keyword.language.gherkin.feature.step, keyword.local.lua, keyword.operator.documentation.powershell, keyword.other.array.phpdoc.php, keyword.other.base.cs, keyword.other.capture-specifier, keyword.other.import, keyword.other.this.cs, keyword.package, keyword.type.cs, markup.block.open, markup.italic, markup.mark.constrained markup.mark, markup.quote, meta.import keyword.control, punctuation.definition.comment, sharing.modifier, source.apex keyword.type, source.clojure meta.symbol.dynamic, source.go storage.type, source.hlsl storage.type.basic, source.python support.type.python, source.r meta.function.r keyword.control.r, source.scala entity.name.class, source.swift keyword.other.declaration-specifier, source.swift support.type, source.vue meta.directive punctuation.separator.key-value, source.wsd keyword.control.diagram, storage.modifier, storage.type.built-in, storage.type.core.rust, storage.type.function.kotlin, storage.type.integral, storage.type.modifier, storage.type.php, storage.type.primitive, storage.type.scala, support.class.builtin, support.constant.vendored, support.function.builtin.go, support.function.textit, support.type.builtin, support.type.core.rust, support.type.julia, support.type.primitive, support.type.vendored, support.variable.swift, tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js, text.tex support.function.emph, variable.language, variable.other.field, variable.other.member, variable.other.member.c, variable.other.object.property, variable.other.property, variable.parameter.function.language.special—italic
constant.other.color, constant.string.documentation.powershell, entity.name.section, entity.other.attribute-name.pseudo-class, entity.other.attribute-name.pseudo-class.css punctuation.definition.entity.css, entity.other.attribute-name.pseudo-element, entity.other.attribute-name.pseudo-element.css punctuation.definition.entity.css, keyword, keyword.control, keyword.control punctuation.definition.function, keyword.control.class.ruby, keyword.control.def.ruby, keyword.import, keyword.other.class.fileds, keyword.other.substitution, keyword.other.template, keyword.package, markup.heading, markup.heading punctuation.definition, meta.expression.clojure, meta.tag.sgml, punctuation.accessor, punctuation.definition.attribute, punctuation.definition.directive, punctuation.definition.keyword, punctuation.definition.parameters.varargs, punctuation.definition.preprocessor, punctuation.section.directive, punctuation.separator.hash.cs, punctuation.separator.method, punctuation.separator.namespace, punctuation.separator.other.ruby, punctuation.separator.pointer-access, punctuation.separator.question-mark.cs, punctuation.separator.slice.python, sharing.modifier, source.clojure storage.control, source.css entity.name.tag.custom, source.go keyword.operator, source.kotlin storage.type.import, source.kotlin storage.type.package, storage.modifier, storage.type.function.pug, storage.type.modifier, storage.type.rust, tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js, text.pug meta.tag.other, text.pug storage.type#f6bfbc—
constant.language, constant.language punctuation.definition.variable, constant.numeric, constant.others.fsharp, keyword.operator.null-conditional.cs, keyword.operator.nullable-type, keyword.other.unit, punctuation.separator.decimal.period.php, punctuation.separator.question-mark.cs, string.quoted.double.skinparam.value#92B5A9—
binding.fsharp keyword, binding.fsharp keyword.symbol, entity.name.function.swift, entity.name.section.fsharp, entity.name.section.fsharp keyword, entity.name.section.latex, keyword.begin.tag.ejs, keyword.control.class, keyword.control.def, keyword.control.directive, keyword.control.lua, keyword.declaration.dart, keyword.format.specifier.fsharp, keyword.language.gherkin.feature.scenario, keyword.operator.function.infix, keyword.operator.other.powershell, keyword.other.declaration-specifier.swift, keyword.other.julia, keyword.other.rust, keyword.other.skinparam, keyword.other.unit, keyword.other.var.cs, keyword.symbol.fsharp, meta.class.identifier storage.modifier, namespace.open.fsharp entity, namespace.open.fsharp keyword, punctuation.definition.variable, punctuation.section.embedded, record.fsharp keyword, source.c keyword.other, source.c punctuation.section, source.cpp keyword.other, source.cpp punctuation.section, source.cs keyword.other, source.css keyword.control, source.css keyword.operator, source.css punctuation.section, source.css variable.parameter, source.go keyword, source.java punctuation.section, source.objc keyword.other.property.attribute, source.objc punctuation.section, source.php punctuation.section, source.powershell punctuation.section, source.python meta.function.decorator.python support.type.python, source.r punctuation.section, source.ruby punctuation.section, source.scala entity.name.class.declaration, source.scala keyword.declaration, source.sql keyword.other, source.swift punctuation.section, source.wsd keyword.other, storage.modifier.array.bracket, storage.modifier.import, storage.modifier.package, storage.modifier.static.rust, storage.type, string.interpolated variable.parameter, variable.parameter.handlebars, variable.parameter.r—
constant.character.escape, constant.character.escape punctuation.definition.keyword, entity.global.clojure, entity.name.class.lua, entity.name.type.class, entity.namespace.r, entity.other.inherited-class.python, keyword.format.specifier.fsharp, markup.substitution, meta.embedded.block.php punctuation.definition.variable.php, meta.method-call.groovy storage.type.groovy, punctuation.definition.interpolation, punctuation.definition.template-expression, punctuation.section.embedded, punctuation.section.embedded source.swift, punctuation.section.embedded.begin.ruby, punctuation.section.embedded.end.ruby source.ruby, punctuation.section.tag, source.clojure punctuation.section.metadata, source.clojure punctuation.section.set, source.js constant.other.object.key.js string.unquoted.label.js, source.js punctuation.section.embedded, source.objc entity.name.tag, source.python meta.function-call.python support.type.python, source.scala entity.name.class.declaration, storage.type.string.python, string.interpolated.dollar punctuation.definition.string, string.interpolated.pug, support.class, support.constant.handlebars, support.constant.math, support.function.macro.julia, support.variable.class.group, variable.other.bracket punctuation.definition.variable#A1A46D—
markup.strikethrough—strikethrough
constant.character.literal.scala, entity.name.import.go, markup.inserted.diff, markup.raw.texttt, punctuation.definition.string, source.css support.constant, source.scala punctuation.definition.character, string#BDB3BC—
markup.inline.raw punctuation.definition.raw, markup.inline.raw.string, punctuation.definition.string.template, string.interpolated.python string.quoted.single.python, string.quoted.double.heredoc, string.template, text.tex markup.raw#bbbcde—
binding.fsharp keyword.symbol.fsharp, constant.character, constant.escape, constant.name.attribute.tag.pug, constant.other.description.jsdoc, entity.name.footnote, entity.other.attribute-name strong, keyword.begin.tag.ejs, keyword.operator.other.powershell, keyword.other.array.phpdoc.php, markup meta punctuation.definition, markup.other.anchor string, meta.array.julia, meta.attribute-selector punctuation.definition.entity, meta.bracket.julia, meta.link.inline punctuation.definition.string, punctuation.definition.list_item, punctuation.section, punctuation.separator, punctuation.terminator, source meta.brace, source punctuation, source.clojure meta.symbol, source.css entity.other, source.sql, storage.modifier.array.bracket, text.html punctuation, text.html.markdown#c5cdd3—
constant.language.unit.fsharp, entity.name, entity.name.function.call.kotlin, entity.name.function.infix, entity.name.scope-resolution.function.call, entity.other, keyword.language.gherkin.feature.scenario, keyword.operator.function.infix, markup.changed.git_gutter, markup.underline, markup.underline.link, markup.underline.link.image, meta.symbol.namespace.clojure, meta.use.php, punctuation.definition.parameters, source.wsd support.class.preprocessings, support.class, support.function, support.function.construct, support.orther.namespace.use.php, support.other.namespace.php, support.type, text.tex support.function.texttt, text.tex support.function.verb#a38293—
entity.name.module, entity.name.package.go, entity.name.package.kotlin, entity.name.variable, markup.code, markup.fenced_code.block, meta.embedded.block variable punctuation.definition.variable.php, meta.function-call.arguments.python, meta.template.expression.kotlin, meta.toc-list.id.html, meta.var.clojure, parameter.variable.function, punctuation.definition.annotation, punctuation.definition.placeholder, punctuation.definition.variable, source.c, source.coffee, source.coffee.embedded.source, source.cpp, source.go, source.groovy.embedded.source, source.java meta.class.body.java, source.json meta.structure.dictionary.json support.type.property-name.json, source.julia, source.objc, source.powershell, source.python, source.ruby, source.scala entity.name.import, source.shell, source.sql.embedded, source.swift, storage.modifier.import, storage.modifier.package, storage.type.annotation, string.quoted.double.class.other, string.quoted.double.kotlin entity.string.template.element.kotlin, support, variable, variable.import.parameter, variable.object, variable.other, variable.other.class, variable.other.normal punctuation.definition.variable.shell, variable.parameter#d6b381—
mattcha by suenryu - VS Code Theme