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.parameterbold
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.cbold 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.specialitalic
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.strikethroughstrikethrough
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