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#1460d210
  • activityBar.activeBorder#ff005d80
  • activityBar.background#122637
  • activityBar.foreground#a1a1a1
  • activityBar.inactiveForeground#6e6e6e
  • activityBarBadge.background#ff005d
  • activityBarBadge.foreground#122637
  • badge.background#000000
  • badge.foreground#a1a1a1
  • breadcrumb.activeSelectionForeground#a1a1a1
  • breadcrumb.background#122637
  • 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#37dd2120
  • diffEditor.removedTextBackground#ff000050
  • dropdown.background#122637
  • dropdown.border#1c1c1c
  • dropdown.foreground#a1a1a1
  • editor.background#122637
  • editor.findMatchBackground#fee40980
  • editor.findMatchHighlightBackground#ffffff40
  • editor.findRangeHighlightBackground#55555575
  • editor.foldBackground#383838
  • editor.foreground#a1a1a1
  • editor.hoverHighlightBackground#1c1c1c
  • editor.lineHighlightBorder#000000
  • editor.rangeHighlightBackground#1460d215
  • editor.selectionBackground#000000
  • editor.selectionHighlightBackground#000000
  • editor.snippetFinalTabstopHighlightBackground#122637
  • editor.snippetFinalTabstopHighlightBorder#37dd21
  • editor.snippetTabstopHighlightBackground#122637
  • editor.snippetTabstopHighlightBorder#6e6e6e
  • editor.wordHighlightBackground#00bbbb50
  • editor.wordHighlightStrongBackground#37dd2150
  • editorCodeLens.foreground#6e6e6e
  • editorError.foreground#ff0000
  • editorGroup.border#1460d2
  • editorGroup.dropBackground#55555570
  • editorGroupHeader.tabsBackground#1c1c1c
  • editorGutter.addedBackground#37dd2180
  • editorGutter.deletedBackground#ff000080
  • editorGutter.modifiedBackground#00bbbb80
  • editorHoverWidget.background#122637
  • editorHoverWidget.border#6e6e6e
  • editorIndentGuide.activeBackground#ffffff45
  • editorIndentGuide.background#ffffff1A
  • editorLineNumber.foreground#6e6e6e
  • editorLink.activeForeground#00bbbb
  • editorMarkerNavigation.background#383838
  • editorOverviewRuler.addedForeground#37dd2180
  • editorOverviewRuler.border#1c1c1c
  • editorOverviewRuler.currentContentForeground#37dd21
  • editorOverviewRuler.deletedForeground#ff000080
  • editorOverviewRuler.errorForeground#ff000080
  • editorOverviewRuler.incomingContentForeground#1460d2
  • editorOverviewRuler.infoForeground#00bbbb80
  • editorOverviewRuler.modifiedForeground#00bbbb80
  • editorOverviewRuler.selectionHighlightForeground#fee409
  • editorOverviewRuler.warningForeground#fee40980
  • editorOverviewRuler.wordHighlightForeground#00bbbb
  • editorOverviewRuler.wordHighlightStrongForeground#37dd21
  • editorRuler.foreground#ffffff1A
  • editorSuggestWidget.background#383838
  • editorSuggestWidget.foreground#a1a1a1
  • editorSuggestWidget.selectedBackground#000000
  • editorWarning.foreground#fee409
  • editorWhitespace.foreground#ffffff1A
  • editorWidget.background#383838
  • errorForeground#ff0000
  • extensionButton.prominentBackground#37dd2190
  • extensionButton.prominentForeground#a1a1a1
  • extensionButton.prominentHoverBackground#37dd2160
  • focusBorder#6e6e6e
  • foreground#a1a1a1
  • gitDecoration.conflictingResourceForeground#fee409
  • gitDecoration.deletedResourceForeground#ff0000
  • gitDecoration.ignoredResourceForeground#6e6e6e
  • gitDecoration.modifiedResourceForeground#00bbbb
  • gitDecoration.untrackedResourceForeground#37dd21
  • input.background#122637
  • input.border#1c1c1c
  • input.foreground#a1a1a1
  • input.placeholderForeground#6e6e6e
  • inputOption.activeBorder#1460d2
  • inputValidation.errorBackground#122637
  • inputValidation.errorBorder#ff0000
  • inputValidation.errorForeground#ff0000
  • inputValidation.infoBackground#122637
  • inputValidation.infoBorder#1460d2
  • inputValidation.infoForeground#1460d2
  • inputValidation.warningBackground#122637
  • inputValidation.warningBorder#fee409
  • inputValidation.warningForeground#fee409
  • list.activeSelectionBackground#000000
  • list.activeSelectionForeground#a1a1a1
  • list.dropBackground#000000
  • list.errorForeground#ff0000
  • list.focusBackground#55555575
  • list.highlightForeground#00bbbb
  • list.hoverBackground#55555575
  • list.inactiveSelectionBackground#55555575
  • list.warningForeground#fee409
  • listFilterWidget.background#122637
  • listFilterWidget.noMatchesOutline#ff0000
  • listFilterWidget.outline#000000
  • merge.currentHeaderBackground#37dd2190
  • merge.incomingHeaderBackground#1460d290
  • notification.background#122637
  • notification.buttonBackground#000000
  • notification.buttonForeground#a1a1a1
  • notification.buttonHoverBackground#55555575
  • notification.errorBackground#ff0000
  • notification.errorForeground#122637
  • notification.foreground#a1a1a1
  • notification.infoBackground#1460d2
  • notification.infoForeground#122637
  • notification.warningBackground#fee409
  • notification.warningForeground#122637
  • notificationCenter.border#383838
  • notificationCenterHeader.background#122637
  • notificationCenterHeader.foreground#a1a1a1
  • notificationLink.foreground#00bbbb
  • notifications.background#122637
  • notifications.border#383838
  • notifications.foreground#a1a1a1
  • notificationsErrorIcon.foreground#ff0000
  • notificationsInfoIcon.foreground#1460d2
  • notificationsWarningIcon.foreground#fee409
  • notificationToast.border#383838
  • panel.background#122637
  • panel.border#1460d2
  • panelInput.border#a1a1a1
  • panelTitle.activeBorder#ff005d
  • panelTitle.activeForeground#a1a1a1
  • panelTitle.inactiveForeground#6e6e6e
  • peekView.border#000000
  • peekViewEditor.background#122637
  • peekViewEditor.matchHighlightBackground#ecc80980
  • peekViewResult.background#383838
  • peekViewResult.fileForeground#a1a1a1
  • peekViewResult.lineForeground#a1a1a1
  • peekViewResult.matchHighlightBackground#ecc80980
  • peekViewResult.selectionBackground#000000
  • peekViewResult.selectionForeground#a1a1a1
  • peekViewTitle.background#1c1c1c
  • peekViewTitleDescription.foreground#6e6e6e
  • peekViewTitleLabel.foreground#a1a1a1
  • pickerGroup.border#1460d2
  • pickerGroup.foreground#00bbbb
  • progressBar.background#ff005d
  • scrollbar.shadow#444444
  • selection.background#1460d2
  • settings.checkboxBackground#383838
  • settings.checkboxBorder#1c1c1c
  • settings.checkboxForeground#a1a1a1
  • settings.dropdownBackground#383838
  • settings.dropdownBorder#1c1c1c
  • settings.dropdownForeground#a1a1a1
  • settings.headerForeground#a1a1a1
  • settings.modifiedItemIndicator#fee409
  • settings.numberInputBackground#383838
  • settings.numberInputBorder#1c1c1c
  • settings.numberInputForeground#a1a1a1
  • settings.textInputBackground#383838
  • settings.textInputBorder#1c1c1c
  • settings.textInputForeground#a1a1a1
  • sideBar.background#383838
  • sideBarSectionHeader.background#122637
  • sideBarSectionHeader.border#1c1c1c
  • sideBarTitle.foreground#a1a1a1
  • statusBar.background#1c1c1c
  • statusBar.debuggingBackground#ff0000
  • statusBar.debuggingForeground#1c1c1c
  • statusBar.foreground#a1a1a1
  • statusBar.noFolderBackground#1c1c1c
  • statusBar.noFolderForeground#a1a1a1
  • statusBarItem.prominentBackground#ff0000
  • statusBarItem.prominentHoverBackground#fee409
  • statusBarItem.remoteBackground#1460d2
  • statusBarItem.remoteForeground#122637
  • tab.activeBackground#122637
  • tab.activeBorderTop#ff005d80
  • tab.activeForeground#a1a1a1
  • tab.border#1c1c1c
  • tab.inactiveBackground#383838
  • tab.inactiveForeground#6e6e6e
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#1460d2
  • terminal.ansiBrightBlack#555555
  • terminal.ansiBrightBlue#5555ff
  • terminal.ansiBrightCyan#6ae3f9
  • terminal.ansiBrightGreen#3bcf1d
  • terminal.ansiBrightMagenta#ff55ff
  • terminal.ansiBrightRed#f40d17
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#ecc809
  • terminal.ansiCyan#00bbbb
  • terminal.ansiGreen#37dd21
  • terminal.ansiMagenta#ff005d
  • terminal.ansiRed#ff0000
  • terminal.ansiWhite#bbbbbb
  • terminal.ansiYellow#fee409
  • terminal.background#122637
  • terminal.border#a1a1a1
  • terminal.foreground#a1a1a1
  • terminal.selectionBackground#00000050
  • textBlockQuote.background#383838
  • titleBar.activeBackground#383838
  • titleBar.activeForeground#a1a1a1
  • titleBar.inactiveBackground#1c1c1c
  • titleBar.inactiveForeground#6e6e6e
  • walkThrough.embeddedEditorBackground#383838
  • welcomePage.buttonBackground#000000
  • welcomePage.buttonHoverBackground#55555575
  • widget.shadow#444444

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
emphasisitalic
strongbold
header#1460d2
source#a1a1a1
meta.diff, meta.diff.header#6e6e6e
markup.inserted#37dd21
markup.deleted#ff0000
markup.changed#fee409
invalid#ff0000underline italic
invalid.deprecated#a1a1a1underline italic
entity.name.filename#ecc809
markup.error#ff0000
markup.underlineunderline
markup.bold#fee409bold
markup.heading#1460d2bold
markup.italic#ecc809italic
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#00bbbb
markup.inline.raw, markup.raw.restructuredtext#37dd21
markup.underline.link, markup.underline.link.image#00bbbb
meta.link.reference.def.restructuredtext, punctuation.definition.directive.restructuredtext, string.other.link.description, string.other.link.title#ff005d
entity.name.directive.restructuredtext, markup.quote#ecc809italic
meta.separator.markdown#6e6e6e
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#37dd21
punctuation.definition.constant.restructuredtext#1460d2
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#1460d2
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#ecc809
entity.name.type.class, entity.name.class#00bbbbnormal
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#1460d2italic
entity.other.inherited-class#00bbbbitalic
comment, punctuation.definition.comment, unused.comment, wildcard.comment#6e6e6e
comment keyword.codetag.notation, comment.block.documentation keyword, comment.block.documentation storage.type.class#ff005d
comment.block.documentation entity.name.type#00bbbbitalic
comment.block.documentation entity.name.type punctuation.definition.bracket#00bbbb
comment.block.documentation variable#fee409italic
constant, variable.other.constant#1460d2
constant.character.escape, constant.character.string.escape, constant.regexp#ff005d
entity.name.tag#ff005d
entity.other.attribute-name.parent-selector#ff005d
entity.other.attribute-name#37dd21italic
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#37dd21
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#fee409italic
meta.decorator variable.other.readwrite, meta.decorator variable.other.property#37dd21italic
meta.decorator variable.other.object#37dd21
keyword, punctuation.definition.keyword#ff005d
keyword.control.new, keyword.operator.newbold
meta.selector#ff005d
support#00bbbbitalic
support.function.magic, support.variable, variable.other.predefined#1460d2regular
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#ff005d
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#ff005d
entity.name.function.target.makefile, entity.name.section.toml, entity.name.tag.yaml, variable.other.key.toml#00bbbb
constant.other.date, constant.other.timestamp#fee409
variable.other.alias.yaml#37dd21italic underline
storage, meta.implementation storage.type.objc, meta.interface-or-protocol storage.type.objc, source.groovy storage.type.def#ff005dregular
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#00bbbbitalic
entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#fee409
storage.modifier#ff005d
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#ecc809
punctuation.definition.group.capture.regexp#ff005d
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#ff0000
punctuation.definition.character-class.regexp#00bbbb
punctuation.definition.group.regexp#fee409
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#ff0000
meta.assertion.look-ahead.regexp#37dd21
string#ecc809
punctuation.definition.string.begin, punctuation.definition.string.end#5555ff
punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end#1460d2
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#fee409italic
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#ecc809
meta.selectionset.graphql meta.arguments variable#a1a1a1
entity.name.fragment.graphql, variable.fragment.graphql#00bbbb
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#1460d2
support.constant#1460d2normal
meta.scope.prerequisites.makefile#ecc809
meta.attribute-selector.scss#ecc809
punctuation.definition.attribute-selector.end.bracket.square.scss, punctuation.definition.attribute-selector.begin.bracket.square.scss#a1a1a1
meta.preprocessor.haskell#6e6e6e