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
emphasisitalic
strongbold
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.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#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.newbold
meta.selector#FF6B9D
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#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