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#00B46E80
  • activityBar.background#263340
  • activityBar.foreground#F5F5F5
  • activityBar.inactiveForeground#7A8C99
  • activityBarBadge.background#00B46E
  • activityBarBadge.foreground#F5F5F5
  • badge.background#1E3A4A
  • badge.foreground#F5F5F5
  • breadcrumb.activeSelectionForeground#F5F5F5
  • breadcrumb.background#121212
  • breadcrumb.focusForeground#F5F5F5
  • breadcrumb.foreground#7A8C99
  • breadcrumbPicker.background#0A0D10
  • button.background#1E3A4A
  • button.foreground#F5F5F5
  • contrastBorder#0A0D10
  • debugToolBar.background#131A20
  • diffEditor.insertedTextBackground#00E18520
  • diffEditor.removedTextBackground#FF5C5750
  • dropdown.background#263340
  • dropdown.border#0A0D10
  • dropdown.foreground#F5F5F5
  • editor.background#121212
  • editor.findMatchBackground#FF9D4580
  • editor.findMatchHighlightBackground#FFFFFF40
  • editor.findRangeHighlightBackground#1E3A4A75
  • editor.foldBackground#131A20
  • editor.foreground#F5F5F5
  • editor.hoverHighlightBackground#25D0D050
  • editor.lineHighlightBorder#1E3A4A
  • editor.rangeHighlightBackground#A480FF15
  • editor.selectionBackground#1E3A4A
  • editor.selectionHighlightBackground#424450
  • editor.snippetFinalTabstopHighlightBackground#121212
  • editor.snippetFinalTabstopHighlightBorder#00E185
  • editor.snippetTabstopHighlightBackground#121212
  • editor.snippetTabstopHighlightBorder#7A8C99
  • editor.wordHighlightBackground#25D0D050
  • editor.wordHighlightStrongBackground#00E18550
  • editorCodeLens.foreground#7A8C99
  • editorError.foreground#FF5C57
  • editorGroup.border#A480FF
  • editorGroup.dropBackground#1E3A4A70
  • editorGroupHeader.tabsBackground#0A0D10
  • editorGutter.addedBackground#00E18580
  • 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#131A20
  • editorOverviewRuler.addedForeground#00E18580
  • editorOverviewRuler.border#0A0D10
  • editorOverviewRuler.currentContentForeground#00E185
  • 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#00E185
  • editorRuler.foreground#FFFFFF1A
  • editorSuggestWidget.background#131A20
  • editorSuggestWidget.foreground#F5F5F5
  • editorSuggestWidget.selectedBackground#1E3A4A
  • editorWarning.foreground#25D0D0
  • editorWhitespace.foreground#FFFFFF1A
  • editorWidget.background#131A20
  • errorForeground#FF5C57
  • extensionButton.prominentBackground#00E18590
  • extensionButton.prominentForeground#F5F5F5
  • extensionButton.prominentHoverBackground#00E18560
  • focusBorder#7A8C99
  • foreground#F5F5F5
  • gitDecoration.conflictingResourceForeground#FF9D45
  • gitDecoration.deletedResourceForeground#FF5C57
  • gitDecoration.ignoredResourceForeground#7A8C99
  • gitDecoration.modifiedResourceForeground#25D0D0
  • gitDecoration.untrackedResourceForeground#00E185
  • input.background#121212
  • input.border#0A0D10
  • input.foreground#F5F5F5
  • input.placeholderForeground#7A8C99
  • inputOption.activeBorder#A480FF
  • inputValidation.errorBorder#FF5C57
  • inputValidation.infoBorder#00B46E
  • inputValidation.warningBorder#FF9D45
  • list.activeSelectionBackground#1E3A4A
  • list.activeSelectionForeground#F5F5F5
  • list.dropBackground#1E3A4A
  • list.errorForeground#FF5C57
  • list.focusBackground#1E3A4A75
  • list.highlightForeground#25D0D0
  • list.hoverBackground#1E3A4A75
  • list.inactiveSelectionBackground#1E3A4A75
  • list.warningForeground#FF9D45
  • listFilterWidget.background#263340
  • listFilterWidget.noMatchesOutline#FF5C57
  • listFilterWidget.outline#424450
  • merge.currentHeaderBackground#00E18590
  • merge.incomingHeaderBackground#A480FF90
  • notification.background#121212
  • notification.buttonBackground#1E3A4A
  • notification.buttonForeground#F5F5F5
  • notification.buttonHoverBackground#1E3A4A75
  • 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#00B46E
  • panelTitle.activeForeground#F5F5F5
  • panelTitle.inactiveForeground#7A8C99
  • peekView.border#1E3A4A
  • peekViewEditor.background#121212
  • peekViewEditor.matchHighlightBackground#FFD86680
  • peekViewResult.background#131A20
  • peekViewResult.fileForeground#F5F5F5
  • peekViewResult.lineForeground#F5F5F5
  • peekViewResult.matchHighlightBackground#FFD86680
  • peekViewResult.selectionBackground#1E3A4A
  • peekViewResult.selectionForeground#F5F5F5
  • peekViewTitle.background#0A0D10
  • peekViewTitleDescription.foreground#7A8C99
  • peekViewTitleLabel.foreground#F5F5F5
  • pickerGroup.border#A480FF
  • pickerGroup.foreground#25D0D0
  • progressBar.background#00B46E
  • selection.background#A480FF
  • settings.checkboxBackground#131A20
  • settings.checkboxBorder#0A0D10
  • settings.checkboxForeground#F5F5F5
  • settings.dropdownBackground#131A20
  • settings.dropdownBorder#0A0D10
  • settings.dropdownForeground#F5F5F5
  • settings.headerForeground#F5F5F5
  • settings.modifiedItemForeground#FF9D45
  • settings.modifiedItemIndicator#FF9D45
  • settings.numberInputBackground#131A20
  • settings.numberInputBorder#0A0D10
  • settings.numberInputForeground#F5F5F5
  • settings.textInputBackground#131A20
  • settings.textInputBorder#0A0D10
  • settings.textInputForeground#F5F5F5
  • sideBar.background#131A20
  • sideBarSectionHeader.background#121212
  • sideBarSectionHeader.border#0A0D10
  • sideBarTitle.foreground#F5F5F5
  • statusBar.background#0A0D10
  • statusBar.debuggingBackground#FF5C57
  • statusBar.debuggingForeground#0A0D10
  • statusBar.foreground#F5F5F5
  • statusBar.noFolderBackground#0A0D10
  • statusBar.noFolderForeground#F5F5F5
  • statusBarItem.prominentBackground#FF5C57
  • statusBarItem.prominentHoverBackground#FF9D45
  • statusBarItem.remoteBackground#A480FF
  • statusBarItem.remoteForeground#F5F5F5
  • tab.activeBackground#121212
  • tab.activeBorderTop#00B46E80
  • tab.activeForeground#F5F5F5
  • tab.border#0A0D10
  • tab.inactiveBackground#131A20
  • tab.inactiveForeground#7A8C99
  • terminal.ansiBlack#21222C
  • terminal.ansiBlue#A480FF
  • terminal.ansiBrightBlack#7A8C99
  • terminal.ansiBrightBlue#BFB3FF
  • terminal.ansiBrightCyan#B3FFF2
  • terminal.ansiBrightGreen#B9FFB3
  • terminal.ansiBrightMagenta#FFB3D9
  • terminal.ansiBrightRed#FFBFB3
  • terminal.ansiBrightWhite#FFFFFF
  • terminal.ansiBrightYellow#FFFFB3
  • terminal.ansiCyan#25D0D0
  • terminal.ansiGreen#00E185
  • terminal.ansiMagenta#00B46E
  • terminal.ansiRed#FF5C57
  • terminal.ansiWhite#F5F5F5
  • terminal.ansiYellow#FFD866
  • terminal.background#121212
  • terminal.foreground#F5F5F5
  • titleBar.activeBackground#131A20
  • titleBar.activeForeground#F5F5F5
  • titleBar.inactiveBackground#0A0D10
  • titleBar.inactiveForeground#7A8C99
  • walkThrough.embeddedEditorBackground#131A20

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
emphasisitalic
strongbold
header#A480FF
source#F5F5F5
meta.diff, meta.diff.header#7A8C99
markup.inserted#00E185
markup.deleted#FF5C57
markup.changed#FF9D45
invalid#FF5C57underline italic
invalid.deprecated#F5F5F5underline italic
entity.name.filename#FFD866
markup.error#FF5C57
markup.underlineunderline
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#00E185
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#00B46E
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#00E185
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#00B46E
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#00B46E
entity.name.tag#00B46E
entity.other.attribute-name.parent-selector#00B46E
entity.other.attribute-name#00E185italic
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#00E185
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#00E185italic
meta.decorator variable.other.object#00E185
keyword, punctuation.definition.keyword#00B46E
keyword.control.new, keyword.operator.newbold
meta.selector#00B46E
support#25D0D0italic
support.function.magic, support.variable, variable.other.predefined#A480FFregular
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#00B46E
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#00B46E
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#00E185italic underline
storage, meta.implementation storage.type.objc, meta.interface-or-protocol storage.type.objc, source.groovy storage.type.def#00B46Eregular
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#00B46E
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#FFD866
punctuation.definition.group.capture.regexp#00B46E
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#00E185
string#FFD866
punctuation.definition.string.begin, punctuation.definition.string.end#E9F284
punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end#8BE9FE
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