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#A480FF10
  • activityBar.activeBorder#FF6B9D80
  • activityBar.background#1E3A4A
  • activityBar.foreground#F5F5F5
  • activityBar.inactiveForeground#7A8C99
  • activityBarBadge.background#FF6B9D
  • activityBarBadge.foreground#F5F5F5
  • badge.background#7A8C99
  • badge.foreground#F5F5F5
  • breadcrumb.activeSelectionForeground#F5F5F5
  • breadcrumb.background#121212
  • breadcrumb.focusForeground#F5F5F5
  • breadcrumb.foreground#7A8C99
  • breadcrumbPicker.background#0A0A0A
  • button.background#7A8C99
  • button.foreground#F5F5F5
  • contrastBorder#0A0A0A
  • debugToolBar.background#121A24
  • diffEditor.insertedTextBackground#00B46E20
  • diffEditor.removedTextBackground#FF5C5750
  • dropdown.background#1E3A4A
  • dropdown.border#0A0A0A
  • dropdown.foreground#F5F5F5
  • editor.background#121212
  • editor.findMatchBackground#FF9D4580
  • editor.findMatchHighlightBackground#FFFFFF40
  • editor.findRangeHighlightBackground#7A8C9975
  • editor.foldBackground#121A24
  • editor.foreground#F5F5F5
  • editor.hoverHighlightBackground#25D0D050
  • editor.lineHighlightBorder#7A8C99
  • editor.rangeHighlightBackground#A480FF15
  • editor.selectionBackground#7A8C99
  • editor.selectionHighlightBackground#333333
  • editor.snippetFinalTabstopHighlightBackground#121212
  • editor.snippetFinalTabstopHighlightBorder#00B46E
  • editor.snippetTabstopHighlightBackground#121212
  • editor.snippetTabstopHighlightBorder#7A8C99
  • editor.wordHighlightBackground#25D0D050
  • editor.wordHighlightStrongBackground#00B46E50
  • editorCodeLens.foreground#7A8C99
  • editorError.foreground#FF5C57
  • editorGroup.border#A480FF
  • editorGroup.dropBackground#7A8C9970
  • editorGroupHeader.tabsBackground#0A0A0A
  • editorGutter.addedBackground#00B46E80
  • editorGutter.deletedBackground#FF5C5780
  • editorGutter.modifiedBackground#25D0D080
  • editorHoverWidget.background#121212
  • editorHoverWidget.border#7A8C99
  • editorIndentGuide.activeBackground#FFFFFF45
  • editorIndentGuide.background#FFFFFF1A
  • editorLineNumber.foreground#7A8C99
  • editorLink.activeForeground#25D0D0
  • editorMarkerNavigation.background#121A24
  • editorOverviewRuler.addedForeground#00B46E80
  • editorOverviewRuler.border#0A0A0A
  • editorOverviewRuler.currentContentForeground#00B46E
  • editorOverviewRuler.deletedForeground#FF5C5780
  • editorOverviewRuler.errorForeground#FF5C5780
  • editorOverviewRuler.incomingContentForeground#A480FF
  • editorOverviewRuler.infoForeground#25D0D080
  • editorOverviewRuler.modifiedForeground#25D0D080
  • editorOverviewRuler.selectionHighlightForeground#FF9D45
  • editorOverviewRuler.warningForeground#FF9D4580
  • editorOverviewRuler.wordHighlightForeground#25D0D0
  • editorOverviewRuler.wordHighlightStrongForeground#00B46E
  • editorRuler.foreground#FFFFFF1A
  • editorSuggestWidget.background#121A24
  • editorSuggestWidget.foreground#F5F5F5
  • editorSuggestWidget.selectedBackground#7A8C99
  • editorWarning.foreground#25D0D0
  • editorWhitespace.foreground#FFFFFF1A
  • editorWidget.background#121A24
  • errorForeground#FF5C57
  • extensionButton.prominentBackground#00B46E90
  • extensionButton.prominentForeground#F5F5F5
  • extensionButton.prominentHoverBackground#00B46E60
  • focusBorder#7A8C99
  • foreground#F5F5F5
  • gitDecoration.conflictingResourceForeground#FF9D45
  • gitDecoration.deletedResourceForeground#FF5C57
  • gitDecoration.ignoredResourceForeground#7A8C99
  • gitDecoration.modifiedResourceForeground#25D0D0
  • gitDecoration.untrackedResourceForeground#00B46E
  • input.background#121212
  • input.border#0A0A0A
  • input.foreground#F5F5F5
  • input.placeholderForeground#7A8C99
  • inputOption.activeBorder#A480FF
  • inputValidation.errorBorder#FF5C57
  • inputValidation.infoBorder#FF6B9D
  • inputValidation.warningBorder#FF9D45
  • list.activeSelectionBackground#7A8C99
  • list.activeSelectionForeground#F5F5F5
  • list.dropBackground#7A8C99
  • list.errorForeground#FF5C57
  • list.focusBackground#7A8C9975
  • list.highlightForeground#25D0D0
  • list.hoverBackground#7A8C9975
  • list.inactiveSelectionBackground#7A8C9975
  • list.warningForeground#FF9D45
  • listFilterWidget.background#1E3A4A
  • listFilterWidget.noMatchesOutline#FF5C57
  • listFilterWidget.outline#333333
  • merge.currentHeaderBackground#00B46E90
  • merge.incomingHeaderBackground#A480FF90
  • notification.background#121212
  • notification.buttonBackground#7A8C99
  • notification.buttonForeground#F5F5F5
  • notification.buttonHoverBackground#7A8C9975
  • notification.errorBackground#FF5C57
  • notification.errorForeground#F5F5F5
  • notification.foreground#F5F5F5
  • notification.infoBackground#25D0D0
  • notification.infoForeground#121212
  • notification.warningBackground#FF9D45
  • notification.warningForeground#121212
  • panel.background#121212
  • panel.border#A480FF
  • panelTitle.activeBorder#FF6B9D
  • panelTitle.activeForeground#F5F5F5
  • panelTitle.inactiveForeground#7A8C99
  • peekView.border#7A8C99
  • peekViewEditor.background#121212
  • peekViewEditor.matchHighlightBackground#FFD86680
  • peekViewResult.background#121A24
  • peekViewResult.fileForeground#F5F5F5
  • peekViewResult.lineForeground#F5F5F5
  • peekViewResult.matchHighlightBackground#FFD86680
  • peekViewResult.selectionBackground#7A8C99
  • peekViewResult.selectionForeground#F5F5F5
  • peekViewTitle.background#0A0A0A
  • peekViewTitleDescription.foreground#7A8C99
  • peekViewTitleLabel.foreground#F5F5F5
  • pickerGroup.border#A480FF
  • pickerGroup.foreground#25D0D0
  • progressBar.background#FF6B9D
  • selection.background#1E3A4A
  • settings.checkboxBackground#121A24
  • settings.checkboxBorder#0A0A0A
  • settings.checkboxForeground#F5F5F5
  • settings.dropdownBackground#121A24
  • settings.dropdownBorder#0A0A0A
  • settings.dropdownForeground#F5F5F5
  • settings.headerForeground#F5F5F5
  • settings.modifiedItemForeground#FF9D45
  • settings.modifiedItemIndicator#FF9D45
  • settings.numberInputBackground#121A24
  • settings.numberInputBorder#0A0A0A
  • settings.numberInputForeground#F5F5F5
  • settings.textInputBackground#121A24
  • settings.textInputBorder#0A0A0A
  • settings.textInputForeground#F5F5F5
  • sideBar.background#121A24
  • sideBarSectionHeader.background#121212
  • sideBarSectionHeader.border#0A0A0A
  • sideBarTitle.foreground#F5F5F5
  • statusBar.background#0A0A0A
  • statusBar.debuggingBackground#FF5C57
  • statusBar.debuggingForeground#0A0A0A
  • statusBar.foreground#F5F5F5
  • statusBar.noFolderBackground#0A0A0A
  • statusBar.noFolderForeground#F5F5F5
  • statusBarItem.prominentBackground#FF5C57
  • statusBarItem.prominentHoverBackground#FF9D45
  • statusBarItem.remoteBackground#00B46E
  • statusBarItem.remoteForeground#F5F5F5
  • tab.activeBackground#121212
  • tab.activeBorderTop#FF6B9D80
  • tab.activeForeground#F5F5F5
  • tab.border#0A0A0A
  • tab.inactiveBackground#121A24
  • tab.inactiveForeground#7A8C99
  • terminal.ansiBlack#21222C
  • terminal.ansiBlue#A480FF
  • terminal.ansiBrightBlack#7A8C99
  • terminal.ansiBrightBlue#C4A9FF
  • terminal.ansiBrightCyan#70E0E0
  • terminal.ansiBrightGreen#00E185
  • terminal.ansiBrightMagenta#FF8FB2
  • terminal.ansiBrightRed#FF8078
  • terminal.ansiBrightWhite#FFFFFF
  • terminal.ansiBrightYellow#FFDF85
  • terminal.ansiCyan#25D0D0
  • terminal.ansiGreen#00B46E
  • terminal.ansiMagenta#FF6B9D
  • terminal.ansiRed#FF5C57
  • terminal.ansiWhite#F5F5F5
  • terminal.ansiYellow#FFD866
  • terminal.background#121212
  • terminal.foreground#F5F5F5
  • titleBar.activeBackground#121A24
  • titleBar.activeForeground#F5F5F5
  • titleBar.inactiveBackground#0A0A0A
  • titleBar.inactiveForeground#7A8C99
  • walkThrough.embeddedEditorBackground#121A24

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
emphasis—italic
strong—bold
header#A480FF—
source#F5F5F5—
meta.diff, meta.diff.header#7A8C99—
markup.inserted#00B46E—
markup.deleted#FF5C57—
markup.changed#FF9D45—
invalid#FF5C57underline italic
invalid.deprecated#F5F5F5underline italic
entity.name.filename#FFD866—
markup.error#FF5C57—
markup.underline—underline
markup.bold#FF9D45bold
markup.heading#A480FFbold
markup.italic#FFD866italic
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#25D0D0—
markup.inline.raw, markup.raw.restructuredtext#00B46E—
markup.underline.link, markup.underline.link.image#25D0D0—
meta.link.reference.def.restructuredtext, punctuation.definition.directive.restructuredtext, string.other.link.description, string.other.link.title#FF6B9D—
entity.name.directive.restructuredtext, markup.quote#FFD866italic
meta.separator.markdown#7A8C99—
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#00B46E—
punctuation.definition.constant.restructuredtext#A480FF—
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#A480FF—
meta.paragraph.markdown punctuation.definition.string.begin, meta.paragraph.markdown punctuation.definition.string.end#F5F5F5—
markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.begin, markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.end#FFD866—
entity.name.type.class, entity.name.class#25D0D0normal
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#A480FFitalic
entity.other.inherited-class#25D0D0italic
comment, punctuation.definition.comment, unused.comment, wildcard.comment#7A8C99—
comment keyword.codetag.notation, comment.block.documentation keyword, comment.block.documentation storage.type.class#FF6B9D—
comment.block.documentation entity.name.type#25D0D0italic
comment.block.documentation entity.name.type punctuation.definition.bracket#25D0D0—
comment.block.documentation variable#FF9D45italic
constant, variable.other.constant#A480FF—
constant.character.escape, constant.character.string.escape, constant.regexp#FF6B9D—
entity.name.tag#FF6B9D—
entity.other.attribute-name.parent-selector#FF6B9D—
entity.other.attribute-name#00B46Eitalic
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#00B46E—
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#FF9D45italic
meta.decorator variable.other.readwrite, meta.decorator variable.other.property#00B46Eitalic
meta.decorator variable.other.object#00B46E—
keyword, punctuation.definition.keyword#FF6B9D—
keyword.control.new, keyword.operator.new—bold
meta.selector#FF6B9D—
support#25D0D0italic
support.function.magic, support.variable, variable.other.predefined#A480FFregular
support.function, support.type.property-name—regular
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#FF6B9D—
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#F5F5F5—
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#FF6B9D—
entity.name.function.target.makefile, entity.name.section.toml, entity.name.tag.yaml, variable.other.key.toml#25D0D0—
constant.other.date, constant.other.timestamp#FF9D45—
variable.other.alias.yaml#00B46Eitalic underline
storage, meta.implementation storage.type.objc, meta.interface-or-protocol storage.type.objc, source.groovy storage.type.def#FF6B9Dregular
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#25D0D0italic
entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#FF9D45—
storage.modifier#FF6B9D—
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#FFD866—
punctuation.definition.group.capture.regexp#FF6B9D—
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#FF5C57—
punctuation.definition.character-class.regexp#25D0D0—
punctuation.definition.group.regexp#FF9D45—
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#FF5C57—
meta.assertion.look-ahead.regexp#00B46E—
string#FFD866—
punctuation.definition.string.begin, punctuation.definition.string.end#FFD866—
punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end#25D0D0—
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#7A8C99—
variable, constant.other.key.perl, support.variable.property, variable.other.constant.js, variable.other.constant.ts, variable.other.constant.tsx#F5F5F5—
meta.import variable.other.readwrite, meta.object-binding-pattern-variable variable.object.property, meta.variable.assignment.destructured.object.coffee variable#FF9D45italic
meta.import variable.other.readwrite.alias, meta.export variable.other.readwrite.alias, meta.variable.assignment.destructured.object.coffee variable variable#F5F5F5normal
meta.selectionset.graphql variable#FFD866—
meta.selectionset.graphql meta.arguments variable#F5F5F5—
entity.name.fragment.graphql, variable.fragment.graphql#25D0D0—
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#F5F5F5—
source.shell variable.other#A480FF—
support.constant#A480FFnormal
meta.scope.prerequisites.makefile#FFD866—
meta.attribute-selector.scss#FFD866—
punctuation.definition.attribute-selector.end.bracket.square.scss, punctuation.definition.attribute-selector.begin.bracket.square.scss#F5F5F5—
meta.preprocessor.haskell#7A8C99—