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#b5b5fe10
  • activityBar.activeBorder#BBC4D880
  • activityBar.background#101117
  • activityBar.foreground#F7F7FD
  • activityBar.inactiveForeground#606070
  • activityBarBadge.background#BBC4D8
  • activityBarBadge.foreground#F7F7FD
  • badge.background#303040
  • badge.foreground#F7F7FD
  • breadcrumb.activeSelectionForeground#F7F7FD
  • breadcrumb.background#101117
  • breadcrumb.focusForeground#F7F7FD
  • breadcrumb.foreground#606070
  • breadcrumbPicker.background#101117
  • button.background#303040
  • button.foreground#F7F7FD
  • button.secondaryBackground#101117
  • button.secondaryForeground#F7F7FD
  • button.secondaryHoverBackground#101117
  • debugToolBar.background#101117
  • diffEditor.insertedTextBackground#AEDCFE20
  • diffEditor.removedTextBackground#ff2e1850
  • dropdown.background#101117
  • dropdown.border#101117
  • dropdown.foreground#F7F7FD
  • editor.background#101117
  • editor.findMatchBackground#98FFC780
  • editor.findMatchHighlightBackground#F7F7FD40
  • editor.findRangeHighlightBackground#303040
  • editor.foldBackground#10111780
  • editor.foreground#F7F7FD
  • editor.hoverHighlightBackground#98FFC750
  • editor.lineHighlightBorder#303040
  • editor.rangeHighlightBackground#b5b5fe15
  • editor.selectionBackground#303040
  • editor.selectionHighlightBackground#101117
  • editor.snippetFinalTabstopHighlightBackground#101117
  • editor.snippetFinalTabstopHighlightBorder#AEDCFE
  • editor.snippetTabstopHighlightBackground#101117
  • editor.snippetTabstopHighlightBorder#606070
  • editor.wordHighlightBackground#98FFC750
  • editor.wordHighlightStrongBackground#AEDCFE50
  • editorBracketHighlight.foreground1#606070
  • editorBracketHighlight.foreground2#606070
  • editorBracketHighlight.foreground3#606070
  • editorBracketHighlight.foreground4#606070
  • editorBracketHighlight.foreground5#606070
  • editorBracketHighlight.foreground6#606070
  • editorBracketHighlight.unexpectedBracket.foreground#ff2e18
  • editorCodeLens.foreground#606070
  • editorError.foreground#ff2e18
  • editorGroup.border#b5b5fe
  • editorGroup.dropBackground#101117
  • editorGroupHeader.tabsBackground#101117
  • editorGutter.addedBackground#AEDCFE80
  • editorGutter.deletedBackground#ff2e1880
  • editorGutter.modifiedBackground#98FFC780
  • editorHoverWidget.background#101117
  • editorHoverWidget.border#606070
  • editorIndentGuide.activeBackground#F7F7FD45
  • editorIndentGuide.background#303040
  • editorLineNumber.foreground#606070
  • editorLink.activeForeground#98FFC7
  • editorMarkerNavigation.background#101117
  • editorOverviewRuler.addedForeground#AEDCFE80
  • editorOverviewRuler.border#101117
  • editorOverviewRuler.currentContentForeground#AEDCFE
  • editorOverviewRuler.deletedForeground#ff2e1880
  • editorOverviewRuler.errorForeground#ff2e1880
  • editorOverviewRuler.incomingContentForeground#b5b5fe
  • editorOverviewRuler.infoForeground#98FFC780
  • editorOverviewRuler.modifiedForeground#98FFC780
  • editorOverviewRuler.selectionHighlightForeground#98FFC7
  • editorOverviewRuler.warningForeground#98FFC780
  • editorOverviewRuler.wordHighlightForeground#98FFC7
  • editorOverviewRuler.wordHighlightStrongForeground#AEDCFE
  • editorRuler.foreground#303040
  • editorSuggestWidget.background#101117
  • editorSuggestWidget.foreground#F7F7FD
  • editorSuggestWidget.selectedBackground#303040
  • editorWarning.foreground#98FFC7
  • editorWhitespace.foreground#303040
  • editorWidget.background#101117
  • errorForeground#ff2e18
  • extensionButton.prominentBackground#AEDCFE90
  • extensionButton.prominentForeground#F7F7FD
  • extensionButton.prominentHoverBackground#AEDCFE60
  • focusBorder#606070
  • foreground#F7F7FD
  • gitDecoration.conflictingResourceForeground#98FFC7
  • gitDecoration.deletedResourceForeground#ff2e18
  • gitDecoration.ignoredResourceForeground#606070
  • gitDecoration.modifiedResourceForeground#98FFC7
  • gitDecoration.untrackedResourceForeground#AEDCFE
  • inlineChat.regionHighlight#101117
  • input.background#101117
  • input.border#101117
  • input.foreground#F7F7FD
  • input.placeholderForeground#606070
  • inputOption.activeBorder#b5b5fe
  • inputValidation.errorBorder#ff2e18
  • inputValidation.infoBorder#BBC4D8
  • inputValidation.warningBorder#98FFC7
  • list.activeSelectionBackground#303040
  • list.activeSelectionForeground#F7F7FD
  • list.dropBackground#303040
  • list.errorForeground#ff2e18
  • list.focusBackground#303040
  • list.highlightForeground#98FFC7
  • list.hoverBackground#303040
  • list.inactiveSelectionBackground#303040
  • list.warningForeground#98FFC7
  • listFilterWidget.background#101117
  • listFilterWidget.noMatchesOutline#ff2e18
  • listFilterWidget.outline#101117
  • merge.currentHeaderBackground#AEDCFE90
  • merge.incomingHeaderBackground#b5b5fe90
  • panel.background#101117
  • panel.border#b5b5fe
  • panelTitle.activeBorder#BBC4D8
  • panelTitle.activeForeground#F7F7FD
  • panelTitle.inactiveForeground#606070
  • peekView.border#303040
  • peekViewEditor.background#101117
  • peekViewEditor.matchHighlightBackground#F5F39480
  • peekViewResult.background#101117
  • peekViewResult.fileForeground#F7F7FD
  • peekViewResult.lineForeground#F7F7FD
  • peekViewResult.matchHighlightBackground#F5F39480
  • peekViewResult.selectionBackground#303040
  • peekViewResult.selectionForeground#F7F7FD
  • peekViewTitle.background#101117
  • peekViewTitleDescription.foreground#606070
  • peekViewTitleLabel.foreground#F7F7FD
  • pickerGroup.border#b5b5fe
  • pickerGroup.foreground#98FFC7
  • progressBar.background#BBC4D8
  • selection.background#b5b5fe
  • settings.checkboxBackground#101117
  • settings.checkboxBorder#101117
  • settings.checkboxForeground#F7F7FD
  • settings.dropdownBackground#101117
  • settings.dropdownBorder#101117
  • settings.dropdownForeground#F7F7FD
  • settings.headerForeground#F7F7FD
  • settings.modifiedItemIndicator#98FFC7
  • settings.numberInputBackground#101117
  • settings.numberInputBorder#101117
  • settings.numberInputForeground#F7F7FD
  • settings.textInputBackground#101117
  • settings.textInputBorder#101117
  • settings.textInputForeground#F7F7FD
  • sideBar.background#101117
  • sideBarSectionHeader.background#101117
  • sideBarSectionHeader.border#101117
  • sideBarTitle.foreground#F7F7FD
  • statusBar.background#101117
  • statusBar.debuggingBackground#ff2e18
  • statusBar.debuggingForeground#101117
  • statusBar.foreground#F7F7FD
  • statusBar.noFolderBackground#101117
  • statusBar.noFolderForeground#F7F7FD
  • statusBarItem.prominentBackground#ff2e18
  • statusBarItem.prominentHoverBackground#98FFC7
  • statusBarItem.remoteBackground#b5b5fe
  • statusBarItem.remoteForeground#101117
  • tab.activeBackground#101117
  • tab.activeBorderTop#BBC4D880
  • tab.activeForeground#F7F7FD
  • tab.border#101117
  • tab.inactiveBackground#101117
  • tab.inactiveForeground#606070
  • terminal.ansiBlack#101117
  • terminal.ansiBlue#b5b5fe
  • terminal.ansiBrightBlack#101117
  • terminal.ansiBrightBlue#b5b5fe
  • terminal.ansiBrightCyan#98FFC7
  • terminal.ansiBrightGreen#F5F394
  • terminal.ansiBrightMagenta#BBC4D8
  • terminal.ansiBrightRed#ff2e18
  • terminal.ansiBrightWhite#F7F7FD
  • terminal.ansiBrightYellow#98FFC7
  • terminal.ansiCyan#98FFC7
  • terminal.ansiGreen#F5F394
  • terminal.ansiMagenta#BBC4D8
  • terminal.ansiRed#ff2e18
  • terminal.ansiWhite#F7F7FD
  • terminal.ansiYellow#98FFC7
  • terminal.background#101117
  • terminal.foreground#F7F7FD
  • titleBar.activeBackground#101117
  • titleBar.activeForeground#F7F7FD
  • titleBar.inactiveBackground#101117
  • titleBar.inactiveForeground#606070
  • walkThrough.embeddedEditorBackground#101117

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
emphasisitalic
strongbold
header#b5b5fe
meta.diff, meta.diff.header#606070
markup.inserted#AEDCFE
markup.deleted#ff2e18
markup.changed#98FFC7
invalid#ff2e18underline italic
invalid.deprecated#F7F7FDunderline italic
entity.name.filename#F5F394
markup.error#ff2e18
markup.underlineunderline
markup.bold#98FFC7bold
markup.heading#b5b5febold
markup.italic#F5F394italic
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#98FFC7
markup.inline.raw, markup.raw.restructuredtext#AEDCFE
markup.underline.link, markup.underline.link.image#98FFC7
meta.link.reference.def.restructuredtext, punctuation.definition.directive.restructuredtext, string.other.link.description, string.other.link.title#BBC4D8
entity.name.directive.restructuredtext, markup.quote#F5F394italic
meta.separator.markdown#606070
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#AEDCFE
punctuation.definition.constant.restructuredtext#BBC4D8
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#b5b5fe
meta.paragraph.markdown punctuation.definition.string.begin, meta.paragraph.markdown punctuation.definition.string.end#F7F7FD
markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.begin, markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.end#F5F394
entity.name.type.class, entity.name.class#98FFC7normal
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#BBC4D8italic
entity.other.inherited-class#98FFC7italic
comment, punctuation.definition.comment, unused.comment, wildcard.comment#606070
comment keyword.codetag.notation, comment.block.documentation keyword, comment.block.documentation storage.type.class#BBC4D8
comment.block.documentation entity.name.type#98FFC7italic
comment.block.documentation entity.name.type punctuation.definition.bracket#98FFC7
comment.block.documentation variable#98FFC7italic
constant, variable.other.constant#98FFC7
constant.character.escape, constant.character.string.escape, constant.regexp#BBC4D8
entity.name.tag#BBC4D8
entity.other.attribute-name.parent-selector#BBC4D8
entity.other.attribute-name#AEDCFEitalic
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#98FFC7
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#AEDCFEitalic
meta.decorator variable.other.readwrite, meta.decorator variable.other.property#AEDCFEitalic
meta.decorator variable.other.object#AEDCFE
keyword, punctuation.definition.keyword#BBC4D8
keyword.control.new, keyword.operator.newbold
meta.selector#BBC4D8
support#BBC4D8italic
support.function.magic, support.variable, variable.other.predefined#BBC4D8regular
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#BBC4D8
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#BBC4D8
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#BBC4D8
entity.name.function.target.makefile, entity.name.section.toml, entity.name.tag.yaml, variable.other.key.toml#98FFC7
constant.other.date, constant.other.timestamp#98FFC7
variable.other.alias.yaml#AEDCFEitalic underline
storage, meta.implementation storage.type.objc, meta.interface-or-protocol storage.type.objc, source.groovy storage.type.def#BBC4D8regular
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#BBC4D8italic
entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#98FFC7
storage.modifier#BBC4D8
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#F5F394
punctuation.definition.group.capture.regexp#BBC4D8
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#ff2e18
punctuation.definition.character-class.regexp#98FFC7
punctuation.definition.group.regexp#98FFC7
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#ff2e18
meta.assertion.look-ahead.regexp#AEDCFE
string#F5F394
punctuation.definition.string.begin, punctuation.definition.string.end#F5F394
punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end#F5F394
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#606070
variable, constant.other.key.perl, variable.other.constant.js, variable.other.constant.ts, variable.other.constant.tsx#AEDCFE
support.variable.property#AEDCFE
meta.import variable.other.readwrite, meta.variable.assignment.destructured.object.coffee variable#98FFC7italic
meta.import variable.other.readwrite.alias, meta.export variable.other.readwrite.alias, meta.variable.assignment.destructured.object.coffee variable variable#F7F7FDnormal
meta.selectionset.graphql variable#F5F394
meta.selectionset.graphql meta.arguments variable#F7F7FD
entity.name.fragment.graphql, variable.fragment.graphql#98FFC7
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#F7F7FD
source.shell variable.other#BBC4D8
support.constant#BBC4D8normal
meta.scope.prerequisites.makefile#F5F394
meta.attribute-selector.scss#F5F394
punctuation.definition.attribute-selector.end.bracket.square.scss, punctuation.definition.attribute-selector.begin.bracket.square.scss#F7F7FD
meta.preprocessor.haskell#606070
log.error#ff2e18bold
log.warning#F5F394bold