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

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
Global settings#A6A9B7—
string, string.quoted, support.type.property-name.json, source.elixir punctuation.definition.string, entity.other.inherited-class, source.elixir punctuation.definition.string#8CD7AA—
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, string.template punctuation.definition.string, 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#A6A9B7—
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#E9967E—
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#E9967E—
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#79AAEB—
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#8CD7AA—
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#DADDEE—
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#C488EC—
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#7ABCE4—
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#E56F92—
invalid#DADDEE—
invalid.deprecated#DADDEE—
object.comma#DADDEE—
invalid.broken#020e14—
invalid.unimplemented#DADDEE—
invalid.illegal#DADDEE—
quote, markup.quote.markdown, comment, comment.line.double-slash#484E5Bitalic
italic, meta.tag.sgml.doctype.html, markup.italic.markdown#79AAEBitalic
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
Topl Theme by Slepe - VS Code Theme