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.activeBorder#00AD9E
  • activityBar.background#0E1E25
  • activityBar.foreground#E9ECEF
  • activityBar.inactiveForeground#6F7C88
  • activityBarBadge.background#00AD9E
  • activityBarBadge.foreground#E9ECEF
  • badge.background#3E4B58
  • badge.foreground#E9ECEF
  • breadcrumb.activeSelectionForeground#E9ECEF
  • breadcrumb.background#071113
  • breadcrumb.focusForeground#E9ECEF
  • breadcrumb.foreground#6F7C88
  • breadcrumbPicker.background#071113
  • button.background#3E4B58
  • button.foreground#E9ECEF
  • contrastBorder#071113
  • debugToolBar.background#0B181C
  • diffEditor.insertedTextBackground#A5D06920
  • diffEditor.removedTextBackground#F7737350
  • dropdown.background#0E1E25
  • dropdown.border#071113
  • dropdown.foreground#E9ECEF
  • editor.background#071113
  • editor.findMatchBackground#FFA25F80
  • editor.findMatchHighlightBackground#E9ECEF40
  • editor.findRangeHighlightBackground#172730
  • editor.foldBackground#0B181C
  • editor.foreground#E9ECEF
  • editor.hoverHighlightBackground#071113
  • editor.lineHighlightBackground#0E1E25
  • editor.rangeHighlightBackground#9174F715
  • editor.selectionBackground#3E4B58
  • editor.selectionHighlightBackground#172730
  • editor.snippetFinalTabstopHighlightBackground#071113
  • editor.snippetFinalTabstopHighlightBorder#A5D069
  • editor.snippetTabstopHighlightBackground#071113
  • editor.snippetTabstopHighlightBorder#6F7C88
  • editor.wordHighlightBackground#2ACEC050
  • editor.wordHighlightStrongBackground#A5D06950
  • editorCodeLens.foreground#6F7C88
  • editorError.foreground#F77373
  • editorGroup.background#071113
  • editorGroup.border#1E2E39
  • editorGroup.dropBackground#0B181C
  • editorGroupHeader.noTabsBackground#0B181C
  • editorGroupHeader.tabsBackground#071113
  • editorGroupHeader.tabsBorder#071113
  • editorGutter.addedBackground#A5D06980
  • editorGutter.deletedBackground#F7737380
  • editorGutter.modifiedBackground#2ACEC080
  • editorHoverWidget.background#071113
  • editorHoverWidget.border#6F7C88
  • editorIndentGuide.activeBackground#E9ECEF45
  • editorIndentGuide.background#E9ECEF10
  • editorLineNumber.foreground#6F7C88
  • editorLink.activeForeground#2ACEC0
  • editorMarkerNavigation.background#0B181C
  • editorOverviewRuler.addedForeground#A5D06980
  • editorOverviewRuler.border#071113
  • editorOverviewRuler.currentContentForeground#A5D069
  • editorOverviewRuler.deletedForeground#F7737380
  • editorOverviewRuler.errorForeground#F7737380
  • editorOverviewRuler.incomingContentForeground#9174F7
  • editorOverviewRuler.infoForeground#2ACEC080
  • editorOverviewRuler.modifiedForeground#2ACEC080
  • editorOverviewRuler.selectionHighlightForeground#FFA25F
  • editorOverviewRuler.warningForeground#FFA25F80
  • editorOverviewRuler.wordHighlightForeground#2ACEC0
  • editorOverviewRuler.wordHighlightStrongForeground#A5D069
  • editorRuler.foreground#E9ECEF10
  • editorSuggestWidget.background#0B181C
  • editorSuggestWidget.foreground#E9ECEF
  • editorSuggestWidget.selectedBackground#3E4B58
  • editorWarning.foreground#FFD050
  • editorWhitespace.foreground#E9ECEF10
  • editorWidget.background#0E1E25
  • errorForeground#F77373
  • extensionButton.prominentBackground#A5D06990
  • extensionButton.prominentForeground#E9ECEF
  • extensionButton.prominentHoverBackground#A5D06960
  • focusBorder#FFFFFF00
  • foreground#E9ECEF
  • gitDecoration.conflictingResourceForeground#FFA25F
  • gitDecoration.deletedResourceForeground#F77373
  • gitDecoration.ignoredResourceForeground#6F7C88
  • gitDecoration.modifiedResourceForeground#2ACEC0
  • gitDecoration.untrackedResourceForeground#A5D069
  • input.background#071113
  • input.border#071113
  • input.foreground#E9ECEF
  • input.placeholderForeground#6F7C88
  • inputOption.activeBorder#00AD9E
  • inputValidation.errorBorder#F77373
  • inputValidation.infoBorder#9174F7
  • inputValidation.warningBorder#FFD050
  • list.activeSelectionBackground#3E4B58
  • list.activeSelectionForeground#E9ECEF
  • list.dropBackground#3E4B58
  • list.errorForeground#F77373
  • list.focusBackground#172730
  • list.highlightForeground#2ACEC0
  • list.hoverBackground#172730
  • list.inactiveSelectionBackground#172730
  • list.warningForeground#FFA25F
  • listFilterWidget.background#0E1E25
  • listFilterWidget.noMatchesOutline#F77373
  • listFilterWidget.outline#172730
  • merge.currentHeaderBackground#A5D06990
  • merge.incomingHeaderBackground#9174F790
  • notification.background#071113
  • notification.buttonBackground#3E4B58
  • notification.buttonForeground#E9ECEF
  • notification.buttonHoverBackground#172730
  • notification.errorBackground#F77373
  • notification.errorForeground#E9ECEF
  • notification.foreground#E9ECEF
  • notification.infoBackground#2ACEC0
  • notification.infoForeground#071113
  • notification.warningBackground#FFA25F
  • notification.warningForeground#071113
  • panel.background#071113
  • panel.border#1E2E39
  • panelTitle.activeBorder#00AD9E
  • panelTitle.activeForeground#E9ECEF
  • panelTitle.inactiveForeground#6F7C88
  • peekView.border#3E4B58
  • peekViewEditor.background#071113
  • peekViewEditor.matchHighlightBackground#FFD05080
  • peekViewResult.background#0B181C
  • peekViewResult.fileForeground#E9ECEF
  • peekViewResult.lineForeground#E9ECEF
  • peekViewResult.matchHighlightBackground#FFD05080
  • peekViewResult.selectionBackground#3E4B58
  • peekViewResult.selectionForeground#E9ECEF
  • peekViewTitle.background#071113
  • peekViewTitleDescription.foreground#6F7C88
  • peekViewTitleLabel.foreground#E9ECEF
  • pickerGroup.border#1E2E39
  • pickerGroup.foreground#2ACEC0
  • progressBar.background#00AD9E
  • selection.background#00AD9E
  • settings.checkboxBackground#0E1E25
  • settings.checkboxBorder#0E1E25
  • settings.checkboxForeground#E9ECEF
  • settings.dropdownBackground#0E1E25
  • settings.dropdownBorder#0E1E25
  • settings.dropdownForeground#E9ECEF
  • settings.headerForeground#E9ECEF
  • settings.modifiedItemForeground#00AD9E
  • settings.modifiedItemIndicator#00AD9E
  • settings.numberInputBackground#0E1E25
  • settings.numberInputBorder#0E1E25
  • settings.numberInputForeground#E9ECEF
  • settings.textInputBackground#0E1E25
  • settings.textInputBorder#1E2E39
  • settings.textInputForeground#E9ECEF
  • sideBar.background#0B181C
  • sideBarSectionHeader.background#0B181C
  • sideBarSectionHeader.border#1E2E39
  • sideBarTitle.foreground#E9ECEF
  • statusBar.background#0E1E25
  • statusBar.border#1E2E39
  • statusBar.debuggingBackground#F77373
  • statusBar.debuggingForeground#071113
  • statusBar.foreground#E9ECEF
  • statusBar.noFolderBackground#071113
  • statusBar.noFolderForeground#E9ECEF
  • statusBarItem.prominentBackground#F77373
  • statusBarItem.prominentHoverBackground#FFA25F
  • statusBarItem.remoteBackground#9174F7
  • statusBarItem.remoteForeground#E9ECEF
  • tab.activeBackground#071113
  • tab.activeBorder#00AD9E
  • tab.activeForeground#E9ECEF
  • tab.border#071113
  • tab.inactiveBackground#071113
  • tab.inactiveForeground#6F7C88
  • terminal.ansiBlack#212A35
  • terminal.ansiBlue#9174F7
  • terminal.ansiBrightBlack#6F7C88
  • terminal.ansiBrightBlue#BAA6FF
  • terminal.ansiBrightCyan#78F0E6
  • terminal.ansiBrightGreen#CDECA1
  • terminal.ansiBrightMagenta#F5A8E3
  • terminal.ansiBrightRed#FFA5A5
  • terminal.ansiBrightWhite#FFFFFF
  • terminal.ansiBrightYellow#FFE98D
  • terminal.ansiCyan#2ACEC0
  • terminal.ansiGreen#A5D069
  • terminal.ansiMagenta#DF76C7
  • terminal.ansiRed#F77373
  • terminal.ansiWhite#E9ECEF
  • terminal.ansiYellow#FFD050
  • terminal.background#071113
  • terminal.foreground#E9ECEF
  • titleBar.activeBackground#172730
  • titleBar.activeForeground#E9ECEF
  • titleBar.inactiveBackground#0E1E25
  • titleBar.inactiveForeground#6F7C88
  • walkThrough.embeddedEditorBackground#0B181C
  • widget.shadow#000000

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
emphasisitalic
strongbold
header#9174F7
source#E9ECEF
meta.diff, meta.diff.header#6F7C88
markup.inserted#A5D069
markup.deleted#F77373
markup.changed#FFA25F
invalid#F77373underline italic
invalid.deprecated#E9ECEFunderline italic
entity.name.filename#FFD050
markup.error#F77373
markup.underlineunderline
markup.bold#FFA25Fbold
markup.heading#9174F7bold
markup.italic#FFD050italic
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#2ACEC0
markup.inline.raw, markup.raw.restructuredtext#A5D069
markup.underline.link, markup.underline.link.image#2ACEC0
meta.link.reference.def.restructuredtext, punctuation.definition.directive.restructuredtext, string.other.link.description, string.other.link.title#DF76C7
entity.name.directive.restructuredtext, markup.quote#FFD050italic
meta.separator.markdown#6F7C88
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#A5D069
punctuation.definition.constant.restructuredtext#9174F7
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#9174F7
meta.paragraph.markdown punctuation.definition.string.begin, meta.paragraph.markdown punctuation.definition.string.end#E9ECEF
markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.begin, markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.end#FFD050
entity.name.type.class, entity.name.class#2ACEC0normal
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#9174F7italic
entity.other.inherited-class#2ACEC0italic
comment, punctuation.definition.comment, unused.comment, wildcard.comment#6F7C88
comment keyword.codetag.notation, comment.block.documentation keyword, comment.block.documentation storage.type.class#DF76C7
comment.block.documentation entity.name.type#2ACEC0italic
comment.block.documentation entity.name.type punctuation.definition.bracket#2ACEC0
comment.block.documentation variable#FFA25Fitalic
constant, variable.other.constant#E9ECEF
constant.character.escape, constant.character.string.escape, constant.regexp#DF76C7
entity.name.tag#FFD050
entity.other.attribute-name.parent-selector#DF76C7
entity.other.attribute-name#69A7FFitalic
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#FFD050
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#FFA25Fitalic
meta.decorator variable.other.readwrite, meta.decorator variable.other.property#FFD050italic
meta.decorator variable.other.object#FFD050
keyword, punctuation.definition.keyword#2ACEC0
keyword.control.new, keyword.operator.newbold
meta.selector#DF76C7
support#FFD050italic
support.function.magic, support.variable, variable.other.predefined#9174F7regular
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#E9ECEF
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#E9ECEF
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#DF76C7
entity.name.function.target.makefile, entity.name.section.toml, entity.name.tag.yaml, variable.other.key.toml#2ACEC0
constant.other.date, constant.other.timestamp#FFA25F
variable.other.alias.yaml#A5D069italic underline
storage, meta.implementation storage.type.objc, meta.interface-or-protocol storage.type.objc, source.groovy storage.type.def#DF76C7regular
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#2ACEC0italic
entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#FFA25F
storage.modifier#DF76C7
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#FFD050
punctuation.definition.group.capture.regexp#DF76C7
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#F77373
punctuation.definition.character-class.regexp#2ACEC0
punctuation.definition.group.regexp#FFA25F
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#F77373
meta.assertion.look-ahead.regexp#A5D069
string#9174F7
punctuation.definition.string.begin, punctuation.definition.string.end#A5D069
punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end#2ACEC0
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#6F7C88
variable, constant.other.key.perl, support.variable.property, variable.other.constant.js, variable.other.constant.ts, variable.other.constant.tsx#E9ECEF
meta.import variable.other.readwrite, meta.object-binding-pattern-variable variable.object.property, meta.variable.assignment.destructured.object.coffee variable#FFA25Fitalic
meta.import variable.other.readwrite.alias, meta.export variable.other.readwrite.alias, meta.variable.assignment.destructured.object.coffee variable variable#E9ECEFnormal
meta.selectionset.graphql variable#FFD050
meta.selectionset.graphql meta.arguments variable#E9ECEF
entity.name.fragment.graphql, variable.fragment.graphql#2ACEC0
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#E9ECEF
source.shell variable.other#9174F7
support.constant#9174F7normal
meta.scope.prerequisites.makefile#FFD050
meta.attribute-selector.scss#FFD050
punctuation.definition.attribute-selector.end.bracket.square.scss, punctuation.definition.attribute-selector.begin.bracket.square.scss#E9ECEF
meta.preprocessor.haskell#6F7C88