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#45858810
  • activityBar.activeBorder#b1628680
  • activityBar.background#fbf1c7
  • activityBar.foreground#3c3836
  • activityBar.inactiveForeground#bdae93
  • activityBarBadge.background#b16286
  • activityBarBadge.foreground#fbf1c7
  • badge.background#ebdbb2
  • badge.foreground#3c3836
  • breadcrumb.activeSelectionForeground#3c3836
  • breadcrumb.background#fbf1c7
  • breadcrumb.focusForeground#3c3836
  • breadcrumb.foreground#bdae93
  • breadcrumbPicker.background#fbf9e4
  • button.background#f9f6d7
  • button.foreground#3c3836
  • checkbox.background#f9f6d7
  • checkbox.border#fbf9e4
  • checkbox.foreground#3c3836
  • contrastBorder#fbf9e4
  • debugToolBar.background#f9f6d7
  • diffEditor.insertedTextBackground#98971a20
  • diffEditor.removedTextBackground#cc241d50
  • dropdown.background#fbf1c7
  • dropdown.border#fbf9e4
  • dropdown.foreground#3c3836
  • editor.background#fbf1c7
  • editor.findMatchBackground#d65d0e80
  • editor.findMatchHighlightBackground#1d202140
  • editor.findRangeHighlightBackground#d5c4a175
  • editor.foldBackground#f9f6d7
  • editor.foreground#3c3836
  • editor.hoverHighlightBackground#fbf9e4
  • editor.lineHighlightBorder#ebdbb2
  • editor.rangeHighlightBackground#45858815
  • editor.selectionBackground#ebdbb2
  • editor.selectionHighlightBackground#ebdbb2
  • editor.snippetFinalTabstopHighlightBackground#fbf1c7
  • editor.snippetFinalTabstopHighlightBorder#98971a
  • editor.snippetTabstopHighlightBackground#fbf1c7
  • editor.snippetTabstopHighlightBorder#bdae93
  • editor.wordHighlightBackground#689d6a50
  • editor.wordHighlightStrongBackground#98971a50
  • editorCodeLens.foreground#bdae93
  • editorError.foreground#cc241d
  • editorGroup.border#458588
  • editorGroup.dropBackground#d5c4a170
  • editorGroupHeader.tabsBackground#fbf9e4
  • editorGutter.addedBackground#98971a80
  • editorGutter.deletedBackground#cc241d80
  • editorGutter.modifiedBackground#689d6a80
  • editorHoverWidget.background#fbf1c7
  • editorHoverWidget.border#bdae93
  • editorIndentGuide.activeBackground#1d202145
  • editorIndentGuide.background#1d20211A
  • editorLineNumber.foreground#bdae93
  • editorLink.activeForeground#689d6a
  • editorMarkerNavigation.background#f9f6d7
  • editorOverviewRuler.addedForeground#98971a80
  • editorOverviewRuler.border#fbf9e4
  • editorOverviewRuler.currentContentForeground#98971a
  • editorOverviewRuler.deletedForeground#cc241d80
  • editorOverviewRuler.errorForeground#cc241d80
  • editorOverviewRuler.incomingContentForeground#458588
  • editorOverviewRuler.infoForeground#689d6a80
  • editorOverviewRuler.modifiedForeground#689d6a80
  • editorOverviewRuler.selectionHighlightForeground#d65d0e
  • editorOverviewRuler.warningForeground#d65d0e80
  • editorOverviewRuler.wordHighlightForeground#689d6a
  • editorOverviewRuler.wordHighlightStrongForeground#98971a
  • editorRuler.foreground#1d20211A
  • editorSuggestWidget.background#f9f6d7
  • editorSuggestWidget.foreground#3c3836
  • editorSuggestWidget.selectedBackground#ebdbb2
  • editorWarning.foreground#d65d0e
  • editorWhitespace.foreground#1d20211A
  • editorWidget.background#f9f6d7
  • errorForeground#cc241d
  • extensionButton.prominentBackground#98971a90
  • extensionButton.prominentForeground#3c3836
  • extensionButton.prominentHoverBackground#98971a60
  • focusBorder#bdae93
  • foreground#3c3836
  • gitDecoration.conflictingResourceForeground#d65d0e
  • gitDecoration.deletedResourceForeground#cc241d
  • gitDecoration.ignoredResourceForeground#bdae93
  • gitDecoration.modifiedResourceForeground#689d6a
  • gitDecoration.untrackedResourceForeground#98971a
  • input.background#fbf1c7
  • input.border#fbf9e4
  • input.foreground#3c3836
  • input.placeholderForeground#bdae93
  • inputOption.activeBorder#458588
  • inputValidation.errorBackground#fbf1c7
  • inputValidation.errorBorder#cc241d
  • inputValidation.errorForeground#cc241d
  • inputValidation.infoBackground#fbf1c7
  • inputValidation.infoBorder#458588
  • inputValidation.infoForeground#458588
  • inputValidation.warningBackground#fbf1c7
  • inputValidation.warningBorder#d65d0e
  • inputValidation.warningForeground#d65d0e
  • list.activeSelectionBackground#ebdbb2
  • list.activeSelectionForeground#3c3836
  • list.dropBackground#ebdbb2
  • list.errorForeground#cc241d
  • list.focusBackground#d5c4a175
  • list.highlightForeground#689d6a
  • list.hoverBackground#d5c4a175
  • list.inactiveSelectionBackground#d5c4a175
  • list.warningForeground#d65d0e
  • listFilterWidget.background#fbf1c7
  • listFilterWidget.noMatchesOutline#cc241d
  • listFilterWidget.outline#ebdbb2
  • merge.currentHeaderBackground#98971a90
  • merge.incomingHeaderBackground#45858890
  • notification.background#fbf1c7
  • notification.buttonBackground#ebdbb2
  • notification.buttonForeground#3c3836
  • notification.buttonHoverBackground#d5c4a175
  • notification.errorBackground#cc241d
  • notification.errorForeground#fbf1c7
  • notification.foreground#3c3836
  • notification.infoBackground#458588
  • notification.infoForeground#fbf1c7
  • notification.warningBackground#d65d0e
  • notification.warningForeground#fbf1c7
  • notificationCenter.border#f9f6d7
  • notificationCenterHeader.background#fbf1c7
  • notificationCenterHeader.foreground#3c3836
  • notificationLink.foreground#689d6a
  • notifications.background#fbf1c7
  • notifications.border#f9f6d7
  • notifications.foreground#3c3836
  • notificationsErrorIcon.foreground#cc241d
  • notificationsInfoIcon.foreground#458588
  • notificationsWarningIcon.foreground#d65d0e
  • notificationToast.border#f9f6d7
  • panel.background#fbf1c7
  • panel.border#458588
  • panelInput.border#3c3836
  • panelTitle.activeBorder#b16286
  • panelTitle.activeForeground#3c3836
  • panelTitle.inactiveForeground#bdae93
  • peekView.border#ebdbb2
  • peekViewEditor.background#fbf1c7
  • peekViewEditor.matchHighlightBackground#b5761480
  • peekViewResult.background#f9f6d7
  • peekViewResult.fileForeground#3c3836
  • peekViewResult.lineForeground#3c3836
  • peekViewResult.matchHighlightBackground#b5761480
  • peekViewResult.selectionBackground#ebdbb2
  • peekViewResult.selectionForeground#3c3836
  • peekViewTitle.background#fbf9e4
  • peekViewTitleDescription.foreground#bdae93
  • peekViewTitleLabel.foreground#3c3836
  • pickerGroup.border#458588
  • pickerGroup.foreground#689d6a
  • progressBar.background#b16286
  • scrollbar.shadow#444444
  • selection.background#458588
  • settings.checkboxBackground#f9f6d7
  • settings.checkboxBorder#fbf9e4
  • settings.checkboxForeground#3c3836
  • settings.dropdownBackground#f9f6d7
  • settings.dropdownBorder#fbf9e4
  • settings.dropdownForeground#3c3836
  • settings.headerForeground#3c3836
  • settings.modifiedItemIndicator#d65d0e
  • settings.numberInputBackground#f9f6d7
  • settings.numberInputBorder#fbf9e4
  • settings.numberInputForeground#3c3836
  • settings.textInputBackground#f9f6d7
  • settings.textInputBorder#fbf9e4
  • settings.textInputForeground#3c3836
  • sideBar.background#f9f6d7
  • sideBarSectionHeader.background#fbf1c7
  • sideBarSectionHeader.border#fbf9e4
  • sideBarTitle.foreground#3c3836
  • statusBar.background#fbf9e4
  • statusBar.debuggingBackground#cc241d
  • statusBar.debuggingForeground#fbf9e4
  • statusBar.foreground#3c3836
  • statusBar.noFolderBackground#fbf9e4
  • statusBar.noFolderForeground#3c3836
  • statusBarItem.prominentBackground#cc241d
  • statusBarItem.prominentHoverBackground#d65d0e
  • statusBarItem.remoteBackground#458588
  • statusBarItem.remoteForeground#fbf1c7
  • tab.activeBackground#fbf1c7
  • tab.activeBorderTop#b1628680
  • tab.activeForeground#3c3836
  • tab.border#fbf9e4
  • tab.inactiveBackground#f9f6d7
  • tab.inactiveForeground#bdae93
  • terminal.ansiBlack#ebdbb2
  • terminal.ansiBlue#458588
  • terminal.ansiBrightBlack#d5c4a1
  • terminal.ansiBrightBlue#076678
  • terminal.ansiBrightCyan#427b58
  • terminal.ansiBrightGreen#79740e
  • terminal.ansiBrightMagenta#8f3f71
  • terminal.ansiBrightRed#9d0006
  • terminal.ansiBrightWhite#1d2021
  • terminal.ansiBrightYellow#b57614
  • terminal.ansiCyan#689d6a
  • terminal.ansiGreen#98971a
  • terminal.ansiMagenta#b16286
  • terminal.ansiRed#cc241d
  • terminal.ansiWhite#282828
  • terminal.ansiYellow#d65d0e
  • terminal.background#fbf1c7
  • terminal.border#3c3836
  • terminal.foreground#3c3836
  • terminal.selectionBackground#ebdbb250
  • textBlockQuote.background#f9f6d7
  • titleBar.activeBackground#f9f6d7
  • titleBar.activeForeground#3c3836
  • titleBar.inactiveBackground#fbf9e4
  • titleBar.inactiveForeground#bdae93
  • walkThrough.embeddedEditorBackground#f9f6d7
  • welcomePage.buttonBackground#ebdbb2
  • welcomePage.buttonHoverBackground#d5c4a175
  • widget.shadow#444444

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
emphasisitalic
strongbold
header#458588
source#3c3836
meta.diff, meta.diff.header#bdae93
markup.inserted#98971a
markup.deleted#cc241d
markup.changed#d65d0e
invalid#cc241dunderline italic
invalid.deprecated#3c3836underline italic
entity.name.filename#b57614
markup.error#cc241d
markup.underlineunderline
markup.bold#d65d0ebold
markup.heading#458588bold
markup.italic#b57614italic
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#689d6a
markup.inline.raw, markup.raw.restructuredtext#98971a
markup.underline.link, markup.underline.link.image#689d6a
meta.link.reference.def.restructuredtext, punctuation.definition.directive.restructuredtext, string.other.link.description, string.other.link.title#b16286
entity.name.directive.restructuredtext, markup.quote#b57614italic
meta.separator.markdown#bdae93
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#98971a
punctuation.definition.constant.restructuredtext#458588
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#458588
meta.paragraph.markdown punctuation.definition.string.begin, meta.paragraph.markdown punctuation.definition.string.end#3c3836
markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.begin, markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.end#b57614
entity.name.type.class, entity.name.class#689d6anormal
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#458588italic
entity.other.inherited-class#689d6aitalic
comment, punctuation.definition.comment, unused.comment, wildcard.comment#bdae93
comment keyword.codetag.notation, comment.block.documentation keyword, comment.block.documentation storage.type.class#b16286
comment.block.documentation entity.name.type#689d6aitalic
comment.block.documentation entity.name.type punctuation.definition.bracket#689d6a
comment.block.documentation variable#d65d0eitalic
constant, variable.other.constant#458588
constant.character.escape, constant.character.string.escape, constant.regexp#b16286
entity.name.tag#b16286
entity.other.attribute-name.parent-selector#b16286
entity.other.attribute-name#98971aitalic
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#98971a
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#d65d0eitalic
meta.decorator variable.other.readwrite, meta.decorator variable.other.property#98971aitalic
meta.decorator variable.other.object#98971a
keyword, punctuation.definition.keyword#b16286
keyword.control.new, keyword.operator.newbold
meta.selector#b16286
support#689d6aitalic
support.function.magic, support.variable, variable.other.predefined#458588regular
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#b16286
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#3c3836
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#b16286
entity.name.function.target.makefile, entity.name.section.toml, entity.name.tag.yaml, variable.other.key.toml#689d6a
constant.other.date, constant.other.timestamp#d65d0e
variable.other.alias.yaml#98971aitalic underline
storage, meta.implementation storage.type.objc, meta.interface-or-protocol storage.type.objc, source.groovy storage.type.def#b16286regular
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#689d6aitalic
entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#d65d0e
storage.modifier#b16286
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#b57614
punctuation.definition.group.capture.regexp#b16286
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#cc241d
punctuation.definition.character-class.regexp#689d6a
punctuation.definition.group.regexp#d65d0e
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#cc241d
meta.assertion.look-ahead.regexp#98971a
string#b57614
punctuation.definition.string.begin, punctuation.definition.string.end#d79921
punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end#458588
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#bdae93
variable, constant.other.key.perl, support.variable.property, variable.other.constant.js, variable.other.constant.ts, variable.other.constant.tsx#3c3836
meta.import variable.other.readwrite, meta.object-binding-pattern-variable variable.object.property, meta.variable.assignment.destructured.object.coffee variable#d65d0eitalic
meta.import variable.other.readwrite.alias, meta.export variable.other.readwrite.alias, meta.variable.assignment.destructured.object.coffee variable variable#3c3836normal
meta.selectionset.graphql variable#b57614
meta.selectionset.graphql meta.arguments variable#3c3836
entity.name.fragment.graphql, variable.fragment.graphql#689d6a
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#3c3836
source.shell variable.other#458588
support.constant#458588normal
meta.scope.prerequisites.makefile#b57614
meta.attribute-selector.scss#b57614
punctuation.definition.attribute-selector.end.bracket.square.scss, punctuation.definition.attribute-selector.begin.bracket.square.scss#3c3836
meta.preprocessor.haskell#bdae93
Tinted VSCode by Tinted Theming - VS Code Theme