Skip to main content
Coding Theme

Color themes

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#13131A
  • activityBar.border#13131A00
  • activityBar.dropBackground#FF1654
  • activityBar.foreground#CFDEE6
  • activityBarBadge.background#FF1654
  • activityBarBadge.foreground#CFDEE6
  • badge.background#FF1654
  • badge.foreground#CFDEE6
  • breadcrumb.activeSelectionForeground#CFDEE6
  • breadcrumb.focusForeground#CFDEE6
  • breadcrumb.foreground#484E5B
  • breadcrumbPicker.background#13131A
  • button.background#FF1654
  • button.foreground#CFDEE6
  • button.hoverBackground#FF1654
  • contrastActiveBorder#13131A00
  • contrastBorder#13131A00
  • debugExceptionWidget.background#13131A
  • debugExceptionWidget.border#13131A00
  • debugToolBar.background#13131A
  • descriptionForeground#13131A00
  • diffEditor.insertedTextBackground#70C1B3
  • diffEditor.insertedTextBorder#70C1B3
  • diffEditor.removedTextBackground#FF1654
  • diffEditor.removedTextBorder#13131A00
  • dropdown.background#13131A
  • dropdown.border#13131A00
  • dropdown.foreground#CFDEE6
  • editor.background#13131A
  • editor.findMatchBackground#FF1654
  • editor.findMatchHighlightBackground#2E3248
  • editor.findRangeHighlightBackground#13131A00
  • editor.foreground#CFDEE6
  • editor.hoverHighlightBackground#FF1654
  • editor.inactiveSelectionBackground#FF1654
  • editor.lineHighlightBackground#0003
  • editor.lineHighlightBorder#13131A00
  • editor.rangeHighlightBackground#FF1654
  • editor.selectionBackground#484E5B
  • editor.selectionHighlightBackground#383D51
  • editor.wordHighlightBackground#32374D
  • editor.wordHighlightStrongBackground#2E3250
  • editorActiveLineNumber.foreground#CFDEE6
  • editorBracketMatch.background#13131A00
  • editorBracketMatch.border#13131A00
  • editorCodeLens.foreground#F3FFBD
  • editorCursor.background#13131A00
  • editorCursor.foreground#FF1654
  • editorError.border#13131A00
  • editorError.foreground#FF1654
  • editorGroup.background#13131A
  • editorGroup.border#13131A00
  • editorGroup.dropBackground#FF1654
  • editorGroupHeader.noTabsBackground#13131A
  • editorGroupHeader.tabsBackground#13131A
  • editorGroupHeader.tabsBorder#13131A00
  • editorGutter.addedBackground#70C1B3
  • editorGutter.background#13131A00
  • editorGutter.deletedBackground#FF1654
  • editorGutter.modifiedBackground#F3FFBD
  • editorHoverWidget.background#13131A
  • editorHoverWidget.border#13131A00
  • editorIndentGuide.background#484E5B
  • editorLineNumber.activeForeground#CFDEE6
  • editorLineNumber.foreground#484E5B
  • editorLink.activeForeground#13131A00
  • editorMarkerNavigation.background#31364a
  • editorMarkerNavigationError.background#FF1654
  • editorMarkerNavigationWarning.background#F3FFBD
  • editorOverviewRuler.commonContentForeground#FF1654
  • editorOverviewRuler.currentContentForeground#FF1654
  • editorOverviewRuler.incomingContentForeground#FF1654
  • editorRuler.foreground#13131A00
  • editorSuggestWidget.background#2C3043
  • editorSuggestWidget.border#13131A00
  • editorSuggestWidget.foreground#CFDEE6
  • editorSuggestWidget.highlightForeground#CFDEE6
  • editorSuggestWidget.selectedBackground#FF1654
  • editorWarning.border#13131A00
  • editorWarning.foreground#F3FFBD
  • editorWhitespace.foreground#13131A00
  • editorWidget.background#31364a
  • editorWidget.border#13131A00
  • errorForeground#FF1654
  • extensionButton.prominentBackground#FF1654
  • extensionButton.prominentForeground#CFDEE6
  • extensionButton.prominentHoverBackground#FF1654
  • focusBorder#13131A00
  • foreground#CFDEE6
  • gitDecoration.conflictingResourceForeground#F3FFBD
  • gitDecoration.deletedResourceForeground#FF1654
  • gitDecoration.ignoredResourceForeground#484E5B90
  • gitDecoration.modifiedResourceForeground#F3FFBD
  • gitDecoration.untrackedResourceForeground#70C1B3
  • input.background#484E5B
  • input.border#13131A00
  • input.foreground#CFDEE6
  • input.placeholderForeground#CFDEE6
  • inputOption.activeBorder#13131A00
  • inputValidation.errorBackground#FF1654f2
  • inputValidation.errorBorder#13131A00
  • inputValidation.infoBackground#CFDEE6
  • inputValidation.infoBorder#13131A00
  • inputValidation.warningBackground#F3FFBD
  • inputValidation.warningBorder#13131A00
  • list.activeSelectionBackground#2E3245
  • list.activeSelectionForeground#CFDEE6
  • list.dropBackground#2E3245
  • list.focusBackground#2e3249
  • list.focusForeground#CFDEE6
  • list.highlightForeground#CFDEE6
  • list.hoverBackground#2E3245
  • list.hoverForeground#CFDEE6
  • list.inactiveSelectionBackground#2E3245
  • list.inactiveSelectionForeground#CFDEE6
  • merge.border#13131A00
  • merge.currentContentBackground#13131A00
  • merge.currentHeaderBackground#FF1654
  • merge.incomingContentBackground#13131A00
  • merge.incomingHeaderBackground#FF1654
  • notificationLink.foreground#70C1B3
  • notifications.background#13131A
  • notifications.foreground#CFDEE6
  • panel.background#13131A
  • panel.border#13131A00
  • panelTitle.activeBorder#FF1654
  • panelTitle.activeForeground#CFDEE6
  • panelTitle.inactiveForeground#CFDEE6
  • peekView.border#13131A00
  • peekViewEditor.background#13131A
  • peekViewEditor.matchHighlightBackground#FF1654
  • peekViewResult.background#2E3245
  • peekViewResult.fileForeground#CFDEE6
  • peekViewResult.lineForeground#CFDEE6
  • peekViewResult.matchHighlightBackground#FF1654
  • peekViewResult.selectionBackground#2E3250
  • peekViewResult.selectionForeground#CFDEE6
  • peekViewTitle.background#13131A
  • peekViewTitleDescription.foreground#484E5B
  • peekViewTitleLabel.foreground#CFDEE6
  • pickerGroup.border#13131A00
  • pickerGroup.foreground#B2DBBF
  • progress.background#FF1654
  • scrollbar.shadow#13131A00
  • scrollbarSlider.activeBackground#CFDEE6
  • scrollbarSlider.background#CFDEE6
  • scrollbarSlider.hoverBackground#CFDEE6
  • selection.background#484E5B
  • sideBar.background#13131A
  • sideBar.border#13131A00
  • sideBar.foreground#CFDEE6
  • sideBarSectionHeader.background#13131A
  • sideBarSectionHeader.foreground#CFDEE6
  • sideBarTitle.foreground#CFDEE6
  • statusBar.background#13131A
  • statusBar.border#13131A00
  • statusBar.debuggingBackground#202431
  • statusBar.debuggingBorder#13131A00
  • statusBar.debuggingForeground#13131A00
  • statusBar.foreground#484E5B
  • statusBar.noFolderBackground#13131A
  • statusBar.noFolderBorder#13131A00
  • statusBar.noFolderForeground#13131A00
  • statusBarItem.activeBackground#202431
  • statusBarItem.hoverBackground#202431
  • statusBarItem.prominentBackground#202431
  • statusBarItem.prominentHoverBackground#202431
  • tab.activeBackground#13131A
  • tab.activeBorder#CFDEE6
  • tab.activeForeground#CFDEE6
  • tab.border#13131A00
  • tab.inactiveBackground#13131A
  • tab.inactiveForeground#CFDEE6
  • tab.unfocusedActiveBorder#13131A00
  • tab.unfocusedActiveForeground#13131A00
  • tab.unfocusedInactiveForeground#13131A00
  • terminal.ansiBlack#484E5B
  • terminal.ansiBlue#FF1654
  • terminal.ansiBrightBlack#484E5B
  • terminal.ansiBrightBlue#FF1654
  • terminal.ansiBrightCyan#CFDEE6
  • terminal.ansiBrightGreen#70C1B3
  • terminal.ansiBrightMagenta#FF1654
  • terminal.ansiBrightRed#FF1654
  • terminal.ansiBrightWhite#CFDEE6
  • terminal.ansiBrightYellow#F3FFBD
  • terminal.ansiCyan#CFDEE6
  • terminal.ansiGreen#70C1B3
  • terminal.ansiMagenta#FF1654
  • terminal.ansiRed#FF1654
  • terminal.ansiWhite#CFDEE6
  • terminal.ansiYellow#F3FFBD
  • titleBar.activeBackground#13131A
  • titleBar.activeForeground#CFDEE6
  • titleBar.inactiveBackground#13131A00
  • titleBar.inactiveForeground#13131A00
  • walkThrough.embeddedEditorBackground#13131A
  • welcomePage.buttonBackground#13131A00
  • welcomePage.buttonHoverBackground#13131A00
  • widget.shadow#13131A

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
Global settings#CFDEE6—
string, string.quoted, support.type.property-name.json, source.elixir punctuation.definition.string, entity.other.inherited-class, source.elixir punctuation.definition.string#FF1654—
string.unquoted, meta.brace, object, punctuation.definition.string, punctuation.definition.parameters, punctuation.terminator.expression, punctuation.definition.arguments, punctuation.definition.array, punctuation.section.array, meta.array, punctuation.definition.list.begin, punctuation.definition.list.end, punctuation.separator.arguments, punctuation.definition.list, variable.parameter.function.coffee, variable.other.readwrite.cs, entity.name.type.namespace.cs, source.js source.css meta.property-list, source.js source.css punctuation.section, source.js source.css punctuation.terminator.rule, source.js source.css punctuation.definition.entity.end.bracket, source.js source.css punctuation.definition.entity.begin.bracket, source.js source.css punctuation.separator.key-value, source.js source.css punctuation.definition.attribute-selector, source.js source.css meta.property-list, source.js source.css meta.property-list punctuation.separator.comma, source.ts source.css punctuation.section, source.ts source.css punctuation.terminator.rule, source.ts source.css punctuation.definition.entity.end.bracket, source.ts source.css punctuation.definition.entity.begin.bracket, source.ts source.css punctuation.separator.key-value, source.ts source.css punctuation.definition.attribute-selector, source.ts source.css meta.property-list, source.ts source.css meta.property-list punctuation.separator.comma, source.go meta.function-call.go, variable.qraphql, terminator.js, meta.js punctuation.definition.js, variable.other.meta.import.js, meta.import.js variable.other, variable.other.meta.export.js, meta.export.js variable.other, variable.other.readwrite.js, meta.jsx.children, meta.jsx.children.js, meta.jsx.children.tsx, variable.other.object.js, variable.other.object.jsx, meta.object-literal.key.js, meta.object-literal.key.jsx, variable.object.property.js, variable.object.property.jsx, variable.js, variable.other.js, support.class.js, variable.other.ruby, string.other.link.title.markdown, string.other.link.description.markdown, variable.other.php, meta.function-call.php punctuation, meta.function-call.python, meta.function-call.generic.python, punctuation.python, variable.scss, variable.sass, variable.parameter.url.scss, variable.parameter.url.sass, source.css.scss meta.at-rule variable, source.css.sass meta.at-rule variable, 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, meta.import.ts punctuation.definition.block, meta.import.tsx punctuation.definition.block, meta.export.ts punctuation.definition.block, meta.export.tsx punctuation.definition.block, variable.parameter.handlebars#CFDEE6—
support.constant.math, entity.other.attribute-name.handlebars variable.parameter.handlebars, entity.name.function.decorator.python, variable.other.global.php punctuation.definition.variable, variable.other.global.php, support.class.php, markup.bold.markdown, support.constant.json, entity.name.type.js, entity.name.type.module.js, entity.other.attribute-name.id.html, meta.class entity.name.type.class.js, entity.other.attribute-name.id.html, source.elixir variable.other.readwrite.module.elixir, source.elixir variable.other.readwrite.module.elixir punctuation.definition.variable.elixir, source.elixir entity.name.function, bold, support.variable.dom, support.type, support.class, entity.name.tag.custom, entity.other.attribute-name, entity.name.class, meta.class entity.name.type.class, variable, constant.other.color, keyword.other.unit, entity.other.attribute-name.id, keyword.other.unit.css, constant.length.units.css, keyword.other.unit.less, constant.length.units.less, keyword.other.unit.scss, constant.length.units.scss, keyword.other.unit.sass, constant.length.units.sass, constant.numeric, constant.character.numeric, constant.character.escape, constant.other.color.rgb-value punctuation.definition.constant, meta.attribute-selector.css entity.other.attribute-name.attribute, meta.attribute-selector.less entity.other.attribute-name.attribute, meta.attribute-selector.scss entity.other.attribute-name.attribute, meta.attribute-selector.sass entity.other.attribute-name.attribute, punctuation.definition.string, string.template punctuation.definition.string#FF1654—
constant.language, punctuation.definition.constant, variable.other.constant, constant.character, constant.other, entity.name.function, support.function, support.constant, entity.name.function, variable.function, meta.function-call, entity.name.type.class.cs, storage.type.cs, source.elixir support.type.elixir, source.elixir meta.module.elixir entity.name.class.elixir, source.elixir constant.other.symbol.elixir, source.elixir constant.other.keywords.elixir, meta.method.declaration storage.type.js, source.css.scss meta.at-rule variable, source.css.sass meta.at-rule variable, support.class.node.ts, support.class.node.tsx, meta.decorator punctuation.decorator.ts, meta.decorator punctuation.decorator.tsx, meta.tag.js meta.jsx.children.tsx, source.python variable.language.special, entity.other.attribute-value.handlebars variable.parameter.handlebars, variable.parameter.function.python, meta.function-call.arguments.python, variable.parameter.function.js, variable.parameter, beginning.punctuation.definition.list.markdown, punctuation.definition.string.markdown, punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown, meta.link.inline.markdown punctuation.definition.string, markup.heading.markdown#B2DBBF—
string.regexp, string.regexp keyword.other, support.type.vendored.property-name, support.constant.vendored.property-value, support.type.property-name, meta.property-list entity.name.tag, meta.property-name, raw, meta.structure.dictionary.value.json string.quoted.double, string.quoted.double.json punctuation.definition.string.json, markup.inline.raw.markdown#FF1654—
meta.function punctuation.separator.comma, entity.name.type.instance.jsdoc, entity.name.type.instance.phpdoc, meta.type.parameters.ts entity.name.type, meta.type.parameters.tsx entity.name.type#CFDEE6—
punctuation.accessor, keyword, storage, storage.type, meta.var.expr storage.type, storage.type.property.js, storage.type.property.ts, storage.type.property.tsx, meta.class meta.method.declaration meta.var.expr storage.type.js, keyword.operator.relational, keyword.operator.assignment, meta.delimiter.period, meta.selector, entity.name.tag.doctype, meta.tag.sgml.doctype, keyword.operator.logical, keyword.operator.comparison, source.elixir .punctuation.binary.elixir#B2DBBF—
punctuation.definition.tag, meta.tag, support.constant.meta.property-value, keyword.operator, variable.parameter.function, keyword.control.operator, variable.other.property, variable.other.object.property, support.constant, keyword.other.special-method, keyword.other.new, support.function, support.variable.property, variable.assignment.coffee, punctuation.definition.tag.html, constant.language.symbol.hashkey.ruby, entity.name.tag.yaml, entity.other.attribute-name.handlebars, variable.other.jsdoc, variable.other.phpdoc, entity.name.type.ts, entity.name.type.tsx#CFDEE6—
entity.name.tag support.class.component, meta.tag.other.html, meta.tag.other.js, meta.tag.other.tsx, entity.name.tag.tsx, entity.name.tag.js, entity.name.tag, meta.tag.js, meta.tag.tsx, meta.tag.html, meta.property-list entity.name.tag.reference, constant.language.boolean, variable.instance, variable.other.instance, variable.reaedwrite.instance, variable.other.readwrite.instance, variable.language, variable.interpolation, punctuation.section.embedded, entity.name.tag.css, entity.name.tag.less, entity.name.tag.custom.css, entity.name.tag.wildcard.css, entity.name.tag.wildcard.less, entity.name.tag.wildcard.scss, entity.name.tag.wildcard.sass, entity.name.tag.less, meta.structure.dictionary.json meta.structure.dictionary.value constant.language, punctuation.definition.metadata.markdown, entity.name.tag.scss, entity.name.tag.sass, constant.language.null, constant.language.python, markup.underline.link.markdown, markup.underline.link.image.markdown, string.template meta.template.expression#FF1654—
invalid#CFDEE6—
invalid.deprecated#CFDEE6—
object.comma#CFDEE6—
invalid.broken#020e14—
invalid.unimplemented#CFDEE6—
invalid.illegal#CFDEE6—
quote, markup.quote.markdown, comment, comment.line.double-slash#247BA0italic
italic, meta.tag.sgml.doctype.html, markup.italic.markdown#B2DBBFitalic
meta.tag.js meta.embedded.expression.js punctuation.section.embedded.begin.js, meta.tag.js meta.embedded.expression.js punctuation.section.embedded.end.js, meta.property-list.css meta.property-value.css variable.other.less, punctuation.section.embedded.begin.js.jsx, punctuation.section.embedded.end.js.jsx, meta.property-list.scss variable.scss, meta.property-list.sass variable.sass, 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.operator.or.regexp, keyword.operator.expression.in, keyword.operator.type, punctuation.section.embedded.js, punctuation.definintion.string, punctuation—normal