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.activeBackground#DCE3EA32
  • activityBar.activeBorder#DCE3EA32
  • activityBar.activeFocusBorder#DCE3EA32
  • activityBar.background#000000
  • activityBar.border#DCE3EA48
  • activityBar.foreground#DCE3EA
  • activityBarBadge.background#454D54
  • activityBarBadge.foreground#DCE3EA
  • badge.background#454D54
  • badge.foreground#DCE3EA
  • breadcrumb.activeSelectionForeground#DCE3EA
  • breadcrumb.background#000000
  • breadcrumb.focusForeground#DCE3EA
  • breadcrumb.foreground#454D54
  • breadcrumbPicker.background#000000
  • button.background#DCE3EA32
  • button.border#DCE3EA32
  • button.foreground#DCE3EA
  • button.hoverBackground#DCE3EA24
  • checkbox.background#DCE3EA32
  • checkbox.border#DCE3EA32
  • checkbox.foreground#DCE3EA
  • debugToolBar.background#DCE3EA32
  • debugToolBar.border#DCE3EA32
  • diffEditor.insertedTextBackground#00809B33
  • dropdown.background#DCE3EA32
  • dropdown.border#DCE3EA32
  • dropdown.foreground#DCE3EA
  • dropdown.listBackground#000000
  • editor.background#000000
  • editor.findMatchBackground#DCE3EA32
  • editor.findMatchBorder#DCE3EA32
  • editor.findMatchHighlightBackground#DCE3EA32
  • editor.foreground#DCE3EA
  • editor.lineHighlightBackground#DCE3EA32
  • editor.lineHighlightBorder#DCE3EA32
  • editor.selectionBackground#DCE3EA32
  • editor.selectionHighlightBackground#DCE3EA32
  • editor.wordHighlightBackground#DCE3EA32
  • editor.wordHighlightBorder#DCE3EA32
  • editor.wordHighlightStrongBackground#DCE3EA32
  • editor.wordHighlightStrongBorder#DCE3EA32
  • editorCursor.background#DCE3EA
  • editorCursor.foreground#DCE3EA
  • editorError.background#E4545464
  • editorError.border#E45454
  • editorError.foreground#E45454
  • editorGroup.border#DCE3EA32
  • editorGroup.dropBackground#DCE3EA32
  • editorGroupHeader.tabsBackground#000000
  • editorGroupHeader.tabsBorder#DCE3EA48
  • editorGutter.addedBackground#2FAF64
  • editorGutter.background#000000
  • editorGutter.deletedBackground#E45454
  • editorGutter.foldingControlForeground#DCE3EA
  • editorGutter.modifiedBackground#00B7E4
  • editorHint.foreground#454D54
  • editorHoverWidget.background#000000
  • editorHoverWidget.border#DCE3EA32
  • editorIndentGuide.activeBackground#DCE3EA32
  • editorIndentGuide.background#DCE3EA32
  • editorInfo.background#00B7E464
  • editorInfo.border#00B7E4
  • editorInfo.foreground#00B7E4
  • editorInlayHint.background#DCE3EA32
  • editorInlayHint.foreground#454D54
  • editorLineNumber.foreground#454D54
  • editorMarkerNavigation.background#000000
  • editorRuler.foreground#454D54
  • editorSuggestWidget.background#000000
  • editorSuggestWidget.border#DCE3EA32
  • editorSuggestWidget.foreground#DCE3EA96
  • editorSuggestWidget.selectedBackground#DCE3EA32
  • editorSuggestWidget.selectedForeground#DCE3EA
  • editorUnnecessaryCode.border#E45454
  • editorUnnecessaryCode.opacity#E4545464
  • editorWarning.background#E4BC5464
  • editorWarning.border#E4BC54
  • editorWarning.foreground#E4BC54
  • editorWhitespace.foreground#454D54
  • editorWidget.background#000000
  • editorWidget.border#DCE3EA48
  • editorWidget.foreground#DCE3EA
  • errorForeground#E45454
  • gitDecoration.addedResourceForeground#2FAF64
  • gitDecoration.conflictingResourceForeground#E45454
  • gitDecoration.deletedResourceForeground#E45454
  • gitDecoration.ignoredResourceForeground#454D54
  • gitDecoration.modifiedResourceForeground#00B7E4
  • gitDecoration.renamedResourceForeground#2FAF64
  • gitDecoration.untrackedResourceForeground#E4BC54
  • icon.foreground#DCE3EA
  • input.background#DCE3EA32
  • input.border#DCE3EA32
  • input.foreground#DCE3EA
  • input.placeholderForeground#777777
  • inputOption.activeBackground#DCE3EA32
  • inputOption.activeBorder#DCE3EA32
  • inputOption.activeForeground#DCE3EA
  • inputValidation.errorBackground#E4545464
  • inputValidation.errorBorder#E45454
  • inputValidation.errorForeground#E45454
  • inputValidation.infoBackground#00B7E464
  • inputValidation.infoBorder#00B7E4
  • inputValidation.infoForeground#00B7E4
  • list.activeSelectionBackground#DCE3EA32
  • list.activeSelectionForeground#DCE3EA
  • list.dropBackground#DCE3EA32
  • list.errorForeground#E45454
  • list.focusBackground#DCE3EA32
  • list.focusForeground#DCE3EA
  • list.highlightForeground#DCE3EA
  • list.hoverBackground#DCE3EA32
  • list.hoverForeground#DCE3EA
  • list.inactiveSelectionBackground#DCE3EA32
  • list.inactiveSelectionForeground#DCE3EA
  • list.warningForeground#E4BC54
  • menu.background#000000
  • menu.border#DCE3EA48
  • menu.foreground#DCE3EA
  • menu.selectionBackground#DCE3EA32
  • menu.selectionBorder#DCE3EA48
  • menu.selectionForeground#DCE3EA
  • menu.separatorBackground#DCE3EA48
  • menubar.selectionBackground#DCE3EA32
  • menubar.selectionBorder#DCE3EA48
  • menubar.selectionForeground#DCE3EA
  • minimap.background#000000
  • minimap.errorHighlight#E45454
  • minimap.findMatchHighlight#DCE3EA32
  • minimap.selectionHighlight#DCE3EA32
  • minimap.warningHighlight#E4BC54
  • minimapGutter.addedBackground#2FAF64
  • minimapGutter.deletedBackground#E45454
  • minimapGutter.modifiedBackground#00B7E4
  • minimapSlider.activeBackground#DCE3EA32
  • minimapSlider.background#DCE3EA32
  • minimapSlider.hoverBackground#DCE3EA32
  • notificationCenter.border#DCE3EA48
  • notificationCenterHeader.background#000000
  • notificationCenterHeader.foreground#DCE3EA
  • notificationLink.foreground#00B7E4
  • notifications.background#000000
  • notifications.border#DCE3EA48
  • notifications.foreground#DCE3EA
  • notificationsErrorIcon.foreground#E45454
  • notificationsInfoIcon.foreground#00B7E4
  • notificationsWarningIcon.foreground#E4BC54
  • panel.background#000000
  • panel.border#DCE3EA48
  • panel.dropBorder#DCE3EA48
  • panelInput.border#DCE3EA48
  • panelSection.border#DCE3EA48
  • panelSection.dropBackground#DCE3EA32
  • panelSectionHeader.background#DCE3EA32
  • panelTitle.activeBorder#DCE3EA48
  • panelTitle.activeForeground#DCE3EA
  • panelTitle.inactiveForeground#DCE3EA72
  • peekView.border#DCE3EA48
  • peekViewEditor.background#000000
  • peekViewEditor.matchHighlightBackground#DCE3EA32
  • peekViewEditor.matchHighlightBorder#DCE3EA48
  • peekViewEditorGutter.background#000000
  • peekViewResult.background#000000
  • peekViewResult.fileForeground#DCE3EA
  • peekViewResult.lineForeground#DCE3EA
  • peekViewResult.matchHighlightBackground#DCE3EA32
  • peekViewResult.selectionBackground#DCE3EA32
  • peekViewResult.selectionForeground#DCE3EA
  • peekViewTitle.background#DCE3EA32
  • peekViewTitleDescription.foreground#DCE3EA72
  • peekViewTitleLabel.foreground#DCE3EA
  • progressBar.background#DCE3EA32
  • scrollbar.shadow#000000
  • scrollbarSlider.activeBackground#DCE3EA32
  • scrollbarSlider.background#000000
  • scrollbarSlider.hoverBackground#DCE3EA32
  • sideBar.background#000000
  • sideBar.border#DCE3EA48
  • sideBar.dropBackground#DCE3EA32
  • sideBar.foreground#DCE3EA
  • sideBarSectionHeader.background#000000
  • sideBarSectionHeader.border#DCE3EA48
  • sideBarSectionHeader.foreground#DCE3EA72
  • sideBarTitle.foreground#DCE3EA72
  • statusBar.background#000000
  • statusBar.border#DCE3EA48
  • statusBar.debuggingBackground#DCE3EA32
  • statusBar.debuggingBorder#DCE3EA48
  • statusBar.debuggingForeground#DCE3EA
  • statusBar.foreground#DCE3EA81
  • statusBar.noFolderBackground#000000
  • statusBar.noFolderBorder#DCE3EA48
  • statusBar.noFolderForeground#DCE3EA81
  • statusBarItem.activeBackground#DCE3EA32
  • statusBarItem.errorBackground#E45454
  • statusBarItem.errorForeground#DCE3EA
  • statusBarItem.hoverBackground#DCE3EA32
  • statusBarItem.warningBackground#E4BC54
  • statusBarItem.warningForeground#DCE3EA
  • tab.activeBackground#DCE3EA32
  • tab.activeBorderTop#DCE3EA48
  • tab.activeForeground#DCE3EA
  • tab.border#DCE3EA48
  • tab.hoverBackground#DCE3EA32
  • tab.hoverBorder#DCE3EA48
  • tab.hoverForeground#DCE3EA
  • tab.inactiveBackground#000000
  • terminal.ansiBlack#454D54
  • terminal.ansiBlue#7EAEF5
  • terminal.ansiBrightBlack#454D54
  • terminal.ansiBrightBlue#7EAEF5
  • terminal.ansiBrightCyan#9FC7E3
  • terminal.ansiBrightGreen#5BD1B9
  • terminal.ansiBrightMagenta#BE82E5
  • terminal.ansiBrightRed#F36190
  • terminal.ansiBrightWhite#DCE3EA
  • terminal.ansiBrightYellow#FED482
  • terminal.ansiCyan#9FC7E3
  • terminal.ansiGreen#5BD1B9
  • terminal.ansiMagenta#BE82E5
  • terminal.ansiRed#F36190
  • terminal.ansiWhite#DCE3EA
  • terminal.ansiYellow#FED482
  • terminal.background#000000
  • terminal.border#DCE3EA48
  • terminal.foreground#DCE3EA
  • terminal.selectionBackground#DCE3EA32
  • terminal.tab.activeBorder#DCE3EA48
  • terminalCursor.background#DCE3EA32
  • terminalCursor.foreground#DCE3EA32
  • titleBar.activeBackground#000000
  • titleBar.activeForeground#DCE3EA
  • titleBar.inactiveBackground#000000
  • titleBar.inactiveForeground#DCE3EA
  • toolbar.activeBackground#DCE3EA32
  • toolbar.hoverBackground#DCE3EA32
  • toolbar.hoverOutline#DCE3EA48
  • widget.shadow#000000
  • window.activeBorder#DCE3EA48

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
constant.language.boolean, constant.language.null, constant.language.python, constant.language.undefined.js, constant.language.undefined.ts, entity.name.tag support.class.component, entity.name.tag.css, entity.name.tag.custom.css, entity.name.tag.custom.css, entity.name.tag.js, entity.name.tag.less, entity.name.tag.less, entity.name.tag.sass, entity.name.tag.scss, entity.name.tag.tsx, entity.name.tag.wildcard.css, entity.name.tag.wildcard.less, entity.name.tag.wildcard.sass, entity.name.tag.wildcard.scss, entity.name.tag, html-template.ng.expression.operator.comparison, keyword.operator.arithmetic.js, keyword.operator.arithmetic.ts, keyword.operator.definiteassignment.ts, keyword.operator.optional.ts, keyword.operator.ternary.js, keyword.operator.ternary.ts, markup.underline.link.image.markdown, markup.underline.link.markdown, meta.property-list entity.name.tag.reference, meta.structure.dictionary.json meta.structure.dictionary.value constant.language, meta.tag.html, meta.tag.js, meta.tag.other.html, meta.tag.other.js, meta.tag.other.tsx, meta.tag.tsx, punctuation.accessor.optional.ts, punctuation.definition.metadata.markdown, punctuation.definition.template-expression.begin.ts, punctuation.definition.template-expression.end.ts, punctuation.section.embedded, string.template meta.template.expression, variable.instance, variable.interpolation, variable.language, variable.other.instance, variable.other.readwrite.instance, variable.reaedwrite.instance#EF5184—
constant.language, entity.name.tag.doctype, italic, keyword.control.export.ts, keyword.control.flow.ts, keyword.control.from.ts, keyword.control.import.ts, keyword.operator.assignment, keyword.operator.comparison.js, keyword.operator.comparison.ts, keyword.operator.expression.delete.js, keyword.operator.expression.delete.ts, keyword.operator.expression.in.js, keyword.operator.expression.in.ts, keyword.operator.expression.instanceof.js, keyword.operator.expression.instanceof.ts, keyword.operator.expression.let.js, keyword.operator.expression.let.ts, keyword.operator.expression.of.js, keyword.operator.expression.of.ts, keyword.operator.expression.typeof.js, keyword.operator.expression.typeof.ts, keyword.operator.logical, keyword.operator.new.js, keyword.operator.new.ts, keyword.operator.relational, keyword.other.unit.css, keyword.other.unit.less, keyword.other.unit.sass, keyword.other.unit.scss, keyword.other.unit, keyword, markup.italic.markdown, meta.class meta.method.declaration meta.var.expr storage.type.js, meta.class meta.method.declaration meta.var.expr storage.type.ts, meta.delimiter.period, meta.directive.angular, meta.element.ng.html, meta.selector, meta.tag.sgml.doctype.html, meta.tag.sgml.doctype, meta.var.expr storage.type, punctuation.accessor, source.directive.angular, source.elixir .punctuation.binary.elixir, storage.type.property.js, storage.type.property.js, storage.type.property.ts, storage.type.property.tsx, storage.type, storage, support.type.object.module.js, variable.language.this.ts#B97AE2—
beginning.punctuation.definition.list.markdown, constant.character.entity.ng-html, constant.character, constant.other, entity.name.function, entity.name.tag.html.doctype, entity.name.tag.html.ng.ng-container, entity.name.tag.html.ng.ng-template, entity.name.tag.html.ng.router-outlet, entity.name.type.class.cs, entity.other.attribute-name.parent-selector.css, html-template.ng.attributes.prefix.sugar, html-template.ng.attributes.template.prefix, html-template.ng.doctype, html-template.ng.exclamation.doctype, markup.heading.markdown, meta.at-rule.import.css, meta.decorator punctuation.decorator.ts, meta.decorator punctuation.decorator.tsx, meta.function-call.arguments.python, meta.function-call, meta.link.inline.markdown punctuation.definition.string, meta.method.declaration storage.type.js, meta.property-list.css, meta.property-value.css, meta.selector.css, meta.tag.js meta.jsx.children.tsx, meta.tag.metadata.doctype.html, punctuation.definition.constant, punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown, punctuation.definition.string.markdown, punctuation.separator.key-value.html, source.css.sass meta.at-rule variable, source.css.scss meta.at-rule variable, source.elixir constant.other.keywords.elixir, source.elixir constant.other.symbol.elixir, source.elixir meta.module.elixir entity.name.class.elixir, source.elixir support.type.elixir, source.python variable.language.special, storage.type.cs, string.regexp keyword.other, string.regexp, support.class.node.ts, support.class.node.tsx, support.constant, support.function.timing-function.css, support.function, variable.function, variable.other.constant, variable.other.less, variable.parameter.function.js, variable.parameter.function.python#7EAEF5—
constant.language.symbol.hashkey.ruby, entity.name.tag.yaml, entity.name.type.module.ts, entity.name.type.ts, entity.name.type.tsx, entity.other.attribute-name.handlebars, keyword.control.operator, keyword.operator.type, keyword.operator, keyword.other.new, keyword.other.special-method, markup.inline.raw.markdown, meta.function-call.generic.python, meta.function-call.python, meta.property-list entity.name.tag, meta.property-name, meta.structure.dictionary.value.json string.quoted.double, meta.tag, object, punctuation.definition.string.begin.json, punctuation.definition.string.end.json, raw, string.quoted.double.json punctuation.definition.string.json, support.constant.meta.property-value, support.constant.property-value.css, support.constant.vendored.property-value, support.constant, support.type.property-name, support.variable.property, variable.assignment.coffee, variable.assignment.coffee, variable.other.jsdoc, variable.other.object.property, variable.other.phpdoc, variable.other.property.ts, variable.other.property, variable.parameter.function#8DCFD8—
html-template.ng.attributes.input-binding.second-level, keyword.operator.entity.html, punctuation.definition.list.begin.markdown, punctuation.definition.string.begin.css, punctuation.definition.string.begin.html, punctuation.definition.string.begin.ts, punctuation.definition.string.end.css, punctuation.definition.string.end.html, punctuation.definition.string.end.ts, source.elixir punctuation.definition.string, string.quoted.double.html, string.quoted.single.css, string.quoted.single.ts, string.quoted, string, support.type.property-name.json, variable.parameter.url.css#5BD1B9—
bold, constant.length.units.css, constant.length.units.less, constant.length.units.sass, constant.length.units.scss, constant.other.color, entity.name.class, entity.name.function.decorator.python, entity.name.tag.custom, entity.other.attribute-name.handlebars variable.parameter.handlebars, entity.other.attribute-name.id.html, entity.other.attribute-name.id, entity.other.attribute-name, html-template.ng.attributes.generic, markup.bold.markdown, meta.class entity.name.type.class, source.elixir entity.name.function, source.elixir variable.other.readwrite.module.elixir punctuation.definition.variable.elixir, source.elixir variable.other.readwrite.module.elixir, support.class, support.constant.json, support.constant.math, support.type.object.html-attribute, support.type, support.variable.dom, variable.other.global.php punctuation.definition.variable, variable.other.global.php, variable#FED482—
constant.character.escape, constant.character.numeric, constant.numeric, constant.other.color.rgb-value punctuation.definition.constant, entity.name.type.js, entity.name.type.module.js, entity.other.inherited-class, entity.other.ng-binding-name.event.html, entity.other.ng-binding-name.ngFor.html, entity.other.ng-binding-name.ngIf.html, entity.other.ng-binding-name.ngSwitch.html, entity.other.ng-binding-name.nzSrc.html, entity.other.ng-binding-name.property.html, html-template.ng.attribute.doctype, html-template.ng.attributes.event-handler, html-template.ng.attributes.input-binding.first-level, html-template.ng.attributes.suffix.sugar, html-template.ng.attributes.template.variable, keyword.control.trycatch.js, keyword.control.trycatch.ts, meta.attribute-selector.css entity.other.attribute-name.attribute, meta.attribute-selector.less entity.other.attribute-name.attribute, meta.attribute-selector.sass entity.other.attribute-name.attribute, meta.attribute-selector.scss entity.other.attribute-name.attribute, meta.class entity.name.type.class.js, punctuation.definition.ng-binding-name.begin.html, punctuation.definition.ng-binding-name.end.html, support.class.php#F8AD78—
constant.language.import-export-all.ts, entity.name.function.pipe.ng, entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css, html-template.tag.custom, keyword.control.flow.ts, storage.modifier.async.ts#F377B2—
comment.line.double-slash, comment, invalid.broken, markup.inline.raw.string.markdown, markup.quote.markdown, meta.image.inline.markdown, meta.link.inline.markdown, meta.link.inline.markdown, punctuation.definition.link.description.begin.markdown, punctuation.definition.link.title.begin.markdown, punctuation.definition.raw.markdown, quote, string.other.link.description.markdown, string.other.link.title.markdown, support.type.vendored.property-name#888888italic
entity.name.type.instance.jsdoc, entity.name.type.instance.phpdoc, html-template.ng.interpolation.begin, html-template.ng.interpolation.end, keyword.operator.bitwise, keyword.operator.expression.in, keyword.operator.increment, keyword.operator.operator, keyword.operator.or.regexp, keyword.operator.punctuation, keyword.operator.spread.js, keyword.operator.spread.ts, meta.array, meta.brace, meta.export.js variable.other, meta.export.ts punctuation.definition.block, meta.export.tsx punctuation.definition.block, meta.function punctuation.separator.comma, meta.function-call.php punctuation, meta.import.js variable.other, meta.import.tsx punctuation.definition.block, meta.js punctuation.definition.js, meta.jsx.children.js, meta.jsx.children.tsx, meta.jsx.children, meta.object-literal.key.js, meta.object-literal.key.jsx, meta.object-literal.key.ts, meta.property-list.sass variable.sass, meta.property-list.scss variable.scss, 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.type.parameters.ts entity.name.type, meta.type.parameters.tsx entity.name.type, punctuation.accessor.ts, punctuation.definition.arguments, punctuation.definition.array, punctuation.definition.list.begin, punctuation.definition.list.end, punctuation.definition.list, punctuation.definition.parameters, punctuation.definition.string, punctuation.definition.tag.html, punctuation.definition.tag, punctuation.python, punctuation.section.array, punctuation.separator.arguments, punctuation.separator.key-value.css, punctuation.terminator.expression, punctuation.terminator.rule.css, source.css.sass meta.at-rule variable, source.css.scss meta.at-rule variable, source.js source.css meta.property-list punctuation.separator.comma, source.js source.css meta.property-list, source.js source.css meta.property-list, source.js source.css punctuation.definition.attribute-selector, source.js source.css punctuation.definition.entity.begin.bracket, source.js source.css punctuation.definition.entity.end.bracket, source.js source.css punctuation.section, source.js source.css punctuation.separator.key-value, source.js source.css punctuation.terminator.rule, source.ts source.css meta.property-list punctuation.separator.comma, source.ts source.css meta.property-list, source.ts source.css punctuation.definition.attribute-selector, source.ts source.css punctuation.definition.entity.begin.bracket, source.ts source.css punctuation.definition.entity.end.bracket, source.ts source.css punctuation.section, source.ts source.css punctuation.separator.key-value, source.ts source.css punctuation.terminator.rule, string.template punctuation.definition.string, string.unquoted, support.class.js, support.type.property-name.css, terminator.js, variable.js, variable.object.property.js, variable.object.property.jsx, variable.object.property.ts, variable.object.property.tsx, variable.other.js, variable.other.meta.export.js, variable.other.meta.import.js, variable.other.object.js, variable.other.object.jsx, variable.other.object.ts, variable.other.object.tsx, variable.other.php, variable.other.readwrite.alias.ts, variable.other.readwrite.alias.tsx, variable.other.readwrite.cs, variable.other.readwrite.js, variable.other.readwrite.ts, variable.other.readwrite.tsx, variable.other.ruby, variable.other.ts, variable.other.tsx, variable.parameter.function.coffee, variable.parameter.handlebars, variable.parameter.url.sass, variable.parameter.url.scss, variable.parameter, variable.qraphql, variable.sass, variable.scss, variable.ts, variable.tsx#DCE3EA—
invalid.deprecated, invalid.illegal, invalid.unimplemented, invalid, object.comma#E0E0E0—
ThemeDatabase All Themes by enes ozturk - VS Code Theme