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#c93029
  • activityBar.background#d1cac0
  • activityBar.foreground#0f1216
  • activityBar.inactiveForeground#5f636a
  • activityBarBadge.background#c93029
  • activityBarBadge.foreground#ffffff
  • badge.background#c93029
  • badge.foreground#ffffff
  • banner.background#c9302926
  • banner.foreground#0f1216
  • breadcrumb.activeSelectionForeground#0f1216
  • breadcrumb.background#e9e4dc
  • breadcrumb.focusForeground#0f1216
  • breadcrumb.foreground#575b61
  • button.background#c93029
  • button.foreground#ffffff
  • button.hoverBackground#be231f
  • button.secondaryBackground#f7f5f1
  • button.secondaryForeground#0f1216
  • charts.blue#00589b
  • charts.foreground#0f1216
  • charts.green#006900
  • charts.lines#d7d0c6
  • charts.orange#c93029
  • charts.purple#966ab5
  • charts.red#db0003
  • charts.yellow#af5e00
  • chat.avatarBackground#c93029
  • chat.avatarForeground#ffffff
  • chat.requestBackground#c930290d
  • chat.requestBorder#d7d0c6
  • chat.slashCommandBackground#c930291f
  • chat.slashCommandForeground#c93029
  • commandCenter.activeBackground#c9302914
  • commandCenter.activeForeground#0f1216
  • commandCenter.background#e9e4dc
  • commandCenter.border#d7d0c6
  • commandCenter.foreground#5f636a
  • debugConsole.errorForeground#db0003
  • debugConsole.infoForeground#00589b
  • debugConsole.sourceForeground#5f636a
  • debugConsole.warningForeground#af5e00
  • debugIcon.pauseForeground#af5e00
  • debugIcon.startForeground#006900
  • debugIcon.stopForeground#db0003
  • debugTokenExpression.boolean#8f3f00
  • debugTokenExpression.error#db0003
  • debugTokenExpression.name#c93029
  • debugTokenExpression.number#8f3f00
  • debugTokenExpression.string#145e00
  • debugTokenExpression.type#883f73
  • debugTokenExpression.value#0f1216
  • debugToolBar.background#f7f5f1
  • debugToolBar.foreground#0f1216
  • diffEditor.border#d7d0c6
  • diffEditor.diagonalFill#5f636a14
  • diffEditor.insertedLineBackground#00690014
  • diffEditor.insertedTextBackground#0069001f
  • diffEditor.removedLineBackground#db000314
  • diffEditor.removedTextBackground#db00031f
  • diffEditorGutter.insertedLineBackground#0069001f
  • diffEditorGutter.removedLineBackground#db00031f
  • diffEditorOverview.insertedForeground#006900
  • diffEditorOverview.removedForeground#db0003
  • dropdown.background#f7f5f1
  • dropdown.border#d7d0c6
  • dropdown.foreground#0f1216
  • editor.background#e9e4dc
  • editor.findMatchBackground#af5e004d
  • editor.findMatchHighlightBackground#af5e0026
  • editor.focusedStackFrameHighlightBackground#0069001a
  • editor.foldBackground#0f121608
  • editor.foldPlaceholderForeground#5f636a
  • editor.foreground#0f1216
  • editor.inactiveSelectionBackground#c9302917
  • editor.lineHighlightBackground#0f121614
  • editor.linkedEditingBackground#c930291a
  • editor.rangeHighlightBackground#c930290f
  • editor.selectionBackground#c9302926
  • editor.selectionHighlightBackground#c9302914
  • editor.stackFrameHighlightBackground#af5e001a
  • editor.wordHighlightBackground#c930291a
  • editor.wordHighlightStrongBackground#c9302940
  • editor.wordHighlightStrongBorder#c9302966
  • editorBracketHighlight.foreground1#a43c33
  • editorBracketHighlight.foreground2#005e4f
  • editorBracketHighlight.foreground3#874e00
  • editorBracketHighlight.foreground4#2c5a21
  • editorBracketHighlight.foreground5#7c4069
  • editorBracketHighlight.foreground6#38527f
  • editorBracketHighlight.unexpectedBracket.foreground#db0003
  • editorBracketMatch.background#c9302926
  • editorBracketMatch.border#c9302980
  • editorBracketPairGuide.activeBackground1#a43c334d
  • editorBracketPairGuide.activeBackground2#005e4f4d
  • editorBracketPairGuide.activeBackground3#874e004d
  • editorBracketPairGuide.activeBackground4#2c5a214d
  • editorBracketPairGuide.background1#a43c331a
  • editorBracketPairGuide.background2#005e4f1a
  • editorBracketPairGuide.background3#874e001a
  • editorBracketPairGuide.background4#2c5a211a
  • editorCodeLens.foreground#5f636a
  • editorCursor.foreground#c93029
  • editorError.foreground#db0003
  • editorGhostText.background#00000000
  • editorGhostText.border#00000000
  • editorGhostText.foreground#5f636a99
  • editorGroup.border#d7d0c6
  • editorGroupHeader.tabsBackground#e9e4dc
  • editorGutter.addedBackground#006900
  • editorGutter.background#e9e4dc
  • editorGutter.commentGlyphForeground#5f636a
  • editorGutter.commentUnresolvedGlyphForeground#af5e00
  • editorGutter.deletedBackground#db0003
  • editorGutter.foldingControlForeground#5f636a
  • editorGutter.modifiedBackground#00589b
  • editorHoverWidget.background#f7f5f1
  • editorHoverWidget.border#d7d0c6
  • editorHoverWidget.foreground#0f1216
  • editorIndentGuide.activeBackground#d7d0c6
  • editorIndentGuide.background#d7d0c680
  • editorInfo.foreground#00589b
  • editorInlayHint.background#5f636a1a
  • editorInlayHint.foreground#5f636a
  • editorInlayHint.parameterForeground#51555c
  • editorInlayHint.typeForeground#51555c
  • editorLightBulb.foreground#af5e00
  • editorLightBulbAutoFix.foreground#c93029
  • editorLineNumber.activeForeground#0f1216
  • editorLineNumber.foreground#5f636a
  • editorLink.activeForeground#c93029
  • editorOverviewRuler.addedForeground#006900
  • editorOverviewRuler.bracketMatchForeground#c9302999
  • editorOverviewRuler.deletedForeground#db0003
  • editorOverviewRuler.errorForeground#db0003
  • editorOverviewRuler.findMatchForeground#c9302980
  • editorOverviewRuler.infoForeground#00589b
  • editorOverviewRuler.modifiedForeground#00589b
  • editorOverviewRuler.warningForeground#af5e00
  • editorRuler.foreground#d7d0c680
  • editorStickyScroll.background#e9e4dc
  • editorStickyScrollHover.background#0f12160a
  • editorSuggestWidget.background#f7f5f1
  • editorSuggestWidget.border#d7d0c6
  • editorSuggestWidget.focusHighlightForeground#c93029
  • editorSuggestWidget.foreground#0f1216
  • editorSuggestWidget.highlightForeground#c93029
  • editorSuggestWidget.selectedBackground#c9302926
  • editorSuggestWidget.selectedForeground#0f1216
  • editorUnicodeHighlight.border#af5e00
  • editorUnnecessaryCode.border#00000000
  • editorUnnecessaryCode.opacity#00000088
  • editorWarning.foreground#af5e00
  • editorWhitespace.foreground#5f636a40
  • editorWidget.background#f7f5f1
  • editorWidget.border#d7d0c6
  • errorForeground#db0003
  • extensionButton.prominentBackground#c93029
  • extensionButton.prominentForeground#ffffff
  • extensionButton.prominentHoverBackground#be231f
  • focusBorder#c93029
  • foreground#0f1216
  • git.blame.editorDecorationForeground#5f636a
  • gitDecoration.addedResourceForeground#006900
  • gitDecoration.conflictingResourceForeground#af5e00
  • gitDecoration.deletedResourceForeground#db0003
  • gitDecoration.ignoredResourceForeground#5f636a
  • gitDecoration.modifiedResourceForeground#00589b
  • gitDecoration.renamedResourceForeground#00517b
  • gitDecoration.stageDeletedResourceForeground#7e1945
  • gitDecoration.stageModifiedResourceForeground#8f3f00
  • gitDecoration.untrackedResourceForeground#1c7819
  • inlineChat.background#f7f5f1
  • inlineChat.border#d7d0c6
  • inlineChatInput.border#d7d0c6
  • inlineChatInput.focusBorder#c93029
  • input.background#e9e4dc
  • input.border#d7d0c6
  • input.foreground#0f1216
  • input.placeholderForeground#5f636a
  • inputValidation.errorBackground#db000326
  • inputValidation.errorBorder#db0003
  • inputValidation.infoBackground#00589b26
  • inputValidation.infoBorder#00589b
  • inputValidation.warningBackground#af5e0026
  • inputValidation.warningBorder#af5e00
  • keybindingLabel.background#0f12160f
  • keybindingLabel.border#0f12161f
  • keybindingLabel.bottomBorder#0f12162e
  • keybindingLabel.foreground#0f1216
  • list.activeSelectionBackground#c9302933
  • list.activeSelectionForeground#0f1216
  • list.errorForeground#db0003
  • list.focusOutline#c93029
  • list.highlightForeground#c93029
  • list.hoverBackground#c930290f
  • list.inactiveSelectionBackground#c930291a
  • list.warningForeground#af5e00
  • menu.background#f7f5f1
  • menu.border#d7d0c6
  • menu.foreground#0f1216
  • menu.selectionBackground#c9302926
  • menu.selectionForeground#0f1216
  • menu.separatorBackground#d7d0c6
  • merge.currentHeaderBackground#00690040
  • merge.incomingHeaderBackground#00589b40
  • minimap.background#e9e4dc
  • minimap.errorHighlight#db000399
  • minimap.findMatchHighlight#af5e0080
  • minimap.selectionHighlight#c930294d
  • minimap.warningHighlight#af5e0099
  • minimapGutter.addedBackground#006900
  • minimapGutter.deletedBackground#db0003
  • minimapGutter.modifiedBackground#00589b
  • minimapSlider.activeBackground#5f636a59
  • minimapSlider.background#5f636a26
  • minimapSlider.hoverBackground#5f636a40
  • notebook.cellBorderColor#d7d0c6
  • notebook.cellEditorBackground#f7f5f1
  • notebook.editorBackground#e9e4dc
  • notebook.focusedCellBorder#c93029
  • notebook.focusedEditorBorder#c93029
  • notebook.inactiveFocusedCellBorder#d7d0c6
  • notebook.outputContainerBackgroundColor#5f636a0a
  • notebook.selectedCellBackground#c930290f
  • notebook.selectedCellBorder#c93029
  • notebook.symbolHighlightBackground#8f3f0026
  • notifications.background#f7f5f1
  • notifications.border#d7d0c6
  • notifications.foreground#0f1216
  • panel.background#f7f5f1
  • panel.border#d7d0c6
  • panelTitle.activeBorder#c93029
  • panelTitle.activeForeground#0f1216
  • panelTitle.inactiveForeground#5f636a
  • peekView.border#c93029
  • peekViewEditor.background#f7f5f1
  • peekViewEditor.matchHighlightBackground#af5e0040
  • peekViewResult.background#d7d0c6
  • peekViewResult.fileForeground#0f1216
  • peekViewResult.lineForeground#5f636a
  • peekViewResult.matchHighlightBackground#af5e0033
  • peekViewResult.selectionForeground#0f1216
  • peekViewTitleLabel.foreground#c93029
  • pickerGroup.border#d7d0c6
  • pickerGroup.foreground#c93029
  • progressBar.background#c93029
  • quickInput.background#f7f5f1
  • quickInput.border#d7d0c6
  • quickInput.foreground#0f1216
  • sash.hoverBorder#c93029
  • scmGraph.foreground1#c93029
  • scmGraph.foreground2#00589b
  • scmGraph.foreground3#006900
  • scmGraph.foreground4#af5e00
  • scmGraph.foreground5#db0003
  • scrollbar.shadow#0f121614
  • scrollbarSlider.activeBackground#5f636a80
  • scrollbarSlider.background#5f636a33
  • scrollbarSlider.hoverBackground#5f636a59
  • searchEditor.findMatchBackground#af5e0033
  • searchEditor.findMatchBorder#af5e0080
  • settings.checkboxBackground#f7f5f1
  • settings.checkboxBorder#d7d0c6
  • settings.checkboxForeground#c93029
  • settings.dropdownBackground#f7f5f1
  • settings.dropdownBorder#d7d0c6
  • settings.dropdownForeground#0f1216
  • settings.focusedRowBackground#c930290f
  • settings.headerForeground#0f1216
  • settings.modifiedItemIndicator#c93029
  • settings.numberInputBackground#f7f5f1
  • settings.numberInputBorder#d7d0c6
  • settings.numberInputForeground#0f1216
  • settings.rowHoverBackground#0f121608
  • settings.textInputBackground#f7f5f1
  • settings.textInputBorder#d7d0c6
  • settings.textInputForeground#0f1216
  • sideBar.background#d7d0c6
  • sideBar.border#cdc6be
  • sideBar.foreground#212429
  • sideBarTitle.foreground#212429
  • statusBar.background#d1cac0
  • statusBar.border#d7d0c6
  • statusBar.debuggingBackground#c93029
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#26292e
  • statusBar.noFolderBackground#d1cac0
  • statusBarItem.errorBackground#db0003
  • statusBarItem.errorForeground#ffffff
  • statusBarItem.prominentBackground#c93029
  • statusBarItem.prominentForeground#ffffff
  • statusBarItem.remoteBackground#c93029
  • statusBarItem.remoteForeground#ffffff
  • statusBarItem.remoteHoverBackground#be231f
  • statusBarItem.warningBackground#af5e00
  • statusBarItem.warningForeground#ffffff
  • tab.activeBackground#f7f5f1
  • tab.activeBorderTop#c93029
  • tab.activeForeground#0f1216
  • tab.border#00000000
  • tab.inactiveBackground#e9e4dc
  • tab.inactiveForeground#51555c
  • tab.lastPinnedBorder#d7d0c6
  • tab.modifiedBorder#c93029
  • tab.unfocusedModifiedBorder#c9302980
  • terminal.ansiBlack#0f1216
  • terminal.ansiBlue#00589b
  • terminal.ansiBrightBlack#5f636a
  • terminal.ansiBrightBlue#003b7c
  • terminal.ansiBrightCyan#007260
  • terminal.ansiBrightGreen#004c00
  • terminal.ansiBrightMagenta#a14174
  • terminal.ansiBrightRed#b60000
  • terminal.ansiBrightWhite#0f1216
  • terminal.ansiBrightYellow#8f4000
  • terminal.ansiCyan#005e4f
  • terminal.ansiGreen#006900
  • terminal.ansiMagenta#9a4873
  • terminal.ansiRed#db0003
  • terminal.ansiWhite#e9e4dc
  • terminal.ansiYellow#af5e00
  • terminal.background#e9e4dc
  • terminal.findMatchBackground#af5e004d
  • terminal.findMatchBorder#af5e0080
  • terminal.findMatchHighlightBackground#af5e0026
  • terminal.foreground#0f1216
  • terminal.selectionBackground#c9302926
  • terminalCommandDecoration.defaultBackground#5f636a
  • terminalCommandDecoration.errorBackground#db0003
  • terminalCommandDecoration.successBackground#006900
  • terminalCursor.background#e9e4dc
  • terminalCursor.foreground#c93029
  • testing.coveredBackground#00690014
  • testing.coveredBorder#0069004d
  • testing.iconErrored#db0003
  • testing.iconFailed#db0003
  • testing.iconPassed#006900
  • testing.iconSkipped#af5e00
  • testing.runAction#006900
  • testing.uncoveredBackground#db000314
  • testing.uncoveredBorder#db00034d
  • textBlockQuote.background#5f636a0f
  • textBlockQuote.border#c9302966
  • textCodeBlock.background#5f636a14
  • textLink.activeForeground#db4339
  • textLink.foreground#c93029
  • titleBar.activeBackground#d7d0c6
  • titleBar.activeForeground#0f1216
  • titleBar.border#d7d0c6
  • titleBar.inactiveBackground#d7d0c6
  • titleBar.inactiveForeground#5f636a
  • toolbar.hoverBackground#0f121614
  • tree.indentGuidesStroke#d7d0c6b3
  • tree.tableColumnsBorder#d7d0c680
  • welcomePage.progress.foreground#c93029
  • welcomePage.tileBackground#f7f5f1
  • welcomePage.tileBorder#d7d0c6

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
keyword, storage.type, storage.modifier#ba0000
keyword.control, keyword.control.flow#ba0000
string, string.quoted, string.template#145e00
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#ba0000
entity.name.function, support.function, meta.function-call#005d4b
entity.name.type, entity.name.class, support.type, support.class, entity.other.inherited-class#883f73
support.type.primitive, support.type.builtin, support.type.builtin.go#883f73
support.function.builtin, support.function.builtin.go, support.function.builtin.python#005d4bitalic
variable, variable.parameter, variable.other#1f2227
constant.numeric, constant.language, variable.other.constant, constant.other#8f3f00
comment, comment.line, comment.block, punctuation.definition.comment#6a615bitalic
comment.block.documentation, comment.line.documentation, comment.block.documentation.phpdoc, string.quoted.docstring.multi.python#49522bitalic
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#514c48
entity.name.tag#ba0000
support.class.component.tsx, support.class.component.jsx#883f73
entity.other.attribute-name#554100
support.type.property-name.css, support.type.property-name.scss#005d4b
variable.css, variable.other.custom-property.css, support.type.custom-property.css#8f3f00
support.constant.property-value.css, support.constant.color.css#8f3f00
keyword.other.unit.css#8f3f00
string.regexp, constant.character.escape#7e1945
meta.decorator, punctuation.decorator, meta.annotation#67260c
meta.preprocessor, keyword.control.directive, keyword.control.directive.include, keyword.control.directive.define, punctuation.definition.directive#7e1945
entity.name.function.macro.rust, support.macro.rust#ba0000bold
meta.attribute.rust, meta.attribute.cpp#67260c
entity.name.namespace, entity.name.module, entity.name.import#00517b
variable.other.property, variable.other.object.property, meta.object-literal.key#554100
support.class.console, support.class.error, support.class.promise#883f73
source.go entity.name.function#005d4b
source.go storage.type#883f73
entity.name.type.tsx, entity.name.type.ts#883f73
entity.name.lifetime.rust#67260c
storage.type.rust#ba0000
keyword.other.DML.sql, keyword.other.DDL.sql#ba0000
constant.other.table-name.sql#883f73
constant.other.database-name.sql#00517b
support.type.property-name.json#554100
entity.name.tag.yaml#554100
entity.name.other.anchor.yaml, variable.other.alias.yaml#8f3f00
heading.1.markdown, heading.2.markdown, heading.3.markdown, markup.heading#ba0000bold
markup.boldbold
markup.italicitalic
markup.inline.raw, markup.fenced_code.block#145e00
markup.underline.link#005d4b
markup.list, punctuation.definition.list#ba0000
markup.quote#145e00italic
markup.strikethroughstrikethrough
variable.language.this, variable.language.self, variable.language.super#ba0000italic
entity.name.type.parameter, meta.type.parameters#883f73italic
keyword.control.import, keyword.control.export, keyword.control.from#ba0000
entity.name.type.interface#883f73italic
variable.other.normal.shell, variable.other.special.shell, variable.other.positional.shell#1f2227
support.function.builtin.shell#005d4b
entity.other.attribute-name.table.toml, support.type.property-name.table.toml#ba0000bold
support.type.property-name.toml#554100
punctuation.definition.string.begin, punctuation.definition.string.end#145e00
variable.other.member.go, variable.other.field.go#554100
entity.name.function.member.go#005d4b
entity.name.type.trait.rust#883f73italic
keyword.other.where.rust#ba0000
meta.fstring.python source.python.embedded, punctuation.definition.expression.python#ba0000
meta.function.parameters.python support.type.python#883f73
keyword.query.linq.cs, keyword.other.linq.cs#ba0000
meta.attribute.cs#67260c
storage.type.annotation.java, punctuation.definition.annotation.java#67260c
keyword.operator.spread.tsx, keyword.operator.spread.jsx#514c48
punctuation.definition.tag.begin.tsx, punctuation.definition.tag.end.tsx, punctuation.definition.tag.begin.jsx, punctuation.definition.tag.end.jsx#ba0000
entity.other.attribute-name.pseudo-element.css, entity.other.attribute-name.pseudo-class.css#7e1945
variable.scss#8f3f00
entity.name.type.template.cpp#883f73italic
punctuation.definition.variable.php#1f2227
entity.name.type.namespace.php, support.other.namespace.php#00517b
markup.inserted#145e00
markup.deleted#7e1945
markup.changed#8f3f00
meta.diff.header, meta.diff.index#883f73bold
invalid.illegal#7e1945underline
invalid.deprecatedstrikethrough
keyword.operator.quantifier.regexp, keyword.operator.negation.regexp#514c48bold
punctuation.definition.group.regexp, keyword.other.back-reference.regexp, punctuation.definition.character-class.regexp#ba0000
entity.name.function.decorator.python#67260c
Dilmune Theme by Dilmune - VS Code Theme