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.activeBackground#262A31
  • activityBar.activeBorder#DE79B2
  • activityBar.background#1E2227
  • activityBar.border#000000
  • activityBar.foreground#DE79B2
  • activityBar.inactiveForeground#546685
  • activityBarBadge.background#DE79B2
  • activityBarBadge.foreground#000000
  • badge.background#DE79B2
  • badge.foreground#000000
  • disabledForeground#546685
  • editor.background#262A31
  • editor.findMatchBackground#5A9ED766
  • editor.findMatchHighlightBackground#5A9ED733
  • editor.foldBackground#22262C
  • editor.foreground#B0ACBE
  • editor.lineHighlightBackground#DE79B20D
  • editor.selectionBackground#DE79B259
  • editor.selectionHighlightBackground#B0ACBE26
  • editorBracketHighlight.foreground1#DE79B2
  • editorBracketHighlight.foreground2#9872C3
  • editorBracketHighlight.foreground3#5A9ED7
  • editorBracketHighlight.unexpectedBracket.foreground#CD6F77
  • editorBracketMatch.border#262A31
  • editorCursor.foreground#B0ACBE
  • editorGroup.border#000000
  • editorGroup.dropBackground#DE79B211
  • editorGroupHeader.tabsBackground#1E2227
  • editorGutter.addedBackground#6EC97966
  • editorGutter.deletedBackground#CD6F7766
  • editorGutter.modifiedBackground#5A9ED7
  • editorHoverWidget.background#1E2227
  • editorHoverWidget.border#262A31
  • editorHoverWidget.foreground#B0ACBE
  • editorInfo.border#000000
  • editorLineNumber.activeForeground#7D6C93
  • editorLineNumber.foreground#546685
  • editorOverviewRuler.addedForeground#262A31
  • editorOverviewRuler.deletedForeground#262A31
  • editorOverviewRuler.errorForeground#CD6F77
  • editorOverviewRuler.findMatchForeground#5A9ED733
  • editorOverviewRuler.modifiedForeground#262A31
  • editorOverviewRuler.selectionHighlightForeground#DE79B233
  • editorWidget.background#1E2227
  • editorWidget.border#262A31
  • editorWidget.foreground#B0ACBE
  • errorForeground#BF7D83
  • focusBorder#262A31
  • gitDecoration.addedResourceForeground#6EC979
  • gitDecoration.ignoredResourceForeground#546685
  • gitDecoration.modifiedResourceForeground#5A9ED7
  • gitDecoration.renamedResourceForeground#5A9ED7
  • gitDecoration.stageModifiedResourceForeground#5A9ED7
  • gitDecoration.untrackedResourceForeground#6EC979
  • icon.foreground#B0ACBE
  • input.background#191B20
  • input.foreground#B0ACBE
  • list.activeSelectionBackground#DE79B20D
  • list.activeSelectionForeground#B0ACBE
  • list.activeSelectionIconForeground#B0ACBE
  • list.deemphasizedForeground#546685
  • list.dropBackground#DE79B212
  • list.errorForeground#CD6F77
  • list.filterMatchBackground#CD6F77
  • list.focusBackground#DE79B20D
  • list.focusForeground#DE79B2
  • list.focusHighlightForeground#DE79B2
  • list.highlightForeground#DE79B2
  • list.hoverBackground#DE79B20D
  • list.hoverForeground#B0ACBE
  • list.inactiveFocusBackground#DE79B20D
  • list.inactiveSelectionBackground#DE79B20D
  • list.inactiveSelectionForeground#B0ACBE
  • list.inactiveSelectionIconForeground#B0ACBE
  • list.warningForeground#B7B767
  • minimap.errorHighlight#CD6F77
  • minimap.findMatchHighlight#DE79B20D
  • minimapGutter.addedBackground#6EC979
  • minimapGutter.modifiedBackground#5A9ED7
  • panel.background#262A31
  • panel.border#000000
  • panelSection.dropBackground#DE79B211
  • panelTitle.activeBorder#DE79B2
  • panelTitle.activeForeground#B0ACBE
  • panelTitle.inactiveForeground#546685
  • peekView.border#9872C3
  • peekViewEditor.background#1D1E26
  • peekViewEditor.matchHighlightBackground#DE79B266
  • peekViewResult.background#1A1A21
  • peekViewResult.lineForeground#546685
  • peekViewResult.matchHighlightBackground#DE79B266
  • peekViewTitleDescription.foreground#546685
  • scrollbar.shadow#262A31
  • scrollbarSlider.activeBackground#393F4A
  • scrollbarSlider.background#313740
  • scrollbarSlider.hoverBackground#353B45
  • searchEditor.findMatchBackground#DE79B20D
  • sideBar.background#1E2227
  • sideBar.border#000000
  • sideBar.foreground#B0ACBE
  • sideBarSectionHeader.background#1E2227
  • sideBarSectionHeader.border#000000
  • sideBarSectionHeader.foreground#B0ACBE
  • sideBarTitle.foreground#B0ACBE
  • statusBar.background#1E2227
  • statusBar.border#000000
  • statusBar.debuggingBackground#DE79B211
  • statusBar.foreground#B0ACBE
  • tab.activeBackground#262A31
  • tab.activeForeground#B0ACBE
  • tab.hoverBackground#262A31
  • tab.inactiveBackground#1E2227
  • tab.inactiveForeground#B0ACBE
  • tab.unfocusedActiveForeground#B0ACBE
  • tab.unfocusedHoverBackground#262A31
  • tab.unfocusedInactiveBackground#1E2227
  • tab.unfocusedInactiveForeground#B0ACBE
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#5A9ED7
  • terminal.ansiBrightBlack#1E2227
  • terminal.ansiBrightBlue#A4C9E9
  • terminal.ansiBrightCyan#8BD1CE
  • terminal.ansiBrightGreen#B2E2B8
  • terminal.ansiBrightMagenta#F2CCE1
  • terminal.ansiBrightRed#E5B5B9
  • terminal.ansiBrightWhite#EAE9EE
  • terminal.ansiBrightYellow#D3D3A1
  • terminal.ansiCyan#52BAB6
  • terminal.ansiGreen#6EC979
  • terminal.ansiMagenta#DE79B2
  • terminal.ansiRed#CD6F77
  • terminal.ansiWhite#B0ACBE
  • terminal.ansiYellow#B7B767
  • terminal.background#262A31
  • terminal.foreground#B0ACBE
  • terminal.selectionBackground#DE79B259
  • titleBar.activeBackground#1E2227
  • titleBar.activeForeground#B0ACBE
  • titleBar.border#000000
  • titleBar.inactiveBackground#1E2227
  • titleBar.inactiveForeground#B0ACBE
  • tree.indentGuidesStroke#262A31
  • widget.shadow#262A31

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
keyword, punctuation.definition.keyword, keyword.expressions-and-types.swift, keyword.operator.new, keyword.operator.of, keyword.operator.delete, variable.language, variable.language punctuation.definition.variable.php, variable.other.readwrite.instance.ruby, variable.parameter.function.language.special, storage, meta.implementation storage.type.objc, meta.interface-or-protocol storage.type.objc, source.groovy storage.type.def, storage.modifier#9872C3—
keyword.operator, storage.type.function.arrow, punctuation.terminator.statement, punctuation.terminator.rule, meta.delimiter.comma#9872C3—
support.variable.other.property, support.function.magic, support.function.method, support.variable, support.type.object.module, support.type.object.module keyword.operator, variable.other.predefined, support.type.property-name, string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp, constant.character.escape, constant.character.string.escape, constant.regexp, constant.other.date, constant.other.timestamp, variable.other.alias.yaml#52BAB6—
support.constant.property-value.css, support.constant.font-name.css, support.constant.vendored.property-value.css, support.constant.color.w3c-standard-color-name.css, support.function.misc.css, support.function.transform.css#DFA465—
constant.other.key.perl, variable.other.object, meta.selectionset.graphql variable, meta.function-call variable.other.readwrite, constant.other.database-name.sql, constant.other.table-name.sql#B0ACBE—
entity.name.tag.yaml, constant.other.object.key, meta.property.object, entity.name.function.accessor, variable.other.property, support.type.property-name#B0ACBE—
support.type.property-name.json, entity.other.attribute-name, meta.property-name support.type.property-name, meta.structure.dictionary.json punctuation.support.type.property-name#DE79B2—
entity.name.function.method, entity.name.function, entity.name.fragment.graphql, variable.fragment.graphql, support.function#5A9ED7—
constant, string.quoted, string.template, punctuation.definition.string.begin, punctuation.definition.string.end, meta.property-value.css, keyword.other.unit#B7B767—
entity.name.type.class, entity.name.class, entity.other.inherited-class, variable.other.class, variable.language.this, entity.name.type.instance#DFA465—
variable.parameter, meta.function.parameters, entity.name.variable.parameter, meta.at-rule.function variable, meta.at-rule.mixin variable, meta.selectionset.graphql meta.arguments.graphql variable.arguments.graphql, meta.selectionset.graphql meta.arguments variable#B0ACBEitalic
entity.name.tag.html, entity.name.tag.css, entity.name.tag.reference.scss, entity.name.tag.tsx, entity.name.tag.open.jsx, entity.name.tag.open.tsx, entity.name.tag.close.jsx, entity.name.tag.close.tsx, support.class.component.open, support.class.component.close, punctuation.definition.tag, meta.selector, meta.attribute-selector.scss, meta.selector entity.other.attribute-name#6EC979—
constant.other.symbol.hashkey punctuation.definition.constant.ruby, entity.other.attribute-name.placeholder punctuation, entity.other.attribute-name.pseudo-class punctuation, entity.other.attribute-name.pseudo-element punctuation, meta.object-binding-pattern-variable punctuation.destructuring, punctuation.colon.graphql, punctuation.definition.block.scalar.folded.yaml, punctuation.definition.block.scalar.literal.yaml, punctuation.definition.block.sequence.item.yaml, punctuation.definition.entity.other.inherited-class, punctuation.function.swift, punctuation.separator.dictionary.key-value, punctuation.separator.hash, punctuation.separator.inheritance, punctuation.separator.key-value, punctuation.separator.key-value.mapping.yaml, punctuation.separator.namespace, punctuation.separator.pointer-access, punctuation.separator.slice, string.unquoted.heredoc punctuation.definition.string, support.other.chomping-indicator.yaml, punctuation.separator.annotation#9872C3—
keyword.operator.other.powershell, keyword.other.statement-separator.powershell, meta.brace.round, meta.brace.square, meta.brace.curly, meta.function-call punctuation, punctuation.definition.arguments.begin, punctuation.definition.arguments.end, punctuation.definition.entity.begin, punctuation.definition.entity.end, punctuation.definition.tag.cs, punctuation.definition.type.begin, punctuation.definition.type.end, punctuation.section.scope.begin, punctuation.section.scope.end, punctuation.terminator.expression.php, storage.type.generic.java, string.template meta.brace, string.template punctuation.accessor, punctuation.definition.attribute-selector.end.bracket.square.scss, punctuation.definition.attribute-selector.begin.bracket.square.scss#B0ACBE—
comment, punctuation.definition.comment, unused.comment, wildcard.comment, storage.type.class.jsdoc, entity.name.type.instance.jsdoc#546685italic
keyword.primitive-datatypes.swift, keyword.type.cs, meta.protocol-list.objc, meta.return-type.objc, source.go storage.type, source.groovy storage.type, source.java storage.type, source.powershell entity.other.attribute-name, storage.class.std.rust, storage.type.attribute.swift, storage.type.c, storage.type.core.rust, storage.type.cs, storage.type.groovy, storage.type.objc, storage.type.php, storage.type.haskell, storage.type.ocaml#9872C3italic
constant.other.symbol.hashkey.ruby, keyword.operator.dereference.java, keyword.operator.navigation.groovy, meta.scope.for-loop.shell punctuation.definition.string.begin, meta.scope.for-loop.shell punctuation.definition.string.end, meta.scope.for-loop.shell string, storage.modifier.import, punctuation.section.embedded.begin.tsx, punctuation.section.embedded.end.tsx, punctuation.section.embedded.begin.jsx, punctuation.section.embedded.end.jsx, punctuation.separator.list.comma.css, constant.language.empty-list.haskell#B0ACBE—
log.error#CD6F77—
log.warning#B7B767—
log.info#52BAB6—
log.debug#546685—
log.constant#B0ACBE—
emphasis, markup.italic—italic
strong, markup.bold—bold
markup.inserted#6EC979—
markup.deleted#CD6F77—
markup.error#CD6F77—
markup.changed#B7B767—
markup.underline—underline
invalid#CD6F77underline italic
markup.heading, markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#DE79B2bold
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#5A9ED7—
markup.inline.raw, markup.raw.restructuredtext#6EC979—
markup.underline.link, markup.underline.link.image#5A9ED7—
meta.link.reference.def.restructuredtext, punctuation.definition.directive.restructuredtext, string.other.link.description, string.other.link.title#52BAB6—
entity.name.directive.restructuredtext, markup.quote, markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.begin, markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.end#B7B767italic
meta.separator.markdown#9872C3—
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#6EC979—
punctuation.definition.constant.restructuredtext#DE79B2—
meta.paragraph.markdown punctuation.definition.string.begin, meta.paragraph.markdown punctuation.definition.string.end#B0ACBE—
Drab Neon by Brian Buie - VS Code Theme