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#1397b910
  • activityBar.activeBorder#d0623c80
  • activityBar.background#282420
  • activityBar.foreground#c5ab93
  • activityBar.inactiveForeground#857769
  • activityBarBadge.background#d0623c
  • activityBarBadge.foreground#282420
  • badge.background#111417
  • badge.foreground#c5ab93
  • breadcrumb.activeSelectionForeground#c5ab93
  • breadcrumb.background#282420
  • breadcrumb.focusForeground#c5ab93
  • breadcrumb.foreground#857769
  • breadcrumbPicker.background#221f1c
  • button.background#443e38
  • button.foreground#c5ab93
  • checkbox.background#443e38
  • checkbox.border#221f1c
  • checkbox.foreground#c5ab93
  • contrastBorder#221f1c
  • debugToolBar.background#443e38
  • diffEditor.insertedTextBackground#84c44b20
  • diffEditor.removedTextBackground#c8413450
  • dropdown.background#282420
  • dropdown.border#221f1c
  • dropdown.foreground#c5ab93
  • editor.background#282420
  • editor.findMatchBackground#f4ae2e80
  • editor.findMatchHighlightBackground#f6f6ec40
  • editor.findRangeHighlightBackground#665e5475
  • editor.foldBackground#443e38
  • editor.foreground#c5ab93
  • editor.hoverHighlightBackground#221f1c
  • editor.lineHighlightBorder#111417
  • editor.rangeHighlightBackground#1397b915
  • editor.selectionBackground#111417
  • editor.selectionHighlightBackground#111417
  • editor.snippetFinalTabstopHighlightBackground#282420
  • editor.snippetFinalTabstopHighlightBorder#84c44b
  • editor.snippetTabstopHighlightBackground#282420
  • editor.snippetTabstopHighlightBorder#857769
  • editor.wordHighlightBackground#4f945250
  • editor.wordHighlightStrongBackground#84c44b50
  • editorCodeLens.foreground#857769
  • editorError.foreground#c84134
  • editorGroup.border#1397b9
  • editorGroup.dropBackground#665e5470
  • editorGroupHeader.tabsBackground#221f1c
  • editorGutter.addedBackground#84c44b80
  • editorGutter.deletedBackground#c8413480
  • editorGutter.modifiedBackground#4f945280
  • editorHoverWidget.background#282420
  • editorHoverWidget.border#857769
  • editorIndentGuide.activeBackground#f6f6ec45
  • editorIndentGuide.background#f6f6ec1A
  • editorLineNumber.foreground#857769
  • editorLink.activeForeground#4f9452
  • editorMarkerNavigation.background#443e38
  • editorOverviewRuler.addedForeground#84c44b80
  • editorOverviewRuler.border#221f1c
  • editorOverviewRuler.currentContentForeground#84c44b
  • editorOverviewRuler.deletedForeground#c8413480
  • editorOverviewRuler.errorForeground#c8413480
  • editorOverviewRuler.incomingContentForeground#1397b9
  • editorOverviewRuler.infoForeground#4f945280
  • editorOverviewRuler.modifiedForeground#4f945280
  • editorOverviewRuler.selectionHighlightForeground#f4ae2e
  • editorOverviewRuler.warningForeground#f4ae2e80
  • editorOverviewRuler.wordHighlightForeground#4f9452
  • editorOverviewRuler.wordHighlightStrongForeground#84c44b
  • editorRuler.foreground#f6f6ec1A
  • editorSuggestWidget.background#443e38
  • editorSuggestWidget.foreground#c5ab93
  • editorSuggestWidget.selectedBackground#111417
  • editorWarning.foreground#f4ae2e
  • editorWhitespace.foreground#f6f6ec1A
  • editorWidget.background#443e38
  • errorForeground#c84134
  • extensionButton.prominentBackground#84c44b90
  • extensionButton.prominentForeground#c5ab93
  • extensionButton.prominentHoverBackground#84c44b60
  • focusBorder#857769
  • foreground#c5ab93
  • gitDecoration.conflictingResourceForeground#f4ae2e
  • gitDecoration.deletedResourceForeground#c84134
  • gitDecoration.ignoredResourceForeground#857769
  • gitDecoration.modifiedResourceForeground#4f9452
  • gitDecoration.untrackedResourceForeground#84c44b
  • input.background#282420
  • input.border#221f1c
  • input.foreground#c5ab93
  • input.placeholderForeground#857769
  • inputOption.activeBorder#1397b9
  • inputValidation.errorBackground#282420
  • inputValidation.errorBorder#c84134
  • inputValidation.errorForeground#c84134
  • inputValidation.infoBackground#282420
  • inputValidation.infoBorder#1397b9
  • inputValidation.infoForeground#1397b9
  • inputValidation.warningBackground#282420
  • inputValidation.warningBorder#f4ae2e
  • inputValidation.warningForeground#f4ae2e
  • list.activeSelectionBackground#111417
  • list.activeSelectionForeground#c5ab93
  • list.dropBackground#111417
  • list.errorForeground#c84134
  • list.focusBackground#665e5475
  • list.highlightForeground#4f9452
  • list.hoverBackground#665e5475
  • list.inactiveSelectionBackground#665e5475
  • list.warningForeground#f4ae2e
  • listFilterWidget.background#282420
  • listFilterWidget.noMatchesOutline#c84134
  • listFilterWidget.outline#111417
  • merge.currentHeaderBackground#84c44b90
  • merge.incomingHeaderBackground#1397b990
  • notification.background#282420
  • notification.buttonBackground#111417
  • notification.buttonForeground#c5ab93
  • notification.buttonHoverBackground#665e5475
  • notification.errorBackground#c84134
  • notification.errorForeground#282420
  • notification.foreground#c5ab93
  • notification.infoBackground#1397b9
  • notification.infoForeground#282420
  • notification.warningBackground#f4ae2e
  • notification.warningForeground#282420
  • notificationCenter.border#443e38
  • notificationCenterHeader.background#282420
  • notificationCenterHeader.foreground#c5ab93
  • notificationLink.foreground#4f9452
  • notifications.background#282420
  • notifications.border#443e38
  • notifications.foreground#c5ab93
  • notificationsErrorIcon.foreground#c84134
  • notificationsInfoIcon.foreground#1397b9
  • notificationsWarningIcon.foreground#f4ae2e
  • notificationToast.border#443e38
  • panel.background#282420
  • panel.border#1397b9
  • panelInput.border#c5ab93
  • panelTitle.activeBorder#d0623c
  • panelTitle.activeForeground#c5ab93
  • panelTitle.inactiveForeground#857769
  • peekView.border#111417
  • peekViewEditor.background#282420
  • peekViewEditor.matchHighlightBackground#dfd56180
  • peekViewResult.background#443e38
  • peekViewResult.fileForeground#c5ab93
  • peekViewResult.lineForeground#c5ab93
  • peekViewResult.matchHighlightBackground#dfd56180
  • peekViewResult.selectionBackground#111417
  • peekViewResult.selectionForeground#c5ab93
  • peekViewTitle.background#221f1c
  • peekViewTitleDescription.foreground#857769
  • peekViewTitleLabel.foreground#c5ab93
  • pickerGroup.border#1397b9
  • pickerGroup.foreground#4f9452
  • progressBar.background#d0623c
  • scrollbar.shadow#444444
  • selection.background#1397b9
  • settings.checkboxBackground#443e38
  • settings.checkboxBorder#221f1c
  • settings.checkboxForeground#c5ab93
  • settings.dropdownBackground#443e38
  • settings.dropdownBorder#221f1c
  • settings.dropdownForeground#c5ab93
  • settings.headerForeground#c5ab93
  • settings.modifiedItemIndicator#f4ae2e
  • settings.numberInputBackground#443e38
  • settings.numberInputBorder#221f1c
  • settings.numberInputForeground#c5ab93
  • settings.textInputBackground#443e38
  • settings.textInputBorder#221f1c
  • settings.textInputForeground#c5ab93
  • sideBar.background#443e38
  • sideBarSectionHeader.background#282420
  • sideBarSectionHeader.border#221f1c
  • sideBarTitle.foreground#c5ab93
  • statusBar.background#221f1c
  • statusBar.debuggingBackground#c84134
  • statusBar.debuggingForeground#221f1c
  • statusBar.foreground#c5ab93
  • statusBar.noFolderBackground#221f1c
  • statusBar.noFolderForeground#c5ab93
  • statusBarItem.prominentBackground#c84134
  • statusBarItem.prominentHoverBackground#f4ae2e
  • statusBarItem.remoteBackground#1397b9
  • statusBarItem.remoteForeground#282420
  • tab.activeBackground#282420
  • tab.activeBorderTop#d0623c80
  • tab.activeForeground#c5ab93
  • tab.border#221f1c
  • tab.inactiveBackground#443e38
  • tab.inactiveForeground#857769
  • terminal.ansiBlack#111417
  • terminal.ansiBlue#1397b9
  • terminal.ansiBrightBlack#665e54
  • terminal.ansiBrightBlue#5ed9ff
  • terminal.ansiBrightCyan#83ef88
  • terminal.ansiBrightGreen#97e035
  • terminal.ansiBrightMagenta#ff9168
  • terminal.ansiBrightRed#ff6459
  • terminal.ansiBrightWhite#f6f6ec
  • terminal.ansiBrightYellow#dfd561
  • terminal.ansiCyan#4f9452
  • terminal.ansiGreen#84c44b
  • terminal.ansiMagenta#d0623c
  • terminal.ansiRed#c84134
  • terminal.ansiWhite#e5c5a9
  • terminal.ansiYellow#f4ae2e
  • terminal.background#282420
  • terminal.border#c5ab93
  • terminal.foreground#c5ab93
  • terminal.selectionBackground#11141750
  • textBlockQuote.background#443e38
  • titleBar.activeBackground#443e38
  • titleBar.activeForeground#c5ab93
  • titleBar.inactiveBackground#221f1c
  • titleBar.inactiveForeground#857769
  • walkThrough.embeddedEditorBackground#443e38
  • welcomePage.buttonBackground#111417
  • welcomePage.buttonHoverBackground#665e5475
  • widget.shadow#444444

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
emphasisitalic
strongbold
header#1397b9
source#c5ab93
meta.diff, meta.diff.header#857769
markup.inserted#84c44b
markup.deleted#c84134
markup.changed#f4ae2e
invalid#c84134underline italic
invalid.deprecated#c5ab93underline italic
entity.name.filename#dfd561
markup.error#c84134
markup.underlineunderline
markup.bold#f4ae2ebold
markup.heading#1397b9bold
markup.italic#dfd561italic
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#4f9452
markup.inline.raw, markup.raw.restructuredtext#84c44b
markup.underline.link, markup.underline.link.image#4f9452
meta.link.reference.def.restructuredtext, punctuation.definition.directive.restructuredtext, string.other.link.description, string.other.link.title#d0623c
entity.name.directive.restructuredtext, markup.quote#dfd561italic
meta.separator.markdown#857769
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#84c44b
punctuation.definition.constant.restructuredtext#1397b9
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#1397b9
meta.paragraph.markdown punctuation.definition.string.begin, meta.paragraph.markdown punctuation.definition.string.end#c5ab93
markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.begin, markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.end#dfd561
entity.name.type.class, entity.name.class#4f9452normal
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#1397b9italic
entity.other.inherited-class#4f9452italic
comment, punctuation.definition.comment, unused.comment, wildcard.comment#857769
comment keyword.codetag.notation, comment.block.documentation keyword, comment.block.documentation storage.type.class#d0623c
comment.block.documentation entity.name.type#4f9452italic
comment.block.documentation entity.name.type punctuation.definition.bracket#4f9452
comment.block.documentation variable#f4ae2eitalic
constant, variable.other.constant#1397b9
constant.character.escape, constant.character.string.escape, constant.regexp#d0623c
entity.name.tag#d0623c
entity.other.attribute-name.parent-selector#d0623c
entity.other.attribute-name#84c44bitalic
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#84c44b
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#f4ae2eitalic
meta.decorator variable.other.readwrite, meta.decorator variable.other.property#84c44bitalic
meta.decorator variable.other.object#84c44b
keyword, punctuation.definition.keyword#d0623c
keyword.control.new, keyword.operator.newbold
meta.selector#d0623c
support#4f9452italic
support.function.magic, support.variable, variable.other.predefined#1397b9regular
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#d0623c
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#c5ab93
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#d0623c
entity.name.function.target.makefile, entity.name.section.toml, entity.name.tag.yaml, variable.other.key.toml#4f9452
constant.other.date, constant.other.timestamp#f4ae2e
variable.other.alias.yaml#84c44bitalic underline
storage, meta.implementation storage.type.objc, meta.interface-or-protocol storage.type.objc, source.groovy storage.type.def#d0623cregular
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#4f9452italic
entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#f4ae2e
storage.modifier#d0623c
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#dfd561
punctuation.definition.group.capture.regexp#d0623c
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#c84134
punctuation.definition.character-class.regexp#4f9452
punctuation.definition.group.regexp#f4ae2e
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#c84134
meta.assertion.look-ahead.regexp#84c44b
string#dfd561
punctuation.definition.string.begin, punctuation.definition.string.end#5ed9ff
punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end#1397b9
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#857769
variable, constant.other.key.perl, support.variable.property, variable.other.constant.js, variable.other.constant.ts, variable.other.constant.tsx#c5ab93
meta.import variable.other.readwrite, meta.object-binding-pattern-variable variable.object.property, meta.variable.assignment.destructured.object.coffee variable#f4ae2eitalic
meta.import variable.other.readwrite.alias, meta.export variable.other.readwrite.alias, meta.variable.assignment.destructured.object.coffee variable variable#c5ab93normal
meta.selectionset.graphql variable#dfd561
meta.selectionset.graphql meta.arguments variable#c5ab93
entity.name.fragment.graphql, variable.fragment.graphql#4f9452
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#c5ab93
source.shell variable.other#1397b9
support.constant#1397b9normal
meta.scope.prerequisites.makefile#dfd561
meta.attribute-selector.scss#dfd561
punctuation.definition.attribute-selector.end.bracket.square.scss, punctuation.definition.attribute-selector.begin.bracket.square.scss#c5ab93
meta.preprocessor.haskell#857769
Tinted VSCode by Tinted Theming - VS Code Theme