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#399bda10
  • activityBar.activeBorder#bb00bb80
  • activityBar.background#273032
  • activityBar.foreground#a1a1a1
  • activityBar.inactiveForeground#6e6e6e
  • activityBarBadge.background#bb00bb
  • activityBarBadge.foreground#273032
  • badge.background#000000
  • badge.foreground#a1a1a1
  • breadcrumb.activeSelectionForeground#a1a1a1
  • breadcrumb.background#273032
  • 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#a5000150
  • dropdown.background#273032
  • dropdown.border#1c1c1c
  • dropdown.foreground#a1a1a1
  • editor.background#273032
  • editor.findMatchBackground#fecc2280
  • editor.findMatchHighlightBackground#ffffff40
  • editor.findRangeHighlightBackground#55555575
  • editor.foldBackground#383838
  • editor.foreground#a1a1a1
  • editor.hoverHighlightBackground#1c1c1c
  • editor.lineHighlightBorder#000000
  • editor.rangeHighlightBackground#399bda15
  • editor.selectionBackground#000000
  • editor.selectionHighlightBackground#000000
  • editor.snippetFinalTabstopHighlightBackground#273032
  • editor.snippetFinalTabstopHighlightBorder#00bb00
  • editor.snippetTabstopHighlightBackground#273032
  • editor.snippetTabstopHighlightBorder#6e6e6e
  • editor.wordHighlightBackground#00bbbb50
  • editor.wordHighlightStrongBackground#00bb0050
  • editorCodeLens.foreground#6e6e6e
  • editorError.foreground#a50001
  • editorGroup.border#399bda
  • editorGroup.dropBackground#55555570
  • editorGroupHeader.tabsBackground#1c1c1c
  • editorGutter.addedBackground#00bb0080
  • editorGutter.deletedBackground#a5000180
  • editorGutter.modifiedBackground#00bbbb80
  • editorHoverWidget.background#273032
  • 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#a5000180
  • editorOverviewRuler.errorForeground#a5000180
  • editorOverviewRuler.incomingContentForeground#399bda
  • editorOverviewRuler.infoForeground#00bbbb80
  • editorOverviewRuler.modifiedForeground#00bbbb80
  • editorOverviewRuler.selectionHighlightForeground#fecc22
  • editorOverviewRuler.warningForeground#fecc2280
  • editorOverviewRuler.wordHighlightForeground#00bbbb
  • editorOverviewRuler.wordHighlightStrongForeground#00bb00
  • editorRuler.foreground#ffffff1A
  • editorSuggestWidget.background#383838
  • editorSuggestWidget.foreground#a1a1a1
  • editorSuggestWidget.selectedBackground#000000
  • editorWarning.foreground#fecc22
  • editorWhitespace.foreground#ffffff1A
  • editorWidget.background#383838
  • errorForeground#a50001
  • extensionButton.prominentBackground#00bb0090
  • extensionButton.prominentForeground#a1a1a1
  • extensionButton.prominentHoverBackground#00bb0060
  • focusBorder#6e6e6e
  • foreground#a1a1a1
  • gitDecoration.conflictingResourceForeground#fecc22
  • gitDecoration.deletedResourceForeground#a50001
  • gitDecoration.ignoredResourceForeground#6e6e6e
  • gitDecoration.modifiedResourceForeground#00bbbb
  • gitDecoration.untrackedResourceForeground#00bb00
  • input.background#273032
  • input.border#1c1c1c
  • input.foreground#a1a1a1
  • input.placeholderForeground#6e6e6e
  • inputOption.activeBorder#399bda
  • inputValidation.errorBackground#273032
  • inputValidation.errorBorder#a50001
  • inputValidation.errorForeground#a50001
  • inputValidation.infoBackground#273032
  • inputValidation.infoBorder#399bda
  • inputValidation.infoForeground#399bda
  • inputValidation.warningBackground#273032
  • inputValidation.warningBorder#fecc22
  • inputValidation.warningForeground#fecc22
  • list.activeSelectionBackground#000000
  • list.activeSelectionForeground#a1a1a1
  • list.dropBackground#000000
  • list.errorForeground#a50001
  • list.focusBackground#55555575
  • list.highlightForeground#00bbbb
  • list.hoverBackground#55555575
  • list.inactiveSelectionBackground#55555575
  • list.warningForeground#fecc22
  • listFilterWidget.background#273032
  • listFilterWidget.noMatchesOutline#a50001
  • listFilterWidget.outline#000000
  • merge.currentHeaderBackground#00bb0090
  • merge.incomingHeaderBackground#399bda90
  • notification.background#273032
  • notification.buttonBackground#000000
  • notification.buttonForeground#a1a1a1
  • notification.buttonHoverBackground#55555575
  • notification.errorBackground#a50001
  • notification.errorForeground#273032
  • notification.foreground#a1a1a1
  • notification.infoBackground#399bda
  • notification.infoForeground#273032
  • notification.warningBackground#fecc22
  • notification.warningForeground#273032
  • notificationCenter.border#383838
  • notificationCenterHeader.background#273032
  • notificationCenterHeader.foreground#a1a1a1
  • notificationLink.foreground#00bbbb
  • notifications.background#273032
  • notifications.border#383838
  • notifications.foreground#a1a1a1
  • notificationsErrorIcon.foreground#a50001
  • notificationsInfoIcon.foreground#399bda
  • notificationsWarningIcon.foreground#fecc22
  • notificationToast.border#383838
  • panel.background#273032
  • panel.border#399bda
  • panelInput.border#a1a1a1
  • panelTitle.activeBorder#bb00bb
  • panelTitle.activeForeground#a1a1a1
  • panelTitle.inactiveForeground#6e6e6e
  • peekView.border#000000
  • peekViewEditor.background#273032
  • peekViewEditor.matchHighlightBackground#fef77380
  • peekViewResult.background#383838
  • peekViewResult.fileForeground#a1a1a1
  • peekViewResult.lineForeground#a1a1a1
  • peekViewResult.matchHighlightBackground#fef77380
  • peekViewResult.selectionBackground#000000
  • peekViewResult.selectionForeground#a1a1a1
  • peekViewTitle.background#1c1c1c
  • peekViewTitleDescription.foreground#6e6e6e
  • peekViewTitleLabel.foreground#a1a1a1
  • pickerGroup.border#399bda
  • pickerGroup.foreground#00bbbb
  • progressBar.background#bb00bb
  • scrollbar.shadow#444444
  • selection.background#399bda
  • settings.checkboxBackground#383838
  • settings.checkboxBorder#1c1c1c
  • settings.checkboxForeground#a1a1a1
  • settings.dropdownBackground#383838
  • settings.dropdownBorder#1c1c1c
  • settings.dropdownForeground#a1a1a1
  • settings.headerForeground#a1a1a1
  • settings.modifiedItemIndicator#fecc22
  • settings.numberInputBackground#383838
  • settings.numberInputBorder#1c1c1c
  • settings.numberInputForeground#a1a1a1
  • settings.textInputBackground#383838
  • settings.textInputBorder#1c1c1c
  • settings.textInputForeground#a1a1a1
  • sideBar.background#383838
  • sideBarSectionHeader.background#273032
  • sideBarSectionHeader.border#1c1c1c
  • sideBarTitle.foreground#a1a1a1
  • statusBar.background#1c1c1c
  • statusBar.debuggingBackground#a50001
  • statusBar.debuggingForeground#1c1c1c
  • statusBar.foreground#a1a1a1
  • statusBar.noFolderBackground#1c1c1c
  • statusBar.noFolderForeground#a1a1a1
  • statusBarItem.prominentBackground#a50001
  • statusBarItem.prominentHoverBackground#fecc22
  • statusBarItem.remoteBackground#399bda
  • statusBarItem.remoteForeground#273032
  • tab.activeBackground#273032
  • tab.activeBorderTop#bb00bb80
  • tab.activeForeground#a1a1a1
  • tab.border#1c1c1c
  • tab.inactiveBackground#383838
  • tab.inactiveForeground#6e6e6e
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#399bda
  • terminal.ansiBrightBlack#555555
  • terminal.ansiBrightBlue#a0d6ff
  • terminal.ansiBrightCyan#55ffff
  • terminal.ansiBrightGreen#92c763
  • terminal.ansiBrightMagenta#ff55ff
  • terminal.ansiBrightRed#ff0003
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#fef773
  • terminal.ansiCyan#00bbbb
  • terminal.ansiGreen#00bb00
  • terminal.ansiMagenta#bb00bb
  • terminal.ansiRed#a50001
  • terminal.ansiWhite#bbbbbb
  • terminal.ansiYellow#fecc22
  • terminal.background#273032
  • 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#399bda
source#a1a1a1
meta.diff, meta.diff.header#6e6e6e
markup.inserted#00bb00
markup.deleted#a50001
markup.changed#fecc22
invalid#a50001underline italic
invalid.deprecated#a1a1a1underline italic
entity.name.filename#fef773
markup.error#a50001
markup.underlineunderline
markup.bold#fecc22bold
markup.heading#399bdabold
markup.italic#fef773italic
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#fef773italic
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#399bda
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#399bda
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#fef773
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#399bdaitalic
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#fecc22italic
constant, variable.other.constant#399bda
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#fecc22italic
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#399bdaregular
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#fecc22
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#fecc22
storage.modifier#bb00bb
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#fef773
punctuation.definition.group.capture.regexp#bb00bb
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#a50001
punctuation.definition.character-class.regexp#00bbbb
punctuation.definition.group.regexp#fecc22
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#a50001
meta.assertion.look-ahead.regexp#00bb00
string#fef773
punctuation.definition.string.begin, punctuation.definition.string.end#a0d6ff
punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end#399bda
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#fecc22italic
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#fef773
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#399bda
support.constant#399bdanormal
meta.scope.prerequisites.makefile#fef773
meta.attribute-selector.scss#fef773
punctuation.definition.attribute-selector.end.bracket.square.scss, punctuation.definition.attribute-selector.begin.bracket.square.scss#a1a1a1
meta.preprocessor.haskell#6e6e6e