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#ffffff
  • activityBar.foreground#282A36
  • activityBar.inactiveForeground#8393c7
  • activityBarBadge.background#a41d74
  • activityBarBadge.foreground#282A36
  • badge.background#cbcee5
  • badge.foreground#282A36
  • breadcrumb.activeSelectionForeground#282A36
  • breadcrumb.background#ffffff
  • breadcrumb.focusForeground#282A36
  • breadcrumb.foreground#8393c7
  • breadcrumbPicker.background#ffffff
  • button.background#cbcee5
  • button.foreground#282A36
  • contrastBorder#ffffff
  • debugToolBar.background#ffffff
  • diffEditor.insertedTextBackground#00680020
  • diffEditor.removedTextBackground#b6002150
  • dropdown.background#ffffff
  • dropdown.border#ffffff
  • dropdown.foreground#282A36
  • editor.background#ffffff
  • editor.findMatchBackground#824c0080
  • editor.findMatchHighlightBackground#59595940
  • editor.findRangeHighlightBackground#cbcee575
  • editor.foreground#282A36
  • editor.hoverHighlightBackground#ffffff
  • editor.lineHighlightBorder#cbcee5
  • editor.rangeHighlightBackground#6946a315
  • editor.selectionBackground#cbcee5
  • editor.selectionHighlightBackground#ffffff
  • editor.snippetFinalTabstopHighlightBackground#ffffff
  • editor.snippetFinalTabstopHighlightBorder#006800
  • editor.snippetTabstopHighlightBackground#ffffff
  • editor.snippetTabstopHighlightBorder#8393c7
  • editor.wordHighlightBackground#00627450
  • editor.wordHighlightStrongBackground#00680050
  • editorCodeLens.foreground#8393c7
  • editorError.foreground#b60021
  • editorGroup.border#6946a3
  • editorGroup.dropBackground#ffffff
  • editorGroupHeader.tabsBackground#ffffff
  • editorGutter.addedBackground#00680080
  • editorGutter.deletedBackground#b6002180
  • editorGutter.modifiedBackground#00627480
  • editorHoverWidget.background#ffffff
  • editorHoverWidget.border#8393c7
  • editorIndentGuide.activeBackground#59595945
  • editorIndentGuide.background#ffffff
  • editorLineNumber.foreground#8393c7
  • editorLink.activeForeground#006274
  • editorMarkerNavigation.background#ffffff
  • editorOverviewRuler.addedForeground#00680080
  • editorOverviewRuler.border#ffffff
  • editorOverviewRuler.currentContentForeground#006800
  • editorOverviewRuler.deletedForeground#b6002180
  • editorOverviewRuler.errorForeground#b6002180
  • editorOverviewRuler.incomingContentForeground#6946a3
  • editorOverviewRuler.infoForeground#00627480
  • editorOverviewRuler.modifiedForeground#00627480
  • editorOverviewRuler.selectionHighlightForeground#824c00
  • editorOverviewRuler.warningForeground#824c0080
  • editorOverviewRuler.wordHighlightForeground#006274
  • editorOverviewRuler.wordHighlightStrongForeground#006800
  • editorRuler.foreground#ffffff
  • editorSuggestWidget.background#ffffff
  • editorSuggestWidget.foreground#282A36
  • editorSuggestWidget.selectedBackground#cbcee5
  • editorWarning.foreground#006274
  • editorWhitespace.foreground#ffffff
  • editorWidget.background#ffffff
  • errorForeground#b60021
  • extensionButton.prominentBackground#00680090
  • extensionButton.prominentForeground#282A36
  • extensionButton.prominentHoverBackground#00680060
  • focusBorder#8393c7
  • foreground#282A36
  • gitDecoration.conflictingResourceForeground#824c00
  • gitDecoration.deletedResourceForeground#b60021
  • gitDecoration.ignoredResourceForeground#8393c7
  • gitDecoration.modifiedResourceForeground#006274
  • gitDecoration.untrackedResourceForeground#006800
  • input.background#ffffff
  • input.border#ffffff
  • input.foreground#282A36
  • input.placeholderForeground#8393c7
  • inputOption.activeBorder#6946a3
  • inputValidation.errorBorder#b60021
  • inputValidation.infoBorder#a41d74
  • inputValidation.warningBorder#824c00
  • list.activeSelectionBackground#cbcee5
  • list.activeSelectionForeground#282A36
  • list.dropBackground#cbcee5
  • list.errorForeground#b60021
  • list.focusBackground#cbcee575
  • list.highlightForeground#006274
  • list.hoverBackground#cbcee575
  • list.inactiveSelectionBackground#cbcee575
  • list.warningForeground#824c00
  • listFilterWidget.background#ffffff
  • listFilterWidget.noMatchesOutline#b60021
  • listFilterWidget.outline#ffffff
  • merge.currentHeaderBackground#00680090
  • merge.incomingHeaderBackground#6946a390
  • notification.background#ffffff
  • notification.buttonBackground#cbcee5
  • notification.buttonForeground#282A36
  • notification.buttonHoverBackground#cbcee575
  • notification.errorBackground#b60021
  • notification.errorForeground#282A36
  • notification.foreground#282A36
  • notification.infoBackground#006274
  • notification.infoForeground#ffffff
  • notification.warningBackground#824c00
  • notification.warningForeground#ffffff
  • panel.background#ffffff
  • panel.border#ffffff
  • panelTitle.activeBorder#a41d74
  • panelTitle.activeForeground#282A36
  • panelTitle.inactiveForeground#8393c7
  • peekView.border#cbcee5
  • peekViewEditor.background#ffffff
  • peekViewEditor.matchHighlightBackground#515f0080
  • peekViewResult.background#ffffff
  • peekViewResult.fileForeground#282A36
  • peekViewResult.lineForeground#282A36
  • peekViewResult.matchHighlightBackground#515f0080
  • peekViewResult.selectionBackground#cbcee5
  • peekViewResult.selectionForeground#282A36
  • peekViewTitle.background#ffffff
  • peekViewTitleDescription.foreground#8393c7
  • peekViewTitleLabel.foreground#282A36
  • pickerGroup.border#6946a3
  • pickerGroup.foreground#006274
  • progressBar.background#a41d74
  • selection.background#6946a3
  • settings.checkboxBackground#ffffff
  • settings.checkboxBorder#ffffff
  • settings.checkboxForeground#282A36
  • settings.dropdownBackground#ffffff
  • settings.dropdownBorder#ffffff
  • settings.dropdownForeground#282A36
  • settings.headerForeground#282A36
  • settings.modifiedItemForeground#824c00
  • settings.modifiedItemIndicator#824c00
  • settings.numberInputBackground#ffffff
  • settings.numberInputBorder#ffffff
  • settings.numberInputForeground#282A36
  • settings.textInputBackground#ffffff
  • settings.textInputBorder#ffffff
  • settings.textInputForeground#282A36
  • sideBar.background#ffffff
  • sideBar.border#ffffff
  • sideBarSectionHeader.background#ffffff
  • sideBarSectionHeader.border#ffffff
  • sideBarTitle.foreground#282A36
  • statusBar.background#ffffff
  • statusBar.border#ffffff
  • statusBar.debuggingBackground#b60021
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#282A36
  • statusBar.noFolderBackground#ffffff
  • statusBar.noFolderForeground#282A36
  • statusBarItem.prominentBackground#b60021
  • statusBarItem.prominentHoverBackground#824c00
  • statusBarItem.remoteBackground#6946a3
  • statusBarItem.remoteForeground#282A36
  • tab.activeBackground#ffffff
  • tab.activeBorder#a41d7480
  • tab.activeForeground#282A36
  • tab.border#ffffff
  • tab.inactiveBackground#ffffff
  • tab.inactiveForeground#8393c7
  • terminal.ansiBlack#f1f2ff
  • terminal.ansiBlue#6946a3
  • terminal.ansiBrightBlack#8393c7
  • terminal.ansiBrightBlue#6c4993
  • terminal.ansiBrightCyan#006465
  • terminal.ansiBrightGreen#006803
  • terminal.ansiBrightMagenta#962f7c
  • terminal.ansiBrightRed#ac202f
  • terminal.ansiBrightWhite#595959
  • terminal.ansiBrightYellow#585e06
  • terminal.ansiCyan#006274
  • terminal.ansiGreen#006800
  • terminal.ansiMagenta#a41d74
  • terminal.ansiRed#b60021
  • terminal.ansiWhite#282A36
  • terminal.ansiYellow#515f00
  • terminal.background#ffffff
  • terminal.border#ffffff
  • terminal.foreground#282A36
  • titleBar.activeBackground#ffffff
  • titleBar.activeForeground#282A36
  • titleBar.inactiveBackground#ffffff
  • titleBar.inactiveForeground#8393c7
  • walkThrough.embeddedEditorBackground#ffffff

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
emphasisitalic
strongbold
header#6946a3
source#282A36
meta.diff, meta.diff.header#8393c7
markup.inserted#006800
markup.deleted#b60021
markup.changed#824c00
invalid#b60021underline italic
invalid.deprecated#282A36underline italic
entity.name.filename#515f00
markup.error#b60021
markup.underlineunderline
markup.bold#824c00bold
markup.heading#6946a3bold
markup.italic#515f00italic
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#006274
markup.inline.raw, markup.raw.restructuredtext#006800
markup.underline.link, markup.underline.link.image#006274
meta.link.reference.def.restructuredtext, punctuation.definition.directive.restructuredtext, string.other.link.description, string.other.link.title#a41d74
entity.name.directive.restructuredtext, markup.quote#515f00italic
meta.separator.markdown#8393c7
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#006800
punctuation.definition.constant.restructuredtext#6946a3
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#6946a3
meta.paragraph.markdown punctuation.definition.string.begin, meta.paragraph.markdown punctuation.definition.string.end#282A36
markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.begin, markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.end#515f00
entity.name.type.class#006274normal
keyword.expressions-and-types.swift, keyword.other.this, variable.language, variable.language punctuation.definition.variable.php, variable.other.readwrite.instance.ruby, variable.parameter.function.language.special#6946a3italic
entity.other.inherited-class#006274italic
comment, punctuation.definition.comment, unused.comment, wildcard.comment#8393c7
comment keyword.codetag.notation, comment.block.documentation keyword, comment.block.documentation storage.type.class#a41d74
comment.block.documentation entity.name.type#006274italic
comment.block.documentation entity.name.type punctuation.definition.bracket#006274
comment.block.documentation variable#824c00italic
constant, variable.other.constant#6946a3
constant.character.escape, constant.character.string.escape, constant.regexp#a41d74
entity.name.tag#a41d74
entity.other.attribute-name.parent-selector#a41d74
entity.other.attribute-name#006800italic
entity.name.function, meta.function-call.generic, meta.function-call.object, meta.function-call.php, meta.function-call.static, meta.method-call.java meta.method, meta.method.groovy, support.function.any-method.lua, keyword.operator.function.infix#006800
entity.name.variable.parameter, meta.at-rule.function variable, meta.at-rule.mixin variable, meta.function.arguments variable.other.php, meta.selectionset.graphql meta.arguments.graphql variable.arguments.graphql, variable.parameter#824c00italic
meta.decorator variable.other.readwrite, meta.decorator variable.other.property#006800italic
meta.decorator variable.other.object#006800
keyword, punctuation.definition.keyword#a41d74
keyword.control.new, keyword.operator.newbold
meta.selector#a41d74
support#006274italic
support.function.magic, support.variable, variable.other.predefined#6946a3regular
support.function, support.type.property-nameregular
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.group.double.toml, meta.group.toml, 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#a41d74
keyword.operator.other.powershell, keyword.other.statement-separator.powershell, meta.brace.round, 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, storage.type.generic.java, string.template meta.brace, string.template punctuation.accessor#282A36
meta.string-contents.quoted.double punctuation.definition.variable, punctuation.definition.interpolation.begin, punctuation.definition.interpolation.end, punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded.begin, punctuation.section.embedded.coffee, punctuation.section.embedded.end, punctuation.section.embedded.end source.php, punctuation.section.embedded.end source.ruby, punctuation.definition.variable.makefile#a41d74
entity.name.function.target.makefile, entity.name.section.toml, entity.name.tag.yaml, variable.other.key.toml#006274
constant.other.date, constant.other.timestamp#824c00
variable.other.alias.yaml#006800italic underline
storage, meta.implementation storage.type.objc, meta.interface-or-protocol storage.type.objc, source.groovy storage.type.def#a41d74regular
entity.name.type, 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#006274italic
entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#824c00
storage.modifier#a41d74
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#515f00
punctuation.definition.group.capture.regexp#a41d74
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#b60021
punctuation.definition.character-class.regexp#006274
punctuation.definition.group.regexp#824c00
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#b60021
meta.assertion.look-ahead.regexp#006800
string#515f00
punctuation.definition.string.begin, punctuation.definition.string.end#515f00
punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end#006275
string.quoted.docstring.multi, string.quoted.docstring.multi.python punctuation.definition.string.begin, string.quoted.docstring.multi.python punctuation.definition.string.end, string.quoted.docstring.multi.python constant.character.escape#8393c7
variable, constant.other.key.perl, support.variable.property, variable.other.constant.js, variable.other.constant.ts, variable.other.constant.tsx#282A36
meta.import variable.other.readwrite, meta.object-binding-pattern-variable variable.object.property, meta.variable.assignment.destructured.object.coffee variable#824c00italic
meta.import variable.other.readwrite.alias, meta.export variable.other.readwrite.alias, meta.variable.assignment.destructured.object.coffee variable variable#282A36normal
meta.selectionset.graphql variable#515f00
meta.selectionset.graphql meta.arguments variable#282A36
entity.name.fragment.graphql, variable.fragment.graphql#006274
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#282A36
source.shell variable.other#6946a3
support.constant#6946a3normal
meta.scope.prerequisites.makefile#515f00
meta.attribute-selector.scss#515f00
punctuation.definition.attribute-selector.end.bracket.square.scss, punctuation.definition.attribute-selector.begin.bracket.square.scss#282A36
meta.preprocessor.haskell#8393c7
Dracula.min by Ashraf Hadden - VS Code Theme