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#25345766
  • activityBar.activeBorder#C084FCcc
  • activityBar.background#070B16
  • activityBar.foreground#DDE7F3
  • activityBar.inactiveForeground#64748B
  • activityBarBadge.background#C084FC
  • activityBarBadge.foreground#0B1020
  • badge.background#253457
  • badge.foreground#DDE7F3
  • breadcrumb.activeSelectionForeground#DDE7F3
  • breadcrumb.background#0B1020
  • breadcrumb.focusForeground#DDE7F3
  • breadcrumb.foreground#64748B
  • breadcrumbPicker.background#050810
  • button.background#253457
  • button.foreground#DDE7F3
  • chat.requestBackground#070B16
  • chat.requestBorder#050810
  • chat.slashCommandBackground#2534578c
  • chat.slashCommandForeground#22D3EE
  • commandCenter.activeBackground#253457
  • commandCenter.activeForeground#DDE7F3
  • commandCenter.background#080D1A
  • commandCenter.border#050810
  • commandCenter.foreground#DDE7F3
  • contrastBorder#050810
  • debugToolBar.background#080D1A
  • diffEditor.insertedTextBackground#6EE7B733
  • diffEditor.removedTextBackground#F8717180
  • dropdown.background#070B16
  • dropdown.border#050810
  • dropdown.foreground#DDE7F3
  • editor.background#0B1020
  • editor.findMatchBackground#FBBF24cc
  • editor.findMatchHighlightBackground#DDE7F366
  • editor.findRangeHighlightBackground#0E1528
  • editor.foldBackground#080D1A
  • editor.foreground#DDE7F3
  • editor.hoverHighlightBackground#050810
  • editor.inactiveSelectionBackground#25345759
  • editor.lineHighlightBackground#0E1528
  • editor.lineHighlightBorder#0B1020
  • editor.rangeHighlightBackground#7C8CFF26
  • editor.selectionBackground#253457
  • editor.selectionHighlightBackground#121A30
  • editor.snippetFinalTabstopHighlightBackground#0B1020
  • editor.snippetFinalTabstopHighlightBorder#6EE7B7
  • editor.snippetTabstopHighlightBackground#0B1020
  • editor.snippetTabstopHighlightBorder#64748B
  • editor.wordHighlightBackground#22D3EE80
  • editor.wordHighlightStrongBackground#6EE7B780
  • editorBracketHighlight.foreground1#C084FC
  • editorBracketHighlight.foreground2#22D3EE
  • editorBracketHighlight.foreground3#6EE7B7
  • editorBracketHighlight.foreground4#A7F3D0
  • editorBracketHighlight.foreground5#FBBF24
  • editorBracketHighlight.foreground6#7C8CFF
  • editorBracketHighlight.unexpectedBracket.foreground#F87171
  • editorBracketMatch.background#25345773
  • editorBracketMatch.border#C084FC
  • editorCodeLens.foreground#64748B
  • editorCursor.foreground#22D3EE
  • editorError.foreground#F87171
  • editorGhostText.foreground#DDE7F373
  • editorGroup.border#253457
  • editorGroup.dropBackground#25345770
  • editorGroupHeader.tabsBackground#050810
  • editorGutter.addedBackground#6EE7B7cc
  • editorGutter.deletedBackground#F87171cc
  • editorGutter.modifiedBackground#22D3EEcc
  • editorHint.foreground#64748B
  • editorHoverWidget.background#0B1020
  • editorHoverWidget.border#64748B
  • editorIndentGuide.activeBackground#DDE7F373
  • editorIndentGuide.background#DDE7F318
  • editorInfo.foreground#22D3EE
  • editorInlayHint.background#080D1Aeb
  • editorInlayHint.foreground#DDE7F3b8
  • editorInlayHint.parameterBackground#25345773
  • editorInlayHint.parameterForeground#FBBF24
  • editorInlayHint.typeBackground#25345773
  • editorInlayHint.typeForeground#22D3EE
  • editorInlineSuggest.background#080D1A
  • editorInlineSuggest.foreground#DDE7F38c
  • editorLineNumber.foreground#64748B
  • editorLink.activeForeground#22D3EE
  • editorMarkerNavigation.background#080D1A
  • editorOverviewRuler.addedForeground#6EE7B7cc
  • editorOverviewRuler.border#050810
  • editorOverviewRuler.currentContentForeground#6EE7B7
  • editorOverviewRuler.deletedForeground#F87171cc
  • editorOverviewRuler.errorForeground#F87171cc
  • editorOverviewRuler.incomingContentForeground#7C8CFF
  • editorOverviewRuler.infoForeground#22D3EEcc
  • editorOverviewRuler.modifiedForeground#22D3EEcc
  • editorOverviewRuler.selectionHighlightForeground#FBBF24
  • editorOverviewRuler.warningForeground#FBBF24cc
  • editorOverviewRuler.wordHighlightForeground#22D3EE
  • editorOverviewRuler.wordHighlightStrongForeground#6EE7B7
  • editorRuler.foreground#DDE7F318
  • editorStickyScroll.background#0B1020
  • editorStickyScrollHover.background#0E1528
  • editorSuggestWidget.background#080D1A
  • editorSuggestWidget.foreground#DDE7F3
  • editorSuggestWidget.selectedBackground#253457
  • editorWarning.foreground#FBBF24
  • editorWhitespace.foreground#DDE7F318
  • editorWidget.background#080D1A
  • errorForeground#F87171
  • extensionButton.prominentBackground#6EE7B7e6
  • extensionButton.prominentForeground#DDE7F3
  • extensionButton.prominentHoverBackground#6EE7B799
  • focusBorder#64748B
  • foreground#DDE7F3
  • gitDecoration.conflictingResourceForeground#FBBF24
  • gitDecoration.deletedResourceForeground#F87171
  • gitDecoration.ignoredResourceForeground#64748B
  • gitDecoration.modifiedResourceForeground#22D3EE
  • gitDecoration.untrackedResourceForeground#6EE7B7
  • inlineChat.background#080D1A
  • inlineChat.border#050810
  • inlineChat.foreground#DDE7F3
  • input.background#0B1020
  • input.border#050810
  • input.foreground#DDE7F3
  • input.placeholderForeground#64748B
  • inputOption.activeBorder#7C8CFF
  • inputValidation.errorBorder#F87171
  • inputValidation.infoBorder#22D3EE
  • inputValidation.warningBorder#FBBF24
  • keybindingLabel.background#25345780
  • keybindingLabel.border#050810
  • keybindingLabel.bottomBorder#050810
  • keybindingLabel.foreground#DDE7F3
  • list.activeSelectionBackground#25345799
  • list.activeSelectionForeground#DDE7F3
  • list.dropBackground#253457
  • list.errorForeground#F87171
  • list.focusBackground#0E1528
  • list.highlightForeground#22D3EE
  • list.hoverBackground#253457a6
  • list.inactiveSelectionBackground#25345766
  • list.warningForeground#FBBF24
  • listFilterWidget.background#070B16
  • listFilterWidget.noMatchesOutline#F87171
  • listFilterWidget.outline#121A30
  • menu.background#070B16
  • menu.border#050810
  • menu.foreground#DDE7F3
  • menu.selectionBackground#253457
  • menu.selectionForeground#DDE7F3
  • menu.separatorBackground#050810
  • merge.currentHeaderBackground#6EE7B7e6
  • merge.incomingHeaderBackground#7C8CFFe6
  • notification.background#0B1020
  • notification.buttonBackground#253457
  • notification.buttonForeground#DDE7F3
  • notification.buttonHoverBackground#0E1528
  • notification.errorBackground#F87171
  • notification.errorForeground#DDE7F3
  • notification.foreground#DDE7F3
  • notification.infoBackground#22D3EE
  • notification.infoForeground#0B1020
  • notification.warningBackground#FBBF24
  • notification.warningForeground#0B1020
  • panel.background#0B1020
  • panel.border#C084FC
  • panelTitle.activeBorder#C084FC
  • panelTitle.activeForeground#DDE7F3
  • panelTitle.inactiveForeground#DDE7F3cc
  • peekView.border#253457
  • peekViewEditor.background#0B1020
  • peekViewEditor.matchHighlightBackground#A7F3D0cc
  • peekViewResult.background#080D1A
  • peekViewResult.fileForeground#DDE7F3
  • peekViewResult.lineForeground#DDE7F3
  • peekViewResult.matchHighlightBackground#A7F3D0cc
  • peekViewResult.selectionBackground#253457
  • peekViewResult.selectionForeground#DDE7F3
  • peekViewTitle.background#050810
  • peekViewTitleDescription.foreground#64748B
  • peekViewTitleLabel.foreground#DDE7F3
  • pickerGroup.border#7C8CFF
  • pickerGroup.foreground#22D3EE
  • progressBar.background#C084FC
  • quickInput.background#080D1A
  • quickInput.foreground#DDE7F3
  • quickInputList.focusBackground#253457
  • quickInputList.focusForeground#DDE7F3
  • quickInputList.focusIconForeground#22D3EE
  • selection.background#7C8CFF
  • settings.checkboxBackground#080D1A
  • settings.checkboxBorder#050810
  • settings.checkboxForeground#DDE7F3
  • settings.dropdownBackground#080D1A
  • settings.dropdownBorder#050810
  • settings.dropdownForeground#DDE7F3
  • settings.headerForeground#DDE7F3
  • settings.modifiedItemForeground#FBBF24
  • settings.modifiedItemIndicator#FBBF24
  • settings.numberInputBackground#080D1A
  • settings.numberInputBorder#050810
  • settings.numberInputForeground#DDE7F3
  • settings.textInputBackground#080D1A
  • settings.textInputBorder#050810
  • settings.textInputForeground#DDE7F3
  • sideBar.background#080D1A
  • sideBar.foreground#DDE7F3
  • sideBarSectionHeader.background#0B1020
  • sideBarSectionHeader.border#050810
  • sideBarTitle.foreground#DDE7F3
  • statusBar.background#050810
  • statusBar.debuggingBackground#F87171
  • statusBar.debuggingForeground#050810
  • statusBar.foreground#DDE7F3
  • statusBar.noFolderBackground#050810
  • statusBar.noFolderForeground#DDE7F3
  • statusBarItem.prominentBackground#F87171
  • statusBarItem.prominentHoverBackground#FBBF24
  • statusBarItem.remoteBackground#7C8CFF
  • statusBarItem.remoteForeground#DDE7F3
  • tab.activeBackground#0B1020
  • tab.activeBorderTop#C084FCcc
  • tab.activeForeground#DDE7F3
  • tab.border#050810
  • tab.inactiveBackground#080D1A
  • tab.inactiveForeground#64748B
  • terminal.ansiBlack#050810
  • terminal.ansiBlue#7C8CFF
  • terminal.ansiBrightBlack#64748B
  • terminal.ansiBrightBlue#93A8FF
  • terminal.ansiBrightCyan#67E8F9
  • terminal.ansiBrightGreen#86EFAC
  • terminal.ansiBrightMagenta#D8B4FE
  • terminal.ansiBrightRed#FB7185
  • terminal.ansiBrightWhite#F0F6FC
  • terminal.ansiBrightYellow#FDE68A
  • terminal.ansiCyan#22D3EE
  • terminal.ansiGreen#6EE7B7
  • terminal.ansiMagenta#C084FC
  • terminal.ansiRed#F87171
  • terminal.ansiWhite#DDE7F3
  • terminal.ansiYellow#A7F3D0
  • terminal.background#0B1020
  • terminal.foreground#DDE7F3
  • terminal.selectionBackground#64748B73
  • terminalCursor.background#050810
  • terminalCursor.foreground#DDE7F3
  • titleBar.activeBackground#080D1A
  • titleBar.activeForeground#DDE7F3
  • titleBar.inactiveBackground#050810
  • titleBar.inactiveForeground#64748B
  • walkThrough.embeddedEditorBackground#080D1A

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
emphasisitalic
strongbold
header#7C8CFF
source#DDE7F3
meta.diff, meta.diff.header#64748B
markup.inserted#6EE7B7
markup.deleted#F87171
markup.changed#FBBF24
invalid#F87171underline italic
invalid.deprecated#DDE7F3underline italic
entity.name.filename#A7F3D0
markup.error#F87171
markup.underlineunderline
markup.bold#FBBF24bold
markup.heading#7C8CFFbold
markup.italic#A7F3D0italic
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#22D3EE
markup.inline.raw, markup.raw.restructuredtext#6EE7B7
markup.underline.link, markup.underline.link.image#22D3EE
meta.link.reference.def.restructuredtext, punctuation.definition.directive.restructuredtext, string.other.link.description, string.other.link.title#C084FC
entity.name.directive.restructuredtext, markup.quote#A7F3D0italic
meta.separator.markdown#64748B
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#6EE7B7
punctuation.definition.constant.restructuredtext#7C8CFF
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#7C8CFF
meta.paragraph.markdown punctuation.definition.string.begin, meta.paragraph.markdown punctuation.definition.string.end#DDE7F3
markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.begin, markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.end#A7F3D0
entity.name.type.class, entity.name.class#22D3EEnormal
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#7C8CFFitalic
entity.other.inherited-class#22D3EEitalic
comment, punctuation.definition.comment, unused.comment, wildcard.comment#64748B
comment keyword.codetag.notation, comment.block.documentation keyword, comment.block.documentation storage.type.class#C084FC
comment.block.documentation entity.name.type#22D3EEitalic
comment.block.documentation entity.name.type punctuation.definition.bracket#22D3EE
comment.block.documentation variable#FBBF24italic
constant, variable.other.constant#7C8CFF
constant.character.escape, constant.character.string.escape, constant.regexp#C084FC
entity.name.tag#C084FC
entity.other.attribute-name.parent-selector#C084FC
entity.other.attribute-name.id#A7F3D0italic
entity.other.attribute-name#6EE7B7italic
meta.tag.inline source#A7F3D0
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#6EE7B7
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#FBBF24italic
meta.decorator variable.other.readwrite, meta.decorator variable.other.property#6EE7B7italic
meta.decorator variable.other.object#6EE7B7
keyword, punctuation.definition.keyword#C084FC
keyword.control.new, keyword.operator.newbold
meta.selector#C084FC
support#22D3EEitalic
support.function.magic, support.variable, variable.other.predefined#7C8CFFregular
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#C084FC
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#DDE7F3
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#C084FC
entity.name.function.target.makefile, entity.name.section.toml, entity.name.tag.yaml, variable.other.key.toml#22D3EE
constant.other.date, constant.other.timestamp#FBBF24
variable.other.alias.yaml#6EE7B7italic underline
storage, meta.implementation storage.type.objc, meta.interface-or-protocol storage.type.objc, source.groovy storage.type.def#C084FCregular
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#22D3EEitalic
entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#FBBF24
storage.modifier#C084FC
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#A7F3D0
punctuation.definition.group.capture.regexp#C084FC
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#F87171
punctuation.definition.character-class.regexp#22D3EE
punctuation.definition.group.regexp#FBBF24
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#F87171
meta.assertion.look-ahead.regexp#6EE7B7
string#A7F3D0
punctuation.definition.string.begin, punctuation.definition.string.end#A7F3D0
punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end#7C8CFF
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#64748B
variable, constant.other.key.perl, support.variable.property, variable.other.constant.js, variable.other.constant.ts, variable.other.constant.tsx#DDE7F3
meta.import variable.other.readwrite, meta.object-binding-pattern-variable variable.object.property, meta.variable.assignment.destructured.object.coffee variable#FBBF24italic
meta.import variable.other.readwrite.alias, meta.export variable.other.readwrite.alias, meta.variable.assignment.destructured.object.coffee variable variable#DDE7F3normal
meta.selectionset.graphql variable#A7F3D0
meta.selectionset.graphql meta.arguments variable#DDE7F3
entity.name.fragment.graphql, variable.fragment.graphql#22D3EE
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.section.embedded.begin.html, punctuation.section.embedded.end.html#C084FC
meta.embedded.line.cshtml, source.cs meta.embedded.line, string.quoted.double.cshtml, entity.name.tag.cshtml#22D3EE
keyword.other.DML.sql, keyword.other.DDL.create.II.sql, keyword.other.DDL.create.sql, keyword.other.DDL.sql, keyword.other.sql#C084FC
support.function.sql, support.type.sql#22D3EEitalic
string.quoted.single.sql, string.quoted.double.sql#A7F3D0
support.type.property-name.json#22D3EE
constant.numeric.json, constant.language.json#FBBF24
entity.name.type.interface, entity.name.type.alias, support.type.builtin.ts, support.type.primitive.ts, support.type.builtin.tsx, support.type.primitive.tsx#22D3EEitalic
entity.name.namespace, entity.name.scope-resolution#7C8CFF
keyword.operator, keyword.operator.arithmetic, keyword.operator.logical#C084FC
constant.language.boolean, constant.language.null, constant.language.undefined#7C8CFFitalic
constant.numeric, constant.numeric.integer, constant.numeric.float#FBBF24
support.type.property-name.css, meta.property-name.css#22D3EE
support.constant.property-value.css, constant.other.color.rgb-value.css#A7F3D0