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#497f7d10
  • activityBar.activeBorder#7e4e2e80
  • activityBar.background#21211c
  • activityBar.foreground#756f68
  • activityBar.inactiveForeground#5f5d50
  • activityBarBadge.background#7e4e2e
  • activityBarBadge.foreground#21211c
  • badge.background#3c3b30
  • badge.foreground#756f68
  • breadcrumb.activeSelectionForeground#756f68
  • breadcrumb.background#21211c
  • breadcrumb.focusForeground#756f68
  • breadcrumb.foreground#5f5d50
  • breadcrumbPicker.background#1c1c16
  • button.background#38382d
  • button.foreground#756f68
  • checkbox.background#38382d
  • checkbox.border#1c1c16
  • checkbox.foreground#756f68
  • contrastBorder#1c1c16
  • debugToolBar.background#38382d
  • diffEditor.insertedTextBackground#47994220
  • diffEditor.removedTextBackground#97280f50
  • dropdown.background#21211c
  • dropdown.border#1c1c16
  • dropdown.foreground#756f68
  • editor.background#21211c
  • editor.findMatchBackground#7f711080
  • editor.findMatchHighlightBackground#fff1e840
  • editor.findRangeHighlightBackground#54544475
  • editor.foldBackground#38382d
  • editor.foreground#756f68
  • editor.hoverHighlightBackground#1c1c16
  • editor.lineHighlightBorder#3c3b30
  • editor.rangeHighlightBackground#497f7d15
  • editor.selectionBackground#3c3b30
  • editor.selectionHighlightBackground#3c3b30
  • editor.snippetFinalTabstopHighlightBackground#21211c
  • editor.snippetFinalTabstopHighlightBorder#479942
  • editor.snippetTabstopHighlightBackground#21211c
  • editor.snippetTabstopHighlightBorder#5f5d50
  • editor.wordHighlightBackground#387f5850
  • editor.wordHighlightStrongBackground#47994250
  • editorCodeLens.foreground#5f5d50
  • editorError.foreground#97280f
  • editorGroup.border#497f7d
  • editorGroup.dropBackground#54544470
  • editorGroupHeader.tabsBackground#1c1c16
  • editorGutter.addedBackground#47994280
  • editorGutter.deletedBackground#97280f80
  • editorGutter.modifiedBackground#387f5880
  • editorHoverWidget.background#21211c
  • editorHoverWidget.border#5f5d50
  • editorIndentGuide.activeBackground#fff1e845
  • editorIndentGuide.background#fff1e81A
  • editorLineNumber.foreground#5f5d50
  • editorLink.activeForeground#387f58
  • editorMarkerNavigation.background#38382d
  • editorOverviewRuler.addedForeground#47994280
  • editorOverviewRuler.border#1c1c16
  • editorOverviewRuler.currentContentForeground#479942
  • editorOverviewRuler.deletedForeground#97280f80
  • editorOverviewRuler.errorForeground#97280f80
  • editorOverviewRuler.incomingContentForeground#497f7d
  • editorOverviewRuler.infoForeground#387f5880
  • editorOverviewRuler.modifiedForeground#387f5880
  • editorOverviewRuler.selectionHighlightForeground#7f7110
  • editorOverviewRuler.warningForeground#7f711080
  • editorOverviewRuler.wordHighlightForeground#387f58
  • editorOverviewRuler.wordHighlightStrongForeground#479942
  • editorRuler.foreground#fff1e81A
  • editorSuggestWidget.background#38382d
  • editorSuggestWidget.foreground#756f68
  • editorSuggestWidget.selectedBackground#3c3b30
  • editorWarning.foreground#7f7110
  • editorWhitespace.foreground#fff1e81A
  • editorWidget.background#38382d
  • errorForeground#97280f
  • extensionButton.prominentBackground#47994290
  • extensionButton.prominentForeground#756f68
  • extensionButton.prominentHoverBackground#47994260
  • focusBorder#5f5d50
  • foreground#756f68
  • gitDecoration.conflictingResourceForeground#7f7110
  • gitDecoration.deletedResourceForeground#97280f
  • gitDecoration.ignoredResourceForeground#5f5d50
  • gitDecoration.modifiedResourceForeground#387f58
  • gitDecoration.untrackedResourceForeground#479942
  • input.background#21211c
  • input.border#1c1c16
  • input.foreground#756f68
  • input.placeholderForeground#5f5d50
  • inputOption.activeBorder#497f7d
  • inputValidation.errorBackground#21211c
  • inputValidation.errorBorder#97280f
  • inputValidation.errorForeground#97280f
  • inputValidation.infoBackground#21211c
  • inputValidation.infoBorder#497f7d
  • inputValidation.infoForeground#497f7d
  • inputValidation.warningBackground#21211c
  • inputValidation.warningBorder#7f7110
  • inputValidation.warningForeground#7f7110
  • list.activeSelectionBackground#3c3b30
  • list.activeSelectionForeground#756f68
  • list.dropBackground#3c3b30
  • list.errorForeground#97280f
  • list.focusBackground#54544475
  • list.highlightForeground#387f58
  • list.hoverBackground#54544475
  • list.inactiveSelectionBackground#54544475
  • list.warningForeground#7f7110
  • listFilterWidget.background#21211c
  • listFilterWidget.noMatchesOutline#97280f
  • listFilterWidget.outline#3c3b30
  • merge.currentHeaderBackground#47994290
  • merge.incomingHeaderBackground#497f7d90
  • notification.background#21211c
  • notification.buttonBackground#3c3b30
  • notification.buttonForeground#756f68
  • notification.buttonHoverBackground#54544475
  • notification.errorBackground#97280f
  • notification.errorForeground#21211c
  • notification.foreground#756f68
  • notification.infoBackground#497f7d
  • notification.infoForeground#21211c
  • notification.warningBackground#7f7110
  • notification.warningForeground#21211c
  • notificationCenter.border#38382d
  • notificationCenterHeader.background#21211c
  • notificationCenterHeader.foreground#756f68
  • notificationLink.foreground#387f58
  • notifications.background#21211c
  • notifications.border#38382d
  • notifications.foreground#756f68
  • notificationsErrorIcon.foreground#97280f
  • notificationsInfoIcon.foreground#497f7d
  • notificationsWarningIcon.foreground#7f7110
  • notificationToast.border#38382d
  • panel.background#21211c
  • panel.border#497f7d
  • panelInput.border#756f68
  • panelTitle.activeBorder#7e4e2e
  • panelTitle.activeForeground#756f68
  • panelTitle.inactiveForeground#5f5d50
  • peekView.border#3c3b30
  • peekViewEditor.background#21211c
  • peekViewEditor.matchHighlightBackground#d6982780
  • peekViewResult.background#38382d
  • peekViewResult.fileForeground#756f68
  • peekViewResult.lineForeground#756f68
  • peekViewResult.matchHighlightBackground#d6982780
  • peekViewResult.selectionBackground#3c3b30
  • peekViewResult.selectionForeground#756f68
  • peekViewTitle.background#1c1c16
  • peekViewTitleDescription.foreground#5f5d50
  • peekViewTitleLabel.foreground#756f68
  • pickerGroup.border#497f7d
  • pickerGroup.foreground#387f58
  • progressBar.background#7e4e2e
  • scrollbar.shadow#444444
  • selection.background#497f7d
  • settings.checkboxBackground#38382d
  • settings.checkboxBorder#1c1c16
  • settings.checkboxForeground#756f68
  • settings.dropdownBackground#38382d
  • settings.dropdownBorder#1c1c16
  • settings.dropdownForeground#756f68
  • settings.headerForeground#756f68
  • settings.modifiedItemIndicator#7f7110
  • settings.numberInputBackground#38382d
  • settings.numberInputBorder#1c1c16
  • settings.numberInputForeground#756f68
  • settings.textInputBackground#38382d
  • settings.textInputBorder#1c1c16
  • settings.textInputForeground#756f68
  • sideBar.background#38382d
  • sideBarSectionHeader.background#21211c
  • sideBarSectionHeader.border#1c1c16
  • sideBarTitle.foreground#756f68
  • statusBar.background#1c1c16
  • statusBar.debuggingBackground#97280f
  • statusBar.debuggingForeground#1c1c16
  • statusBar.foreground#756f68
  • statusBar.noFolderBackground#1c1c16
  • statusBar.noFolderForeground#756f68
  • statusBarItem.prominentBackground#97280f
  • statusBarItem.prominentHoverBackground#7f7110
  • statusBarItem.remoteBackground#497f7d
  • statusBarItem.remoteForeground#21211c
  • tab.activeBackground#21211c
  • tab.activeBorderTop#7e4e2e80
  • tab.activeForeground#756f68
  • tab.border#1c1c16
  • tab.inactiveBackground#38382d
  • tab.inactiveForeground#5f5d50
  • terminal.ansiBlack#3c3b30
  • terminal.ansiBlue#497f7d
  • terminal.ansiBrightBlack#545444
  • terminal.ansiBrightBlue#78d8d8
  • terminal.ansiBrightCyan#58d598
  • terminal.ansiBrightGreen#60e06f
  • terminal.ansiBrightMagenta#cd7c53
  • terminal.ansiBrightRed#df502a
  • terminal.ansiBrightWhite#fff1e8
  • terminal.ansiBrightYellow#d69827
  • terminal.ansiCyan#387f58
  • terminal.ansiGreen#479942
  • terminal.ansiMagenta#7e4e2e
  • terminal.ansiRed#97280f
  • terminal.ansiWhite#807974
  • terminal.ansiYellow#7f7110
  • terminal.background#21211c
  • terminal.border#756f68
  • terminal.foreground#756f68
  • terminal.selectionBackground#3c3b3050
  • textBlockQuote.background#38382d
  • titleBar.activeBackground#38382d
  • titleBar.activeForeground#756f68
  • titleBar.inactiveBackground#1c1c16
  • titleBar.inactiveForeground#5f5d50
  • walkThrough.embeddedEditorBackground#38382d
  • welcomePage.buttonBackground#3c3b30
  • welcomePage.buttonHoverBackground#54544475
  • widget.shadow#444444

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
emphasisitalic
strongbold
header#497f7d
source#756f68
meta.diff, meta.diff.header#5f5d50
markup.inserted#479942
markup.deleted#97280f
markup.changed#7f7110
invalid#97280funderline italic
invalid.deprecated#756f68underline italic
entity.name.filename#d69827
markup.error#97280f
markup.underlineunderline
markup.bold#7f7110bold
markup.heading#497f7dbold
markup.italic#d69827italic
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#387f58
markup.inline.raw, markup.raw.restructuredtext#479942
markup.underline.link, markup.underline.link.image#387f58
meta.link.reference.def.restructuredtext, punctuation.definition.directive.restructuredtext, string.other.link.description, string.other.link.title#7e4e2e
entity.name.directive.restructuredtext, markup.quote#d69827italic
meta.separator.markdown#5f5d50
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#479942
punctuation.definition.constant.restructuredtext#497f7d
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#497f7d
meta.paragraph.markdown punctuation.definition.string.begin, meta.paragraph.markdown punctuation.definition.string.end#756f68
markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.begin, markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.end#d69827
entity.name.type.class, entity.name.class#387f58normal
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#497f7ditalic
entity.other.inherited-class#387f58italic
comment, punctuation.definition.comment, unused.comment, wildcard.comment#5f5d50
comment keyword.codetag.notation, comment.block.documentation keyword, comment.block.documentation storage.type.class#7e4e2e
comment.block.documentation entity.name.type#387f58italic
comment.block.documentation entity.name.type punctuation.definition.bracket#387f58
comment.block.documentation variable#7f7110italic
constant, variable.other.constant#497f7d
constant.character.escape, constant.character.string.escape, constant.regexp#7e4e2e
entity.name.tag#7e4e2e
entity.other.attribute-name.parent-selector#7e4e2e
entity.other.attribute-name#479942italic
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#479942
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#7f7110italic
meta.decorator variable.other.readwrite, meta.decorator variable.other.property#479942italic
meta.decorator variable.other.object#479942
keyword, punctuation.definition.keyword#7e4e2e
keyword.control.new, keyword.operator.newbold
meta.selector#7e4e2e
support#387f58italic
support.function.magic, support.variable, variable.other.predefined#497f7dregular
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#7e4e2e
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#756f68
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#7e4e2e
entity.name.function.target.makefile, entity.name.section.toml, entity.name.tag.yaml, variable.other.key.toml#387f58
constant.other.date, constant.other.timestamp#7f7110
variable.other.alias.yaml#479942italic underline
storage, meta.implementation storage.type.objc, meta.interface-or-protocol storage.type.objc, source.groovy storage.type.def#7e4e2eregular
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#387f58italic
entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#7f7110
storage.modifier#7e4e2e
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#d69827
punctuation.definition.group.capture.regexp#7e4e2e
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#97280f
punctuation.definition.character-class.regexp#387f58
punctuation.definition.group.regexp#7f7110
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#97280f
meta.assertion.look-ahead.regexp#479942
string#d69827
punctuation.definition.string.begin, punctuation.definition.string.end#78d8d8
punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end#497f7d
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#5f5d50
variable, constant.other.key.perl, support.variable.property, variable.other.constant.js, variable.other.constant.ts, variable.other.constant.tsx#756f68
meta.import variable.other.readwrite, meta.object-binding-pattern-variable variable.object.property, meta.variable.assignment.destructured.object.coffee variable#7f7110italic
meta.import variable.other.readwrite.alias, meta.export variable.other.readwrite.alias, meta.variable.assignment.destructured.object.coffee variable variable#756f68normal
meta.selectionset.graphql variable#d69827
meta.selectionset.graphql meta.arguments variable#756f68
entity.name.fragment.graphql, variable.fragment.graphql#387f58
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#756f68
source.shell variable.other#497f7d
support.constant#497f7dnormal
meta.scope.prerequisites.makefile#d69827
meta.attribute-selector.scss#d69827
punctuation.definition.attribute-selector.end.bracket.square.scss, punctuation.definition.attribute-selector.begin.bracket.square.scss#756f68
meta.preprocessor.haskell#5f5d50