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#c83b2c
  • activityBar.background#b0a390
  • activityBar.foreground#211914
  • activityBar.inactiveForeground#49403b
  • activityBarBadge.background#c83b2c
  • activityBarBadge.foreground#f7f5f1
  • badge.background#c83b2c
  • badge.foreground#f7f5f1
  • banner.background#c83b2c26
  • banner.foreground#211914
  • breadcrumb.activeSelectionForeground#211914
  • breadcrumb.background#cec2b0
  • breadcrumb.focusForeground#211914
  • breadcrumb.foreground#413833
  • button.background#c83b2c
  • button.foreground#f7f5f1
  • button.hoverBackground#bd3022
  • button.secondaryBackground#c1b6a4
  • button.secondaryForeground#211914
  • charts.blue#004784
  • charts.foreground#211914
  • charts.green#005600
  • charts.lines#b7ac9d
  • charts.orange#c83b2c
  • charts.purple#966ab5
  • charts.red#c9000c
  • charts.yellow#904a00
  • chat.avatarBackground#c83b2c
  • chat.avatarForeground#f7f5f1
  • chat.requestBackground#c83b2c0d
  • chat.requestBorder#b7ac9d
  • chat.slashCommandBackground#c83b2c1f
  • chat.slashCommandForeground#c83b2c
  • commandCenter.activeBackground#c83b2c14
  • commandCenter.activeForeground#211914
  • commandCenter.background#cec2b0
  • commandCenter.border#b7ac9d
  • commandCenter.foreground#49403b
  • debugConsole.errorForeground#c9000c
  • debugConsole.infoForeground#004784
  • debugConsole.sourceForeground#49403b
  • debugConsole.warningForeground#904a00
  • debugIcon.pauseForeground#904a00
  • debugIcon.startForeground#005600
  • debugIcon.stopForeground#c9000c
  • debugTokenExpression.boolean#883900
  • debugTokenExpression.error#c9000c
  • debugTokenExpression.name#c83b2c
  • debugTokenExpression.number#883900
  • debugTokenExpression.string#004700
  • debugTokenExpression.type#692256
  • debugTokenExpression.value#211914
  • debugToolBar.background#c1b6a4
  • debugToolBar.foreground#211914
  • diffEditor.border#b7ac9d
  • diffEditor.diagonalFill#49403b14
  • diffEditor.insertedLineBackground#00560014
  • diffEditor.insertedTextBackground#0056001f
  • diffEditor.removedLineBackground#c9000c14
  • diffEditor.removedTextBackground#c9000c1f
  • diffEditorGutter.insertedLineBackground#0056001f
  • diffEditorGutter.removedLineBackground#c9000c1f
  • diffEditorOverview.insertedForeground#005600
  • diffEditorOverview.removedForeground#c9000c
  • dropdown.background#c1b6a4
  • dropdown.border#b7ac9d
  • dropdown.foreground#211914
  • editor.background#cec2b0
  • editor.findMatchBackground#904a004d
  • editor.findMatchHighlightBackground#904a0026
  • editor.focusedStackFrameHighlightBackground#0056001a
  • editor.foldBackground#21191408
  • editor.foldPlaceholderForeground#49403b
  • editor.foreground#211914
  • editor.inactiveSelectionBackground#c83b2c17
  • editor.lineHighlightBackground#21191414
  • editor.linkedEditingBackground#c83b2c1a
  • editor.rangeHighlightBackground#c83b2c0f
  • editor.selectionBackground#c83b2c26
  • editor.selectionHighlightBackground#c83b2c14
  • editor.stackFrameHighlightBackground#904a001a
  • editor.wordHighlightBackground#c83b2c1a
  • editor.wordHighlightStrongBackground#c83b2c40
  • editor.wordHighlightStrongBorder#c83b2c66
  • editorBracketHighlight.foreground1#a43c33
  • editorBracketHighlight.foreground2#005e4f
  • editorBracketHighlight.foreground3#874e00
  • editorBracketHighlight.foreground4#2c5a21
  • editorBracketHighlight.foreground5#7c4069
  • editorBracketHighlight.foreground6#38527f
  • editorBracketHighlight.unexpectedBracket.foreground#c9000c
  • editorBracketMatch.background#c83b2c26
  • editorBracketMatch.border#c83b2c80
  • 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#49403b
  • editorCursor.foreground#c83b2c
  • editorError.foreground#c9000c
  • editorGhostText.background#00000000
  • editorGhostText.border#00000000
  • editorGhostText.foreground#49403b99
  • editorGroup.border#b7ac9d
  • editorGroupHeader.tabsBackground#cec2b0
  • editorGutter.addedBackground#005600
  • editorGutter.background#cec2b0
  • editorGutter.commentGlyphForeground#49403b
  • editorGutter.commentUnresolvedGlyphForeground#904a00
  • editorGutter.deletedBackground#c9000c
  • editorGutter.foldingControlForeground#49403b
  • editorGutter.modifiedBackground#004784
  • editorHoverWidget.background#c1b6a4
  • editorHoverWidget.border#b7ac9d
  • editorHoverWidget.foreground#211914
  • editorIndentGuide.activeBackground#b7ac9d
  • editorIndentGuide.background#b7ac9d80
  • editorInfo.foreground#004784
  • editorInlayHint.background#49403b1a
  • editorInlayHint.foreground#49403b
  • editorInlayHint.parameterForeground#3c332e
  • editorInlayHint.typeForeground#3c332e
  • editorLightBulb.foreground#904a00
  • editorLightBulbAutoFix.foreground#c83b2c
  • editorLineNumber.activeForeground#211914
  • editorLineNumber.foreground#49403b
  • editorLink.activeForeground#c83b2c
  • editorOverviewRuler.addedForeground#005600
  • editorOverviewRuler.bracketMatchForeground#c83b2c99
  • editorOverviewRuler.deletedForeground#c9000c
  • editorOverviewRuler.errorForeground#c9000c
  • editorOverviewRuler.findMatchForeground#c83b2c80
  • editorOverviewRuler.infoForeground#004784
  • editorOverviewRuler.modifiedForeground#004784
  • editorOverviewRuler.warningForeground#904a00
  • editorRuler.foreground#b7ac9d80
  • editorStickyScroll.background#cec2b0
  • editorStickyScrollHover.background#2119140a
  • editorSuggestWidget.background#c1b6a4
  • editorSuggestWidget.border#b7ac9d
  • editorSuggestWidget.focusHighlightForeground#c83b2c
  • editorSuggestWidget.foreground#211914
  • editorSuggestWidget.highlightForeground#c83b2c
  • editorSuggestWidget.selectedBackground#c83b2c26
  • editorSuggestWidget.selectedForeground#211914
  • editorUnicodeHighlight.border#904a00
  • editorUnnecessaryCode.border#00000000
  • editorUnnecessaryCode.opacity#00000088
  • editorWarning.foreground#904a00
  • editorWhitespace.foreground#49403b40
  • editorWidget.background#c1b6a4
  • editorWidget.border#b7ac9d
  • errorForeground#c9000c
  • extensionButton.prominentBackground#c83b2c
  • extensionButton.prominentForeground#f7f5f1
  • extensionButton.prominentHoverBackground#bd3022
  • focusBorder#c83b2c
  • foreground#211914
  • git.blame.editorDecorationForeground#49403b
  • gitDecoration.addedResourceForeground#005600
  • gitDecoration.conflictingResourceForeground#904a00
  • gitDecoration.deletedResourceForeground#c9000c
  • gitDecoration.ignoredResourceForeground#49403b
  • gitDecoration.modifiedResourceForeground#004784
  • gitDecoration.renamedResourceForeground#002f57
  • gitDecoration.stageDeletedResourceForeground#6b0035
  • gitDecoration.stageModifiedResourceForeground#883900
  • gitDecoration.untrackedResourceForeground#186415
  • inlineChat.background#c1b6a4
  • inlineChat.border#b7ac9d
  • inlineChatInput.border#b7ac9d
  • inlineChatInput.focusBorder#c83b2c
  • input.background#cec2b0
  • input.border#b7ac9d
  • input.foreground#211914
  • input.placeholderForeground#49403b
  • inputValidation.errorBackground#c9000c26
  • inputValidation.errorBorder#c9000c
  • inputValidation.infoBackground#00478426
  • inputValidation.infoBorder#004784
  • inputValidation.warningBackground#904a0026
  • inputValidation.warningBorder#904a00
  • keybindingLabel.background#2119140f
  • keybindingLabel.border#2119141f
  • keybindingLabel.bottomBorder#2119142e
  • keybindingLabel.foreground#211914
  • list.activeSelectionBackground#c83b2c33
  • list.activeSelectionForeground#211914
  • list.errorForeground#c9000c
  • list.focusOutline#c83b2c
  • list.highlightForeground#c83b2c
  • list.hoverBackground#c83b2c0f
  • list.inactiveSelectionBackground#c83b2c1a
  • list.warningForeground#904a00
  • menu.background#c1b6a4
  • menu.border#b7ac9d
  • menu.foreground#211914
  • menu.selectionBackground#c83b2c26
  • menu.selectionForeground#211914
  • menu.separatorBackground#b7ac9d
  • merge.currentHeaderBackground#00560040
  • merge.incomingHeaderBackground#00478440
  • minimap.background#cec2b0
  • minimap.errorHighlight#c9000c99
  • minimap.findMatchHighlight#904a0080
  • minimap.selectionHighlight#c83b2c4d
  • minimap.warningHighlight#904a0099
  • minimapGutter.addedBackground#005600
  • minimapGutter.deletedBackground#c9000c
  • minimapGutter.modifiedBackground#004784
  • minimapSlider.activeBackground#49403b59
  • minimapSlider.background#49403b26
  • minimapSlider.hoverBackground#49403b40
  • notebook.cellBorderColor#b7ac9d
  • notebook.cellEditorBackground#c1b6a4
  • notebook.editorBackground#cec2b0
  • notebook.focusedCellBorder#c83b2c
  • notebook.focusedEditorBorder#c83b2c
  • notebook.inactiveFocusedCellBorder#b7ac9d
  • notebook.outputContainerBackgroundColor#49403b0a
  • notebook.selectedCellBackground#c83b2c0f
  • notebook.selectedCellBorder#c83b2c
  • notebook.symbolHighlightBackground#88390026
  • notifications.background#c1b6a4
  • notifications.border#b7ac9d
  • notifications.foreground#211914
  • panel.background#c1b6a4
  • panel.border#b7ac9d
  • panelTitle.activeBorder#c83b2c
  • panelTitle.activeForeground#211914
  • panelTitle.inactiveForeground#49403b
  • peekView.border#c83b2c
  • peekViewEditor.background#c1b6a4
  • peekViewEditor.matchHighlightBackground#904a0040
  • peekViewResult.background#b6a996
  • peekViewResult.fileForeground#211914
  • peekViewResult.lineForeground#49403b
  • peekViewResult.matchHighlightBackground#904a0033
  • peekViewResult.selectionForeground#211914
  • peekViewTitleLabel.foreground#c83b2c
  • pickerGroup.border#b7ac9d
  • pickerGroup.foreground#c83b2c
  • progressBar.background#c83b2c
  • quickInput.background#c1b6a4
  • quickInput.border#b7ac9d
  • quickInput.foreground#211914
  • sash.hoverBorder#c83b2c
  • scmGraph.foreground1#c83b2c
  • scmGraph.foreground2#004784
  • scmGraph.foreground3#005600
  • scmGraph.foreground4#904a00
  • scmGraph.foreground5#c9000c
  • scrollbar.shadow#21191414
  • scrollbarSlider.activeBackground#49403b80
  • scrollbarSlider.background#49403b33
  • scrollbarSlider.hoverBackground#49403b59
  • searchEditor.findMatchBackground#904a0033
  • searchEditor.findMatchBorder#904a0080
  • settings.checkboxBackground#c1b6a4
  • settings.checkboxBorder#b7ac9d
  • settings.checkboxForeground#c83b2c
  • settings.dropdownBackground#c1b6a4
  • settings.dropdownBorder#b7ac9d
  • settings.dropdownForeground#211914
  • settings.focusedRowBackground#c83b2c0f
  • settings.headerForeground#211914
  • settings.modifiedItemIndicator#c83b2c
  • settings.numberInputBackground#c1b6a4
  • settings.numberInputBorder#b7ac9d
  • settings.numberInputForeground#211914
  • settings.rowHoverBackground#21191408
  • settings.textInputBackground#c1b6a4
  • settings.textInputBorder#b7ac9d
  • settings.textInputForeground#211914
  • sideBar.background#b6a996
  • sideBar.border#9b9082
  • sideBar.foreground#352c27
  • sideBarTitle.foreground#352c27
  • statusBar.background#b0a390
  • statusBar.border#b7ac9d
  • statusBar.debuggingBackground#c83b2c
  • statusBar.debuggingForeground#f7f5f1
  • statusBar.foreground#3a312c
  • statusBar.noFolderBackground#b0a390
  • statusBarItem.errorBackground#c9000c
  • statusBarItem.errorForeground#f7f5f1
  • statusBarItem.prominentBackground#c83b2c
  • statusBarItem.prominentForeground#f7f5f1
  • statusBarItem.remoteBackground#c83b2c
  • statusBarItem.remoteForeground#f7f5f1
  • statusBarItem.remoteHoverBackground#bd3022
  • statusBarItem.warningBackground#904a00
  • statusBarItem.warningForeground#f7f5f1
  • tab.activeBackground#c1b6a4
  • tab.activeBorderTop#c83b2c
  • tab.activeForeground#211914
  • tab.border#00000000
  • tab.inactiveBackground#cec2b0
  • tab.inactiveForeground#3c332e
  • tab.lastPinnedBorder#b7ac9d
  • tab.modifiedBorder#c83b2c
  • tab.unfocusedModifiedBorder#c83b2c80
  • terminal.ansiBlack#211914
  • terminal.ansiBlue#004784
  • terminal.ansiBrightBlack#49403b
  • terminal.ansiBrightBlue#002b65
  • terminal.ansiBrightCyan#007260
  • terminal.ansiBrightGreen#003a00
  • terminal.ansiBrightMagenta#a14174
  • terminal.ansiBrightRed#a50000
  • terminal.ansiBrightWhite#211914
  • terminal.ansiBrightYellow#712d00
  • terminal.ansiCyan#005e4f
  • terminal.ansiGreen#005600
  • terminal.ansiMagenta#9a4873
  • terminal.ansiRed#c9000c
  • terminal.ansiWhite#cec2b0
  • terminal.ansiYellow#904a00
  • terminal.background#cec2b0
  • terminal.findMatchBackground#904a004d
  • terminal.findMatchBorder#904a0080
  • terminal.findMatchHighlightBackground#904a0026
  • terminal.foreground#211914
  • terminal.selectionBackground#c83b2c26
  • terminalCommandDecoration.defaultBackground#49403b
  • terminalCommandDecoration.errorBackground#c9000c
  • terminalCommandDecoration.successBackground#005600
  • terminalCursor.background#cec2b0
  • terminalCursor.foreground#c83b2c
  • testing.coveredBackground#00560014
  • testing.coveredBorder#0056004d
  • testing.iconErrored#c9000c
  • testing.iconFailed#c9000c
  • testing.iconPassed#005600
  • testing.iconSkipped#904a00
  • testing.runAction#005600
  • testing.uncoveredBackground#c9000c14
  • testing.uncoveredBorder#c9000c4d
  • textBlockQuote.background#49403b0f
  • textBlockQuote.border#c83b2c66
  • textCodeBlock.background#49403b14
  • textLink.activeForeground#da4c3c
  • textLink.foreground#c83b2c
  • titleBar.activeBackground#b6a996
  • titleBar.activeForeground#211914
  • titleBar.border#b7ac9d
  • titleBar.inactiveBackground#b6a996
  • titleBar.inactiveForeground#49403b
  • toolbar.hoverBackground#21191414
  • tree.indentGuidesStroke#b7ac9db3
  • tree.tableColumnsBorder#b7ac9d80
  • welcomePage.progress.foreground#c83b2c
  • welcomePage.tileBackground#c1b6a4
  • welcomePage.tileBorder#b7ac9d

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
keyword, storage.type, storage.modifier#960000
keyword.control, keyword.control.flow#960000
string, string.quoted, string.template#004700
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#960000
entity.name.function, support.function, meta.function-call#003b2c
entity.name.type, entity.name.class, support.type, support.class, entity.other.inherited-class#692256
support.type.primitive, support.type.builtin, support.type.builtin.go#692256
support.function.builtin, support.function.builtin.go, support.function.builtin.python#003b2citalic
variable, variable.parameter, variable.other#181b1f
constant.numeric, constant.language, variable.other.constant, constant.other#883900
comment, comment.line, comment.block, punctuation.definition.comment#544b45italic
comment.block.documentation, comment.line.documentation, comment.block.documentation.phpdoc, string.quoted.docstring.multi.python#39421bitalic
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#423c37
entity.name.tag#960000
support.class.component.tsx, support.class.component.jsx#692256
entity.other.attribute-name#2b1600
support.type.property-name.css, support.type.property-name.scss#003b2c
variable.css, variable.other.custom-property.css, support.type.custom-property.css#883900
support.constant.property-value.css, support.constant.color.css#883900
keyword.other.unit.css#883900
string.regexp, constant.character.escape#6b0035
meta.decorator, punctuation.decorator, meta.annotation#370000
meta.preprocessor, keyword.control.directive, keyword.control.directive.include, keyword.control.directive.define, punctuation.definition.directive#6b0035
entity.name.function.macro.rust, support.macro.rust#960000bold
meta.attribute.rust, meta.attribute.cpp#370000
entity.name.namespace, entity.name.module, entity.name.import#002f57
variable.other.property, variable.other.object.property, meta.object-literal.key#2b1600
support.class.console, support.class.error, support.class.promise#692256
source.go entity.name.function#003b2c
source.go storage.type#692256
entity.name.type.tsx, entity.name.type.ts#692256
entity.name.lifetime.rust#370000
storage.type.rust#960000
keyword.other.DML.sql, keyword.other.DDL.sql#960000
constant.other.table-name.sql#692256
constant.other.database-name.sql#002f57
support.type.property-name.json#2b1600
entity.name.tag.yaml#2b1600
entity.name.other.anchor.yaml, variable.other.alias.yaml#883900
heading.1.markdown, heading.2.markdown, heading.3.markdown, markup.heading#960000bold
markup.boldbold
markup.italicitalic
markup.inline.raw, markup.fenced_code.block#004700
markup.underline.link#003b2c
markup.list, punctuation.definition.list#960000
markup.quote#004700italic
markup.strikethroughstrikethrough
variable.language.this, variable.language.self, variable.language.super#960000italic
entity.name.type.parameter, meta.type.parameters#692256italic
keyword.control.import, keyword.control.export, keyword.control.from#960000
entity.name.type.interface#692256italic
variable.other.normal.shell, variable.other.special.shell, variable.other.positional.shell#181b1f
support.function.builtin.shell#003b2c
entity.other.attribute-name.table.toml, support.type.property-name.table.toml#960000bold
support.type.property-name.toml#2b1600
punctuation.definition.string.begin, punctuation.definition.string.end#004700
variable.other.member.go, variable.other.field.go#2b1600
entity.name.function.member.go#003b2c
entity.name.type.trait.rust#692256italic
keyword.other.where.rust#960000
meta.fstring.python source.python.embedded, punctuation.definition.expression.python#960000
meta.function.parameters.python support.type.python#692256
keyword.query.linq.cs, keyword.other.linq.cs#960000
meta.attribute.cs#370000
storage.type.annotation.java, punctuation.definition.annotation.java#370000
keyword.operator.spread.tsx, keyword.operator.spread.jsx#423c37
punctuation.definition.tag.begin.tsx, punctuation.definition.tag.end.tsx, punctuation.definition.tag.begin.jsx, punctuation.definition.tag.end.jsx#960000
entity.other.attribute-name.pseudo-element.css, entity.other.attribute-name.pseudo-class.css#6b0035
variable.scss#883900
entity.name.type.template.cpp#692256italic
punctuation.definition.variable.php#181b1f
entity.name.type.namespace.php, support.other.namespace.php#002f57
markup.inserted#004700
markup.deleted#6b0035
markup.changed#883900
meta.diff.header, meta.diff.index#692256bold
invalid.illegal#6b0035underline
invalid.deprecatedstrikethrough
keyword.operator.quantifier.regexp, keyword.operator.negation.regexp#423c37bold
punctuation.definition.group.regexp, keyword.other.back-reference.regexp, punctuation.definition.character-class.regexp#960000
entity.name.function.decorator.python#370000
Dilmune Theme by Dilmune - VS Code Theme