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