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#01a0e410
  • activityBar.activeBorder#a16a9480
  • activityBar.background#090300
  • activityBar.foreground#928f8e
  • activityBar.inactiveForeground#6e6a68
  • activityBarBadge.background#a16a94
  • activityBarBadge.foreground#090300
  • badge.background#090300
  • badge.foreground#928f8e
  • breadcrumb.activeSelectionForeground#928f8e
  • breadcrumb.background#090300
  • breadcrumb.focusForeground#928f8e
  • breadcrumb.foreground#6e6a68
  • breadcrumbPicker.background#1e1d1c
  • button.background#3d3a38
  • button.foreground#928f8e
  • checkbox.background#3d3a38
  • checkbox.border#1e1d1c
  • checkbox.foreground#928f8e
  • contrastBorder#1e1d1c
  • debugToolBar.background#3d3a38
  • diffEditor.insertedTextBackground#01a25220
  • diffEditor.removedTextBackground#db2d2050
  • dropdown.background#090300
  • dropdown.border#1e1d1c
  • dropdown.foreground#928f8e
  • editor.background#090300
  • editor.findMatchBackground#fded0280
  • editor.findMatchHighlightBackground#f7f7f740
  • editor.findRangeHighlightBackground#5c585575
  • editor.foldBackground#3d3a38
  • editor.foreground#928f8e
  • editor.hoverHighlightBackground#1e1d1c
  • editor.lineHighlightBorder#090300
  • editor.rangeHighlightBackground#01a0e415
  • editor.selectionBackground#090300
  • editor.selectionHighlightBackground#090300
  • editor.snippetFinalTabstopHighlightBackground#090300
  • editor.snippetFinalTabstopHighlightBorder#01a252
  • editor.snippetTabstopHighlightBackground#090300
  • editor.snippetTabstopHighlightBorder#6e6a68
  • editor.wordHighlightBackground#b5e4f450
  • editor.wordHighlightStrongBackground#01a25250
  • editorCodeLens.foreground#6e6a68
  • editorError.foreground#db2d20
  • editorGroup.border#01a0e4
  • editorGroup.dropBackground#5c585570
  • editorGroupHeader.tabsBackground#1e1d1c
  • editorGutter.addedBackground#01a25280
  • editorGutter.deletedBackground#db2d2080
  • editorGutter.modifiedBackground#b5e4f480
  • editorHoverWidget.background#090300
  • editorHoverWidget.border#6e6a68
  • editorIndentGuide.activeBackground#f7f7f745
  • editorIndentGuide.background#f7f7f71A
  • editorLineNumber.foreground#6e6a68
  • editorLink.activeForeground#b5e4f4
  • editorMarkerNavigation.background#3d3a38
  • editorOverviewRuler.addedForeground#01a25280
  • editorOverviewRuler.border#1e1d1c
  • editorOverviewRuler.currentContentForeground#01a252
  • editorOverviewRuler.deletedForeground#db2d2080
  • editorOverviewRuler.errorForeground#db2d2080
  • editorOverviewRuler.incomingContentForeground#01a0e4
  • editorOverviewRuler.infoForeground#b5e4f480
  • editorOverviewRuler.modifiedForeground#b5e4f480
  • editorOverviewRuler.selectionHighlightForeground#fded02
  • editorOverviewRuler.warningForeground#fded0280
  • editorOverviewRuler.wordHighlightForeground#b5e4f4
  • editorOverviewRuler.wordHighlightStrongForeground#01a252
  • editorRuler.foreground#f7f7f71A
  • editorSuggestWidget.background#3d3a38
  • editorSuggestWidget.foreground#928f8e
  • editorSuggestWidget.selectedBackground#090300
  • editorWarning.foreground#fded02
  • editorWhitespace.foreground#f7f7f71A
  • editorWidget.background#3d3a38
  • errorForeground#db2d20
  • extensionButton.prominentBackground#01a25290
  • extensionButton.prominentForeground#928f8e
  • extensionButton.prominentHoverBackground#01a25260
  • focusBorder#6e6a68
  • foreground#928f8e
  • gitDecoration.conflictingResourceForeground#fded02
  • gitDecoration.deletedResourceForeground#db2d20
  • gitDecoration.ignoredResourceForeground#6e6a68
  • gitDecoration.modifiedResourceForeground#b5e4f4
  • gitDecoration.untrackedResourceForeground#01a252
  • input.background#090300
  • input.border#1e1d1c
  • input.foreground#928f8e
  • input.placeholderForeground#6e6a68
  • inputOption.activeBorder#01a0e4
  • inputValidation.errorBackground#090300
  • inputValidation.errorBorder#db2d20
  • inputValidation.errorForeground#db2d20
  • inputValidation.infoBackground#090300
  • inputValidation.infoBorder#01a0e4
  • inputValidation.infoForeground#01a0e4
  • inputValidation.warningBackground#090300
  • inputValidation.warningBorder#fded02
  • inputValidation.warningForeground#fded02
  • list.activeSelectionBackground#090300
  • list.activeSelectionForeground#928f8e
  • list.dropBackground#090300
  • list.errorForeground#db2d20
  • list.focusBackground#5c585575
  • list.highlightForeground#b5e4f4
  • list.hoverBackground#5c585575
  • list.inactiveSelectionBackground#5c585575
  • list.warningForeground#fded02
  • listFilterWidget.background#090300
  • listFilterWidget.noMatchesOutline#db2d20
  • listFilterWidget.outline#090300
  • merge.currentHeaderBackground#01a25290
  • merge.incomingHeaderBackground#01a0e490
  • notification.background#090300
  • notification.buttonBackground#090300
  • notification.buttonForeground#928f8e
  • notification.buttonHoverBackground#5c585575
  • notification.errorBackground#db2d20
  • notification.errorForeground#090300
  • notification.foreground#928f8e
  • notification.infoBackground#01a0e4
  • notification.infoForeground#090300
  • notification.warningBackground#fded02
  • notification.warningForeground#090300
  • notificationCenter.border#3d3a38
  • notificationCenterHeader.background#090300
  • notificationCenterHeader.foreground#928f8e
  • notificationLink.foreground#b5e4f4
  • notifications.background#090300
  • notifications.border#3d3a38
  • notifications.foreground#928f8e
  • notificationsErrorIcon.foreground#db2d20
  • notificationsInfoIcon.foreground#01a0e4
  • notificationsWarningIcon.foreground#fded02
  • notificationToast.border#3d3a38
  • panel.background#090300
  • panel.border#01a0e4
  • panelInput.border#928f8e
  • panelTitle.activeBorder#a16a94
  • panelTitle.activeForeground#928f8e
  • panelTitle.inactiveForeground#6e6a68
  • peekView.border#090300
  • peekViewEditor.background#090300
  • peekViewEditor.matchHighlightBackground#4a454380
  • peekViewResult.background#3d3a38
  • peekViewResult.fileForeground#928f8e
  • peekViewResult.lineForeground#928f8e
  • peekViewResult.matchHighlightBackground#4a454380
  • peekViewResult.selectionBackground#090300
  • peekViewResult.selectionForeground#928f8e
  • peekViewTitle.background#1e1d1c
  • peekViewTitleDescription.foreground#6e6a68
  • peekViewTitleLabel.foreground#928f8e
  • pickerGroup.border#01a0e4
  • pickerGroup.foreground#b5e4f4
  • progressBar.background#a16a94
  • scrollbar.shadow#444444
  • selection.background#01a0e4
  • settings.checkboxBackground#3d3a38
  • settings.checkboxBorder#1e1d1c
  • settings.checkboxForeground#928f8e
  • settings.dropdownBackground#3d3a38
  • settings.dropdownBorder#1e1d1c
  • settings.dropdownForeground#928f8e
  • settings.headerForeground#928f8e
  • settings.modifiedItemIndicator#fded02
  • settings.numberInputBackground#3d3a38
  • settings.numberInputBorder#1e1d1c
  • settings.numberInputForeground#928f8e
  • settings.textInputBackground#3d3a38
  • settings.textInputBorder#1e1d1c
  • settings.textInputForeground#928f8e
  • sideBar.background#3d3a38
  • sideBarSectionHeader.background#090300
  • sideBarSectionHeader.border#1e1d1c
  • sideBarTitle.foreground#928f8e
  • statusBar.background#1e1d1c
  • statusBar.debuggingBackground#db2d20
  • statusBar.debuggingForeground#1e1d1c
  • statusBar.foreground#928f8e
  • statusBar.noFolderBackground#1e1d1c
  • statusBar.noFolderForeground#928f8e
  • statusBarItem.prominentBackground#db2d20
  • statusBarItem.prominentHoverBackground#fded02
  • statusBarItem.remoteBackground#01a0e4
  • statusBarItem.remoteForeground#090300
  • tab.activeBackground#090300
  • tab.activeBorderTop#a16a9480
  • tab.activeForeground#928f8e
  • tab.border#1e1d1c
  • tab.inactiveBackground#3d3a38
  • tab.inactiveForeground#6e6a68
  • terminal.ansiBlack#090300
  • terminal.ansiBlue#01a0e4
  • terminal.ansiBrightBlack#5c5855
  • terminal.ansiBrightBlue#807d7c
  • terminal.ansiBrightCyan#cdab53
  • terminal.ansiBrightGreen#3a3432
  • terminal.ansiBrightMagenta#d6d5d4
  • terminal.ansiBrightRed#e8bbd0
  • terminal.ansiBrightWhite#f7f7f7
  • terminal.ansiBrightYellow#4a4543
  • terminal.ansiCyan#b5e4f4
  • terminal.ansiGreen#01a252
  • terminal.ansiMagenta#a16a94
  • terminal.ansiRed#db2d20
  • terminal.ansiWhite#a5a2a2
  • terminal.ansiYellow#fded02
  • terminal.background#090300
  • terminal.border#928f8e
  • terminal.foreground#928f8e
  • terminal.selectionBackground#09030050
  • textBlockQuote.background#3d3a38
  • titleBar.activeBackground#3d3a38
  • titleBar.activeForeground#928f8e
  • titleBar.inactiveBackground#1e1d1c
  • titleBar.inactiveForeground#6e6a68
  • walkThrough.embeddedEditorBackground#3d3a38
  • welcomePage.buttonBackground#090300
  • welcomePage.buttonHoverBackground#5c585575
  • widget.shadow#444444

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
emphasisitalic
strongbold
header#01a0e4
source#928f8e
meta.diff, meta.diff.header#6e6a68
markup.inserted#01a252
markup.deleted#db2d20
markup.changed#fded02
invalid#db2d20underline italic
invalid.deprecated#928f8eunderline italic
entity.name.filename#4a4543
markup.error#db2d20
markup.underlineunderline
markup.bold#fded02bold
markup.heading#01a0e4bold
markup.italic#4a4543italic
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#b5e4f4
markup.inline.raw, markup.raw.restructuredtext#01a252
markup.underline.link, markup.underline.link.image#b5e4f4
meta.link.reference.def.restructuredtext, punctuation.definition.directive.restructuredtext, string.other.link.description, string.other.link.title#a16a94
entity.name.directive.restructuredtext, markup.quote#4a4543italic
meta.separator.markdown#6e6a68
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#01a252
punctuation.definition.constant.restructuredtext#01a0e4
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#01a0e4
meta.paragraph.markdown punctuation.definition.string.begin, meta.paragraph.markdown punctuation.definition.string.end#928f8e
markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.begin, markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.end#4a4543
entity.name.type.class, entity.name.class#b5e4f4normal
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#01a0e4italic
entity.other.inherited-class#b5e4f4italic
comment, punctuation.definition.comment, unused.comment, wildcard.comment#6e6a68
comment keyword.codetag.notation, comment.block.documentation keyword, comment.block.documentation storage.type.class#a16a94
comment.block.documentation entity.name.type#b5e4f4italic
comment.block.documentation entity.name.type punctuation.definition.bracket#b5e4f4
comment.block.documentation variable#fded02italic
constant, variable.other.constant#01a0e4
constant.character.escape, constant.character.string.escape, constant.regexp#a16a94
entity.name.tag#a16a94
entity.other.attribute-name.parent-selector#a16a94
entity.other.attribute-name#01a252italic
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#01a252
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#fded02italic
meta.decorator variable.other.readwrite, meta.decorator variable.other.property#01a252italic
meta.decorator variable.other.object#01a252
keyword, punctuation.definition.keyword#a16a94
keyword.control.new, keyword.operator.newbold
meta.selector#a16a94
support#b5e4f4italic
support.function.magic, support.variable, variable.other.predefined#01a0e4regular
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#a16a94
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#928f8e
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#a16a94
entity.name.function.target.makefile, entity.name.section.toml, entity.name.tag.yaml, variable.other.key.toml#b5e4f4
constant.other.date, constant.other.timestamp#fded02
variable.other.alias.yaml#01a252italic underline
storage, meta.implementation storage.type.objc, meta.interface-or-protocol storage.type.objc, source.groovy storage.type.def#a16a94regular
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#b5e4f4italic
entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#fded02
storage.modifier#a16a94
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#4a4543
punctuation.definition.group.capture.regexp#a16a94
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#db2d20
punctuation.definition.character-class.regexp#b5e4f4
punctuation.definition.group.regexp#fded02
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#db2d20
meta.assertion.look-ahead.regexp#01a252
string#4a4543
punctuation.definition.string.begin, punctuation.definition.string.end#807d7c
punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end#01a0e4
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#6e6a68
variable, constant.other.key.perl, support.variable.property, variable.other.constant.js, variable.other.constant.ts, variable.other.constant.tsx#928f8e
meta.import variable.other.readwrite, meta.object-binding-pattern-variable variable.object.property, meta.variable.assignment.destructured.object.coffee variable#fded02italic
meta.import variable.other.readwrite.alias, meta.export variable.other.readwrite.alias, meta.variable.assignment.destructured.object.coffee variable variable#928f8enormal
meta.selectionset.graphql variable#4a4543
meta.selectionset.graphql meta.arguments variable#928f8e
entity.name.fragment.graphql, variable.fragment.graphql#b5e4f4
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#928f8e
source.shell variable.other#01a0e4
support.constant#01a0e4normal
meta.scope.prerequisites.makefile#4a4543
meta.attribute-selector.scss#4a4543
punctuation.definition.attribute-selector.end.bracket.square.scss, punctuation.definition.attribute-selector.begin.bracket.square.scss#928f8e
meta.preprocessor.haskell#6e6a68