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#0000bb10
  • activityBar.activeBorder#bb00bb80
  • activityBar.background#000000
  • activityBar.foreground#a1a1a1
  • activityBar.inactiveForeground#6e6e6e
  • activityBarBadge.background#bb00bb
  • activityBarBadge.foreground#000000
  • badge.background#000000
  • 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#00bb0020
  • diffEditor.removedTextBackground#bb000050
  • dropdown.background#000000
  • dropdown.border#1c1c1c
  • dropdown.foreground#a1a1a1
  • editor.background#000000
  • editor.findMatchBackground#bbbb0080
  • editor.findMatchHighlightBackground#ffffff40
  • editor.findRangeHighlightBackground#55555575
  • editor.foldBackground#383838
  • editor.foreground#a1a1a1
  • editor.hoverHighlightBackground#1c1c1c
  • editor.lineHighlightBorder#000000
  • editor.rangeHighlightBackground#0000bb15
  • editor.selectionBackground#000000
  • editor.selectionHighlightBackground#000000
  • editor.snippetFinalTabstopHighlightBackground#000000
  • editor.snippetFinalTabstopHighlightBorder#00bb00
  • editor.snippetTabstopHighlightBackground#000000
  • editor.snippetTabstopHighlightBorder#6e6e6e
  • editor.wordHighlightBackground#00bbbb50
  • editor.wordHighlightStrongBackground#00bb0050
  • editorCodeLens.foreground#6e6e6e
  • editorError.foreground#bb0000
  • editorGroup.border#0000bb
  • editorGroup.dropBackground#55555570
  • editorGroupHeader.tabsBackground#1c1c1c
  • editorGutter.addedBackground#00bb0080
  • editorGutter.deletedBackground#bb000080
  • editorGutter.modifiedBackground#00bbbb80
  • editorHoverWidget.background#000000
  • editorHoverWidget.border#6e6e6e
  • editorIndentGuide.activeBackground#ffffff45
  • editorIndentGuide.background#ffffff1A
  • editorLineNumber.foreground#6e6e6e
  • editorLink.activeForeground#00bbbb
  • editorMarkerNavigation.background#383838
  • editorOverviewRuler.addedForeground#00bb0080
  • editorOverviewRuler.border#1c1c1c
  • editorOverviewRuler.currentContentForeground#00bb00
  • editorOverviewRuler.deletedForeground#bb000080
  • editorOverviewRuler.errorForeground#bb000080
  • editorOverviewRuler.incomingContentForeground#0000bb
  • editorOverviewRuler.infoForeground#00bbbb80
  • editorOverviewRuler.modifiedForeground#00bbbb80
  • editorOverviewRuler.selectionHighlightForeground#bbbb00
  • editorOverviewRuler.warningForeground#bbbb0080
  • editorOverviewRuler.wordHighlightForeground#00bbbb
  • editorOverviewRuler.wordHighlightStrongForeground#00bb00
  • editorRuler.foreground#ffffff1A
  • editorSuggestWidget.background#383838
  • editorSuggestWidget.foreground#a1a1a1
  • editorSuggestWidget.selectedBackground#000000
  • editorWarning.foreground#bbbb00
  • editorWhitespace.foreground#ffffff1A
  • editorWidget.background#383838
  • errorForeground#bb0000
  • extensionButton.prominentBackground#00bb0090
  • extensionButton.prominentForeground#a1a1a1
  • extensionButton.prominentHoverBackground#00bb0060
  • focusBorder#6e6e6e
  • foreground#a1a1a1
  • gitDecoration.conflictingResourceForeground#bbbb00
  • gitDecoration.deletedResourceForeground#bb0000
  • gitDecoration.ignoredResourceForeground#6e6e6e
  • gitDecoration.modifiedResourceForeground#00bbbb
  • gitDecoration.untrackedResourceForeground#00bb00
  • input.background#000000
  • input.border#1c1c1c
  • input.foreground#a1a1a1
  • input.placeholderForeground#6e6e6e
  • inputOption.activeBorder#0000bb
  • inputValidation.errorBackground#000000
  • inputValidation.errorBorder#bb0000
  • inputValidation.errorForeground#bb0000
  • inputValidation.infoBackground#000000
  • inputValidation.infoBorder#0000bb
  • inputValidation.infoForeground#0000bb
  • inputValidation.warningBackground#000000
  • inputValidation.warningBorder#bbbb00
  • inputValidation.warningForeground#bbbb00
  • list.activeSelectionBackground#000000
  • list.activeSelectionForeground#a1a1a1
  • list.dropBackground#000000
  • list.errorForeground#bb0000
  • list.focusBackground#55555575
  • list.highlightForeground#00bbbb
  • list.hoverBackground#55555575
  • list.inactiveSelectionBackground#55555575
  • list.warningForeground#bbbb00
  • listFilterWidget.background#000000
  • listFilterWidget.noMatchesOutline#bb0000
  • listFilterWidget.outline#000000
  • merge.currentHeaderBackground#00bb0090
  • merge.incomingHeaderBackground#0000bb90
  • notification.background#000000
  • notification.buttonBackground#000000
  • notification.buttonForeground#a1a1a1
  • notification.buttonHoverBackground#55555575
  • notification.errorBackground#bb0000
  • notification.errorForeground#000000
  • notification.foreground#a1a1a1
  • notification.infoBackground#0000bb
  • notification.infoForeground#000000
  • notification.warningBackground#bbbb00
  • notification.warningForeground#000000
  • notificationCenter.border#383838
  • notificationCenterHeader.background#000000
  • notificationCenterHeader.foreground#a1a1a1
  • notificationLink.foreground#00bbbb
  • notifications.background#000000
  • notifications.border#383838
  • notifications.foreground#a1a1a1
  • notificationsErrorIcon.foreground#bb0000
  • notificationsInfoIcon.foreground#0000bb
  • notificationsWarningIcon.foreground#bbbb00
  • notificationToast.border#383838
  • panel.background#000000
  • panel.border#0000bb
  • panelInput.border#a1a1a1
  • panelTitle.activeBorder#bb00bb
  • panelTitle.activeForeground#a1a1a1
  • panelTitle.inactiveForeground#6e6e6e
  • peekView.border#000000
  • peekViewEditor.background#000000
  • peekViewEditor.matchHighlightBackground#ffff5580
  • peekViewResult.background#383838
  • peekViewResult.fileForeground#a1a1a1
  • peekViewResult.lineForeground#a1a1a1
  • peekViewResult.matchHighlightBackground#ffff5580
  • peekViewResult.selectionBackground#000000
  • peekViewResult.selectionForeground#a1a1a1
  • peekViewTitle.background#1c1c1c
  • peekViewTitleDescription.foreground#6e6e6e
  • peekViewTitleLabel.foreground#a1a1a1
  • pickerGroup.border#0000bb
  • pickerGroup.foreground#00bbbb
  • progressBar.background#bb00bb
  • scrollbar.shadow#444444
  • selection.background#0000bb
  • settings.checkboxBackground#383838
  • settings.checkboxBorder#1c1c1c
  • settings.checkboxForeground#a1a1a1
  • settings.dropdownBackground#383838
  • settings.dropdownBorder#1c1c1c
  • settings.dropdownForeground#a1a1a1
  • settings.headerForeground#a1a1a1
  • settings.modifiedItemIndicator#bbbb00
  • 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#bbbb00
  • statusBarItem.remoteBackground#0000bb
  • statusBarItem.remoteForeground#000000
  • tab.activeBackground#000000
  • tab.activeBorderTop#bb00bb80
  • tab.activeForeground#a1a1a1
  • tab.border#1c1c1c
  • tab.inactiveBackground#383838
  • tab.inactiveForeground#6e6e6e
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#0000bb
  • 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#00bbbb
  • terminal.ansiGreen#00bb00
  • terminal.ansiMagenta#bb00bb
  • terminal.ansiRed#bb0000
  • terminal.ansiWhite#bbbbbb
  • terminal.ansiYellow#bbbb00
  • terminal.background#000000
  • 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#0000bb
source#a1a1a1
meta.diff, meta.diff.header#6e6e6e
markup.inserted#00bb00
markup.deleted#bb0000
markup.changed#bbbb00
invalid#bb0000underline italic
invalid.deprecated#a1a1a1underline italic
entity.name.filename#ffff55
markup.error#bb0000
markup.underlineunderline
markup.bold#bbbb00bold
markup.heading#0000bbbold
markup.italic#ffff55italic
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#00bbbb
markup.inline.raw, markup.raw.restructuredtext#00bb00
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#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#00bb00
punctuation.definition.constant.restructuredtext#0000bb
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#0000bb
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#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#0000bbitalic
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#bb00bb
comment.block.documentation entity.name.type#00bbbbitalic
comment.block.documentation entity.name.type punctuation.definition.bracket#00bbbb
comment.block.documentation variable#bbbb00italic
constant, variable.other.constant#0000bb
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#00bb00italic
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#00bb00
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#bbbb00italic
meta.decorator variable.other.readwrite, meta.decorator variable.other.property#00bb00italic
meta.decorator variable.other.object#00bb00
keyword, punctuation.definition.keyword#bb00bb
keyword.control.new, keyword.operator.newbold
meta.selector#bb00bb
support#00bbbbitalic
support.function.magic, support.variable, variable.other.predefined#0000bbregular
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#00bbbb
constant.other.date, constant.other.timestamp#bbbb00
variable.other.alias.yaml#00bb00italic 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#00bbbbitalic
entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#bbbb00
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#00bbbb
punctuation.definition.group.regexp#bbbb00
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#bb0000
meta.assertion.look-ahead.regexp#00bb00
string#ffff55
punctuation.definition.string.begin, punctuation.definition.string.end#5555ff
punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end#0000bb
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#bbbb00italic
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#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#0000bb
support.constant#0000bbnormal
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