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.activeBorder#ff322c
  • activityBar.background#312719
  • activityBar.foreground#eae4da
  • activityBar.inactiveForeground#b4a89f
  • activityBarBadge.background#ff322c
  • activityBarBadge.foreground#100906
  • badge.background#ff322c
  • badge.foreground#100906
  • banner.background#ff322c26
  • banner.foreground#eae4da
  • breadcrumb.activeSelectionForeground#eae4da
  • breadcrumb.background#43392a
  • breadcrumb.focusForeground#eae4da
  • breadcrumb.foreground#c7bbb2
  • button.background#ff322c
  • button.foreground#100906
  • button.hoverBackground#ff4037
  • button.secondaryBackground#504637
  • button.secondaryForeground#eae4da
  • charts.blue#0099f0
  • charts.foreground#eae4da
  • charts.green#009c27
  • charts.lines#988e7f
  • charts.orange#ff322c
  • charts.purple#966ab5
  • charts.red#ff0621
  • charts.yellow#e88d00
  • chat.avatarBackground#ff322c
  • chat.avatarForeground#100906
  • chat.requestBackground#ff322c0d
  • chat.requestBorder#988e7f
  • chat.slashCommandBackground#ff322c1f
  • chat.slashCommandForeground#ff322c
  • commandCenter.activeBackground#ff322c14
  • commandCenter.activeForeground#eae4da
  • commandCenter.background#43392a
  • commandCenter.border#988e7f
  • commandCenter.foreground#b4a89f
  • contrastActiveBorder#ff322c
  • contrastBorder#908472
  • debugConsole.errorForeground#ff0621
  • debugConsole.infoForeground#0099f0
  • debugConsole.sourceForeground#b4a89f
  • debugConsole.warningForeground#e88d00
  • debugIcon.pauseForeground#e88d00
  • debugIcon.startForeground#009c27
  • debugIcon.stopForeground#ff0621
  • debugTokenExpression.boolean#ffa92f
  • debugTokenExpression.error#ff0621
  • debugTokenExpression.name#ff322c
  • debugTokenExpression.number#ffa92f
  • debugTokenExpression.string#85df71
  • debugTokenExpression.type#ff9de2
  • debugTokenExpression.value#eae4da
  • debugToolBar.background#504637
  • debugToolBar.foreground#eae4da
  • diffEditor.border#988e7f
  • diffEditor.diagonalFill#b4a89f14
  • diffEditor.insertedLineBackground#009c2714
  • diffEditor.insertedTextBackground#009c271f
  • diffEditor.removedLineBackground#ff062114
  • diffEditor.removedTextBackground#ff06211f
  • diffEditorGutter.insertedLineBackground#009c271f
  • diffEditorGutter.removedLineBackground#ff06211f
  • diffEditorOverview.insertedForeground#009c27
  • diffEditorOverview.removedForeground#ff0621
  • dropdown.background#504637
  • dropdown.border#988e7f
  • dropdown.foreground#eae4da
  • editor.background#43392a
  • editor.findMatchBackground#e88d0066
  • editor.findMatchHighlightBackground#e88d0040
  • editor.focusedStackFrameHighlightBackground#009c271a
  • editor.foldBackground#eae4da08
  • editor.foldPlaceholderForeground#b4a89f
  • editor.foreground#eae4da
  • editor.inactiveSelectionBackground#ff322c1f
  • editor.lineHighlightBackground#eae4da1f
  • editor.linkedEditingBackground#ff322c1a
  • editor.rangeHighlightBackground#ff322c0f
  • editor.selectionBackground#ff322c4d
  • editor.selectionHighlightBackground#ff322c26
  • editor.stackFrameHighlightBackground#e88d001a
  • editor.wordHighlightBackground#ff322c33
  • editor.wordHighlightStrongBackground#ff322c59
  • editor.wordHighlightStrongBorder#ff322c66
  • editorBracketHighlight.foreground1#e8796c
  • editorBracketHighlight.foreground2#43ac9b
  • editorBracketHighlight.foreground3#d49648
  • editorBracketHighlight.foreground4#71a166
  • editorBracketHighlight.foreground5#c886b2
  • editorBracketHighlight.foreground6#708dbd
  • editorBracketHighlight.unexpectedBracket.foreground#ff0621
  • editorBracketMatch.background#ff322c26
  • editorBracketMatch.border#ff322c
  • editorBracketPairGuide.activeBackground1#e8796c4d
  • editorBracketPairGuide.activeBackground2#43ac9b4d
  • editorBracketPairGuide.activeBackground3#d496484d
  • editorBracketPairGuide.activeBackground4#71a1664d
  • editorBracketPairGuide.background1#e8796c1a
  • editorBracketPairGuide.background2#43ac9b1a
  • editorBracketPairGuide.background3#d496481a
  • editorBracketPairGuide.background4#71a1661a
  • editorCodeLens.foreground#b4a89f
  • editorCursor.foreground#ff322c
  • editorError.foreground#ff0621
  • editorGhostText.background#00000000
  • editorGhostText.border#00000000
  • editorGhostText.foreground#b4a89f99
  • editorGroup.border#988e7f
  • editorGroupHeader.tabsBackground#43392a
  • editorGutter.addedBackground#009c27
  • editorGutter.background#43392a
  • editorGutter.commentGlyphForeground#b4a89f
  • editorGutter.commentUnresolvedGlyphForeground#e88d00
  • editorGutter.deletedBackground#ff0621
  • editorGutter.foldingControlForeground#b4a89f
  • editorGutter.modifiedBackground#0099f0
  • editorHoverWidget.background#504637
  • editorHoverWidget.border#988e7f
  • editorHoverWidget.foreground#eae4da
  • editorIndentGuide.activeBackground#988e7f
  • editorIndentGuide.background#988e7f80
  • editorInfo.foreground#0099f0
  • editorInlayHint.background#b4a89f1a
  • editorInlayHint.foreground#b4a89f
  • editorInlayHint.parameterForeground#c4b8af
  • editorInlayHint.typeForeground#c4b8af
  • editorLightBulb.foreground#e88d00
  • editorLightBulbAutoFix.foreground#ff322c
  • editorLineNumber.activeForeground#eae4da
  • editorLineNumber.foreground#c7bbb2
  • editorLink.activeForeground#ff322c
  • editorOverviewRuler.addedForeground#009c27
  • editorOverviewRuler.bracketMatchForeground#ff322c99
  • editorOverviewRuler.deletedForeground#ff0621
  • editorOverviewRuler.errorForeground#ff0621
  • editorOverviewRuler.findMatchForeground#ff322c80
  • editorOverviewRuler.infoForeground#0099f0
  • editorOverviewRuler.modifiedForeground#0099f0
  • editorOverviewRuler.warningForeground#e88d00
  • editorRuler.foreground#988e7f80
  • editorStickyScroll.background#43392a
  • editorStickyScrollHover.background#eae4da0a
  • editorSuggestWidget.background#504637
  • editorSuggestWidget.border#988e7f
  • editorSuggestWidget.focusHighlightForeground#ff322c
  • editorSuggestWidget.foreground#eae4da
  • editorSuggestWidget.highlightForeground#ff322c
  • editorSuggestWidget.selectedBackground#ff322c26
  • editorSuggestWidget.selectedForeground#eae4da
  • editorUnicodeHighlight.border#e88d00
  • editorUnnecessaryCode.border#00000000
  • editorUnnecessaryCode.opacity#00000088
  • editorWarning.foreground#e88d00
  • editorWhitespace.foreground#b4a89f40
  • editorWidget.background#504637
  • editorWidget.border#988e7f
  • errorForeground#ff0621
  • extensionButton.prominentBackground#ff322c
  • extensionButton.prominentForeground#100906
  • extensionButton.prominentHoverBackground#ff4037
  • focusBorder#ff322c
  • foreground#eae4da
  • git.blame.editorDecorationForeground#b4a89f
  • gitDecoration.addedResourceForeground#009c27
  • gitDecoration.conflictingResourceForeground#e88d00
  • gitDecoration.deletedResourceForeground#ff0621
  • gitDecoration.ignoredResourceForeground#b4a89f
  • gitDecoration.modifiedResourceForeground#0099f0
  • gitDecoration.renamedResourceForeground#5fccfc
  • gitDecoration.stageDeletedResourceForeground#ff87a9
  • gitDecoration.stageModifiedResourceForeground#ffa92f
  • gitDecoration.untrackedResourceForeground#008c10
  • inlineChat.background#504637
  • inlineChat.border#988e7f
  • inlineChatInput.border#988e7f
  • inlineChatInput.focusBorder#ff322c
  • input.background#43392a
  • input.border#988e7f
  • input.foreground#eae4da
  • input.placeholderForeground#b4a89f
  • inputValidation.errorBackground#ff062126
  • inputValidation.errorBorder#ff0621
  • inputValidation.infoBackground#0099f026
  • inputValidation.infoBorder#0099f0
  • inputValidation.warningBackground#e88d0026
  • inputValidation.warningBorder#e88d00
  • keybindingLabel.background#eae4da0f
  • keybindingLabel.border#eae4da1f
  • keybindingLabel.bottomBorder#eae4da2e
  • keybindingLabel.foreground#eae4da
  • list.activeSelectionBackground#ff322c4d
  • list.activeSelectionForeground#eae4da
  • list.errorForeground#ff0621
  • list.focusOutline#ff322c
  • list.highlightForeground#ff322c
  • list.hoverBackground#ff322c1f
  • list.inactiveSelectionBackground#ff322c33
  • list.warningForeground#e88d00
  • menu.background#504637
  • menu.border#988e7f
  • menu.foreground#eae4da
  • menu.selectionBackground#ff322c26
  • menu.selectionForeground#eae4da
  • menu.separatorBackground#988e7f
  • merge.currentHeaderBackground#009c2740
  • merge.incomingHeaderBackground#0099f040
  • minimap.background#43392a
  • minimap.errorHighlight#ff062199
  • minimap.findMatchHighlight#e88d0080
  • minimap.selectionHighlight#ff322c4d
  • minimap.warningHighlight#e88d0099
  • minimapGutter.addedBackground#009c27
  • minimapGutter.deletedBackground#ff0621
  • minimapGutter.modifiedBackground#0099f0
  • minimapSlider.activeBackground#b4a89f59
  • minimapSlider.background#b4a89f26
  • minimapSlider.hoverBackground#b4a89f40
  • notebook.cellBorderColor#988e7f
  • notebook.cellEditorBackground#504637
  • notebook.editorBackground#43392a
  • notebook.focusedCellBorder#ff322c
  • notebook.focusedEditorBorder#ff322c
  • notebook.inactiveFocusedCellBorder#988e7f
  • notebook.outputContainerBackgroundColor#b4a89f0a
  • notebook.selectedCellBackground#ff322c0f
  • notebook.selectedCellBorder#ff322c
  • notebook.symbolHighlightBackground#ffa92f26
  • notifications.background#504637
  • notifications.border#988e7f
  • notifications.foreground#eae4da
  • panel.background#504637
  • panel.border#988e7f
  • panelTitle.activeBorder#ff322c
  • panelTitle.activeForeground#eae4da
  • panelTitle.inactiveForeground#b4a89f
  • peekView.border#ff322c
  • peekViewEditor.background#504637
  • peekViewEditor.matchHighlightBackground#e88d0040
  • peekViewResult.background#362c1e
  • peekViewResult.fileForeground#eae4da
  • peekViewResult.lineForeground#b4a89f
  • peekViewResult.matchHighlightBackground#e88d0033
  • peekViewResult.selectionForeground#eae4da
  • peekViewTitleLabel.foreground#ff322c
  • pickerGroup.border#988e7f
  • pickerGroup.foreground#ff322c
  • progressBar.background#ff322c
  • quickInput.background#504637
  • quickInput.border#988e7f
  • quickInput.foreground#eae4da
  • sash.hoverBorder#ff322c
  • scmGraph.foreground1#ff322c
  • scmGraph.foreground2#0099f0
  • scmGraph.foreground3#009c27
  • scmGraph.foreground4#e88d00
  • scmGraph.foreground5#ff0621
  • scrollbar.shadow#eae4da14
  • scrollbarSlider.activeBackground#b4a89f80
  • scrollbarSlider.background#b4a89f33
  • scrollbarSlider.hoverBackground#b4a89f59
  • searchEditor.findMatchBackground#e88d0033
  • searchEditor.findMatchBorder#e88d0080
  • settings.checkboxBackground#504637
  • settings.checkboxBorder#988e7f
  • settings.checkboxForeground#ff322c
  • settings.dropdownBackground#504637
  • settings.dropdownBorder#988e7f
  • settings.dropdownForeground#eae4da
  • settings.focusedRowBackground#ff322c0f
  • settings.headerForeground#eae4da
  • settings.modifiedItemIndicator#ff322c
  • settings.numberInputBackground#504637
  • settings.numberInputBorder#988e7f
  • settings.numberInputForeground#eae4da
  • settings.rowHoverBackground#eae4da08
  • settings.textInputBackground#504637
  • settings.textInputBorder#988e7f
  • settings.textInputForeground#eae4da
  • sideBar.background#362c1e
  • sideBar.border#978d7f
  • sideBar.foreground#dad4ca
  • sideBarTitle.foreground#dad4ca
  • statusBar.background#312719
  • statusBar.border#988e7f
  • statusBar.debuggingBackground#ff322c
  • statusBar.debuggingForeground#100906
  • statusBar.foreground#c9c4ba
  • statusBar.noFolderBackground#312719
  • statusBarItem.errorBackground#ff0621
  • statusBarItem.errorForeground#100906
  • statusBarItem.prominentBackground#ff322c
  • statusBarItem.prominentForeground#100906
  • statusBarItem.remoteBackground#ff322c
  • statusBarItem.remoteForeground#100906
  • statusBarItem.remoteHoverBackground#ff4037
  • statusBarItem.warningBackground#e88d00
  • statusBarItem.warningForeground#100906
  • tab.activeBackground#504637
  • tab.activeBorderTop#ff322c
  • tab.activeForeground#eae4da
  • tab.border#00000000
  • tab.inactiveBackground#43392a
  • tab.inactiveForeground#c4b8af
  • tab.lastPinnedBorder#988e7f
  • tab.modifiedBorder#ff322c
  • tab.unfocusedModifiedBorder#ff322c80
  • terminal.ansiBlack#43392a
  • terminal.ansiBlue#0099f0
  • terminal.ansiBrightBlack#b4a89f
  • terminal.ansiBrightBlue#3fb9ff
  • terminal.ansiBrightCyan#4ad0ba
  • terminal.ansiBrightGreen#3dbc4a
  • terminal.ansiBrightMagenta#f990c4
  • terminal.ansiBrightRed#ff4845
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#ffad3f
  • terminal.ansiCyan#52b9a7
  • terminal.ansiGreen#009c27
  • terminal.ansiMagenta#dd84af
  • terminal.ansiRed#ff3034
  • terminal.ansiWhite#eae4da
  • terminal.ansiYellow#e88d00
  • terminal.background#43392a
  • terminal.findMatchBackground#e88d004d
  • terminal.findMatchBorder#e88d0080
  • terminal.findMatchHighlightBackground#e88d0026
  • terminal.foreground#eae4da
  • terminal.selectionBackground#ff322c33
  • terminalCommandDecoration.defaultBackground#b4a89f
  • terminalCommandDecoration.errorBackground#ff0621
  • terminalCommandDecoration.successBackground#009c27
  • terminalCursor.background#43392a
  • terminalCursor.foreground#ff322c
  • testing.coveredBackground#009c2714
  • testing.coveredBorder#009c274d
  • testing.iconErrored#ff0621
  • testing.iconFailed#ff0621
  • testing.iconPassed#009c27
  • testing.iconSkipped#e88d00
  • testing.runAction#009c27
  • testing.uncoveredBackground#ff062114
  • testing.uncoveredBorder#ff06214d
  • textBlockQuote.background#b4a89f0f
  • textBlockQuote.border#ff322c66
  • textCodeBlock.background#b4a89f14
  • textLink.activeForeground#ff483e
  • textLink.foreground#ff322c
  • titleBar.activeBackground#362c1e
  • titleBar.activeForeground#eae4da
  • titleBar.border#988e7f
  • titleBar.inactiveBackground#362c1e
  • titleBar.inactiveForeground#b4a89f
  • toolbar.hoverBackground#eae4da14
  • tree.indentGuidesStroke#988e7fb3
  • tree.tableColumnsBorder#988e7f80
  • welcomePage.progress.foreground#ff322c
  • welcomePage.tileBackground#504637
  • welcomePage.tileBorder#988e7f

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
keyword, storage.type, storage.modifier#ff8e7a
keyword.control, keyword.control.flow#ff8e7a
string, string.quoted, string.template#85df71
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.definition.interpolation.begin, punctuation.definition.interpolation.end, punctuation.section.embedded.begin, punctuation.section.embedded.end, constant.character.format.placeholder, meta.template.expression#ff8e7a
entity.name.function, support.function, meta.function-call#36dbc2
entity.name.type, entity.name.class, support.type, support.class, entity.other.inherited-class#ff9de2
support.type.primitive, support.type.builtin, support.type.builtin.go#ff9de2
support.function.builtin, support.function.builtin.go, support.function.builtin.python#36dbc2italic
variable, variable.parameter, variable.other#e8dbd2
constant.numeric, constant.language, variable.other.constant, constant.other#ffa92f
comment, comment.line, comment.block, punctuation.definition.comment#d6c7beitalic
comment.block.documentation, comment.line.documentation, comment.block.documentation.phpdoc, string.quoted.docstring.multi.python#b8c590italic
keyword.operator, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.logical, keyword.operator.arithmetic, keyword.operator.ternary, keyword.operator.spread, keyword.operator.rest, keyword.operator.type, keyword.operator.expression#c0b6ac
entity.name.tag#ff8e7a
support.class.component.tsx, support.class.component.jsx#ff9de2
entity.other.attribute-name#eeda5e
support.type.property-name.css, support.type.property-name.scss#36dbc2
variable.css, variable.other.custom-property.css, support.type.custom-property.css#ffa92f
support.constant.property-value.css, support.constant.color.css#ffa92f
keyword.other.unit.css#ffa92f
string.regexp, constant.character.escape#ff87a9
meta.decorator, punctuation.decorator, meta.annotation#f3a98f
meta.preprocessor, keyword.control.directive, keyword.control.directive.include, keyword.control.directive.define, punctuation.definition.directive#ff87a9
entity.name.function.macro.rust, support.macro.rust#ff8e7abold
meta.attribute.rust, meta.attribute.cpp#f3a98f
entity.name.namespace, entity.name.module, entity.name.import#5fccfc
variable.other.property, variable.other.object.property, meta.object-literal.key#eeda5e
support.class.console, support.class.error, support.class.promise#ff9de2
source.go entity.name.function#36dbc2
source.go storage.type#ff9de2
entity.name.type.tsx, entity.name.type.ts#ff9de2
entity.name.lifetime.rust#f3a98f
storage.type.rust#ff8e7a
keyword.other.DML.sql, keyword.other.DDL.sql#ff8e7a
constant.other.table-name.sql#ff9de2
constant.other.database-name.sql#5fccfc
support.type.property-name.json#eeda5e
entity.name.tag.yaml#eeda5e
entity.name.other.anchor.yaml, variable.other.alias.yaml#ffa92f
heading.1.markdown, heading.2.markdown, heading.3.markdown, markup.heading#ff8e7abold
markup.boldbold
markup.italicitalic
markup.inline.raw, markup.fenced_code.block#85df71
markup.underline.link#36dbc2
markup.list, punctuation.definition.list#ff8e7a
markup.quote#85df71italic
markup.strikethroughstrikethrough
variable.language.this, variable.language.self, variable.language.super#ff8e7aitalic
entity.name.type.parameter, meta.type.parameters#ff9de2italic
keyword.control.import, keyword.control.export, keyword.control.from#ff8e7a
entity.name.type.interface#ff9de2italic
variable.other.normal.shell, variable.other.special.shell, variable.other.positional.shell#e8dbd2
support.function.builtin.shell#36dbc2
entity.other.attribute-name.table.toml, support.type.property-name.table.toml#ff8e7abold
support.type.property-name.toml#eeda5e
punctuation.definition.string.begin, punctuation.definition.string.end#85df71
variable.other.member.go, variable.other.field.go#eeda5e
entity.name.function.member.go#36dbc2
entity.name.type.trait.rust#ff9de2italic
keyword.other.where.rust#ff8e7a
meta.fstring.python source.python.embedded, punctuation.definition.expression.python#ff8e7a
meta.function.parameters.python support.type.python#ff9de2
keyword.query.linq.cs, keyword.other.linq.cs#ff8e7a
meta.attribute.cs#f3a98f
storage.type.annotation.java, punctuation.definition.annotation.java#f3a98f
keyword.operator.spread.tsx, keyword.operator.spread.jsx#c0b6ac
punctuation.definition.tag.begin.tsx, punctuation.definition.tag.end.tsx, punctuation.definition.tag.begin.jsx, punctuation.definition.tag.end.jsx#ff8e7a
entity.other.attribute-name.pseudo-element.css, entity.other.attribute-name.pseudo-class.css#ff87a9
variable.scss#ffa92f
entity.name.type.template.cpp#ff9de2italic
punctuation.definition.variable.php#e8dbd2
entity.name.type.namespace.php, support.other.namespace.php#5fccfc
markup.inserted#85df71
markup.deleted#ff87a9
markup.changed#ffa92f
meta.diff.header, meta.diff.index#ff9de2bold
invalid.illegal#ff87a9underline
invalid.deprecatedstrikethrough
keyword.operator.quantifier.regexp, keyword.operator.negation.regexp#c0b6acbold
punctuation.definition.group.regexp, keyword.other.back-reference.regexp, punctuation.definition.character-class.regexp#ff8e7a
entity.name.function.decorator.python#f3a98f