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
emphasisitalic
strongbold
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.underlineunderline
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.newbold
meta.selector#ff6b4a
support#2a7f7fitalic
support.function.magic, support.variable, variable.other.predefined#a85a3aregular
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#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