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

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
emphasis—italic
strong—bold
header#a85a3a—
meta.diff, meta.diff.header#7c3626—
markup.inserted#3a9f7f—
markup.deleted#e05545—
markup.changed#f47c20—
invalid#e05545underline italic
invalid.deprecated#e8e8e8underline italic
entity.name.filename#f4a020—
markup.error#e05545—
markup.underline—underline
markup.bold#f47c20bold
markup.heading#a85a3abold
markup.italic#f4a020italic
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#2a7f7f—
markup.inline.raw, markup.raw.restructuredtext#3a9f7f—
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#ff6b4a—
entity.name.directive.restructuredtext, markup.quote#f4a020italic
meta.separator.markdown#7c3626—
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#3a9f7f—
punctuation.definition.constant.restructuredtext#a85a3a—
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#a85a3a—
meta.paragraph.markdown punctuation.definition.string.begin, meta.paragraph.markdown punctuation.definition.string.end#e8e8e8—
markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.begin, markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.end#f4a020—
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#a85a3aitalic
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#ff6b4a—
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#a85a3a—
constant.character.escape, constant.character.string.escape, constant.regexp#ff6b4a—
entity.name.tag#ff6b4a—
entity.other.attribute-name.parent-selector#ff6b4a—
entity.other.attribute-name#3a9f7fitalic
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#3a9f7f—
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#3a9f7fitalic
meta.decorator variable.other.object#3a9f7f—
keyword, punctuation.definition.keyword#ff6b4a—
keyword.control.new, keyword.operator.new—bold
meta.selector#ff6b4a—
support#2a7f7fitalic
support.function.magic, support.variable, variable.other.predefined#a85a3aregular
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#ff6b4a—
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#e8e8e8—
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#ff6b4a—
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#3a9f7fitalic underline
storage, meta.implementation storage.type.objc, meta.interface-or-protocol storage.type.objc, source.groovy storage.type.def#ff6b4aregular
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#ff6b4a—
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#f4a020—
punctuation.definition.group.capture.regexp#ff6b4a—
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#e05545—
punctuation.definition.character-class.regexp#2a7f7f—
punctuation.definition.group.regexp#f47c20—
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#e05545—
meta.assertion.look-ahead.regexp#3a9f7f—
string#f4a020—
punctuation.definition.string.begin, punctuation.definition.string.end#ffb84a—
punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end#4dbfbf—
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#e8e8e8—
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#e8e8e8normal
meta.selectionset.graphql variable#f4a020—
meta.selectionset.graphql meta.arguments variable#e8e8e8—
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#e8e8e8—
source.shell variable.other#a85a3a—
support.constant#a85a3anormal
meta.scope.prerequisites.makefile#f4a020—
meta.attribute-selector.scss#f4a020—
punctuation.definition.attribute-selector.end.bracket.square.scss, punctuation.definition.attribute-selector.begin.bracket.square.scss#e8e8e8—
meta.preprocessor.haskell#7c3626—
log.error#e05545bold
log.warning#f4a020bold
Bumble Coffee by Ender Bonnet - VS Code Theme