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#a85a3a10
  • activityBar.activeBorder#ff6b4a80
  • activityBar.background#ffffff
  • activityBar.foreground#000000
  • activityBar.inactiveForeground#7c3626
  • activityBarBadge.background#f47c20
  • activityBarBadge.foreground#000000
  • badge.background#b8856d50
  • badge.foreground#000000
  • breadcrumb.activeSelectionForeground#000000
  • breadcrumb.background#ffffff
  • breadcrumb.focusForeground#000000
  • breadcrumb.foreground#7c3626
  • breadcrumbPicker.background#e8dce0
  • button.background#b8856d50
  • button.foreground#000000
  • button.secondaryBackground#ffffff
  • button.secondaryForeground#000000
  • button.secondaryHoverBackground#ffffff
  • debugToolBar.background#f0e8eb
  • diffEditor.insertedTextBackground#3a9f7f20
  • diffEditor.removedTextBackground#e0554550
  • dropdown.background#ffffff
  • dropdown.border#e8dce0
  • dropdown.foreground#000000
  • editor.background#ffffff
  • editor.findMatchBackground#f47c2080
  • editor.findMatchHighlightBackground#ffffff40
  • editor.findRangeHighlightBackground#2a7f7f75
  • editor.foldBackground#2a7f7f30
  • editor.foldPlaceholderForeground#7c3626
  • editor.foreground#000000
  • editor.hoverHighlightBackground#2a7f7f50
  • editor.lineHighlightBorder#b8856d50
  • editor.rangeHighlightBackground#a85a3a15
  • editor.selectionBackground#b8856d50
  • editor.selectionHighlightBackground#b8856d50
  • editor.snippetFinalTabstopHighlightBackground#ffffff
  • editor.snippetFinalTabstopHighlightBorder#2a7f7f
  • editor.snippetTabstopHighlightBackground#ffffff
  • editor.snippetTabstopHighlightBorder#7c3626
  • editor.wordHighlightBackground#2a7f7f50
  • editor.wordHighlightStrongBackground#3a9f7f50
  • editorBracketHighlight.foreground1#000000
  • editorBracketHighlight.foreground2#f47c20
  • editorBracketHighlight.foreground3#2a7f7f
  • editorBracketHighlight.foreground4#2a7f7f
  • editorBracketHighlight.foreground5#f76b00
  • editorBracketHighlight.foreground6#f47c20
  • editorBracketHighlight.unexpectedBracket.foreground#7c3626
  • editorCodeLens.foreground#7c3626
  • editorError.foreground#7c3626
  • editorGroup.border#f76b00
  • editorGroup.dropBackground#2a7f7f33
  • editorGroupHeader.tabsBackground#e8dce0
  • editorGutter.addedBackground#3a9f7f80
  • editorGutter.deletedBackground#e0554580
  • editorGutter.modifiedBackground#2a7f7f80
  • editorHoverWidget.background#ffffff
  • editorHoverWidget.border#7c3626
  • editorIndentGuide.activeBackground#ffffff45
  • editorIndentGuide.background#b8856d66
  • editorLineNumber.foreground#7c3626
  • editorLink.activeForeground#2a7f7f
  • editorMarkerNavigation.background#f0e8eb
  • editorOverviewRuler.addedForeground#3a9f7f80
  • editorOverviewRuler.border#e8dce0
  • editorOverviewRuler.currentContentForeground#2a7f7f
  • editorOverviewRuler.deletedForeground#e0554580
  • editorOverviewRuler.errorForeground#e0554580
  • editorOverviewRuler.incomingContentForeground#f76b00
  • editorOverviewRuler.infoForeground#2a7f7f80
  • editorOverviewRuler.modifiedForeground#2a7f7f80
  • editorOverviewRuler.selectionHighlightForeground#f47c20
  • editorOverviewRuler.warningForeground#f47c2080
  • editorOverviewRuler.wordHighlightForeground#2a7f7f
  • editorOverviewRuler.wordHighlightStrongForeground#2a7f7f
  • editorRuler.foreground#b8856d66
  • editorSuggestWidget.background#f0e8eb
  • editorSuggestWidget.foreground#000000
  • editorSuggestWidget.selectedBackground#b8856d50
  • editorWarning.foreground#2a7f7f
  • editorWhitespace.foreground#b8856d66
  • editorWidget.background#f0e8eb
  • errorForeground#7c3626
  • extensionButton.prominentBackground#3a9f7f90
  • extensionButton.prominentForeground#000000
  • extensionButton.prominentHoverBackground#3a9f7f60
  • focusBorder#7c3626
  • foreground#000000
  • gitDecoration.conflictingResourceForeground#f47c20
  • gitDecoration.deletedResourceForeground#7c3626
  • gitDecoration.ignoredResourceForeground#7c3626
  • gitDecoration.modifiedResourceForeground#2a7f7f
  • gitDecoration.untrackedResourceForeground#2a7f7f
  • inlineChat.regionHighlight#ffffff
  • input.background#ffffff
  • input.border#e8dce0
  • input.foreground#000000
  • input.placeholderForeground#7c3626
  • inputOption.activeBorder#f76b00
  • inputValidation.errorBorder#7c3626
  • inputValidation.infoBorder#f47c20
  • inputValidation.warningBorder#f47c20
  • list.activeSelectionBackground#b8856d50
  • list.activeSelectionForeground#000000
  • list.dropBackground#b8856d50
  • list.errorForeground#7c3626
  • list.focusBackground#2a7f7f75
  • list.highlightForeground#2a7f7f
  • list.hoverBackground#2a7f7f75
  • list.inactiveSelectionBackground#2a7f7f75
  • list.warningForeground#f47c20
  • listFilterWidget.background#ffffff
  • listFilterWidget.noMatchesOutline#7c3626
  • listFilterWidget.outline#b8856d50
  • merge.currentHeaderBackground#3a9f7f90
  • merge.incomingHeaderBackground#a85a3a90
  • panel.background#ffffff
  • panel.border#f76b00
  • panelTitle.activeBorder#f47c20
  • panelTitle.activeForeground#000000
  • panelTitle.inactiveForeground#7c3626
  • peekView.border#b8856d50
  • peekViewEditor.background#ffffff
  • peekViewEditor.matchHighlightBackground#f4a02080
  • peekViewResult.background#f0e8eb
  • peekViewResult.fileForeground#000000
  • peekViewResult.lineForeground#000000
  • peekViewResult.matchHighlightBackground#f4a02080
  • peekViewResult.selectionBackground#b8856d50
  • peekViewResult.selectionForeground#000000
  • peekViewTitle.background#e8dce0
  • peekViewTitleDescription.foreground#7c3626
  • peekViewTitleLabel.foreground#000000
  • pickerGroup.border#f76b00
  • pickerGroup.foreground#2a7f7f
  • progressBar.background#f47c20
  • selection.background#f76b00
  • settings.checkboxBackground#f0e8eb
  • settings.checkboxBorder#e8dce0
  • settings.checkboxForeground#000000
  • settings.dropdownBackground#f0e8eb
  • settings.dropdownBorder#e8dce0
  • settings.dropdownForeground#000000
  • settings.headerForeground#000000
  • settings.modifiedItemIndicator#f47c20
  • settings.numberInputBackground#f0e8eb
  • settings.numberInputBorder#e8dce0
  • settings.numberInputForeground#000000
  • settings.textInputBackground#f0e8eb
  • settings.textInputBorder#e8dce0
  • settings.textInputForeground#000000
  • sideBar.background#f0e8eb
  • sideBarSectionHeader.background#ffffff
  • sideBarSectionHeader.border#e8dce0
  • sideBarTitle.foreground#000000
  • statusBar.background#e8dce0
  • statusBar.debuggingBackground#7c3626
  • statusBar.debuggingForeground#e8dce0
  • statusBar.foreground#000000
  • statusBar.noFolderBackground#e8dce0
  • statusBar.noFolderForeground#000000
  • statusBarItem.prominentBackground#7c3626
  • statusBarItem.prominentHoverBackground#f47c20
  • statusBarItem.remoteBackground#f76b00
  • statusBarItem.remoteForeground#ffffff
  • tab.activeBackground#ffffff
  • tab.activeBorderTop#ff6b4a80
  • tab.activeForeground#000000
  • tab.border#e8dce0
  • tab.inactiveBackground#f0e8eb
  • tab.inactiveForeground#7c3626
  • terminal.ansiBlack#f0e8eb
  • terminal.ansiBlue#2a7f7f
  • terminal.ansiBrightBlack#7c3626
  • terminal.ansiBrightBlue#7c3626
  • terminal.ansiBrightCyan#2a7f7f
  • terminal.ansiBrightGreen#2a7f7f
  • terminal.ansiBrightMagenta#f47c20
  • terminal.ansiBrightRed#f47c20
  • terminal.ansiBrightWhite#c4c4c4
  • terminal.ansiBrightYellow#2a7f7f
  • terminal.ansiCyan#2a7f7f
  • terminal.ansiGreen#2a7f7f
  • terminal.ansiMagenta#f47c20
  • terminal.ansiRed#7c3626
  • terminal.ansiWhite#000000
  • terminal.ansiYellow#f47c20
  • terminal.background#ffffff
  • terminal.foreground#000000
  • titleBar.activeBackground#f0e8eb
  • titleBar.activeForeground#000000
  • titleBar.inactiveBackground#e8dce0
  • titleBar.inactiveForeground#7c3626
  • walkThrough.embeddedEditorBackground#f0e8eb

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
emphasis—italic
strong—bold
header#f76b00—
meta.diff, meta.diff.header#7c3626—
markup.inserted#2a7f7f—
markup.deleted#7c3626—
markup.changed#f47c20—
invalid#7c3626underline italic
invalid.deprecated#000000underline italic
entity.name.filename#f47c20—
markup.error#7c3626—
markup.underline—underline
markup.bold#f47c20bold
markup.heading#f76b00bold
markup.italic#f47c20italic
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#2a7f7f—
markup.inline.raw, markup.raw.restructuredtext#2a7f7f—
markup.underline.link, markup.underline.link.image#2a7f7f—
meta.link.reference.def.restructuredtext, punctuation.definition.directive.restructuredtext, string.other.link.description, string.other.link.title#f47c20—
entity.name.directive.restructuredtext, markup.quote#f47c20italic
meta.separator.markdown#7c3626—
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#2a7f7f—
punctuation.definition.constant.restructuredtext#f76b00—
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#f76b00—
meta.paragraph.markdown punctuation.definition.string.begin, meta.paragraph.markdown punctuation.definition.string.end#000000—
markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.begin, markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.end#f47c20—
entity.name.type.class, entity.name.class#2a7f7fnormal
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#f76b00italic
entity.other.inherited-class#2a7f7fitalic
comment, punctuation.definition.comment, unused.comment, wildcard.comment#7c3626—
comment keyword.codetag.notation, comment.block.documentation keyword, comment.block.documentation storage.type.class#f47c20—
comment.block.documentation entity.name.type#2a7f7fitalic
comment.block.documentation entity.name.type punctuation.definition.bracket#2a7f7f—
comment.block.documentation variable#f47c20italic
constant, variable.other.constant#f76b00—
constant.character.escape, constant.character.string.escape, constant.regexp#f47c20—
entity.name.tag#f47c20—
entity.other.attribute-name.parent-selector#f47c20—
entity.other.attribute-name#2a7f7fitalic
entity.name.function, 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#2a7f7f—
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#f47c20italic
meta.decorator variable.other.readwrite, meta.decorator variable.other.property#2a7f7fitalic
meta.decorator variable.other.object#2a7f7f—
keyword, punctuation.definition.keyword#f47c20—
keyword.control.new, keyword.operator.new—bold
meta.selector#f47c20—
support#2a7f7fitalic
support.function.magic, support.variable, variable.other.predefined#f76b00regular
support.function, support.type.property-name—regular
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#f47c20—
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, punctuation.terminator.expression.php, storage.type.generic.java, string.template meta.brace, string.template punctuation.accessor#000000—
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#f47c20—
entity.name.function.target.makefile, entity.name.section.toml, entity.name.tag.yaml, variable.other.key.toml#2a7f7f—
constant.other.date, constant.other.timestamp#f47c20—
variable.other.alias.yaml#2a7f7fitalic underline
storage, meta.implementation storage.type.objc, meta.interface-or-protocol storage.type.objc, source.groovy storage.type.def#f47c20regular
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#2a7f7fitalic
entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#f47c20—
storage.modifier#f47c20—
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#f47c20—
punctuation.definition.group.capture.regexp#f47c20—
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#7c3626—
punctuation.definition.character-class.regexp#2a7f7f—
punctuation.definition.group.regexp#f47c20—
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#7c3626—
meta.assertion.look-ahead.regexp#2a7f7f—
string#f47c20—
punctuation.definition.string.begin, punctuation.definition.string.end#2a7f7f—
punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end#2a7f7f—
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#7c3626—
variable, constant.other.key.perl, support.variable.property, variable.other.constant.js, variable.other.constant.ts, variable.other.constant.tsx#000000—
meta.import variable.other.readwrite, meta.variable.assignment.destructured.object.coffee variable#f47c20italic
meta.import variable.other.readwrite.alias, meta.export variable.other.readwrite.alias, meta.variable.assignment.destructured.object.coffee variable variable#000000normal
meta.selectionset.graphql variable#f47c20—
meta.selectionset.graphql meta.arguments variable#000000—
entity.name.fragment.graphql, variable.fragment.graphql#2a7f7f—
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#000000—
source.shell variable.other#f76b00—
support.constant#f76b00normal
meta.scope.prerequisites.makefile#f47c20—
meta.attribute-selector.scss#f47c20—
punctuation.definition.attribute-selector.end.bracket.square.scss, punctuation.definition.attribute-selector.begin.bracket.square.scss#000000—
meta.preprocessor.haskell#7c3626—
log.error#7c3626bold
log.warning#f47c20bold
Bumble Coffee by Ender Bonnet - VS Code Theme