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#266ad710
  • activityBar.activeBorder#bb00bb80
  • activityBar.background#000000
  • activityBar.foreground#a1a1a1
  • activityBar.inactiveForeground#6e6e6e
  • activityBarBadge.background#bb00bb
  • activityBarBadge.foreground#000000
  • badge.background#4c4c4c
  • badge.foreground#a1a1a1
  • breadcrumb.activeSelectionForeground#a1a1a1
  • breadcrumb.background#000000
  • 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#5ede8f20
  • diffEditor.removedTextBackground#bb000050
  • dropdown.background#000000
  • dropdown.border#1c1c1c
  • dropdown.foreground#a1a1a1
  • editor.background#000000
  • editor.findMatchBackground#f2f06780
  • editor.findMatchHighlightBackground#ffffff40
  • editor.findRangeHighlightBackground#55555575
  • editor.foldBackground#383838
  • editor.foreground#a1a1a1
  • editor.hoverHighlightBackground#1c1c1c
  • editor.lineHighlightBorder#4c4c4c
  • editor.rangeHighlightBackground#266ad715
  • editor.selectionBackground#4c4c4c
  • editor.selectionHighlightBackground#4c4c4c
  • editor.snippetFinalTabstopHighlightBackground#000000
  • editor.snippetFinalTabstopHighlightBorder#5ede8f
  • editor.snippetTabstopHighlightBackground#000000
  • editor.snippetTabstopHighlightBorder#6e6e6e
  • editor.wordHighlightBackground#00d9df50
  • editor.wordHighlightStrongBackground#5ede8f50
  • editorCodeLens.foreground#6e6e6e
  • editorError.foreground#bb0000
  • editorGroup.border#266ad7
  • editorGroup.dropBackground#55555570
  • editorGroupHeader.tabsBackground#1c1c1c
  • editorGutter.addedBackground#5ede8f80
  • editorGutter.deletedBackground#bb000080
  • editorGutter.modifiedBackground#00d9df80
  • editorHoverWidget.background#000000
  • editorHoverWidget.border#6e6e6e
  • editorIndentGuide.activeBackground#ffffff45
  • editorIndentGuide.background#ffffff1A
  • editorLineNumber.foreground#6e6e6e
  • editorLink.activeForeground#00d9df
  • editorMarkerNavigation.background#383838
  • editorOverviewRuler.addedForeground#5ede8f80
  • editorOverviewRuler.border#1c1c1c
  • editorOverviewRuler.currentContentForeground#5ede8f
  • editorOverviewRuler.deletedForeground#bb000080
  • editorOverviewRuler.errorForeground#bb000080
  • editorOverviewRuler.incomingContentForeground#266ad7
  • editorOverviewRuler.infoForeground#00d9df80
  • editorOverviewRuler.modifiedForeground#00d9df80
  • editorOverviewRuler.selectionHighlightForeground#f2f067
  • editorOverviewRuler.warningForeground#f2f06780
  • editorOverviewRuler.wordHighlightForeground#00d9df
  • editorOverviewRuler.wordHighlightStrongForeground#5ede8f
  • editorRuler.foreground#ffffff1A
  • editorSuggestWidget.background#383838
  • editorSuggestWidget.foreground#a1a1a1
  • editorSuggestWidget.selectedBackground#4c4c4c
  • editorWarning.foreground#f2f067
  • editorWhitespace.foreground#ffffff1A
  • editorWidget.background#383838
  • errorForeground#bb0000
  • extensionButton.prominentBackground#5ede8f90
  • extensionButton.prominentForeground#a1a1a1
  • extensionButton.prominentHoverBackground#5ede8f60
  • focusBorder#6e6e6e
  • foreground#a1a1a1
  • gitDecoration.conflictingResourceForeground#f2f067
  • gitDecoration.deletedResourceForeground#bb0000
  • gitDecoration.ignoredResourceForeground#6e6e6e
  • gitDecoration.modifiedResourceForeground#00d9df
  • gitDecoration.untrackedResourceForeground#5ede8f
  • input.background#000000
  • input.border#1c1c1c
  • input.foreground#a1a1a1
  • input.placeholderForeground#6e6e6e
  • inputOption.activeBorder#266ad7
  • inputValidation.errorBackground#000000
  • inputValidation.errorBorder#bb0000
  • inputValidation.errorForeground#bb0000
  • inputValidation.infoBackground#000000
  • inputValidation.infoBorder#266ad7
  • inputValidation.infoForeground#266ad7
  • inputValidation.warningBackground#000000
  • inputValidation.warningBorder#f2f067
  • inputValidation.warningForeground#f2f067
  • list.activeSelectionBackground#4c4c4c
  • list.activeSelectionForeground#a1a1a1
  • list.dropBackground#4c4c4c
  • list.errorForeground#bb0000
  • list.focusBackground#55555575
  • list.highlightForeground#00d9df
  • list.hoverBackground#55555575
  • list.inactiveSelectionBackground#55555575
  • list.warningForeground#f2f067
  • listFilterWidget.background#000000
  • listFilterWidget.noMatchesOutline#bb0000
  • listFilterWidget.outline#4c4c4c
  • merge.currentHeaderBackground#5ede8f90
  • merge.incomingHeaderBackground#266ad790
  • notification.background#000000
  • notification.buttonBackground#4c4c4c
  • notification.buttonForeground#a1a1a1
  • notification.buttonHoverBackground#55555575
  • notification.errorBackground#bb0000
  • notification.errorForeground#000000
  • notification.foreground#a1a1a1
  • notification.infoBackground#266ad7
  • notification.infoForeground#000000
  • notification.warningBackground#f2f067
  • notification.warningForeground#000000
  • notificationCenter.border#383838
  • notificationCenterHeader.background#000000
  • notificationCenterHeader.foreground#a1a1a1
  • notificationLink.foreground#00d9df
  • notifications.background#000000
  • notifications.border#383838
  • notifications.foreground#a1a1a1
  • notificationsErrorIcon.foreground#bb0000
  • notificationsInfoIcon.foreground#266ad7
  • notificationsWarningIcon.foreground#f2f067
  • notificationToast.border#383838
  • panel.background#000000
  • panel.border#266ad7
  • panelInput.border#a1a1a1
  • panelTitle.activeBorder#bb00bb
  • panelTitle.activeForeground#a1a1a1
  • panelTitle.inactiveForeground#6e6e6e
  • peekView.border#4c4c4c
  • peekViewEditor.background#000000
  • peekViewEditor.matchHighlightBackground#ffff5580
  • peekViewResult.background#383838
  • peekViewResult.fileForeground#a1a1a1
  • peekViewResult.lineForeground#a1a1a1
  • peekViewResult.matchHighlightBackground#ffff5580
  • peekViewResult.selectionBackground#4c4c4c
  • peekViewResult.selectionForeground#a1a1a1
  • peekViewTitle.background#1c1c1c
  • peekViewTitleDescription.foreground#6e6e6e
  • peekViewTitleLabel.foreground#a1a1a1
  • pickerGroup.border#266ad7
  • pickerGroup.foreground#00d9df
  • progressBar.background#bb00bb
  • scrollbar.shadow#444444
  • selection.background#266ad7
  • settings.checkboxBackground#383838
  • settings.checkboxBorder#1c1c1c
  • settings.checkboxForeground#a1a1a1
  • settings.dropdownBackground#383838
  • settings.dropdownBorder#1c1c1c
  • settings.dropdownForeground#a1a1a1
  • settings.headerForeground#a1a1a1
  • settings.modifiedItemIndicator#f2f067
  • settings.numberInputBackground#383838
  • settings.numberInputBorder#1c1c1c
  • settings.numberInputForeground#a1a1a1
  • settings.textInputBackground#383838
  • settings.textInputBorder#1c1c1c
  • settings.textInputForeground#a1a1a1
  • sideBar.background#383838
  • sideBarSectionHeader.background#000000
  • sideBarSectionHeader.border#1c1c1c
  • sideBarTitle.foreground#a1a1a1
  • statusBar.background#1c1c1c
  • statusBar.debuggingBackground#bb0000
  • statusBar.debuggingForeground#1c1c1c
  • statusBar.foreground#a1a1a1
  • statusBar.noFolderBackground#1c1c1c
  • statusBar.noFolderForeground#a1a1a1
  • statusBarItem.prominentBackground#bb0000
  • statusBarItem.prominentHoverBackground#f2f067
  • statusBarItem.remoteBackground#266ad7
  • statusBarItem.remoteForeground#000000
  • tab.activeBackground#000000
  • tab.activeBorderTop#bb00bb80
  • tab.activeForeground#a1a1a1
  • tab.border#1c1c1c
  • tab.inactiveBackground#383838
  • tab.inactiveForeground#6e6e6e
  • terminal.ansiBlack#4c4c4c
  • terminal.ansiBlue#266ad7
  • terminal.ansiBrightBlack#555555
  • terminal.ansiBrightBlue#5555ff
  • terminal.ansiBrightCyan#55ffff
  • terminal.ansiBrightGreen#55ff55
  • terminal.ansiBrightMagenta#ff55ff
  • terminal.ansiBrightRed#ff5555
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#ffff55
  • terminal.ansiCyan#00d9df
  • terminal.ansiGreen#5ede8f
  • terminal.ansiMagenta#bb00bb
  • terminal.ansiRed#bb0000
  • terminal.ansiWhite#bbbbbb
  • terminal.ansiYellow#f2f067
  • terminal.background#000000
  • terminal.border#a1a1a1
  • terminal.foreground#a1a1a1
  • terminal.selectionBackground#4c4c4c50
  • textBlockQuote.background#383838
  • titleBar.activeBackground#383838
  • titleBar.activeForeground#a1a1a1
  • titleBar.inactiveBackground#1c1c1c
  • titleBar.inactiveForeground#6e6e6e
  • walkThrough.embeddedEditorBackground#383838
  • welcomePage.buttonBackground#4c4c4c
  • welcomePage.buttonHoverBackground#55555575
  • widget.shadow#444444

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
emphasisitalic
strongbold
header#266ad7
source#a1a1a1
meta.diff, meta.diff.header#6e6e6e
markup.inserted#5ede8f
markup.deleted#bb0000
markup.changed#f2f067
invalid#bb0000underline italic
invalid.deprecated#a1a1a1underline italic
entity.name.filename#ffff55
markup.error#bb0000
markup.underlineunderline
markup.bold#f2f067bold
markup.heading#266ad7bold
markup.italic#ffff55italic
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#00d9df
markup.inline.raw, markup.raw.restructuredtext#5ede8f
markup.underline.link, markup.underline.link.image#00d9df
meta.link.reference.def.restructuredtext, punctuation.definition.directive.restructuredtext, string.other.link.description, string.other.link.title#bb00bb
entity.name.directive.restructuredtext, markup.quote#ffff55italic
meta.separator.markdown#6e6e6e
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#5ede8f
punctuation.definition.constant.restructuredtext#266ad7
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#266ad7
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#ffff55
entity.name.type.class, entity.name.class#00d9dfnormal
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#266ad7italic
entity.other.inherited-class#00d9dfitalic
comment, punctuation.definition.comment, unused.comment, wildcard.comment#6e6e6e
comment keyword.codetag.notation, comment.block.documentation keyword, comment.block.documentation storage.type.class#bb00bb
comment.block.documentation entity.name.type#00d9dfitalic
comment.block.documentation entity.name.type punctuation.definition.bracket#00d9df
comment.block.documentation variable#f2f067italic
constant, variable.other.constant#266ad7
constant.character.escape, constant.character.string.escape, constant.regexp#bb00bb
entity.name.tag#bb00bb
entity.other.attribute-name.parent-selector#bb00bb
entity.other.attribute-name#5ede8fitalic
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#5ede8f
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#f2f067italic
meta.decorator variable.other.readwrite, meta.decorator variable.other.property#5ede8fitalic
meta.decorator variable.other.object#5ede8f
keyword, punctuation.definition.keyword#bb00bb
keyword.control.new, keyword.operator.newbold
meta.selector#bb00bb
support#00d9dfitalic
support.function.magic, support.variable, variable.other.predefined#266ad7regular
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#bb00bb
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#bb00bb
entity.name.function.target.makefile, entity.name.section.toml, entity.name.tag.yaml, variable.other.key.toml#00d9df
constant.other.date, constant.other.timestamp#f2f067
variable.other.alias.yaml#5ede8fitalic underline
storage, meta.implementation storage.type.objc, meta.interface-or-protocol storage.type.objc, source.groovy storage.type.def#bb00bbregular
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#00d9dfitalic
entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#f2f067
storage.modifier#bb00bb
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#ffff55
punctuation.definition.group.capture.regexp#bb00bb
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#bb0000
punctuation.definition.character-class.regexp#00d9df
punctuation.definition.group.regexp#f2f067
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#bb0000
meta.assertion.look-ahead.regexp#5ede8f
string#ffff55
punctuation.definition.string.begin, punctuation.definition.string.end#5555ff
punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end#266ad7
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#f2f067italic
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#ffff55
meta.selectionset.graphql meta.arguments variable#a1a1a1
entity.name.fragment.graphql, variable.fragment.graphql#00d9df
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#266ad7
support.constant#266ad7normal
meta.scope.prerequisites.makefile#ffff55
meta.attribute-selector.scss#ffff55
punctuation.definition.attribute-selector.end.bracket.square.scss, punctuation.definition.attribute-selector.begin.bracket.square.scss#a1a1a1
meta.preprocessor.haskell#6e6e6e