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#332f2d
  • activityBar.border#00000000
  • activityBar.dropBackground#82d4c655
  • activityBar.foreground#82d4c6cc
  • activityBarBadge.background#82d4c6
  • activityBarBadge.foreground#332f2d
  • badge.background#82d4c6
  • badge.foreground#332f2d
  • button.background#82d4c6
  • button.foreground#332f2d
  • button.hoverBackground#e69ee1
  • contrastBorder#332f2d
  • debugExceptionWidget.background#332f2d
  • debugExceptionWidget.border#e69ee1
  • debugToolBar.background#332f2d
  • diffEditor.insertedTextBackground#bfe07633
  • diffEditor.insertedTextBorder#00000000
  • diffEditor.removedTextBackground#e1797933
  • diffEditor.removedTextBorder#00000000
  • dropdown.background#332f2d
  • dropdown.border#00000000
  • dropdown.foreground#ecedea
  • editor.background#332f2d
  • editor.findMatchBackground#bfe07633
  • editor.findMatchHighlightBackground#bfe07633
  • editor.findRangeHighlightBackground#ecedea22
  • editor.foreground#ecedea
  • editor.hoverHighlightBackground#ecedea11
  • editor.inactiveSelectionBackground#ecedea11
  • editor.lineHighlightBackground#ecedea11
  • editor.lineHighlightBorder#00000000
  • editor.rangeHighlightBackground#ecedea22
  • editor.selectionBackground#585553
  • editor.selectionHighlightBackground#4a4745
  • editor.wordHighlightBackground#4a4745
  • editor.wordHighlightStrongBackground#413d3b
  • editorCursor.foreground#908e8c
  • editorError.foreground#e17979
  • editorGroupHeader.tabsBackground#332f2d
  • editorGroupHeader.tabsBorder#332f2d
  • editorGutter.addedBackground#bfe07633
  • editorGutter.deletedBackground#e1797933
  • editorGutter.modifiedBackground#82d4c644
  • editorHoverWidget.background#413d3b
  • editorHoverWidget.border#82d4c6
  • editorIndentGuide.activeBackground#6b6866
  • editorIndentGuide.background#4a4745
  • editorLineNumber.foreground#908e8c
  • editorMarkerNavigation.background#332f2d
  • editorMarkerNavigationError.background#e17979
  • editorMarkerNavigationWarning.background#e17979
  • editorOverviewRuler.commonContentForeground#e69ee1
  • editorOverviewRuler.currentContentForeground#e69ee1
  • editorOverviewRuler.incomingContentForeground#e69ee1
  • editorRuler.foreground#908e8c
  • editorSuggestWidget.background#413d3b
  • editorSuggestWidget.border#6b6866
  • editorSuggestWidget.foreground#ecedea
  • editorWarning.foreground#e17979
  • editorWidget.background#332f2d
  • errorForeground#e17979
  • extensionButton.prominentBackground#e69ee1
  • extensionButton.prominentForeground#332f2d
  • extensionButton.prominentHoverBackground#e69ee1
  • focusBorder#00000000
  • foreground#ecedea
  • gitDecoration.addedResourceForeground#bfe076
  • gitDecoration.conflictingResourceForeground#e17979
  • gitDecoration.ignoredResourceForeground#908e8c
  • gitDecoration.modifiedResourceForeground#82d4c6
  • gitDecoration.submoduleResourceForeground#e69ee1
  • gitDecoration.untrackedResourceForeground#bfe076
  • input.background#413d3b
  • input.border#82d4c644
  • input.foreground#ecedea
  • input.placeholderForeground#908e8c
  • inputOption.activeBorder#ecedea
  • inputValidation.errorBackground#e17979
  • inputValidation.errorBorder#e17979
  • inputValidation.infoBackground#e69ee1
  • inputValidation.infoBorder#e69ee1
  • inputValidation.warningBackground#e1797933
  • inputValidation.warningBorder#e1797933
  • list.activeSelectionBackground#585553
  • list.activeSelectionForeground#ecedea
  • list.errorForeground#e17979
  • list.focusBackground#585553
  • list.focusForeground#ecedea
  • list.highlightForeground#ecedea
  • list.hoverBackground#413d3b
  • list.hoverForeground#ecedea
  • list.inactiveFocusBackground#4a4745
  • list.inactiveSelectionBackground#4a4745
  • list.inactiveSelectionForeground#ecedea
  • list.invalidItemForeground#e17979
  • list.warningForeground#e17979
  • merge.currentHeaderBackground#e69ee1
  • merge.incomingHeaderBackground#e69ee1
  • panel.background#332f2d
  • panel.border#4a4745
  • panelTitle.activeBorder#82d4c6
  • panelTitle.activeForeground#ecedea
  • panelTitle.inactiveForeground#908e8c
  • peekView.border#e69ee1
  • peekViewEditor.matchHighlightBackground#bfe07633
  • peekViewResult.fileForeground#ecedea
  • peekViewResult.lineForeground#ecedea
  • peekViewResult.matchHighlightBackground#bfe07633
  • peekViewResult.selectionForeground#ecedea
  • peekViewTitle.background#332f2d
  • peekViewTitleLabel.foreground#ecedea
  • pickerGroup.foreground#e69ee1
  • progressBar.background#e69ee1
  • scrollbarSlider.activeBackground#4a4745
  • scrollbarSlider.background#585553
  • scrollbarSlider.hoverBackground#4a4745
  • settings.checkboxBackground#4a4745
  • settings.checkboxBorder#00000000
  • settings.checkboxForeground#ecedea
  • settings.dropdownBackground#4a4745
  • settings.dropdownBorder#00000000
  • settings.inactiveSelectedItemBorder#82d4c6
  • settings.modifiedItemForeground#82d4c6
  • settings.numberInputBackground#4a4745
  • settings.numberInputBorder#00000000
  • settings.textInputBackground#4a4745
  • settings.textInputBorder#00000000
  • sideBar.background#3a3634
  • sideBar.border#00000000
  • sideBar.foreground#ecedea
  • sideBarSectionHeader.background#332f2d
  • sideBarSectionHeader.foreground#908e8c
  • sideBarTitle.foreground#ecedea
  • statusBar.background#332f2d
  • statusBar.border#332f2d
  • statusBar.debuggingBackground#e1797933
  • statusBar.foreground#ecedea88
  • statusBar.noFolderBackground#332f2d
  • tab.activeBackground#4a4745
  • tab.activeBorder#82d4c6
  • tab.activeForeground#ecedea
  • tab.border#332f2d
  • tab.inactiveBackground#413d3b
  • tab.inactiveForeground#908e8c
  • tab.unfocusedActiveBorder#332f2d
  • terminal.ansiBlack#b5b4b1
  • terminal.ansiBrightBlack#b5b4b1
  • terminal.ansiBrightBlue#e69ee1
  • terminal.ansiBrightCyan#e69ee1
  • terminal.ansiBrightGreen#bfe076
  • terminal.ansiBrightMagenta#b9a1f3
  • terminal.ansiBrightRed#e17979
  • terminal.ansiBrightWhite#ecedea
  • terminal.ansiBrightYellow#bfe076
  • terminal.ansiCyan#e69ee1
  • terminal.ansiGreen#bfe076
  • terminal.ansiMagenta#82d4c6
  • terminal.ansiRed#e17979
  • terminal.ansiWhite#ecedea
  • terminal.ansiYellow#bfe076
  • textLink.activeForeground#82d4c6
  • titleBar.activeBackground#332f2d
  • titleBar.activeForeground#908e8c
  • titleBar.inactiveForeground#908e8c

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#7a7775—
comment.block#9f9d9b—
string, string.quoted#e69ee1—
string.regexp#e69ee1normal
keyword.control.anchor.regexp#82d4c6normal
constant.character.escape.backslash.regexp#b9a1f3—
punctuation.definition.group.regexp#bfe076—
punctuation.definition.template-expression#bfe076—
string.regexp keyword.other#82d4c6—
string.template meta.template.expression, string.template.js#82d4c6—
constant.language.boolean#82d4c6—
support.constant.math#bfe076—
constant.language, punctuation.definition.constant, variable.other.constant, source.elixir constant.other.symbol.elixir, source.elixir constant.other.keywords.elixir#b5b4b1—
constant.character, constant.other#bfe076—
support.constant, keyword.other.special-method, keyword.other.new#82d4c6—
support.constant.json#bfe076—
keyword.operator.arithmetic.js, keyword.operator.increment.js, meta.var.expr keyword.operator.assignment#b9a1f3—
meta.array.literal.js variable.other.readwrite.js#e69ee1—
constant.character.escape#e69ee1—
constant.numeric, constant.character.numeric#bfe076—
variable#bfe076—
punctuation.accessor, keyword#b5b4b1—
keyword.other.unit#b9a1f3—
keyword.operator#b9a1f3—
storage#b9a1f3—
constant.language.undefined#b5b4b1italic
constant.language.null#9f9d9bbold italic
storage.type, meta.var.expr storage.type, meta.class meta.method.declaration meta.var.expr storage.type.js#82d4c6—
entity.name.class, meta.class entity.name.type.class#bfe076—
entity.other.inherited-class#e69ee1—
entity.name.function#bfe076—
variable.parameter#e69ee1—
punctuation.definition.tag, meta.tag#ecedea—
entity.name.type.instance.jsdoc, entity.name.type.instance.phpdoc#ecedea—
variable.other.jsdoc, variable.other.phpdoc#e69ee1—
support.class.component, meta.tag.other.html, meta.tag.other.js, meta.tag.other.tsx, meta.tag.js, meta.tag.tsx, meta.tag.html#b9a1f3—
meta.tag.structure.body entity.name.tag, meta.tag.structure.head entity.name.tag, meta.tag.structure.html entity.name.tag, meta.tag.metadata.style entity.name.tag, meta.tag.structure.html punctuation.definition.tag, meta.tag.structure.head punctuation.definition.tag, meta.tag.structure.body punctuation.definition.tag, meta.tag.metadata.style punctuation.definition.tag—bold
entity.name.tag.tsx, entity.name.tag.js, entity.name.tag, punctuation.definition.tag#e69ee1—
meta.tag.metadata.script entity.name.tag, meta.tag.metadata.script punctuation.definition.tag#82d4c6—
punctuation.definition.tag.html#82d4c6—
entity.other.attribute-name#bfe076—
meta.attribute string.quoted#82d4c6—
entity.other.attribute-name.id.html, meta.attribute.id.html entity.other.attribute-name, meta.attribute.name.html entity.other.attribute-name, meta.attribute.href.html entity.other.attribute-name, meta.attribute.src.html entity.other.attribute-name#b9a1f3—
entity.name.tag.custom#bfe076—
constant.character.entity.named#82d4c6—
meta.tag.sgml.doctype.html, entity.name.tag.doctype, meta.tag.sgml.doctype, meta.tag.metadata.doctype.html entity.name.tag.html, meta.tag.metadata.doctype.html entity.other.attribute-name.html, meta.tag.metadata.doctype.html punctuation.definition.tag#b9a1f399italic
support.constant#e69ee1—
support.constant.meta.property-value#82d4c6—
support.type, support.class#bfe076—
support.variable.dom#bfe076—
keyword.operator.relational#b9a1f3—
keyword.operator.assignment#b9a1f3—
meta.brace#ecedea—
meta.delimiter.period#b9a1f3—
object.comma#ecedea—
variable.parameter.function#82d4c6—
support.type.vendored.property-name, support.constant.vendored.property-value, support.type.property-name, meta.property-list entity.name.tag#e69ee1—
meta.property-list entity.name.tag.reference#82d4c6—
constant.other.color.rgb-value punctuation.definition.constant, constant.other.color.rgb-value.hex.css#82d4c6—
constant.other.color#b9a1f3—
meta.selector#b9a1f3—
entity.other.attribute-name.id#e69ee1—
meta.property-name#e69ee1—
punctuation.definition.parameters#ecedea—
keyword.control.operator#82d4c6—
keyword.control.flow#b9a1f3—
keyword.operator.logical#b9a1f3—
variable.instance, variable.other.instance, variable.reaedwrite.instance, variable.other.readwrite.instance#82d4c6—
variable.language#82d4c6—
variable.other.property#b9a1f3—
variable.other.object.property#ecedea—
entity.name.function#bfe076—
keyword.operator.comparison#b9a1f3—
support.function#ecedea—
invalid, invalid.deprecated#e17979—
invalid.broken#e17979—
invalid.unimplemented#e17979—
invalid.illegal#e17979—
support.variable.property#82d4c6—
support.variable.property.dom.js#e69ee1—
variable.function#ecedea—
variable.interpolation#82d4c6—
meta.function-call#bfe076—
punctuation.section.embedded#82d4c6—
italic#b9a1f3italic
bold#bfe076bold
quote#e69ee1—
raw#e69ee1—
variable.assignment.coffee#82d4c6—
variable.parameter.function.coffee#ecedea—
variable.assignment.coffee#82d4c6—
variable.other.readwrite.cs#ecedea—
entity.name.type.class.cs, storage.type.cs#bfe076—
entity.name.type.namespace.cs#b9a1f3—
entity.name.tag.css, entity.name.tag.less, entity.name.tag.custom.css#82d4c6—
keyword.control.at-rule, keyword.control.at-rule punctuation.definition—bold
entity.name.tag.wildcard.css, entity.name.tag.wildcard.less, entity.name.tag.wildcard.scss, entity.name.tag.wildcard.sass, keyword.operator.combinator.css—bold
source.css keyword.other.unit, source.css constant.numeric#b9a1f3—
meta.attribute-selector.css entity.other.attribute-name.attribute#82d4c6—
support.type.property-name.css#ecedea—
meta.property-value.scss, meta.property-value.scss support.type.property-name.css#bfe076—
source.css.scss meta.at-rule variable, source.css.sass meta.at-rule variable#bfe076—
meta.attribute-selector.scss entity.other.attribute-name.attribute, meta.attribute-selector.sass entity.other.attribute-name.attribute#82d4c6—
entity.name.tag.scss, entity.name.tag.sass#82d4c6—
keyword.other.unit.scss, keyword.other.unit.sass#b9a1f3—
support.function.misc.scss, support.function.misc.sass#e69ee1—
variable.parameter.url.scss, variable.parameter.url.sass#9f9d9bitalic underline
meta.directive.vue entity.other.attribute-name, meta.directive.vue punctuation.separator.key-value.html#b9a1f3—
source.directive.vue string.unquoted.label.js#82d4c6—
source.directive.vue variable.other.object.js#bfe076—
expression.embedded.vue punctuation.definition#82d4c6—
expression.embedded.vue variable.other.readwrite.js#ecedea—
expression.embedded.vue meta.property.object.js#b9a1f3—
source.directive.vue variable.other.readwrite.js, source.directive.vue punctuation.definition.string#e69ee1—
meta.directive.vue string.quoted.single.js#82d4c6—
source.vue meta.tag string.quoted#ecedea—
source.vue source.directive.vue string.quoted#e69ee1—
source.vue entity.name.tag.template.html—bold
source.vue entity.name.tag.script.html—bold
source.elixir support.type.elixir, source.elixir meta.module.elixir entity.name.class.elixir#bfe076—
source.elixir entity.name.function#bfe076—
source.elixir punctuation.definition.string#e69ee1—
source.elixir variable.other.readwrite.module.elixir, source.elixir variable.other.readwrite.module.elixir punctuation.definition.variable.elixir#bfe076—
source.elixir .punctuation.binary.elixir#b9a1f3—
source.go meta.function-call.go#bfe076—
meta.class entity.name.type.class.js#bfe076—
meta.method.declaration storage.type.js#bfe076
terminator.js#ecedea—
meta.js punctuation.definition.js#ecedea—
variable.other.meta.import.js, meta.import.js variable.other, keyword.operator.module.js#e69ee1bb—
source.js keyword.control#82d4c6—
support.type.object.module.js#bfe07699—
source.js keyword.control.conditional#82d4c6—
constant.numeric.hex.js#bfe076—
variable.parameter.function.js#e69ee1—
variable.other.readwrite.js#ecedea—
string.quoted.double.js meta.object-literal.key#b9a1f3—
variable.other.object.js, variable.other.object.jsx, variable.object.property.js, variable.object.property.jsx#ecedea—
meta.jsx entity.name.tag.js, meta.jsx punctuation.definition.tag#ecedea—
variable.js, variable.other.js#ecedea—
entity.name.type.js, entity.name.type.module.js#bfe076—
support.class.js#ecedea—
meta.object-literal.key.js string.quoted, meta.object-literal.key.js#b9a1f3—
string.unquoted.label.js#b9a1f3—
support.type.property-name.json#82d4c6—
string.quoted.double.json meta.structure.dictionary.value.json, string.quoted.double.json punctuation.definition.string.json#e69ee1—
meta.structure.dictionary.json meta.structure.dictionary.value constant.language#82d4c6—
variable.other.ruby#ecedea—
constant.language.symbol.hashkey.ruby#82d4c6—
keyword.control#b9a1f3—
meta.embedded.line.ruby variable.other.readwrite.instance.ruby, meta.embedded.line.swift#bfe076—
entity.name.tag.less#82d4c6—
meta.attribute-selector.less entity.other.attribute-name.attribute#82d4c6—
markup.heading.markdown#bfe076—
markup.italic.markdown#82d4c6italic
markup.bold.markdown#ecedeabold
markup.quote.markdown#e69ee1italic
markup.inline.raw.markdown#e69ee1—
markup.underline.link.markdown, markup.underline.link.image.markdown#e69ee1—
string.other.link.title.markdown, string.other.link.description.markdown#ecedea—
punctuation.definition.string.markdown, punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown, meta.link.inline.markdown punctuation.definition.string#bfe076—
punctuation.definition.metadata.markdown#82d4c6—
beginning.punctuation.definition.list.markdown#b9a1f3—
support.class.php#bfe076—
meta.function-call.php punctuation#ecedea—
variable.other.global.php#bfe076—
variable.other.global.php punctuation.definition.variable#bfe076—
constant.language.python#82d4c6—
storage.type.number.python#908e8c—
variable.parameter.function.python, meta.function-call.arguments.python#e69ee1—
punctuation.python#ecedea—
entity.name.function.decorator.python#b5b4b1italic
variable.other.readwrite.alias.ts, variable.other.readwrite.alias.tsx, variable.other.readwrite.ts, variable.other.readwrite.tsx, variable.other.object.ts, variable.other.object.tsx, variable.object.property.ts, variable.object.property.tsx, variable.other.ts, variable.other.tsx, variable.tsx, variable.ts#ecedea—
entity.name.type.ts, entity.name.type.tsx#bfe076—
support.class.node.ts, support.class.node.tsx#bfe076—
meta.type.parameters.ts entity.name.type, meta.type.parameters.tsx entity.name.type#ecedea—
meta.import.ts punctuation.definition.block, meta.import.tsx punctuation.definition.block#ecedea—
meta.decorator punctuation.decorator.ts, meta.decorator punctuation.decorator.tsx#bfe076—
meta.jsx.children.tsx, meta.tag.js meta.jsx.children.tsx#bfe076—
entity.name.tag.yaml#82d4c6—
comment.block.javadoc keyword.other.documentation#bfe07690—
comment.block.javadoc entity.name.type.class#bfe07690—
comment.block.javadoc variable.parameter#e69ee190—
punctuation.separator#b5b4b1—
string.quoted.double.java#bfe076—
storage.type.generic.java#82d4c6—
variable.other.object.java#ecedea—
meta.method-call.java entity.name.function.java#e69ee1—
meta.class.java storage.modifier.java#b9a1f3—
meta.class.body.java storage.modifier.java#b5b4b1—
meta.class.body meta.method storage.modifier.java #b9a1f3—
storage.modifier.import.java, meta.import.java storage.modifier.java#908e8c—
storage.modifier.import.java variable.language.wildcard#82d4c699—
keyword.other.import.java#b9a1f399—
keyword.other.package.java#e69ee1—
meta.import.java punctuation#ecedea99—
meta.definition.variable.java storage.type.java#e69ee1—
storage.modifier.extends.java#9f9d9b—
meta.property-list.css meta.property-value.css variable.other.less, meta.property-list.scss variable.scss, meta.property-list.sass variable.sass, keyword.other.unit, keyword.operator.logical, keyword.operator.arithmetic, keyword.operator.bitwise, keyword.operator.increment, keyword.operator.ternary, keyword.operator.comparison, keyword.operator.assignment, keyword.operator.operator, keyword.control.ternary, keyword.operator.or.regexp, punctuation.definintion.string, punctuation—
meta.import.ts meta.block.ts variable.other.readwrite.alias.ts, meta.import.tsx meta.block.tsx variable.other.readwrite.alias.tsx, meta.import.js variable.other, entity.name.function.ts, entity.name.function.tsx, support.type.primitive, entity.name.tag.yaml, meta.tag.sgml.doctype.html, entity.name.tag.doctype, meta.tag.sgml.doctype, entity.other.attribute-name, entity.name.tag.custom, source.js.jsx keyword.control.flow.js, support.type.property.css, support.function.basic_functions, variable.assignment.coffee, support.function.basic_functions, keyword.operator.expression.typeof, keyword.operator.type.annotation, assignment.coffee, entity.name.type.ts, support.constant.math, meta.object-literal.key, meta.var.expr storage.type, parameter, italic, quote, keyword, storage, language, type .function, type.function, storage.type.class, type.var, meta.parameter, variable.parameter, meta.parameters, keyword.control, modifier, this, comment—italic
token.info-token#82d4c6—
token.warn-token#e17979—
token.error-token#e17979—
token.debug-token#e69ee1—
Flunky Theme by Kenzie Bottoms - VS Code Theme