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#f14f43
  • activityBar.background#20242a
  • activityBar.foreground#e9e4dc
  • activityBar.inactiveForeground#777a80
  • activityBarBadge.background#f14f43
  • activityBarBadge.foreground#040609
  • badge.background#f14f43
  • badge.foreground#040609
  • banner.background#f14f4326
  • banner.foreground#e9e4dc
  • breadcrumb.activeSelectionForeground#e9e4dc
  • breadcrumb.background#0e1217
  • breadcrumb.focusForeground#e9e4dc
  • breadcrumb.foreground#898c92
  • button.background#f14f43
  • button.foreground#040609
  • button.hoverBackground#fc594c
  • button.secondaryBackground#2a2e34
  • button.secondaryForeground#e9e4dc
  • charts.blue#0079bf
  • charts.foreground#e9e4dc
  • charts.green#008b1d
  • charts.lines#2b2e32
  • charts.orange#f14f43
  • charts.purple#966ab5
  • charts.red#f51d31
  • charts.yellow#de8900
  • chat.avatarBackground#f14f43
  • chat.avatarForeground#040609
  • chat.requestBackground#f14f430d
  • chat.requestBorder#2b2e32
  • chat.slashCommandBackground#f14f431f
  • chat.slashCommandForeground#f14f43
  • commandCenter.activeBackground#f14f4314
  • commandCenter.activeForeground#e9e4dc
  • commandCenter.background#0e1217
  • commandCenter.border#2b2e32
  • commandCenter.foreground#777a80
  • debugConsole.errorForeground#f51d31
  • debugConsole.infoForeground#0079bf
  • debugConsole.sourceForeground#777a80
  • debugConsole.warningForeground#de8900
  • debugIcon.pauseForeground#de8900
  • debugIcon.startForeground#008b1d
  • debugIcon.stopForeground#f51d31
  • debugTokenExpression.boolean#f89800
  • debugTokenExpression.error#f51d31
  • debugTokenExpression.name#f14f43
  • debugTokenExpression.number#f89800
  • debugTokenExpression.string#81ce70
  • debugTokenExpression.type#eb98cf
  • debugTokenExpression.value#e9e4dc
  • debugToolBar.background#2a2e34
  • debugToolBar.foreground#e9e4dc
  • diffEditor.border#2b2e32
  • diffEditor.diagonalFill#777a8014
  • diffEditor.insertedLineBackground#008b1d14
  • diffEditor.insertedTextBackground#008b1d1f
  • diffEditor.removedLineBackground#f51d3114
  • diffEditor.removedTextBackground#f51d311f
  • diffEditorGutter.insertedLineBackground#008b1d1f
  • diffEditorGutter.removedLineBackground#f51d311f
  • diffEditorOverview.insertedForeground#008b1d
  • diffEditorOverview.removedForeground#f51d31
  • dropdown.background#2a2e34
  • dropdown.border#2b2e32
  • dropdown.foreground#e9e4dc
  • editor.background#0e1217
  • editor.findMatchBackground#de89004d
  • editor.findMatchHighlightBackground#de890026
  • editor.focusedStackFrameHighlightBackground#008b1d1a
  • editor.foldBackground#e9e4dc08
  • editor.foldPlaceholderForeground#777a80
  • editor.foreground#e9e4dc
  • editor.inactiveSelectionBackground#f14f431f
  • editor.lineHighlightBackground#e9e4dc14
  • editor.linkedEditingBackground#f14f431a
  • editor.rangeHighlightBackground#f14f430f
  • editor.selectionBackground#f14f4333
  • editor.selectionHighlightBackground#f14f4314
  • editor.stackFrameHighlightBackground#de89001a
  • editor.wordHighlightBackground#f14f431a
  • editor.wordHighlightStrongBackground#f14f4340
  • editor.wordHighlightStrongBorder#f14f4366
  • editorBracketHighlight.foreground1#e8796c
  • editorBracketHighlight.foreground2#43ac9b
  • editorBracketHighlight.foreground3#d49648
  • editorBracketHighlight.foreground4#71a166
  • editorBracketHighlight.foreground5#c886b2
  • editorBracketHighlight.foreground6#708dbd
  • editorBracketHighlight.unexpectedBracket.foreground#f51d31
  • editorBracketMatch.background#f14f4326
  • editorBracketMatch.border#f14f4380
  • 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#777a80
  • editorCursor.foreground#f14f43
  • editorError.foreground#f51d31
  • editorGhostText.background#00000000
  • editorGhostText.border#00000000
  • editorGhostText.foreground#777a8099
  • editorGroup.border#2b2e32
  • editorGroupHeader.tabsBackground#0e1217
  • editorGutter.addedBackground#008b1d
  • editorGutter.background#0e1217
  • editorGutter.commentGlyphForeground#777a80
  • editorGutter.commentUnresolvedGlyphForeground#de8900
  • editorGutter.deletedBackground#f51d31
  • editorGutter.foldingControlForeground#777a80
  • editorGutter.modifiedBackground#0079bf
  • editorHoverWidget.background#2a2e34
  • editorHoverWidget.border#2b2e32
  • editorHoverWidget.foreground#e9e4dc
  • editorIndentGuide.activeBackground#2b2e32
  • editorIndentGuide.background#2b2e3280
  • editorInfo.foreground#0079bf
  • editorInlayHint.background#777a801a
  • editorInlayHint.foreground#777a80
  • editorInlayHint.parameterForeground#86898f
  • editorInlayHint.typeForeground#86898f
  • editorLightBulb.foreground#de8900
  • editorLightBulbAutoFix.foreground#f14f43
  • editorLineNumber.activeForeground#e9e4dc
  • editorLineNumber.foreground#898c92
  • editorLink.activeForeground#f14f43
  • editorOverviewRuler.addedForeground#008b1d
  • editorOverviewRuler.bracketMatchForeground#f14f4399
  • editorOverviewRuler.deletedForeground#f51d31
  • editorOverviewRuler.errorForeground#f51d31
  • editorOverviewRuler.findMatchForeground#f14f4380
  • editorOverviewRuler.infoForeground#0079bf
  • editorOverviewRuler.modifiedForeground#0079bf
  • editorOverviewRuler.warningForeground#de8900
  • editorRuler.foreground#2b2e3280
  • editorStickyScroll.background#0e1217
  • editorStickyScrollHover.background#e9e4dc0a
  • editorSuggestWidget.background#2a2e34
  • editorSuggestWidget.border#2b2e32
  • editorSuggestWidget.focusHighlightForeground#f14f43
  • editorSuggestWidget.foreground#e9e4dc
  • editorSuggestWidget.highlightForeground#f14f43
  • editorSuggestWidget.selectedBackground#f14f4326
  • editorSuggestWidget.selectedForeground#e9e4dc
  • editorUnicodeHighlight.border#de8900
  • editorUnnecessaryCode.border#00000000
  • editorUnnecessaryCode.opacity#00000088
  • editorWarning.foreground#de8900
  • editorWhitespace.foreground#777a8040
  • editorWidget.background#2a2e34
  • editorWidget.border#2b2e32
  • errorForeground#f51d31
  • extensionButton.prominentBackground#f14f43
  • extensionButton.prominentForeground#040609
  • extensionButton.prominentHoverBackground#fc594c
  • focusBorder#f14f43
  • foreground#e9e4dc
  • git.blame.editorDecorationForeground#777a80
  • gitDecoration.addedResourceForeground#008b1d
  • gitDecoration.conflictingResourceForeground#de8900
  • gitDecoration.deletedResourceForeground#f51d31
  • gitDecoration.ignoredResourceForeground#777a80
  • gitDecoration.modifiedResourceForeground#0079bf
  • gitDecoration.renamedResourceForeground#4ea4ca
  • gitDecoration.stageDeletedResourceForeground#dc7095
  • gitDecoration.stageModifiedResourceForeground#f89800
  • gitDecoration.untrackedResourceForeground#007c01
  • inlineChat.background#2a2e34
  • inlineChat.border#2b2e32
  • inlineChatInput.border#2b2e32
  • inlineChatInput.focusBorder#f14f43
  • input.background#0e1217
  • input.border#2b2e32
  • input.foreground#e9e4dc
  • input.placeholderForeground#777a80
  • inputValidation.errorBackground#f51d3126
  • inputValidation.errorBorder#f51d31
  • inputValidation.infoBackground#0079bf26
  • inputValidation.infoBorder#0079bf
  • inputValidation.warningBackground#de890026
  • inputValidation.warningBorder#de8900
  • keybindingLabel.background#e9e4dc0f
  • keybindingLabel.border#e9e4dc1f
  • keybindingLabel.bottomBorder#e9e4dc2e
  • keybindingLabel.foreground#e9e4dc
  • list.activeSelectionBackground#f14f4333
  • list.activeSelectionForeground#e9e4dc
  • list.errorForeground#f51d31
  • list.focusOutline#f14f43
  • list.highlightForeground#f14f43
  • list.hoverBackground#f14f430f
  • list.inactiveSelectionBackground#f14f431a
  • list.warningForeground#de8900
  • menu.background#2a2e34
  • menu.border#2b2e32
  • menu.foreground#e9e4dc
  • menu.selectionBackground#f14f4326
  • menu.selectionForeground#e9e4dc
  • menu.separatorBackground#2b2e32
  • merge.currentHeaderBackground#008b1d40
  • merge.incomingHeaderBackground#0079bf40
  • minimap.background#0e1217
  • minimap.errorHighlight#f51d3199
  • minimap.findMatchHighlight#de890080
  • minimap.selectionHighlight#f14f434d
  • minimap.warningHighlight#de890099
  • minimapGutter.addedBackground#008b1d
  • minimapGutter.deletedBackground#f51d31
  • minimapGutter.modifiedBackground#0079bf
  • minimapSlider.activeBackground#777a8059
  • minimapSlider.background#777a8026
  • minimapSlider.hoverBackground#777a8040
  • notebook.cellBorderColor#2b2e32
  • notebook.cellEditorBackground#2a2e34
  • notebook.editorBackground#0e1217
  • notebook.focusedCellBorder#f14f43
  • notebook.focusedEditorBorder#f14f43
  • notebook.inactiveFocusedCellBorder#2b2e32
  • notebook.outputContainerBackgroundColor#777a800a
  • notebook.selectedCellBackground#f14f430f
  • notebook.selectedCellBorder#f14f43
  • notebook.symbolHighlightBackground#f8980026
  • notifications.background#2a2e34
  • notifications.border#2b2e32
  • notifications.foreground#e9e4dc
  • panel.background#2a2e34
  • panel.border#2b2e32
  • panelTitle.activeBorder#f14f43
  • panelTitle.activeForeground#e9e4dc
  • panelTitle.inactiveForeground#777a80
  • peekView.border#f14f43
  • peekViewEditor.background#2a2e34
  • peekViewEditor.matchHighlightBackground#de890040
  • peekViewResult.background#25292f
  • peekViewResult.fileForeground#e9e4dc
  • peekViewResult.lineForeground#777a80
  • peekViewResult.matchHighlightBackground#de890033
  • peekViewResult.selectionForeground#e9e4dc
  • peekViewTitleLabel.foreground#f14f43
  • pickerGroup.border#2b2e32
  • pickerGroup.foreground#f14f43
  • progressBar.background#f14f43
  • quickInput.background#2a2e34
  • quickInput.border#2b2e32
  • quickInput.foreground#e9e4dc
  • sash.hoverBorder#f14f43
  • scmGraph.foreground1#f14f43
  • scmGraph.foreground2#0079bf
  • scmGraph.foreground3#008b1d
  • scmGraph.foreground4#de8900
  • scmGraph.foreground5#f51d31
  • scrollbar.shadow#e9e4dc14
  • scrollbarSlider.activeBackground#777a8080
  • scrollbarSlider.background#777a8033
  • scrollbarSlider.hoverBackground#777a8059
  • searchEditor.findMatchBackground#de890033
  • searchEditor.findMatchBorder#de890080
  • settings.checkboxBackground#2a2e34
  • settings.checkboxBorder#2b2e32
  • settings.checkboxForeground#f14f43
  • settings.dropdownBackground#2a2e34
  • settings.dropdownBorder#2b2e32
  • settings.dropdownForeground#e9e4dc
  • settings.focusedRowBackground#f14f430f
  • settings.headerForeground#e9e4dc
  • settings.modifiedItemIndicator#f14f43
  • settings.numberInputBackground#2a2e34
  • settings.numberInputBorder#2b2e32
  • settings.numberInputForeground#e9e4dc
  • settings.rowHoverBackground#e9e4dc08
  • settings.textInputBackground#2a2e34
  • settings.textInputBorder#2b2e32
  • settings.textInputForeground#e9e4dc
  • sideBar.background#25292f
  • sideBar.border#1f2227
  • sideBar.foreground#d9d4cc
  • sideBarTitle.foreground#d9d4cc
  • statusBar.background#20242a
  • statusBar.border#2b2e32
  • statusBar.debuggingBackground#f14f43
  • statusBar.debuggingForeground#040609
  • statusBar.foreground#c8c4bc
  • statusBar.noFolderBackground#20242a
  • statusBarItem.errorBackground#f51d31
  • statusBarItem.errorForeground#040609
  • statusBarItem.prominentBackground#f14f43
  • statusBarItem.prominentForeground#040609
  • statusBarItem.remoteBackground#f14f43
  • statusBarItem.remoteForeground#040609
  • statusBarItem.remoteHoverBackground#fc594c
  • statusBarItem.warningBackground#de8900
  • statusBarItem.warningForeground#040609
  • tab.activeBackground#2a2e34
  • tab.activeBorderTop#f14f43
  • tab.activeForeground#e9e4dc
  • tab.border#00000000
  • tab.inactiveBackground#0e1217
  • tab.inactiveForeground#86898f
  • tab.lastPinnedBorder#2b2e32
  • tab.modifiedBorder#f14f43
  • tab.unfocusedModifiedBorder#f14f4380
  • terminal.ansiBlack#0e1217
  • terminal.ansiBlue#0079bf
  • terminal.ansiBrightBlack#777a80
  • terminal.ansiBrightBlue#3698e0
  • terminal.ansiBrightCyan#4ad0ba
  • terminal.ansiBrightGreen#38ab41
  • terminal.ansiBrightMagenta#f990c4
  • terminal.ansiBrightRed#ff4e51
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#ffa93d
  • terminal.ansiCyan#52b9a7
  • terminal.ansiGreen#008b1d
  • terminal.ansiMagenta#dd84af
  • terminal.ansiRed#ff3841
  • terminal.ansiWhite#e9e4dc
  • terminal.ansiYellow#de8900
  • terminal.background#0e1217
  • terminal.findMatchBackground#de89004d
  • terminal.findMatchBorder#de890080
  • terminal.findMatchHighlightBackground#de890026
  • terminal.foreground#e9e4dc
  • terminal.selectionBackground#f14f4333
  • terminalCommandDecoration.defaultBackground#777a80
  • terminalCommandDecoration.errorBackground#f51d31
  • terminalCommandDecoration.successBackground#008b1d
  • terminalCursor.background#0e1217
  • terminalCursor.foreground#f14f43
  • testing.coveredBackground#008b1d14
  • testing.coveredBorder#008b1d4d
  • testing.iconErrored#f51d31
  • testing.iconFailed#f51d31
  • testing.iconPassed#008b1d
  • testing.iconSkipped#de8900
  • testing.runAction#008b1d
  • testing.uncoveredBackground#f51d3114
  • testing.uncoveredBorder#f51d314d
  • textBlockQuote.background#777a800f
  • textBlockQuote.border#f14f4366
  • textCodeBlock.background#777a8014
  • textLink.activeForeground#ff6052
  • textLink.foreground#f14f43
  • titleBar.activeBackground#25292f
  • titleBar.activeForeground#e9e4dc
  • titleBar.border#2b2e32
  • titleBar.inactiveBackground#25292f
  • titleBar.inactiveForeground#777a80
  • toolbar.hoverBackground#e9e4dc14
  • tree.indentGuidesStroke#2b2e32b3
  • tree.tableColumnsBorder#2b2e3280
  • welcomePage.progress.foreground#f14f43
  • welcomePage.tileBackground#2a2e34
  • welcomePage.tileBorder#2b2e32

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
keyword, storage.type, storage.modifier#ff6759
keyword.control, keyword.control.flow#ff6759
string, string.quoted, string.template#81ce70
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#ff6759
entity.name.function, support.function, meta.function-call#00cdb4
entity.name.type, entity.name.class, support.type, support.class, entity.other.inherited-class#eb98cf
support.type.primitive, support.type.builtin, support.type.builtin.go#eb98cf
support.function.builtin, support.function.builtin.go, support.function.builtin.python#00cdb4italic
variable, variable.parameter, variable.other#d5d0ca
constant.numeric, constant.language, variable.other.constant, constant.other#f89800
comment, comment.line, comment.block, punctuation.definition.comment#887e78italic
comment.block.documentation, comment.line.documentation, comment.block.documentation.phpdoc, string.quoted.docstring.multi.python#8d986fitalic
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#a49d97
entity.name.tag#ff6759
support.class.component.tsx, support.class.component.jsx#eb98cf
entity.other.attribute-name#d6c665
support.type.property-name.css, support.type.property-name.scss#00cdb4
variable.css, variable.other.custom-property.css, support.type.custom-property.css#f89800
support.constant.property-value.css, support.constant.color.css#f89800
keyword.other.unit.css#f89800
string.regexp, constant.character.escape#dc7095
meta.decorator, punctuation.decorator, meta.annotation#ba7f6a
meta.preprocessor, keyword.control.directive, keyword.control.directive.include, keyword.control.directive.define, punctuation.definition.directive#dc7095
entity.name.function.macro.rust, support.macro.rust#ff6759bold
meta.attribute.rust, meta.attribute.cpp#ba7f6a
entity.name.namespace, entity.name.module, entity.name.import#4ea4ca
variable.other.property, variable.other.object.property, meta.object-literal.key#d6c665
support.class.console, support.class.error, support.class.promise#eb98cf
source.go entity.name.function#00cdb4
source.go storage.type#eb98cf
entity.name.type.tsx, entity.name.type.ts#eb98cf
entity.name.lifetime.rust#ba7f6a
storage.type.rust#ff6759
keyword.other.DML.sql, keyword.other.DDL.sql#ff6759
constant.other.table-name.sql#eb98cf
constant.other.database-name.sql#4ea4ca
support.type.property-name.json#d6c665
entity.name.tag.yaml#d6c665
entity.name.other.anchor.yaml, variable.other.alias.yaml#f89800
heading.1.markdown, heading.2.markdown, heading.3.markdown, markup.heading#ff6759bold
markup.boldbold
markup.italicitalic
markup.inline.raw, markup.fenced_code.block#81ce70
markup.underline.link#00cdb4
markup.list, punctuation.definition.list#ff6759
markup.quote#81ce70italic
markup.strikethroughstrikethrough
variable.language.this, variable.language.self, variable.language.super#ff6759italic
entity.name.type.parameter, meta.type.parameters#eb98cfitalic
keyword.control.import, keyword.control.export, keyword.control.from#ff6759
entity.name.type.interface#eb98cfitalic
variable.other.normal.shell, variable.other.special.shell, variable.other.positional.shell#d5d0ca
support.function.builtin.shell#00cdb4
entity.other.attribute-name.table.toml, support.type.property-name.table.toml#ff6759bold
support.type.property-name.toml#d6c665
punctuation.definition.string.begin, punctuation.definition.string.end#81ce70
variable.other.member.go, variable.other.field.go#d6c665
entity.name.function.member.go#00cdb4
entity.name.type.trait.rust#eb98cfitalic
keyword.other.where.rust#ff6759
meta.fstring.python source.python.embedded, punctuation.definition.expression.python#ff6759
meta.function.parameters.python support.type.python#eb98cf
keyword.query.linq.cs, keyword.other.linq.cs#ff6759
meta.attribute.cs#ba7f6a
storage.type.annotation.java, punctuation.definition.annotation.java#ba7f6a
keyword.operator.spread.tsx, keyword.operator.spread.jsx#a49d97
punctuation.definition.tag.begin.tsx, punctuation.definition.tag.end.tsx, punctuation.definition.tag.begin.jsx, punctuation.definition.tag.end.jsx#ff6759
entity.other.attribute-name.pseudo-element.css, entity.other.attribute-name.pseudo-class.css#dc7095
variable.scss#f89800
entity.name.type.template.cpp#eb98cfitalic
punctuation.definition.variable.php#d5d0ca
entity.name.type.namespace.php, support.other.namespace.php#4ea4ca
markup.inserted#81ce70
markup.deleted#dc7095
markup.changed#f89800
meta.diff.header, meta.diff.index#eb98cfbold
invalid.illegal#dc7095underline
invalid.deprecatedstrikethrough
keyword.operator.quantifier.regexp, keyword.operator.negation.regexp#a49d97bold
punctuation.definition.group.regexp, keyword.other.back-reference.regexp, punctuation.definition.character-class.regexp#ff6759
entity.name.function.decorator.python#ba7f6a
Dilmune Theme by Dilmune - VS Code Theme