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#0f7fcf10
  • activityBar.activeBorder#8700ff80
  • activityBar.background#121212
  • activityBar.foreground#a1a1a1
  • activityBar.inactiveForeground#6e6e6e
  • activityBarBadge.background#8700ff
  • activityBarBadge.foreground#121212
  • badge.background#121212
  • badge.foreground#a1a1a1
  • breadcrumb.activeSelectionForeground#a1a1a1
  • breadcrumb.background#121212
  • breadcrumb.focusForeground#a1a1a1
  • breadcrumb.foreground#6e6e6e
  • breadcrumbPicker.background#1c1c1c
  • button.background#383838
  • button.foreground#a1a1a1
  • checkbox.background#383838
  • checkbox.border#1c1c1c
  • checkbox.foreground#a1a1a1
  • contrastBorder#1c1c1c
  • debugToolBar.background#383838
  • diffEditor.insertedTextBackground#97e12320
  • diffEditor.removedTextBackground#fa257350
  • dropdown.background#121212
  • dropdown.border#1c1c1c
  • dropdown.foreground#a1a1a1
  • editor.background#121212
  • editor.findMatchBackground#dfd46080
  • editor.findMatchHighlightBackground#ffffff40
  • editor.findRangeHighlightBackground#55555575
  • editor.foldBackground#383838
  • editor.foreground#a1a1a1
  • editor.hoverHighlightBackground#1c1c1c
  • editor.lineHighlightBorder#121212
  • editor.rangeHighlightBackground#0f7fcf15
  • editor.selectionBackground#121212
  • editor.selectionHighlightBackground#121212
  • editor.snippetFinalTabstopHighlightBackground#121212
  • editor.snippetFinalTabstopHighlightBorder#97e123
  • editor.snippetTabstopHighlightBackground#121212
  • editor.snippetTabstopHighlightBorder#6e6e6e
  • editor.wordHighlightBackground#42a7cf50
  • editor.wordHighlightStrongBackground#97e12350
  • editorCodeLens.foreground#6e6e6e
  • editorError.foreground#fa2573
  • editorGroup.border#0f7fcf
  • editorGroup.dropBackground#55555570
  • editorGroupHeader.tabsBackground#1c1c1c
  • editorGutter.addedBackground#97e12380
  • editorGutter.deletedBackground#fa257380
  • editorGutter.modifiedBackground#42a7cf80
  • editorHoverWidget.background#121212
  • editorHoverWidget.border#6e6e6e
  • editorIndentGuide.activeBackground#ffffff45
  • editorIndentGuide.background#ffffff1A
  • editorLineNumber.foreground#6e6e6e
  • editorLink.activeForeground#42a7cf
  • editorMarkerNavigation.background#383838
  • editorOverviewRuler.addedForeground#97e12380
  • editorOverviewRuler.border#1c1c1c
  • editorOverviewRuler.currentContentForeground#97e123
  • editorOverviewRuler.deletedForeground#fa257380
  • editorOverviewRuler.errorForeground#fa257380
  • editorOverviewRuler.incomingContentForeground#0f7fcf
  • editorOverviewRuler.infoForeground#42a7cf80
  • editorOverviewRuler.modifiedForeground#42a7cf80
  • editorOverviewRuler.selectionHighlightForeground#dfd460
  • editorOverviewRuler.warningForeground#dfd46080
  • editorOverviewRuler.wordHighlightForeground#42a7cf
  • editorOverviewRuler.wordHighlightStrongForeground#97e123
  • editorRuler.foreground#ffffff1A
  • editorSuggestWidget.background#383838
  • editorSuggestWidget.foreground#a1a1a1
  • editorSuggestWidget.selectedBackground#121212
  • editorWarning.foreground#dfd460
  • editorWhitespace.foreground#ffffff1A
  • editorWidget.background#383838
  • errorForeground#fa2573
  • extensionButton.prominentBackground#97e12390
  • extensionButton.prominentForeground#a1a1a1
  • extensionButton.prominentHoverBackground#97e12360
  • focusBorder#6e6e6e
  • foreground#a1a1a1
  • gitDecoration.conflictingResourceForeground#dfd460
  • gitDecoration.deletedResourceForeground#fa2573
  • gitDecoration.ignoredResourceForeground#6e6e6e
  • gitDecoration.modifiedResourceForeground#42a7cf
  • gitDecoration.untrackedResourceForeground#97e123
  • input.background#121212
  • input.border#1c1c1c
  • input.foreground#a1a1a1
  • input.placeholderForeground#6e6e6e
  • inputOption.activeBorder#0f7fcf
  • inputValidation.errorBackground#121212
  • inputValidation.errorBorder#fa2573
  • inputValidation.errorForeground#fa2573
  • inputValidation.infoBackground#121212
  • inputValidation.infoBorder#0f7fcf
  • inputValidation.infoForeground#0f7fcf
  • inputValidation.warningBackground#121212
  • inputValidation.warningBorder#dfd460
  • inputValidation.warningForeground#dfd460
  • list.activeSelectionBackground#121212
  • list.activeSelectionForeground#a1a1a1
  • list.dropBackground#121212
  • list.errorForeground#fa2573
  • list.focusBackground#55555575
  • list.highlightForeground#42a7cf
  • list.hoverBackground#55555575
  • list.inactiveSelectionBackground#55555575
  • list.warningForeground#dfd460
  • listFilterWidget.background#121212
  • listFilterWidget.noMatchesOutline#fa2573
  • listFilterWidget.outline#121212
  • merge.currentHeaderBackground#97e12390
  • merge.incomingHeaderBackground#0f7fcf90
  • notification.background#121212
  • notification.buttonBackground#121212
  • notification.buttonForeground#a1a1a1
  • notification.buttonHoverBackground#55555575
  • notification.errorBackground#fa2573
  • notification.errorForeground#121212
  • notification.foreground#a1a1a1
  • notification.infoBackground#0f7fcf
  • notification.infoForeground#121212
  • notification.warningBackground#dfd460
  • notification.warningForeground#121212
  • notificationCenter.border#383838
  • notificationCenterHeader.background#121212
  • notificationCenterHeader.foreground#a1a1a1
  • notificationLink.foreground#42a7cf
  • notifications.background#121212
  • notifications.border#383838
  • notifications.foreground#a1a1a1
  • notificationsErrorIcon.foreground#fa2573
  • notificationsInfoIcon.foreground#0f7fcf
  • notificationsWarningIcon.foreground#dfd460
  • notificationToast.border#383838
  • panel.background#121212
  • panel.border#0f7fcf
  • panelInput.border#a1a1a1
  • panelTitle.activeBorder#8700ff
  • panelTitle.activeForeground#a1a1a1
  • panelTitle.inactiveForeground#6e6e6e
  • peekView.border#121212
  • peekViewEditor.background#121212
  • peekViewEditor.matchHighlightBackground#fef26c80
  • peekViewResult.background#383838
  • peekViewResult.fileForeground#a1a1a1
  • peekViewResult.lineForeground#a1a1a1
  • peekViewResult.matchHighlightBackground#fef26c80
  • peekViewResult.selectionBackground#121212
  • peekViewResult.selectionForeground#a1a1a1
  • peekViewTitle.background#1c1c1c
  • peekViewTitleDescription.foreground#6e6e6e
  • peekViewTitleLabel.foreground#a1a1a1
  • pickerGroup.border#0f7fcf
  • pickerGroup.foreground#42a7cf
  • progressBar.background#8700ff
  • scrollbar.shadow#444444
  • selection.background#0f7fcf
  • settings.checkboxBackground#383838
  • settings.checkboxBorder#1c1c1c
  • settings.checkboxForeground#a1a1a1
  • settings.dropdownBackground#383838
  • settings.dropdownBorder#1c1c1c
  • settings.dropdownForeground#a1a1a1
  • settings.headerForeground#a1a1a1
  • settings.modifiedItemIndicator#dfd460
  • settings.numberInputBackground#383838
  • settings.numberInputBorder#1c1c1c
  • settings.numberInputForeground#a1a1a1
  • settings.textInputBackground#383838
  • settings.textInputBorder#1c1c1c
  • settings.textInputForeground#a1a1a1
  • sideBar.background#383838
  • sideBarSectionHeader.background#121212
  • sideBarSectionHeader.border#1c1c1c
  • sideBarTitle.foreground#a1a1a1
  • statusBar.background#1c1c1c
  • statusBar.debuggingBackground#fa2573
  • statusBar.debuggingForeground#1c1c1c
  • statusBar.foreground#a1a1a1
  • statusBar.noFolderBackground#1c1c1c
  • statusBar.noFolderForeground#a1a1a1
  • statusBarItem.prominentBackground#fa2573
  • statusBarItem.prominentHoverBackground#dfd460
  • statusBarItem.remoteBackground#0f7fcf
  • statusBarItem.remoteForeground#121212
  • tab.activeBackground#121212
  • tab.activeBorderTop#8700ff80
  • tab.activeForeground#a1a1a1
  • tab.border#1c1c1c
  • tab.inactiveBackground#383838
  • tab.inactiveForeground#6e6e6e
  • terminal.ansiBlack#121212
  • terminal.ansiBlue#0f7fcf
  • terminal.ansiBrightBlack#555555
  • terminal.ansiBrightBlue#00afff
  • terminal.ansiBrightCyan#50cdfe
  • terminal.ansiBrightGreen#b0e05e
  • terminal.ansiBrightMagenta#af87ff
  • terminal.ansiBrightRed#f5669c
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#fef26c
  • terminal.ansiCyan#42a7cf
  • terminal.ansiGreen#97e123
  • terminal.ansiMagenta#8700ff
  • terminal.ansiRed#fa2573
  • terminal.ansiWhite#bbbbbb
  • terminal.ansiYellow#dfd460
  • terminal.background#121212
  • terminal.border#a1a1a1
  • terminal.foreground#a1a1a1
  • terminal.selectionBackground#12121250
  • textBlockQuote.background#383838
  • titleBar.activeBackground#383838
  • titleBar.activeForeground#a1a1a1
  • titleBar.inactiveBackground#1c1c1c
  • titleBar.inactiveForeground#6e6e6e
  • walkThrough.embeddedEditorBackground#383838
  • welcomePage.buttonBackground#121212
  • welcomePage.buttonHoverBackground#55555575
  • widget.shadow#444444

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
emphasisitalic
strongbold
header#0f7fcf
source#a1a1a1
meta.diff, meta.diff.header#6e6e6e
markup.inserted#97e123
markup.deleted#fa2573
markup.changed#dfd460
invalid#fa2573underline italic
invalid.deprecated#a1a1a1underline italic
entity.name.filename#fef26c
markup.error#fa2573
markup.underlineunderline
markup.bold#dfd460bold
markup.heading#0f7fcfbold
markup.italic#fef26citalic
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#42a7cf
markup.inline.raw, markup.raw.restructuredtext#97e123
markup.underline.link, markup.underline.link.image#42a7cf
meta.link.reference.def.restructuredtext, punctuation.definition.directive.restructuredtext, string.other.link.description, string.other.link.title#8700ff
entity.name.directive.restructuredtext, markup.quote#fef26citalic
meta.separator.markdown#6e6e6e
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#97e123
punctuation.definition.constant.restructuredtext#0f7fcf
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#0f7fcf
meta.paragraph.markdown punctuation.definition.string.begin, meta.paragraph.markdown punctuation.definition.string.end#a1a1a1
markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.begin, markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.end#fef26c
entity.name.type.class, entity.name.class#42a7cfnormal
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#0f7fcfitalic
entity.other.inherited-class#42a7cfitalic
comment, punctuation.definition.comment, unused.comment, wildcard.comment#6e6e6e
comment keyword.codetag.notation, comment.block.documentation keyword, comment.block.documentation storage.type.class#8700ff
comment.block.documentation entity.name.type#42a7cfitalic
comment.block.documentation entity.name.type punctuation.definition.bracket#42a7cf
comment.block.documentation variable#dfd460italic
constant, variable.other.constant#0f7fcf
constant.character.escape, constant.character.string.escape, constant.regexp#8700ff
entity.name.tag#8700ff
entity.other.attribute-name.parent-selector#8700ff
entity.other.attribute-name#97e123italic
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#97e123
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#dfd460italic
meta.decorator variable.other.readwrite, meta.decorator variable.other.property#97e123italic
meta.decorator variable.other.object#97e123
keyword, punctuation.definition.keyword#8700ff
keyword.control.new, keyword.operator.newbold
meta.selector#8700ff
support#42a7cfitalic
support.function.magic, support.variable, variable.other.predefined#0f7fcfregular
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#8700ff
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#a1a1a1
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#8700ff
entity.name.function.target.makefile, entity.name.section.toml, entity.name.tag.yaml, variable.other.key.toml#42a7cf
constant.other.date, constant.other.timestamp#dfd460
variable.other.alias.yaml#97e123italic underline
storage, meta.implementation storage.type.objc, meta.interface-or-protocol storage.type.objc, source.groovy storage.type.def#8700ffregular
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#42a7cfitalic
entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#dfd460
storage.modifier#8700ff
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#fef26c
punctuation.definition.group.capture.regexp#8700ff
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#fa2573
punctuation.definition.character-class.regexp#42a7cf
punctuation.definition.group.regexp#dfd460
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#fa2573
meta.assertion.look-ahead.regexp#97e123
string#fef26c
punctuation.definition.string.begin, punctuation.definition.string.end#00afff
punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end#0f7fcf
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#6e6e6e
variable, constant.other.key.perl, support.variable.property, variable.other.constant.js, variable.other.constant.ts, variable.other.constant.tsx#a1a1a1
meta.import variable.other.readwrite, meta.object-binding-pattern-variable variable.object.property, meta.variable.assignment.destructured.object.coffee variable#dfd460italic
meta.import variable.other.readwrite.alias, meta.export variable.other.readwrite.alias, meta.variable.assignment.destructured.object.coffee variable variable#a1a1a1normal
meta.selectionset.graphql variable#fef26c
meta.selectionset.graphql meta.arguments variable#a1a1a1
entity.name.fragment.graphql, variable.fragment.graphql#42a7cf
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#a1a1a1
source.shell variable.other#0f7fcf
support.constant#0f7fcfnormal
meta.scope.prerequisites.makefile#fef26c
meta.attribute-selector.scss#fef26c
punctuation.definition.attribute-selector.end.bracket.square.scss, punctuation.definition.attribute-selector.begin.bracket.square.scss#a1a1a1
meta.preprocessor.haskell#6e6e6e