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#815a0310
  • activityBar.activeBorder#29711280
  • activityBar.background#bfcce8
  • activityBar.foreground#2f3d5c
  • activityBar.inactiveForeground#606e94
  • activityBarBadge.background#297112
  • activityBarBadge.foreground#d9e1f2
  • badge.background#297112
  • badge.foreground#d9e1f2
  • breadcrumb.activeSelectionForeground#2f3d5c
  • breadcrumb.background#d9e1f2
  • breadcrumb.focusForeground#2f3d5c
  • breadcrumb.foreground#606e94
  • breadcrumbPicker.background#bfcce8
  • button.background#2a5ca8
  • button.foreground#f4f7fc
  • button.secondaryBackground#d9e1f2
  • button.secondaryForeground#2f3d5c
  • button.secondaryHoverBackground#ced8ee
  • debugToolBar.background#bfcce8
  • diffEditor.insertedTextBackground#29711220
  • diffEditor.removedTextBackground#b0391150
  • dropdown.background#ced8ee
  • dropdown.border#92a5cf
  • dropdown.foreground#2f3d5c
  • editor.background#d9e1f2
  • editor.findMatchBackground#9c4c0780
  • editor.findMatchHighlightBackground#16204a40
  • editor.findRangeHighlightBackground#b9caee80
  • editor.foldBackground#bfcce880
  • editor.foreground#2f3d5c
  • editor.hoverHighlightBackground#0d66a150
  • editor.lineHighlightBackground#b9caee80
  • editor.rangeHighlightBackground#712ae515
  • editor.selectionBackground#b9caee
  • editor.selectionHighlightBackground#bbc9e8
  • editor.snippetFinalTabstopHighlightBackground#d9e1f2
  • editor.snippetFinalTabstopHighlightBorder#297112
  • editor.snippetTabstopHighlightBackground#d9e1f2
  • editor.snippetTabstopHighlightBorder#606e94
  • editor.wordHighlightBackground#0d66a150
  • editor.wordHighlightStrongBackground#29711250
  • editorBracketHighlight.foreground1#2f3d5c
  • editorBracketHighlight.foreground2#0b5ad9
  • editorBracketHighlight.foreground3#0d66a1
  • editorBracketHighlight.foreground4#297112
  • editorBracketHighlight.foreground5#712ae5
  • editorBracketHighlight.foreground6#9c4c07
  • editorBracketHighlight.unexpectedBracket.foreground#b03911
  • editorCodeLens.foreground#606e94
  • editorError.foreground#b03911
  • editorGroup.border#b9caee
  • editorGroup.dropBackground#b9caee70
  • editorGroupHeader.tabsBackground#bfcce8
  • editorGutter.addedBackground#29711280
  • editorGutter.deletedBackground#b0391180
  • editorGutter.modifiedBackground#0d66a180
  • editorHoverWidget.background#d9e1f2
  • editorHoverWidget.border#606e94
  • editorIndentGuide.activeBackground#16204a45
  • editorIndentGuide.background#16204a1A
  • editorInfo.foreground#0d66a1
  • editorLineNumber.foreground#606e94
  • editorLink.activeForeground#0d66a1
  • editorMarkerNavigation.background#bfcce8
  • editorOverviewRuler.addedForeground#29711280
  • editorOverviewRuler.border#92a5cf
  • editorOverviewRuler.currentContentForeground#297112
  • editorOverviewRuler.deletedForeground#b0391180
  • editorOverviewRuler.errorForeground#b0391180
  • editorOverviewRuler.incomingContentForeground#712ae5
  • editorOverviewRuler.infoForeground#0d66a180
  • editorOverviewRuler.modifiedForeground#0d66a180
  • editorOverviewRuler.selectionHighlightForeground#9c4c07
  • editorOverviewRuler.warningForeground#9c4c0780
  • editorOverviewRuler.wordHighlightForeground#0d66a1
  • editorOverviewRuler.wordHighlightStrongForeground#297112
  • editorRuler.foreground#16204a1A
  • editorSuggestWidget.background#ced8ee
  • editorSuggestWidget.foreground#2f3d5c
  • editorSuggestWidget.selectedBackground#b9caee
  • editorWarning.foreground#9c4c07
  • editorWhitespace.foreground#16204a1A
  • editorWidget.background#ced8ee
  • errorForeground#b03911
  • extensionButton.prominentBackground#2a5ca8
  • extensionButton.prominentForeground#f4f7fc
  • extensionButton.prominentHoverBackground#2a5ca890
  • focusBorder#606e94
  • foreground#2f3d5c
  • gitDecoration.addedResourceForeground#297112
  • gitDecoration.conflictingResourceForeground#9c4c07
  • gitDecoration.deletedResourceForeground#b03911
  • gitDecoration.ignoredResourceForeground#606e94
  • gitDecoration.modifiedResourceForeground#0d66a1
  • gitDecoration.untrackedResourceForeground#297112
  • input.background#d9e1f2
  • input.border#92a5cf
  • input.foreground#2f3d5c
  • input.placeholderForeground#606e94
  • inputOption.activeBorder#712ae5
  • inputValidation.errorBorder#b03911
  • inputValidation.infoBorder#0765a6
  • inputValidation.warningBorder#9c4c07
  • list.activeSelectionBackground#b9caee
  • list.activeSelectionForeground#2f3d5c
  • list.dropBackground#b9caee
  • list.errorForeground#b03911
  • list.focusBackground#b9caee80
  • list.highlightForeground#0d66a1
  • list.hoverBackground#b9caee80
  • list.inactiveSelectionBackground#b9caee80
  • list.warningForeground#9c4c07
  • listFilterWidget.background#ced8ee
  • listFilterWidget.noMatchesOutline#b03911
  • listFilterWidget.outline#bbc9e8
  • merge.currentHeaderBackground#29711290
  • merge.incomingHeaderBackground#712ae590
  • minimapGutter.addedBackground#297112
  • minimapGutter.deletedBackground#b03911
  • minimapGutter.modifiedBackground#0d66a1
  • panel.background#d9e1f2
  • panel.border#b9caee
  • panelTitle.activeBorder#297112
  • panelTitle.activeForeground#2f3d5c
  • panelTitle.inactiveForeground#606e94
  • peekView.border#b9caee
  • peekViewEditor.background#d9e1f2
  • peekViewEditor.matchHighlightBackground#815a0380
  • peekViewResult.background#bfcce8
  • peekViewResult.fileForeground#2f3d5c
  • peekViewResult.lineForeground#2f3d5c
  • peekViewResult.matchHighlightBackground#815a0380
  • peekViewResult.selectionBackground#b9caee
  • peekViewResult.selectionForeground#2f3d5c
  • peekViewTitle.background#92a5cf
  • peekViewTitleDescription.foreground#606e94
  • peekViewTitleLabel.foreground#2f3d5c
  • pickerGroup.border#b9caee
  • pickerGroup.foreground#0d66a1
  • progressBar.background#297112
  • selection.background#0b5ad940
  • settings.checkboxBackground#bfcce8
  • settings.checkboxBorder#92a5cf
  • settings.checkboxForeground#2f3d5c
  • settings.dropdownBackground#bfcce8
  • settings.dropdownBorder#92a5cf
  • settings.dropdownForeground#2f3d5c
  • settings.headerForeground#2f3d5c
  • settings.modifiedItemIndicator#9c4c07
  • settings.numberInputBackground#bfcce8
  • settings.numberInputBorder#92a5cf
  • settings.numberInputForeground#2f3d5c
  • settings.textInputBackground#bfcce8
  • settings.textInputBorder#92a5cf
  • settings.textInputForeground#2f3d5c
  • sideBar.background#ced8ee
  • sideBarSectionHeader.background#d9e1f2
  • sideBarSectionHeader.border#92a5cf
  • sideBarTitle.foreground#2f3d5c
  • statusBar.background#8da0cc
  • statusBar.debuggingBackground#b03911
  • statusBar.debuggingForeground#8da0cc
  • statusBar.foreground#2f3d5c
  • statusBar.noFolderBackground#8da0cc
  • statusBar.noFolderForeground#2f3d5c
  • statusBarItem.prominentBackground#b03911
  • statusBarItem.prominentHoverBackground#9c4c07
  • statusBarItem.remoteBackground#8da0cc
  • statusBarItem.remoteForeground#d9e1f2
  • tab.activeBackground#d9e1f2
  • tab.activeBorderTop#297112
  • tab.activeForeground#2f3d5c
  • tab.border#bfcce8
  • tab.inactiveBackground#ced8ee
  • tab.inactiveForeground#606e94
  • terminal.ansiBlack#3a4763
  • terminal.ansiBlue#712ae5
  • terminal.ansiBrightBlack#606e94
  • terminal.ansiBrightBlue#9769e3
  • terminal.ansiBrightCyan#1587d5
  • terminal.ansiBrightGreen#419c24
  • terminal.ansiBrightMagenta#ca5890
  • terminal.ansiBrightRed#db5123
  • terminal.ansiBrightWhite#f4f7fc
  • terminal.ansiBrightYellow#b3800e
  • terminal.ansiCyan#0765a6
  • terminal.ansiGreen#297112
  • terminal.ansiMagenta#b83d78
  • terminal.ansiRed#b03911
  • terminal.ansiWhite#c3cde3
  • terminal.ansiYellow#815a03
  • terminal.background#d9e1f2
  • terminal.foreground#2f3d5c
  • titleBar.activeBackground#ced8ee
  • titleBar.activeForeground#2f3d5c
  • titleBar.inactiveBackground#bfcce8
  • titleBar.inactiveForeground#606e94
  • walkThrough.embeddedEditorBackground#bfcce8

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
emphasisitalic
strongbold
header#712ae5
meta.diff, meta.diff.header#606e94
markup.inserted#297112
markup.deleted#b03911
markup.changed#9c4c07
invalid#b03911underline italic
invalid.deprecated#2f3d5cunderline italic
entity.name.filename#815a03
markup.error#b03911
markup.underlineunderline
markup.bold#9c4c07bold
markup.heading#712ae5bold
markup.italic#815a03italic
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#0d66a1
markup.inline.raw, markup.raw.restructuredtext#297112
markup.underline.link, markup.underline.link.image#0d66a1
meta.link.reference.def.restructuredtext, punctuation.definition.directive.restructuredtext, string.other.link.description, string.other.link.title#0b5ad9
entity.name.directive.restructuredtext, markup.quote#815a03italic
meta.separator.markdown#606e94
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#297112
punctuation.definition.constant.restructuredtext#712ae5
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#712ae5
meta.paragraph.markdown punctuation.definition.string.begin, meta.paragraph.markdown punctuation.definition.string.end#2f3d5c
markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.begin, markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.end#815a03
entity.name.type.class, entity.name.class#9c4c07normal
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#815a03italic
entity.other.inherited-class#9c4c07italic
comment, punctuation.definition.comment, unused.comment, wildcard.comment#606e94
comment keyword.codetag.notation, comment.block.documentation keyword, comment.block.documentation storage.type.class#0b5ad9
comment.block.documentation entity.name.type#0d66a1italic
comment.block.documentation entity.name.type punctuation.definition.bracket#0d66a1
comment.block.documentation variable#9c4c07italic
constant#712ae5
constant.character.escape, constant.character.string.escape, constant.regexp#0b5ad9
entity.name.tag#0b5ad9
entity.other.attribute-name.parent-selector#0b5ad9
entity.other.attribute-name#297112italic
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#297112
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#9c4c07italic
meta.decorator variable.other.readwrite, meta.decorator variable.other.property#297112italic
meta.decorator variable.other.object#297112
keyword, punctuation.definition.keyword#0b5ad9
keyword.control.new, keyword.operator.newbold
meta.selector#0b5ad9
support#0d66a1italic
support.function.magic, support.variable, variable.other.predefined#712ae5regular
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#0b5ad9
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#2f3d5c
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#0b5ad9
entity.name.function.target.makefile, entity.name.section.toml, entity.name.tag.yaml, variable.other.key.toml#0d66a1
constant.other.date, constant.other.timestamp#9c4c07
variable.other.alias.yaml#297112italic underline
storage, meta.implementation storage.type.objc, meta.interface-or-protocol storage.type.objc, source.groovy storage.type.def#0b5ad9regular
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#9c4c07italic
entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#9c4c07
storage.modifier#0b5ad9
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#815a03
punctuation.definition.group.capture.regexp#0b5ad9
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#b03911
punctuation.definition.character-class.regexp#0d66a1
punctuation.definition.group.regexp#9c4c07
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#b03911
meta.assertion.look-ahead.regexp#297112
string#815a03
punctuation.definition.string.begin, punctuation.definition.string.end#815a03
punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end#4d5e82
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#606e94
variable, constant.other.key.perl, support.variable.property, variable.other.constant.js, variable.other.constant.ts, variable.other.constant.tsx#2f3d5c
meta.import variable.other.readwrite, meta.variable.assignment.destructured.object.coffee variable#9c4c07italic
meta.import variable.other.readwrite.alias, meta.export variable.other.readwrite.alias, meta.variable.assignment.destructured.object.coffee variable variable#2f3d5cnormal
meta.selectionset.graphql variable#815a03
meta.selectionset.graphql meta.arguments variable#2f3d5c
entity.name.fragment.graphql, variable.fragment.graphql#0d66a1
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#2f3d5c
source.shell variable.other#712ae5
support.constant#712ae5normal
meta.scope.prerequisites.makefile#815a03
meta.attribute-selector.scss#815a03
punctuation.definition.attribute-selector.end.bracket.square.scss, punctuation.definition.attribute-selector.begin.bracket.square.scss#2f3d5c
meta.preprocessor.haskell#606e94
log.error#b03911bold
log.warning#815a03bold