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#4385be10
  • activityBar.activeBorder#8b7ec880
  • activityBar.background#100f0f
  • activityBar.foreground#cecdc3
  • activityBar.inactiveForeground#575653
  • activityBarBadge.background#8b7ec8
  • activityBarBadge.foreground#100f0f
  • badge.background#1c1b1a
  • badge.foreground#cecdc3
  • breadcrumb.activeSelectionForeground#cecdc3
  • breadcrumb.background#100f0f
  • breadcrumb.focusForeground#cecdc3
  • breadcrumb.foreground#575653
  • breadcrumbPicker.background#000000
  • button.background#1c1b1a
  • button.foreground#cecdc3
  • checkbox.background#1c1b1a
  • checkbox.border#000000
  • checkbox.foreground#cecdc3
  • contrastBorder#000000
  • debugToolBar.background#1c1b1a
  • diffEditor.insertedTextBackground#879a3920
  • diffEditor.removedTextBackground#d14d4150
  • dropdown.background#100f0f
  • dropdown.border#000000
  • dropdown.foreground#cecdc3
  • editor.background#100f0f
  • editor.findMatchBackground#da702c80
  • editor.findMatchHighlightBackground#fffcf040
  • editor.findRangeHighlightBackground#28272675
  • editor.foldBackground#1c1b1a
  • editor.foreground#cecdc3
  • editor.hoverHighlightBackground#000000
  • editor.lineHighlightBorder#1c1b1a
  • editor.rangeHighlightBackground#4385be15
  • editor.selectionBackground#1c1b1a
  • editor.selectionHighlightBackground#1c1b1a
  • editor.snippetFinalTabstopHighlightBackground#100f0f
  • editor.snippetFinalTabstopHighlightBorder#879a39
  • editor.snippetTabstopHighlightBackground#100f0f
  • editor.snippetTabstopHighlightBorder#575653
  • editor.wordHighlightBackground#3aa99f50
  • editor.wordHighlightStrongBackground#879a3950
  • editorCodeLens.foreground#575653
  • editorError.foreground#d14d41
  • editorGroup.border#4385be
  • editorGroup.dropBackground#28272670
  • editorGroupHeader.tabsBackground#000000
  • editorGutter.addedBackground#879a3980
  • editorGutter.deletedBackground#d14d4180
  • editorGutter.modifiedBackground#3aa99f80
  • editorHoverWidget.background#100f0f
  • editorHoverWidget.border#575653
  • editorIndentGuide.activeBackground#fffcf045
  • editorIndentGuide.background#fffcf01A
  • editorLineNumber.foreground#575653
  • editorLink.activeForeground#3aa99f
  • editorMarkerNavigation.background#1c1b1a
  • editorOverviewRuler.addedForeground#879a3980
  • editorOverviewRuler.border#000000
  • editorOverviewRuler.currentContentForeground#879a39
  • editorOverviewRuler.deletedForeground#d14d4180
  • editorOverviewRuler.errorForeground#d14d4180
  • editorOverviewRuler.incomingContentForeground#4385be
  • editorOverviewRuler.infoForeground#3aa99f80
  • editorOverviewRuler.modifiedForeground#3aa99f80
  • editorOverviewRuler.selectionHighlightForeground#da702c
  • editorOverviewRuler.warningForeground#da702c80
  • editorOverviewRuler.wordHighlightForeground#3aa99f
  • editorOverviewRuler.wordHighlightStrongForeground#879a39
  • editorRuler.foreground#fffcf01A
  • editorSuggestWidget.background#1c1b1a
  • editorSuggestWidget.foreground#cecdc3
  • editorSuggestWidget.selectedBackground#1c1b1a
  • editorWarning.foreground#da702c
  • editorWhitespace.foreground#fffcf01A
  • editorWidget.background#1c1b1a
  • errorForeground#d14d41
  • extensionButton.prominentBackground#879a3990
  • extensionButton.prominentForeground#cecdc3
  • extensionButton.prominentHoverBackground#879a3960
  • focusBorder#575653
  • foreground#cecdc3
  • gitDecoration.conflictingResourceForeground#da702c
  • gitDecoration.deletedResourceForeground#d14d41
  • gitDecoration.ignoredResourceForeground#575653
  • gitDecoration.modifiedResourceForeground#3aa99f
  • gitDecoration.untrackedResourceForeground#879a39
  • input.background#100f0f
  • input.border#000000
  • input.foreground#cecdc3
  • input.placeholderForeground#575653
  • inputOption.activeBorder#4385be
  • inputValidation.errorBackground#100f0f
  • inputValidation.errorBorder#d14d41
  • inputValidation.errorForeground#d14d41
  • inputValidation.infoBackground#100f0f
  • inputValidation.infoBorder#4385be
  • inputValidation.infoForeground#4385be
  • inputValidation.warningBackground#100f0f
  • inputValidation.warningBorder#da702c
  • inputValidation.warningForeground#da702c
  • list.activeSelectionBackground#1c1b1a
  • list.activeSelectionForeground#cecdc3
  • list.dropBackground#1c1b1a
  • list.errorForeground#d14d41
  • list.focusBackground#28272675
  • list.highlightForeground#3aa99f
  • list.hoverBackground#28272675
  • list.inactiveSelectionBackground#28272675
  • list.warningForeground#da702c
  • listFilterWidget.background#100f0f
  • listFilterWidget.noMatchesOutline#d14d41
  • listFilterWidget.outline#1c1b1a
  • merge.currentHeaderBackground#879a3990
  • merge.incomingHeaderBackground#4385be90
  • notification.background#100f0f
  • notification.buttonBackground#1c1b1a
  • notification.buttonForeground#cecdc3
  • notification.buttonHoverBackground#28272675
  • notification.errorBackground#d14d41
  • notification.errorForeground#100f0f
  • notification.foreground#cecdc3
  • notification.infoBackground#4385be
  • notification.infoForeground#100f0f
  • notification.warningBackground#da702c
  • notification.warningForeground#100f0f
  • notificationCenter.border#1c1b1a
  • notificationCenterHeader.background#100f0f
  • notificationCenterHeader.foreground#cecdc3
  • notificationLink.foreground#3aa99f
  • notifications.background#100f0f
  • notifications.border#1c1b1a
  • notifications.foreground#cecdc3
  • notificationsErrorIcon.foreground#d14d41
  • notificationsInfoIcon.foreground#4385be
  • notificationsWarningIcon.foreground#da702c
  • notificationToast.border#1c1b1a
  • panel.background#100f0f
  • panel.border#4385be
  • panelInput.border#cecdc3
  • panelTitle.activeBorder#8b7ec8
  • panelTitle.activeForeground#cecdc3
  • panelTitle.inactiveForeground#575653
  • peekView.border#1c1b1a
  • peekViewEditor.background#100f0f
  • peekViewEditor.matchHighlightBackground#bc521580
  • peekViewResult.background#1c1b1a
  • peekViewResult.fileForeground#cecdc3
  • peekViewResult.lineForeground#cecdc3
  • peekViewResult.matchHighlightBackground#bc521580
  • peekViewResult.selectionBackground#1c1b1a
  • peekViewResult.selectionForeground#cecdc3
  • peekViewTitle.background#000000
  • peekViewTitleDescription.foreground#575653
  • peekViewTitleLabel.foreground#cecdc3
  • pickerGroup.border#4385be
  • pickerGroup.foreground#3aa99f
  • progressBar.background#8b7ec8
  • scrollbar.shadow#444444
  • selection.background#4385be
  • settings.checkboxBackground#1c1b1a
  • settings.checkboxBorder#000000
  • settings.checkboxForeground#cecdc3
  • settings.dropdownBackground#1c1b1a
  • settings.dropdownBorder#000000
  • settings.dropdownForeground#cecdc3
  • settings.headerForeground#cecdc3
  • settings.modifiedItemIndicator#da702c
  • settings.numberInputBackground#1c1b1a
  • settings.numberInputBorder#000000
  • settings.numberInputForeground#cecdc3
  • settings.textInputBackground#1c1b1a
  • settings.textInputBorder#000000
  • settings.textInputForeground#cecdc3
  • sideBar.background#1c1b1a
  • sideBarSectionHeader.background#100f0f
  • sideBarSectionHeader.border#000000
  • sideBarTitle.foreground#cecdc3
  • statusBar.background#000000
  • statusBar.debuggingBackground#d14d41
  • statusBar.debuggingForeground#000000
  • statusBar.foreground#cecdc3
  • statusBar.noFolderBackground#000000
  • statusBar.noFolderForeground#cecdc3
  • statusBarItem.prominentBackground#d14d41
  • statusBarItem.prominentHoverBackground#da702c
  • statusBarItem.remoteBackground#4385be
  • statusBarItem.remoteForeground#100f0f
  • tab.activeBackground#100f0f
  • tab.activeBorderTop#8b7ec880
  • tab.activeForeground#cecdc3
  • tab.border#000000
  • tab.inactiveBackground#1c1b1a
  • tab.inactiveForeground#575653
  • terminal.ansiBlack#1c1b1a
  • terminal.ansiBlue#4385be
  • terminal.ansiBrightBlack#282726
  • terminal.ansiBrightBlue#24837b
  • terminal.ansiBrightCyan#66800b
  • terminal.ansiBrightGreen#ad8301
  • terminal.ansiBrightMagenta#205ea6
  • terminal.ansiBrightRed#af3029
  • terminal.ansiBrightWhite#fffcf0
  • terminal.ansiBrightYellow#bc5215
  • terminal.ansiCyan#3aa99f
  • terminal.ansiGreen#879a39
  • terminal.ansiMagenta#8b7ec8
  • terminal.ansiRed#d14d41
  • terminal.ansiWhite#e6e4d9
  • terminal.ansiYellow#da702c
  • terminal.background#100f0f
  • terminal.border#cecdc3
  • terminal.foreground#cecdc3
  • terminal.selectionBackground#1c1b1a50
  • textBlockQuote.background#1c1b1a
  • titleBar.activeBackground#1c1b1a
  • titleBar.activeForeground#cecdc3
  • titleBar.inactiveBackground#000000
  • titleBar.inactiveForeground#575653
  • walkThrough.embeddedEditorBackground#1c1b1a
  • welcomePage.buttonBackground#1c1b1a
  • welcomePage.buttonHoverBackground#28272675
  • widget.shadow#444444

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
emphasisitalic
strongbold
header#4385be
source#cecdc3
meta.diff, meta.diff.header#575653
markup.inserted#879a39
markup.deleted#d14d41
markup.changed#da702c
invalid#d14d41underline italic
invalid.deprecated#cecdc3underline italic
entity.name.filename#bc5215
markup.error#d14d41
markup.underlineunderline
markup.bold#da702cbold
markup.heading#4385bebold
markup.italic#bc5215italic
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#3aa99f
markup.inline.raw, markup.raw.restructuredtext#879a39
markup.underline.link, markup.underline.link.image#3aa99f
meta.link.reference.def.restructuredtext, punctuation.definition.directive.restructuredtext, string.other.link.description, string.other.link.title#8b7ec8
entity.name.directive.restructuredtext, markup.quote#bc5215italic
meta.separator.markdown#575653
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#879a39
punctuation.definition.constant.restructuredtext#4385be
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#4385be
meta.paragraph.markdown punctuation.definition.string.begin, meta.paragraph.markdown punctuation.definition.string.end#cecdc3
markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.begin, markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.end#bc5215
entity.name.type.class, entity.name.class#3aa99fnormal
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#4385beitalic
entity.other.inherited-class#3aa99fitalic
comment, punctuation.definition.comment, unused.comment, wildcard.comment#575653
comment keyword.codetag.notation, comment.block.documentation keyword, comment.block.documentation storage.type.class#8b7ec8
comment.block.documentation entity.name.type#3aa99fitalic
comment.block.documentation entity.name.type punctuation.definition.bracket#3aa99f
comment.block.documentation variable#da702citalic
constant, variable.other.constant#4385be
constant.character.escape, constant.character.string.escape, constant.regexp#8b7ec8
entity.name.tag#8b7ec8
entity.other.attribute-name.parent-selector#8b7ec8
entity.other.attribute-name#879a39italic
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#879a39
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#da702citalic
meta.decorator variable.other.readwrite, meta.decorator variable.other.property#879a39italic
meta.decorator variable.other.object#879a39
keyword, punctuation.definition.keyword#8b7ec8
keyword.control.new, keyword.operator.newbold
meta.selector#8b7ec8
support#3aa99fitalic
support.function.magic, support.variable, variable.other.predefined#4385beregular
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#8b7ec8
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#cecdc3
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#8b7ec8
entity.name.function.target.makefile, entity.name.section.toml, entity.name.tag.yaml, variable.other.key.toml#3aa99f
constant.other.date, constant.other.timestamp#da702c
variable.other.alias.yaml#879a39italic underline
storage, meta.implementation storage.type.objc, meta.interface-or-protocol storage.type.objc, source.groovy storage.type.def#8b7ec8regular
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#3aa99fitalic
entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#da702c
storage.modifier#8b7ec8
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#bc5215
punctuation.definition.group.capture.regexp#8b7ec8
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#d14d41
punctuation.definition.character-class.regexp#3aa99f
punctuation.definition.group.regexp#da702c
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#d14d41
meta.assertion.look-ahead.regexp#879a39
string#bc5215
punctuation.definition.string.begin, punctuation.definition.string.end#d0a215
punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end#4385be
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#575653
variable, constant.other.key.perl, support.variable.property, variable.other.constant.js, variable.other.constant.ts, variable.other.constant.tsx#cecdc3
meta.import variable.other.readwrite, meta.object-binding-pattern-variable variable.object.property, meta.variable.assignment.destructured.object.coffee variable#da702citalic
meta.import variable.other.readwrite.alias, meta.export variable.other.readwrite.alias, meta.variable.assignment.destructured.object.coffee variable variable#cecdc3normal
meta.selectionset.graphql variable#bc5215
meta.selectionset.graphql meta.arguments variable#cecdc3
entity.name.fragment.graphql, variable.fragment.graphql#3aa99f
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#cecdc3
source.shell variable.other#4385be
support.constant#4385benormal
meta.scope.prerequisites.makefile#bc5215
meta.attribute-selector.scss#bc5215
punctuation.definition.attribute-selector.end.bracket.square.scss, punctuation.definition.attribute-selector.begin.bracket.square.scss#cecdc3
meta.preprocessor.haskell#575653