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.tagbold
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.definitionbold
entity.name.tag.wildcard.css, entity.name.tag.wildcard.less, entity.name.tag.wildcard.scss, entity.name.tag.wildcard.sass, keyword.operator.combinator.cssbold
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.htmlbold
source.vue entity.name.tag.script.htmlbold
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, commentitalic
token.info-token#82d4c6
token.warn-token#e17979
token.error-token#e17979
token.debug-token#e69ee1
Flunky Theme by Kenzie Bottoms - VS Code Theme