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#b2a8e710
  • activityBar.activeBorder#ef719080
  • activityBar.background#2D2A2E
  • activityBar.foreground#fbfbfb
  • activityBar.inactiveForeground#717171
  • activityBarBadge.background#ef7190
  • activityBarBadge.foreground#fbfbfb
  • badge.background#403E41
  • badge.foreground#fbfbfb
  • breadcrumb.activeSelectionForeground#fbfbfb
  • breadcrumb.background#2D2A2E
  • breadcrumb.focusForeground#fbfbfb
  • breadcrumb.foreground#717171
  • breadcrumbPicker.background#1A1A1C
  • button.background#403E41
  • button.foreground#fbfbfb
  • contrastBorder#1A1A1C
  • debugToolBar.background#211F22
  • diffEditor.insertedTextBackground#a9cb8720
  • diffEditor.removedTextBackground#ee666650
  • dropdown.background#2D2A2E
  • dropdown.border#1A1A1C
  • dropdown.foreground#fbfbfb
  • editor.background#2D2A2E
  • editor.findMatchBackground#FC986780
  • editor.findMatchHighlightBackground#ffffff40
  • editor.findRangeHighlightBackground#2D2A2E75
  • editor.foldBackground#211F22
  • editor.foreground#fbfbfb
  • editor.hoverHighlightBackground#88d0d850
  • editor.lineHighlightBorder#403E41
  • editor.rangeHighlightBackground#b2a8e715
  • editor.selectionBackground#403E41
  • editor.selectionHighlightBackground#3D3B40
  • editor.snippetFinalTabstopHighlightBackground#2D2A2E
  • editor.snippetFinalTabstopHighlightBorder#a9cb87
  • editor.snippetTabstopHighlightBackground#2D2A2E
  • editor.snippetTabstopHighlightBorder#717171
  • editor.wordHighlightBackground#88d0d850
  • editor.wordHighlightStrongBackground#a9cb8750
  • editorCodeLens.foreground#717171
  • editorError.foreground#ee6666
  • editorGroup.Border#3D3B40
  • editorGroup.dropBackground#2D2A2E70
  • editorGroupHeader.tabsBackground#1A1A1C
  • editorGutter.addedBackground#a9cb8780
  • editorGutter.deletedBackground#ee666680
  • editorGutter.modifiedBackground#88d0d880
  • editorHoverWidget.background#2D2A2E
  • editorHoverWidget.border#717171
  • editorIndentGuide.activeBackground#ffffff45
  • editorIndentGuide.background#ffffff1A
  • editorLineNumber.foreground#717171
  • editorLink.activeForeground#88d0d8
  • editorMarkerNavigation.background#211F22
  • editorOverviewRuler.addedForeground#a9cb8780
  • editorOverviewRuler.border#1A1A1C
  • editorOverviewRuler.currentContentForeground#a9cb87
  • editorOverviewRuler.deletedForeground#ee666680
  • editorOverviewRuler.errorForeground#ee666680
  • editorOverviewRuler.incomingContentForeground#b2a8e7
  • editorOverviewRuler.infoForeground#88d0d880
  • editorOverviewRuler.modifiedForeground#88d0d880
  • editorOverviewRuler.selectionHighlightForeground#FC9867
  • editorOverviewRuler.warningForeground#FC986780
  • editorOverviewRuler.wordHighlightForeground#88d0d8
  • editorOverviewRuler.wordHighlightStrongForeground#a9cb87
  • editorRuler.foreground#ffffff1A
  • editorSuggestWidget.background#211F22
  • editorSuggestWidget.foreground#fbfbfb
  • editorSuggestWidget.selectedBackground#403E41
  • editorWarning.foreground#88d0d8
  • editorWhitespace.foreground#ffffff1A
  • editorWidget.background#211F22
  • errorForeground#ee6666
  • extensionButton.prominentBackground#a9cb8790
  • extensionButton.prominentForeground#fbfbfb
  • extensionButton.prominentHoverBackground#a9cb8760
  • focusBorder#717171
  • foreground#fbfbfb
  • gitDecoration.conflictingResourceForeground#FC9867
  • gitDecoration.deletedResourceForeground#ee6666
  • gitDecoration.ignoredResourceForeground#717171
  • gitDecoration.modifiedResourceForeground#88d0d8
  • gitDecoration.untrackedResourceForeground#a9cb87
  • input.background#2D2A2E
  • input.border#1A1A1C
  • input.foreground#fbfbfb
  • input.placeholderForeground#717171
  • inputOption.activeBorder#3D3B40
  • inputValidation.errorBorder#ee6666
  • inputValidation.infoBorder#ef7190
  • inputValidation.warningBorder#FC9867
  • list.activeSelectionBackground#403E41
  • list.activeSelectionForeground#fbfbfb
  • list.dropBackground#403E41
  • list.errorForeground#ee6666
  • list.focusBackground#2D2A2E75
  • list.highlightForeground#88d0d8
  • list.hoverBackground#2D2A2E75
  • list.inactiveSelectionBackground#2D2A2E75
  • list.warningForeground#FC9867
  • listFilterWidget.background#2D2A2E
  • listFilterWidget.noMatchesOutline#ee6666
  • listFilterWidget.outline#3D3B40
  • merge.currentHeaderBackground#a9cb8790
  • merge.incomingHeaderBackground#b2a8e790
  • notification.background#2D2A2E
  • notification.buttonBackground#403E41
  • notification.buttonForeground#fbfbfb
  • notification.buttonHoverBackground#2D2A2E75
  • notification.errorBackground#ee6666
  • notification.errorForeground#fbfbfb
  • notification.foreground#fbfbfb
  • notification.infoBackground#88d0d8
  • notification.infoForeground#2D2A2E
  • notification.warningBackground#FC9867
  • notification.warningForeground#2D2A2E
  • panel.background#2D2A2E
  • panel.Border#3D3B40
  • panelTitle.activeBorder#ef7190
  • panelTitle.activeForeground#fbfbfb
  • panelTitle.inactiveForeground#717171
  • peekView.border#403E41
  • peekViewEditor.background#2D2A2E
  • peekViewEditor.matchHighlightBackground#f0d17580
  • peekViewResult.background#211F22
  • peekViewResult.fileForeground#fbfbfb
  • peekViewResult.lineForeground#fbfbfb
  • peekViewResult.matchHighlightBackground#f0d17580
  • peekViewResult.selectionBackground#403E41
  • peekViewResult.selectionForeground#fbfbfb
  • peekViewTitle.background#1A1A1C
  • peekViewTitleDescription.foreground#717171
  • peekViewTitleLabel.foreground#fbfbfb
  • pickerGroup.Border#3D3B40
  • pickerGroup.foreground#88d0d8
  • progressBar.background#ef7190
  • selection.background#b2a8e7
  • settings.checkboxBackground#211F22
  • settings.checkboxBorder#1A1A1C
  • settings.checkboxForeground#fbfbfb
  • settings.dropdownBackground#211F22
  • settings.dropdownBorder#1A1A1C
  • settings.dropdownForeground#fbfbfb
  • settings.headerForeground#fbfbfb
  • settings.modifiedItemForeground#FC9867
  • settings.modifiedItemIndicator#FC9867
  • settings.numberInputBackground#211F22
  • settings.numberInputBorder#1A1A1C
  • settings.numberInputForeground#fbfbfb
  • settings.textInputBackground#211F22
  • settings.textInputBorder#1A1A1C
  • settings.textInputForeground#fbfbfb
  • sideBar.background#211F22
  • sideBarSectionHeader.background#2D2A2E
  • sideBarSectionHeader.border#1A1A1C
  • sideBarTitle.foreground#fbfbfb
  • statusBar.background#1A1A1C
  • statusBar.debuggingBackground#ee6666
  • statusBar.debuggingForeground#1A1A1C
  • statusBar.foreground#fbfbfb
  • statusBar.noFolderBackground#1A1A1C
  • statusBar.noFolderForeground#fbfbfb
  • statusBarItem.prominentBackground#ee6666
  • statusBarItem.prominentHoverBackground#FC9867
  • statusBarItem.remoteBackground#b2a8e7
  • statusBarItem.remoteForeground#fbfbfb
  • tab.activeBackground#2D2A2E
  • tab.activeBorderTop#ef719080
  • tab.activeForeground#fbfbfb
  • tab.border#1A1A1C
  • tab.inactiveBackground#211F22
  • tab.inactiveForeground#717171
  • terminal.ansiBlack#262626
  • terminal.ansiBlue#b2a8e7
  • terminal.ansiBrightBlack#717171
  • terminal.ansiBrightBlue#d6b4f7
  • terminal.ansiBrightCyan#adf6f6
  • terminal.ansiBrightGreen#78f09a
  • terminal.ansiBrightMagenta#f49dda
  • terminal.ansiBrightRed#f07c7c
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#f6f6ae
  • terminal.ansiCyan#88d0d8
  • terminal.ansiGreen#a9cb87
  • terminal.ansiMagenta#ef7190
  • terminal.ansiRed#ee6666
  • terminal.ansiWhite#fbfbfb
  • terminal.ansiYellow#f0d175
  • terminal.background#2D2A2E
  • terminal.foreground#fbfbfb
  • titleBar.activeBackground#211F22
  • titleBar.activeForeground#fbfbfb
  • titleBar.inactiveBackground#1A1A1C
  • titleBar.inactiveForeground#717171
  • walkThrough.embeddedEditorBackground#211F22

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
emphasisitalic
strongbold
header#b2a8e7
source#fbfbfb
meta.diff, meta.diff.header#717171
markup.inserted#a9cb87
markup.deleted#ee6666
markup.changed#FC9867
invalid#ee6666underline italic
invalid.deprecated#fbfbfbunderline italic
entity.name.filename#f0d175
markup.error#ee6666
markup.underlineunderline
markup.bold#FC9867bold
markup.heading#b2a8e7bold
markup.italic#f0d175italic
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#88d0d8
markup.inline.raw, markup.raw.restructuredtext#a9cb87
markup.underline.link, markup.underline.link.image#88d0d8
meta.link.reference.def.restructuredtext, punctuation.definition.directive.restructuredtext, string.other.link.description, string.other.link.title#ef7190
entity.name.directive.restructuredtext, markup.quote#f0d175italic
meta.separator.markdown#717171
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#a9cb87
punctuation.definition.constant.restructuredtext#b2a8e7
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#b2a8e7
meta.paragraph.markdown punctuation.definition.string.begin, meta.paragraph.markdown punctuation.definition.string.end#fbfbfb
markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.begin, markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.end#f0d175
entity.name.type.class, entity.name.class#88d0d8normal
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#b2a8e7italic
entity.other.inherited-class#88d0d8italic
comment, punctuation.definition.comment, unused.comment, wildcard.comment#717171
comment keyword.codetag.notation, comment.block.documentation keyword, comment.block.documentation storage.type.class#ef7190
comment.block.documentation entity.name.type#88d0d8italic
comment.block.documentation entity.name.type punctuation.definition.bracket#88d0d8
comment.block.documentation variable#FC9867italic
constant, variable.other.constant#b2a8e7
constant.character.escape, constant.character.string.escape, constant.regexp#ef7190
entity.name.tag#ef7190
entity.other.attribute-name.parent-selector#ef7190
entity.other.attribute-name#a9cb87italic
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#a9cb87
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#FC9867italic
meta.decorator variable.other.readwrite, meta.decorator variable.other.property#a9cb87italic
meta.decorator variable.other.object#a9cb87
keyword, punctuation.definition.keyword#ef7190
keyword.control.new, keyword.operator.newbold
meta.selector#ef7190
support#88d0d8italic
support.function.magic, support.variable, variable.other.predefined#b2a8e7regular
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#ef7190
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#fbfbfb
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#ef7190
entity.name.function.target.makefile, entity.name.section.toml, entity.name.tag.yaml, variable.other.key.toml#88d0d8
constant.other.date, constant.other.timestamp#FC9867
variable.other.alias.yaml#a9cb87italic underline
storage, meta.implementation storage.type.objc, meta.interface-or-protocol storage.type.objc, source.groovy storage.type.def#ef7190regular
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#88d0d8italic
entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#FC9867
storage.modifier#ef7190
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#f0d175
punctuation.definition.group.capture.regexp#ef7190
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#ee6666
punctuation.definition.character-class.regexp#88d0d8
punctuation.definition.group.regexp#FC9867
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#ee6666
meta.assertion.look-ahead.regexp#a9cb87
string#f0d175
punctuation.definition.string.begin, punctuation.definition.string.end#dee492
punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end#97e2f2
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#717171
variable, constant.other.key.perl, support.variable.property, variable.other.constant.js, variable.other.constant.ts, variable.other.constant.tsx#fbfbfb
meta.import variable.other.readwrite, meta.object-binding-pattern-variable variable.object.property, meta.variable.assignment.destructured.object.coffee variable#FC9867italic
meta.import variable.other.readwrite.alias, meta.export variable.other.readwrite.alias, meta.variable.assignment.destructured.object.coffee variable variable#fbfbfbnormal
meta.selectionset.graphql variable#f0d175
meta.selectionset.graphql meta.arguments variable#fbfbfb
entity.name.fragment.graphql, variable.fragment.graphql#88d0d8
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#fbfbfb
source.shell variable.other#b2a8e7
support.constant#b2a8e7normal
meta.scope.prerequisites.makefile#f0d175
meta.attribute-selector.scss#f0d175
punctuation.definition.attribute-selector.end.bracket.square.scss, punctuation.definition.attribute-selector.begin.bracket.square.scss#fbfbfb
meta.preprocessor.haskell#717171