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#566d8c10
  • activityBar.activeBorder#724c7c80
  • activityBar.background#181c27
  • activityBar.foreground#978f73
  • activityBar.inactiveForeground#6b685f
  • activityBarBadge.background#724c7c
  • activityBarBadge.foreground#181c27
  • badge.background#181818
  • badge.foreground#978f73
  • breadcrumb.activeSelectionForeground#978f73
  • breadcrumb.background#181c27
  • breadcrumb.focusForeground#978f73
  • breadcrumb.foreground#6b685f
  • breadcrumbPicker.background#1c1c1c
  • button.background#383838
  • button.foreground#978f73
  • checkbox.background#383838
  • checkbox.border#1c1c1c
  • checkbox.foreground#978f73
  • contrastBorder#1c1c1c
  • debugToolBar.background#383838
  • diffEditor.insertedTextBackground#48513b20
  • diffEditor.removedTextBackground#80000950
  • dropdown.background#181c27
  • dropdown.border#1c1c1c
  • dropdown.foreground#978f73
  • editor.background#181c27
  • editor.findMatchBackground#cc8a3e80
  • editor.findMatchHighlightBackground#f3f3f340
  • editor.findRangeHighlightBackground#55555575
  • editor.foldBackground#383838
  • editor.foreground#978f73
  • editor.hoverHighlightBackground#1c1c1c
  • editor.lineHighlightBorder#181818
  • editor.rangeHighlightBackground#566d8c15
  • editor.selectionBackground#181818
  • editor.selectionHighlightBackground#181818
  • editor.snippetFinalTabstopHighlightBackground#181c27
  • editor.snippetFinalTabstopHighlightBorder#48513b
  • editor.snippetTabstopHighlightBackground#181c27
  • editor.snippetTabstopHighlightBorder#6b685f
  • editor.wordHighlightBackground#5b4f4a50
  • editor.wordHighlightStrongBackground#48513b50
  • editorCodeLens.foreground#6b685f
  • editorError.foreground#800009
  • editorGroup.border#566d8c
  • editorGroup.dropBackground#55555570
  • editorGroupHeader.tabsBackground#1c1c1c
  • editorGutter.addedBackground#48513b80
  • editorGutter.deletedBackground#80000980
  • editorGutter.modifiedBackground#5b4f4a80
  • editorHoverWidget.background#181c27
  • editorHoverWidget.border#6b685f
  • editorIndentGuide.activeBackground#f3f3f345
  • editorIndentGuide.background#f3f3f31A
  • editorLineNumber.foreground#6b685f
  • editorLink.activeForeground#5b4f4a
  • editorMarkerNavigation.background#383838
  • editorOverviewRuler.addedForeground#48513b80
  • editorOverviewRuler.border#1c1c1c
  • editorOverviewRuler.currentContentForeground#48513b
  • editorOverviewRuler.deletedForeground#80000980
  • editorOverviewRuler.errorForeground#80000980
  • editorOverviewRuler.incomingContentForeground#566d8c
  • editorOverviewRuler.infoForeground#5b4f4a80
  • editorOverviewRuler.modifiedForeground#5b4f4a80
  • editorOverviewRuler.selectionHighlightForeground#cc8a3e
  • editorOverviewRuler.warningForeground#cc8a3e80
  • editorOverviewRuler.wordHighlightForeground#5b4f4a
  • editorOverviewRuler.wordHighlightStrongForeground#48513b
  • editorRuler.foreground#f3f3f31A
  • editorSuggestWidget.background#383838
  • editorSuggestWidget.foreground#978f73
  • editorSuggestWidget.selectedBackground#181818
  • editorWarning.foreground#cc8a3e
  • editorWhitespace.foreground#f3f3f31A
  • editorWidget.background#383838
  • errorForeground#800009
  • extensionButton.prominentBackground#48513b90
  • extensionButton.prominentForeground#978f73
  • extensionButton.prominentHoverBackground#48513b60
  • focusBorder#6b685f
  • foreground#978f73
  • gitDecoration.conflictingResourceForeground#cc8a3e
  • gitDecoration.deletedResourceForeground#800009
  • gitDecoration.ignoredResourceForeground#6b685f
  • gitDecoration.modifiedResourceForeground#5b4f4a
  • gitDecoration.untrackedResourceForeground#48513b
  • input.background#181c27
  • input.border#1c1c1c
  • input.foreground#978f73
  • input.placeholderForeground#6b685f
  • inputOption.activeBorder#566d8c
  • inputValidation.errorBackground#181c27
  • inputValidation.errorBorder#800009
  • inputValidation.errorForeground#800009
  • inputValidation.infoBackground#181c27
  • inputValidation.infoBorder#566d8c
  • inputValidation.infoForeground#566d8c
  • inputValidation.warningBackground#181c27
  • inputValidation.warningBorder#cc8a3e
  • inputValidation.warningForeground#cc8a3e
  • list.activeSelectionBackground#181818
  • list.activeSelectionForeground#978f73
  • list.dropBackground#181818
  • list.errorForeground#800009
  • list.focusBackground#55555575
  • list.highlightForeground#5b4f4a
  • list.hoverBackground#55555575
  • list.inactiveSelectionBackground#55555575
  • list.warningForeground#cc8a3e
  • listFilterWidget.background#181c27
  • listFilterWidget.noMatchesOutline#800009
  • listFilterWidget.outline#181818
  • merge.currentHeaderBackground#48513b90
  • merge.incomingHeaderBackground#566d8c90
  • notification.background#181c27
  • notification.buttonBackground#181818
  • notification.buttonForeground#978f73
  • notification.buttonHoverBackground#55555575
  • notification.errorBackground#800009
  • notification.errorForeground#181c27
  • notification.foreground#978f73
  • notification.infoBackground#566d8c
  • notification.infoForeground#181c27
  • notification.warningBackground#cc8a3e
  • notification.warningForeground#181c27
  • notificationCenter.border#383838
  • notificationCenterHeader.background#181c27
  • notificationCenterHeader.foreground#978f73
  • notificationLink.foreground#5b4f4a
  • notifications.background#181c27
  • notifications.border#383838
  • notifications.foreground#978f73
  • notificationsErrorIcon.foreground#800009
  • notificationsInfoIcon.foreground#566d8c
  • notificationsWarningIcon.foreground#cc8a3e
  • notificationToast.border#383838
  • panel.background#181c27
  • panel.border#566d8c
  • panelInput.border#978f73
  • panelTitle.activeBorder#724c7c
  • panelTitle.activeForeground#978f73
  • panelTitle.inactiveForeground#6b685f
  • peekView.border#181818
  • peekViewEditor.background#181c27
  • peekViewEditor.matchHighlightBackground#dcde7b80
  • peekViewResult.background#383838
  • peekViewResult.fileForeground#978f73
  • peekViewResult.lineForeground#978f73
  • peekViewResult.matchHighlightBackground#dcde7b80
  • peekViewResult.selectionBackground#181818
  • peekViewResult.selectionForeground#978f73
  • peekViewTitle.background#1c1c1c
  • peekViewTitleDescription.foreground#6b685f
  • peekViewTitleLabel.foreground#978f73
  • pickerGroup.border#566d8c
  • pickerGroup.foreground#5b4f4a
  • progressBar.background#724c7c
  • scrollbar.shadow#444444
  • selection.background#566d8c
  • settings.checkboxBackground#383838
  • settings.checkboxBorder#1c1c1c
  • settings.checkboxForeground#978f73
  • settings.dropdownBackground#383838
  • settings.dropdownBorder#1c1c1c
  • settings.dropdownForeground#978f73
  • settings.headerForeground#978f73
  • settings.modifiedItemIndicator#cc8a3e
  • settings.numberInputBackground#383838
  • settings.numberInputBorder#1c1c1c
  • settings.numberInputForeground#978f73
  • settings.textInputBackground#383838
  • settings.textInputBorder#1c1c1c
  • settings.textInputForeground#978f73
  • sideBar.background#383838
  • sideBarSectionHeader.background#181c27
  • sideBarSectionHeader.border#1c1c1c
  • sideBarTitle.foreground#978f73
  • statusBar.background#1c1c1c
  • statusBar.debuggingBackground#800009
  • statusBar.debuggingForeground#1c1c1c
  • statusBar.foreground#978f73
  • statusBar.noFolderBackground#1c1c1c
  • statusBar.noFolderForeground#978f73
  • statusBarItem.prominentBackground#800009
  • statusBarItem.prominentHoverBackground#cc8a3e
  • statusBarItem.remoteBackground#566d8c
  • statusBarItem.remoteForeground#181c27
  • tab.activeBackground#181c27
  • tab.activeBorderTop#724c7c80
  • tab.activeForeground#978f73
  • tab.border#1c1c1c
  • tab.inactiveBackground#383838
  • tab.inactiveForeground#6b685f
  • terminal.ansiBlack#181818
  • terminal.ansiBlue#566d8c
  • terminal.ansiBrightBlack#555555
  • terminal.ansiBrightBlue#2f97c6
  • terminal.ansiBrightCyan#f3dab1
  • terminal.ansiBrightGreen#a6a65d
  • terminal.ansiBrightMagenta#d33060
  • terminal.ansiBrightRed#ab3834
  • terminal.ansiBrightWhite#f3f3f3
  • terminal.ansiBrightYellow#dcde7b
  • terminal.ansiCyan#5b4f4a
  • terminal.ansiGreen#48513b
  • terminal.ansiMagenta#724c7c
  • terminal.ansiRed#800009
  • terminal.ansiWhite#ada37e
  • terminal.ansiYellow#cc8a3e
  • terminal.background#181c27
  • terminal.border#978f73
  • terminal.foreground#978f73
  • terminal.selectionBackground#18181850
  • textBlockQuote.background#383838
  • titleBar.activeBackground#383838
  • titleBar.activeForeground#978f73
  • titleBar.inactiveBackground#1c1c1c
  • titleBar.inactiveForeground#6b685f
  • walkThrough.embeddedEditorBackground#383838
  • welcomePage.buttonBackground#181818
  • welcomePage.buttonHoverBackground#55555575
  • widget.shadow#444444

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
emphasisitalic
strongbold
header#566d8c
source#978f73
meta.diff, meta.diff.header#6b685f
markup.inserted#48513b
markup.deleted#800009
markup.changed#cc8a3e
invalid#800009underline italic
invalid.deprecated#978f73underline italic
entity.name.filename#dcde7b
markup.error#800009
markup.underlineunderline
markup.bold#cc8a3ebold
markup.heading#566d8cbold
markup.italic#dcde7bitalic
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#5b4f4a
markup.inline.raw, markup.raw.restructuredtext#48513b
markup.underline.link, markup.underline.link.image#5b4f4a
meta.link.reference.def.restructuredtext, punctuation.definition.directive.restructuredtext, string.other.link.description, string.other.link.title#724c7c
entity.name.directive.restructuredtext, markup.quote#dcde7bitalic
meta.separator.markdown#6b685f
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#48513b
punctuation.definition.constant.restructuredtext#566d8c
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#566d8c
meta.paragraph.markdown punctuation.definition.string.begin, meta.paragraph.markdown punctuation.definition.string.end#978f73
markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.begin, markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.end#dcde7b
entity.name.type.class, entity.name.class#5b4f4anormal
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#566d8citalic
entity.other.inherited-class#5b4f4aitalic
comment, punctuation.definition.comment, unused.comment, wildcard.comment#6b685f
comment keyword.codetag.notation, comment.block.documentation keyword, comment.block.documentation storage.type.class#724c7c
comment.block.documentation entity.name.type#5b4f4aitalic
comment.block.documentation entity.name.type punctuation.definition.bracket#5b4f4a
comment.block.documentation variable#cc8a3eitalic
constant, variable.other.constant#566d8c
constant.character.escape, constant.character.string.escape, constant.regexp#724c7c
entity.name.tag#724c7c
entity.other.attribute-name.parent-selector#724c7c
entity.other.attribute-name#48513bitalic
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#48513b
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#cc8a3eitalic
meta.decorator variable.other.readwrite, meta.decorator variable.other.property#48513bitalic
meta.decorator variable.other.object#48513b
keyword, punctuation.definition.keyword#724c7c
keyword.control.new, keyword.operator.newbold
meta.selector#724c7c
support#5b4f4aitalic
support.function.magic, support.variable, variable.other.predefined#566d8cregular
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#724c7c
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#978f73
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#724c7c
entity.name.function.target.makefile, entity.name.section.toml, entity.name.tag.yaml, variable.other.key.toml#5b4f4a
constant.other.date, constant.other.timestamp#cc8a3e
variable.other.alias.yaml#48513bitalic underline
storage, meta.implementation storage.type.objc, meta.interface-or-protocol storage.type.objc, source.groovy storage.type.def#724c7cregular
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#5b4f4aitalic
entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#cc8a3e
storage.modifier#724c7c
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#dcde7b
punctuation.definition.group.capture.regexp#724c7c
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#800009
punctuation.definition.character-class.regexp#5b4f4a
punctuation.definition.group.regexp#cc8a3e
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#800009
meta.assertion.look-ahead.regexp#48513b
string#dcde7b
punctuation.definition.string.begin, punctuation.definition.string.end#2f97c6
punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end#566d8c
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#6b685f
variable, constant.other.key.perl, support.variable.property, variable.other.constant.js, variable.other.constant.ts, variable.other.constant.tsx#978f73
meta.import variable.other.readwrite, meta.object-binding-pattern-variable variable.object.property, meta.variable.assignment.destructured.object.coffee variable#cc8a3eitalic
meta.import variable.other.readwrite.alias, meta.export variable.other.readwrite.alias, meta.variable.assignment.destructured.object.coffee variable variable#978f73normal
meta.selectionset.graphql variable#dcde7b
meta.selectionset.graphql meta.arguments variable#978f73
entity.name.fragment.graphql, variable.fragment.graphql#5b4f4a
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#978f73
source.shell variable.other#566d8c
support.constant#566d8cnormal
meta.scope.prerequisites.makefile#dcde7b
meta.attribute-selector.scss#dcde7b
punctuation.definition.attribute-selector.end.bracket.square.scss, punctuation.definition.attribute-selector.begin.bracket.square.scss#978f73
meta.preprocessor.haskell#6b685f