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#E5989B10
  • activityBar.activeBorder#BE95C480
  • activityBar.background#1c275e
  • activityBar.foreground#c4d5f4
  • activityBar.inactiveForeground#307cd5
  • activityBarBadge.background#d774e5
  • activityBarBadge.foreground#c4d5f4
  • badge.background#256478
  • badge.foreground#c4d5f4
  • breadcrumb.activeSelectionForeground#c4d5f4
  • breadcrumb.background#14274b
  • breadcrumb.focusForeground#c4d5f4
  • breadcrumb.foreground#307cd5
  • breadcrumbPicker.background#27144b
  • button.background#256478
  • button.foreground#c4d5f4
  • button.secondaryBackground#14274b
  • button.secondaryForeground#c4d5f4
  • button.secondaryHoverBackground#1c275e
  • debugToolBar.background#12153b
  • diffEditor.insertedTextBackground#E1C34020
  • diffEditor.removedTextBackground#BC474950
  • dropdown.background#1c275e
  • dropdown.border#27144b
  • dropdown.foreground#c4d5f4
  • editor.background#14274b
  • editor.findMatchBackground#FFD6A580
  • editor.findMatchHighlightBackground#F5F3EF40
  • editor.findRangeHighlightBackground#24307a
  • editor.foldBackground#21222C80
  • editor.foreground#c4d5f4
  • editor.hoverHighlightBackground#A9DEF950
  • editor.lineHighlightBorder#256478
  • editor.rangeHighlightBackground#E5989B15
  • editor.selectionBackground#256478
  • editor.selectionHighlightBackground#252f6d
  • editor.snippetFinalTabstopHighlightBackground#14274b
  • editor.snippetFinalTabstopHighlightBorder#ffd622
  • editor.snippetTabstopHighlightBackground#14274b
  • editor.snippetTabstopHighlightBorder#307cd5
  • editor.wordHighlightBackground#A9DEF950
  • editor.wordHighlightStrongBackground#E1C34050
  • editorBracketHighlight.foreground1#c4d5f4
  • editorBracketHighlight.foreground2#d774e5
  • editorBracketHighlight.foreground3#a3e0ff
  • editorBracketHighlight.foreground4#ffd622
  • editorBracketHighlight.foreground5#ff7e83
  • editorBracketHighlight.foreground6#ffd6a5
  • editorBracketHighlight.unexpectedBracket.foreground#ee1519
  • editorCodeLens.foreground#307cd5
  • editorError.foreground#ee1519
  • editorGroup.border#ff7e83
  • editorGroup.dropBackground#24307a
  • editorGroupHeader.tabsBackground#27144b
  • editorGutter.addedBackground#E1C34080
  • editorGutter.deletedBackground#BC474980
  • editorGutter.modifiedBackground#A9DEF980
  • editorHoverWidget.background#14274b
  • editorHoverWidget.border#307cd5
  • editorIndentGuide.activeBackground#272D3845
  • editorIndentGuide.background#faf5ea
  • editorLineNumber.foreground#307cd5
  • editorLink.activeForeground#a3e0ff
  • editorMarkerNavigation.background#12153b
  • editorOverviewRuler.addedForeground#E1C34080
  • editorOverviewRuler.border#27144b
  • editorOverviewRuler.currentContentForeground#ffd622
  • editorOverviewRuler.deletedForeground#BC474980
  • editorOverviewRuler.errorForeground#BC474980
  • editorOverviewRuler.incomingContentForeground#ff7e83
  • editorOverviewRuler.infoForeground#A9DEF980
  • editorOverviewRuler.modifiedForeground#A9DEF980
  • editorOverviewRuler.selectionHighlightForeground#ffd6a5
  • editorOverviewRuler.warningForeground#FFD6A580
  • editorOverviewRuler.wordHighlightForeground#a3e0ff
  • editorOverviewRuler.wordHighlightStrongForeground#ffd622
  • editorRuler.foreground#faf5ea
  • editorSuggestWidget.background#12153b
  • editorSuggestWidget.foreground#c4d5f4
  • editorSuggestWidget.selectedBackground#256478
  • editorWarning.foreground#a3e0ff
  • editorWhitespace.foreground#faf5ea
  • editorWidget.background#12153b
  • errorForeground#ee1519
  • extensionButton.prominentBackground#E1C34090
  • extensionButton.prominentForeground#c4d5f4
  • extensionButton.prominentHoverBackground#E1C34060
  • focusBorder#307cd5
  • foreground#c4d5f4
  • gitDecoration.conflictingResourceForeground#ffd6a5
  • gitDecoration.deletedResourceForeground#ee1519
  • gitDecoration.ignoredResourceForeground#307cd5
  • gitDecoration.modifiedResourceForeground#a3e0ff
  • gitDecoration.untrackedResourceForeground#ffd622
  • input.background#14274b
  • input.border#27144b
  • input.foreground#c4d5f4
  • input.placeholderForeground#307cd5
  • inputOption.activeBorder#ff7e83
  • inputValidation.errorBorder#ee1519
  • inputValidation.infoBorder#d774e5
  • inputValidation.warningBorder#ffd6a5
  • list.activeSelectionBackground#c4d5f4
  • list.activeSelectionForeground#14274b
  • list.dropBackground#256478
  • list.errorForeground#ee1519
  • list.focusBackground#24307a
  • list.highlightForeground#a3e0ff
  • list.hoverBackground#24307a
  • list.inactiveSelectionBackground#24307a
  • list.warningForeground#ffd6a5
  • listFilterWidget.background#1c275e
  • listFilterWidget.noMatchesOutline#ee1519
  • listFilterWidget.outline#252f6d
  • merge.currentHeaderBackground#E1C34090
  • merge.incomingHeaderBackground#E5989B90
  • panel.background#14274b
  • panel.border#ff7e83
  • panelTitle.activeBorder#d774e5
  • panelTitle.activeForeground#c4d5f4
  • panelTitle.inactiveForeground#307cd5
  • peekView.border#256478
  • peekViewEditor.background#14274b
  • peekViewEditor.matchHighlightBackground#8CB36980
  • peekViewResult.background#12153b
  • peekViewResult.fileForeground#c4d5f4
  • peekViewResult.lineForeground#c4d5f4
  • peekViewResult.matchHighlightBackground#8CB36980
  • peekViewResult.selectionBackground#256478
  • peekViewResult.selectionForeground#c4d5f4
  • peekViewTitle.background#27144b
  • peekViewTitleDescription.foreground#307cd5
  • peekViewTitleLabel.foreground#c4d5f4
  • pickerGroup.border#ff7e83
  • pickerGroup.foreground#a3e0ff
  • progressBar.background#d774e5
  • selection.background#ff7e83
  • settings.checkboxBackground#12153b
  • settings.checkboxBorder#27144b
  • settings.checkboxForeground#c4d5f4
  • settings.dropdownBackground#12153b
  • settings.dropdownBorder#27144b
  • settings.dropdownForeground#c4d5f4
  • settings.headerForeground#c4d5f4
  • settings.modifiedItemIndicator#ffd6a5
  • settings.numberInputBackground#12153b
  • settings.numberInputBorder#27144b
  • settings.numberInputForeground#c4d5f4
  • settings.textInputBackground#12153b
  • settings.textInputBorder#27144b
  • settings.textInputForeground#c4d5f4
  • sideBar.background#12153b
  • sideBarSectionHeader.background#14274b
  • sideBarSectionHeader.border#27144b
  • sideBarTitle.foreground#c4d5f4
  • statusBar.background#27144b
  • statusBar.debuggingBackground#ee1519
  • statusBar.debuggingForeground#27144b
  • statusBar.foreground#c4d5f4
  • statusBar.noFolderBackground#27144b
  • statusBar.noFolderForeground#c4d5f4
  • statusBarItem.prominentBackground#ee1519
  • statusBarItem.prominentHoverBackground#ffd6a5
  • statusBarItem.remoteBackground#ff7e83
  • statusBarItem.remoteForeground#14274b
  • tab.activeBackground#14274b
  • tab.activeBorderTop#BE95C480
  • tab.activeForeground#c4d5f4
  • tab.border#27144b
  • tab.inactiveBackground#12153b
  • tab.inactiveForeground#307cd5
  • terminal.ansiBlack#11153e
  • terminal.ansiBlue#5fe1ff
  • terminal.ansiBrightBlack#2977be
  • terminal.ansiBrightBlue#00c2ee
  • terminal.ansiBrightCyan#f18500
  • terminal.ansiBrightGreen#00ca8d
  • terminal.ansiBrightMagenta#d0008f
  • terminal.ansiBrightRed#ff0004
  • terminal.ansiBrightWhite#fdfbfb
  • terminal.ansiBrightYellow#ffe817
  • terminal.ansiCyan#fc972c
  • terminal.ansiGreen#3ddc65
  • terminal.ansiMagenta#eb39b1
  • terminal.ansiRed#ff1e21
  • terminal.ansiWhite#f6f6d2
  • terminal.ansiYellow#ffff40
  • terminal.background#27144b
  • terminal.foreground#c4d5f4
  • titleBar.activeBackground#12153b
  • titleBar.activeForeground#c4d5f4
  • titleBar.inactiveBackground#27144b
  • titleBar.inactiveForeground#307cd5
  • walkThrough.embeddedEditorBackground#12153b

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
emphasisitalic
strongbold
header#ff7e83
meta.diff, meta.diff.header#307cd5
markup.inserted#ffd622
markup.deleted#ee1519
markup.changed#ffd6a5
invalid#ee1519underline italic
invalid.deprecated#c4d5f4underline italic
entity.name.filename#8ae03c
markup.error#ee1519
markup.underlineunderline
markup.bold#ffd6a5bold
markup.heading#ff7e83bold
markup.italic#8ae03citalic
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#a3e0ff
markup.inline.raw, markup.raw.restructuredtext#ffd622
markup.underline.link, markup.underline.link.image#a3e0ff
meta.link.reference.def.restructuredtext, punctuation.definition.directive.restructuredtext, string.other.link.description, string.other.link.title#d774e5
entity.name.directive.restructuredtext, markup.quote#8ae03citalic
meta.separator.markdown#307cd5
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#ffd622
punctuation.definition.constant.restructuredtext#ff7e83
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#ff7e83
meta.paragraph.markdown punctuation.definition.string.begin, meta.paragraph.markdown punctuation.definition.string.end#c4d5f4
markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.begin, markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.end#8ae03c
entity.name.type.class, entity.name.class#a3e0ffnormal
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#ff7e83italic
entity.other.inherited-class#a3e0ffitalic
comment, punctuation.definition.comment, unused.comment, wildcard.comment#307cd5
comment keyword.codetag.notation, comment.block.documentation keyword, comment.block.documentation storage.type.class#d774e5
comment.block.documentation entity.name.type#a3e0ffitalic
comment.block.documentation entity.name.type punctuation.definition.bracket#a3e0ff
comment.block.documentation variable#ffd6a5italic
constant, variable.other.constant#ff7e83
constant.character.escape, constant.character.string.escape, constant.regexp#d774e5
entity.name.tag#d774e5
entity.other.attribute-name.parent-selector#d774e5
entity.other.attribute-name#ffd622italic
entity.name.function, 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#ffd622
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#ffd6a5italic
meta.decorator variable.other.readwrite, meta.decorator variable.other.property#ffd622italic
meta.decorator variable.other.object#ffd622
keyword, punctuation.definition.keyword#d774e5
keyword.control.new, keyword.operator.newbold
meta.selector#d774e5
support#a3e0ffitalic
support.function.magic, support.variable, variable.other.predefined#ff7e83regular
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#d774e5
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, punctuation.terminator.expression.php, storage.type.generic.java, string.template meta.brace, string.template punctuation.accessor#c4d5f4
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#d774e5
entity.name.function.target.makefile, entity.name.section.toml, entity.name.tag.yaml, variable.other.key.toml#a3e0ff
constant.other.date, constant.other.timestamp#ffd6a5
variable.other.alias.yaml#ffd622italic underline
storage, meta.implementation storage.type.objc, meta.interface-or-protocol storage.type.objc, source.groovy storage.type.def#d774e5regular
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#a3e0ffitalic
entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#ffd6a5
storage.modifier#d774e5
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#8ae03c
punctuation.definition.group.capture.regexp#d774e5
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#ee1519
punctuation.definition.character-class.regexp#a3e0ff
punctuation.definition.group.regexp#ffd6a5
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#ee1519
meta.assertion.look-ahead.regexp#ffd622
string#8ae03c
punctuation.definition.string.begin, punctuation.definition.string.end#f0ff52
punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end#80e8ff
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#307cd5
variable, constant.other.key.perl, support.variable.property, variable.other.constant.js, variable.other.constant.ts, variable.other.constant.tsx#c4d5f4
meta.import variable.other.readwrite, meta.variable.assignment.destructured.object.coffee variable#ffd6a5italic
meta.import variable.other.readwrite.alias, meta.export variable.other.readwrite.alias, meta.variable.assignment.destructured.object.coffee variable variable#c4d5f4normal
meta.selectionset.graphql variable#8ae03c
meta.selectionset.graphql meta.arguments variable#c4d5f4
entity.name.fragment.graphql, variable.fragment.graphql#a3e0ff
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#c4d5f4
source.shell variable.other#ff7e83
support.constant#ff7e83normal
meta.scope.prerequisites.makefile#8ae03c
meta.attribute-selector.scss#8ae03c
punctuation.definition.attribute-selector.end.bracket.square.scss, punctuation.definition.attribute-selector.begin.bracket.square.scss#c4d5f4
meta.preprocessor.haskell#307cd5
log.error#ee1519bold
log.warning#8ae03cbold