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#E26A3B
  • activityBar.background#181714
  • activityBar.border#3F4346
  • activityBar.foreground#E6DED3
  • activityBar.inactiveForeground#9BABB9
  • activityBarBadge.background#E26A3B
  • activityBarBadge.foreground#25231F
  • badge.background#E26A3B
  • badge.foreground#25231F
  • breadcrumb.activeSelectionForeground#E6DED3
  • breadcrumb.background#25231F
  • breadcrumb.focusForeground#E6DED3
  • breadcrumb.foreground#9BABB9
  • breadcrumbPicker.background#181714
  • button.background#E26A3B
  • button.foreground#25231F
  • button.hoverBackground#E4C397
  • button.secondaryBackground#3F4346
  • button.secondaryForeground#E6DED3
  • button.secondaryHoverBackground#9BABB9
  • charts.blue#7A8FA2
  • charts.foreground#E6DED3
  • charts.green#7FAF6A
  • charts.lines#3F4346
  • charts.orange#E26A3B
  • charts.purple#8E7BA0
  • charts.red#D25046
  • charts.yellow#D4A05A
  • debugIcon.breakpointDisabledForeground#9BABB9
  • debugIcon.breakpointForeground#D25046
  • debugIcon.pauseForeground#E26A3B
  • debugIcon.restartForeground#7FAF6A
  • debugIcon.startForeground#7FAF6A
  • debugIcon.stepIntoForeground#7A8FA2
  • debugIcon.stepOutForeground#7A8FA2
  • debugIcon.stepOverForeground#7A8FA2
  • debugIcon.stopForeground#D25046
  • debugToolBar.background#181714
  • descriptionForeground#9BABB9
  • diffEditor.diagonalFill#3F4346
  • diffEditor.insertedLineBackground#7FAF6A15
  • diffEditor.insertedTextBackground#7FAF6A20
  • diffEditor.removedLineBackground#D2504615
  • diffEditor.removedTextBackground#D2504620
  • diffEditor.unchangedCodeBackground#32333366
  • diffEditorGutter.insertedLineBackground#7FAF6A25
  • diffEditorGutter.removedLineBackground#D2504625
  • diffEditorOverview.insertedForeground#7FAF6A40
  • diffEditorOverview.removedForeground#D2504640
  • disabledForeground#9BABB9
  • dropdown.background#181714
  • dropdown.border#3F4346
  • dropdown.foreground#E6DED3
  • dropdown.listBackground#181714
  • editor.background#25231F
  • editor.findMatchBackground#E26A3B40
  • editor.findMatchHighlightBackground#E26A3B20
  • editor.foreground#E6DED3
  • editor.inactiveSelectionBackground#3F434680
  • editor.lineHighlightBackground#412E23
  • editor.lineHighlightBorder#412E2300
  • editor.selectionBackground#51422E
  • editor.selectionForeground#E6DED3
  • editor.selectionHighlightBackground#3F434680
  • editor.wordHighlightBackground#3F434680
  • editor.wordHighlightStrongBackground#3F434680
  • editorBracketHighlight.foreground1#E26A3B
  • editorBracketHighlight.foreground2#7A8FA2
  • editorBracketHighlight.foreground3#8E7BA0
  • editorBracketHighlight.foreground4#8CA6A1
  • editorBracketHighlight.foreground5#7FAF6A
  • editorBracketHighlight.foreground6#D4A05A
  • editorBracketHighlight.unexpectedBracket.foreground#D25046
  • editorBracketMatch.background#3F4346
  • editorBracketMatch.border#E26A3B
  • editorBracketPairGuide.activeBackground1#E26A3B
  • editorBracketPairGuide.activeBackground2#7A8FA2
  • editorBracketPairGuide.activeBackground3#8E7BA0
  • editorBracketPairGuide.activeBackground4#8CA6A1
  • editorBracketPairGuide.activeBackground5#7FAF6A
  • editorBracketPairGuide.activeBackground6#D4A05A
  • editorCursor.foreground#E26A3B
  • editorError.foreground#D25046
  • editorGroupHeader.tabsBackground#181714
  • editorGroupHeader.tabsBorder#3F4346
  • editorGutter.addedBackground#7FAF6A
  • editorGutter.background#25231F
  • editorGutter.deletedBackground#D25046
  • editorGutter.modifiedBackground#E26A3B
  • editorHint.foreground#9BABB9
  • editorHoverWidget.background#181714
  • editorHoverWidget.border#3F4346
  • editorHoverWidget.foreground#E6DED3
  • editorIndentGuide.activeBackground1#9BABB9
  • editorIndentGuide.background1#3F4346
  • editorInfo.foreground#7A8FA2
  • editorLineNumber.activeForeground#E26A3B
  • editorLineNumber.foreground#3F4346
  • editorLink.activeForeground#A7B5C1
  • editorOverviewRuler.border#3F4346
  • editorOverviewRuler.errorForeground#D25046
  • editorOverviewRuler.infoForeground#7A8FA2
  • editorOverviewRuler.warningForeground#E26A3B
  • editorRuler.foreground#3F4346
  • editorSemanticHighlighting.enabled
  • editorSuggestWidget.background#181714
  • editorSuggestWidget.border#3F4346
  • editorSuggestWidget.foreground#E6DED3
  • editorSuggestWidget.highlightForeground#E26A3B
  • editorSuggestWidget.selectedBackground#3F4346
  • editorWarning.foreground#E26A3B
  • editorWhitespace.foreground#3F4346
  • editorWidget.background#181714
  • editorWidget.border#3F4346
  • editorWidget.foreground#E6DED3
  • errorForeground#D25046
  • extensionButton.prominentBackground#E26A3B
  • extensionButton.prominentForeground#25231F
  • extensionButton.prominentHoverBackground#E4C397
  • focusBorder#E26A3B
  • foreground#E6DED3
  • gitDecoration.addedResourceForeground#7FAF6A
  • gitDecoration.conflictingResourceForeground#D25046
  • gitDecoration.deletedResourceForeground#D25046
  • gitDecoration.ignoredResourceForeground#9BABB9
  • gitDecoration.modifiedResourceForeground#E26A3B
  • gitDecoration.renamedResourceForeground#9AB1AD
  • gitDecoration.stageDeletedResourceForeground#D25046
  • gitDecoration.stageModifiedResourceForeground#E26A3B
  • gitDecoration.untrackedResourceForeground#A1C492
  • icon.foreground#E6DED3
  • inlineChat.foreground#E6DED3
  • inlineChatDiff.inserted#7FAF6A40
  • inlineChatDiff.removed#D2504640
  • inlineChatInput.background#181714
  • input.background#181714
  • input.border#3F4346
  • input.foreground#E6DED3
  • input.placeholderForeground#9BABB9
  • inputOption.activeBackground#3F4346
  • inputOption.activeBorder#E26A3B
  • inputOption.activeForeground#E6DED3
  • inputValidation.errorBackground#D2504680
  • inputValidation.errorBorder#D25046
  • inputValidation.errorForeground#E6DED3
  • inputValidation.infoBackground#7A8FA240
  • inputValidation.infoBorder#7A8FA2
  • inputValidation.infoForeground#E6DED3
  • inputValidation.warningBackground#D4A05A
  • inputValidation.warningBorder#D4A05A
  • inputValidation.warningForeground#25231F
  • list.activeSelectionBackground#3F4346
  • list.activeSelectionForeground#E6DED3
  • list.errorForeground#D25046
  • list.focusBackground#3F4346
  • list.focusForeground#E6DED3
  • list.highlightForeground#E26A3B
  • list.hoverBackground#3F434650
  • list.hoverForeground#E6DED3
  • list.inactiveSelectionBackground#3F434680
  • list.inactiveSelectionForeground#E6DED3
  • list.warningForeground#E26A3B
  • merge.currentHeaderBackground#7FAF6A40
  • merge.incomingHeaderBackground#7A8FA240
  • minimap.background#25231F
  • minimap.errorHighlight#D25046
  • minimap.findMatchHighlight#E26A3B
  • minimap.selectionHighlight#3F4346
  • minimap.warningHighlight#E26A3B
  • minimapGutter.addedBackground#7FAF6A
  • minimapGutter.deletedBackground#D25046
  • minimapGutter.modifiedBackground#E26A3B
  • notebook.cellBorderColor#3F4346
  • notebook.cellEditorBackground#181714
  • notebook.cellStatusBarItemHoverBackground#3F4346
  • notebook.editorBackground#25231F
  • notebook.focusedCellBorder#E26A3B
  • notificationCenterHeader.background#181714
  • notificationCenterHeader.foreground#E6DED3
  • notifications.background#181714
  • notifications.border#3F4346
  • notifications.foreground#E6DED3
  • panel.background#25231F
  • panel.border#3F4346
  • panelTitle.activeBorder#E26A3B
  • panelTitle.activeForeground#E6DED3
  • panelTitle.inactiveForeground#9BABB9
  • peekView.border#E26A3B
  • peekViewEditor.background#181714
  • peekViewEditor.matchHighlightBackground#E26A3B40
  • peekViewResult.background#181714
  • peekViewResult.fileForeground#E6DED3
  • peekViewResult.lineForeground#9BABB9
  • peekViewResult.matchHighlightBackground#E26A3B40
  • peekViewResult.selectionBackground#3F4346
  • peekViewTitle.background#181714
  • peekViewTitleDescription.foreground#9BABB9
  • peekViewTitleLabel.foreground#E6DED3
  • progressBar.background#E26A3B
  • quickInput.background#181714
  • quickInput.foreground#E6DED3
  • quickInputList.focusBackground#3F4346
  • quickInputTitle.background#181714
  • scrollbar.shadow#00000050
  • scrollbarSlider.activeBackground#9BABB9
  • scrollbarSlider.background#3F434680
  • scrollbarSlider.hoverBackground#3F4346
  • settings.checkboxBackground#181714
  • settings.checkboxBorder#3F4346
  • settings.checkboxForeground#E6DED3
  • settings.dropdownBackground#181714
  • settings.dropdownBorder#3F4346
  • settings.dropdownForeground#E6DED3
  • settings.headerForeground#E6DED3
  • settings.modifiedItemIndicator#E26A3B
  • settings.numberInputBackground#181714
  • settings.numberInputBorder#3F4346
  • settings.numberInputForeground#E6DED3
  • settings.textInputBackground#181714
  • settings.textInputBorder#3F4346
  • settings.textInputForeground#E6DED3
  • sideBar.background#181714
  • sideBar.border#3F4346
  • sideBar.foreground#E6DED3
  • sideBarSectionHeader.background#181714
  • sideBarSectionHeader.border#3F4346
  • sideBarSectionHeader.foreground#E6DED3
  • sideBarTitle.foreground#E6DED3
  • statusBar.background#181714
  • statusBar.border#3F4346
  • statusBar.debuggingBackground#E26A3B
  • statusBar.debuggingForeground#25231F
  • statusBar.foreground#E6DED3
  • statusBar.noFolderBackground#181714
  • statusBar.noFolderForeground#E6DED3
  • statusBarItem.activeBackground#3F4346
  • statusBarItem.errorBackground#D25046
  • statusBarItem.errorForeground#E6DED3
  • statusBarItem.hoverBackground#3F4346
  • statusBarItem.prominentBackground#E26A3B
  • statusBarItem.prominentForeground#25231F
  • statusBarItem.prominentHoverBackground#E4C397
  • statusBarItem.remoteBackground#7A8FA2
  • statusBarItem.remoteForeground#E6DED3
  • tab.activeBackground#25231F
  • tab.activeBorder#E26A3B
  • tab.activeForeground#E6DED3
  • tab.border#181714
  • tab.hoverBackground#3F4346
  • tab.inactiveBackground#181714
  • tab.inactiveForeground#9BABB9
  • terminal.ansiBlack#1E1C19
  • terminal.ansiBlue#7A8FA2
  • terminal.ansiBrightBlack#716A5F
  • terminal.ansiBrightBlue#A7B5C1
  • terminal.ansiBrightCyan#9AB1AD
  • terminal.ansiBrightGreen#A1C492
  • terminal.ansiBrightMagenta#B4A7C0
  • terminal.ansiBrightRed#DE7F77
  • terminal.ansiBrightWhite#EFEAE3
  • terminal.ansiBrightYellow#E4C397
  • terminal.ansiCyan#6F8F8A
  • terminal.ansiGreen#7FAF6A
  • terminal.ansiMagenta#8E7BA0
  • terminal.ansiRed#D25046
  • terminal.ansiWhite#E6DED3
  • terminal.ansiYellow#D4A05A
  • terminal.background#25231F
  • terminal.foreground#E6DED3
  • terminalCursor.foreground#E26A3B
  • titleBar.activeBackground#181714
  • titleBar.activeForeground#E6DED3
  • titleBar.border#3F4346
  • titleBar.inactiveBackground#181714
  • titleBar.inactiveForeground#9BABB9
  • welcomePage.background#25231F
  • welcomePage.tileBackground#181714
  • welcomePage.tileHoverBackground#3F4346

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, comment.line, comment.block, comment.block.documentation, punctuation.definition.comment#9BABB9italic
string, string.quoted, string.quoted.single, string.quoted.double, string.quoted.triple, string.template#7FAF6A
constant.character.escape, string.escape#B4A7C0
string.regexp#A1C492
punctuation.definition.group.regexp#D65A3A
constant.other.character-class.regexp#8E7BA0
constant.other.character-class.set.regexp, punctuation.definition.character-class.regexp#D4A05A
keyword.operator.quantifier.regexp#8CA6A1
constant.numeric, constant.numeric.integer, constant.numeric.float, constant.numeric.hex, constant.numeric.octal, constant.numeric.binary#8CA6A1
constant, constant.language, constant.language.boolean, constant.language.null, constant.language.undefined#8CA6A1
constant.character#E26A3B
keyword, keyword.control, keyword.control.conditional, keyword.control.repeat, keyword.control.loop, keyword.control.flow, keyword.control.import, keyword.control.export, keyword.control.from, keyword.control.return, keyword.control.exception, keyword.control.try, keyword.control.catch, keyword.control.throw, keyword.other#E26A3B
keyword.operator, keyword.operator.new, keyword.operator.expression, keyword.operator.logical, keyword.operator.comparison#E26A3B
storage, storage.type, storage.modifier#E26A3B
entity.name.function, meta.function-call, support.function, meta.method-call#8E7BA0
support.function.builtin#E4C397
entity.name.function.macro, support.function.macro#B4A7C0
entity.name.type, entity.name.class, entity.name.struct, entity.name.enum, entity.name.union, entity.name.trait, entity.name.interface, support.type, support.class#D4A05A
support.type.builtin, support.type.primitive#D4A05A
entity.name.type.parameter#D4A05Aitalic
variable, variable.other, variable.other.readwrite#E6DED3
variable.language, variable.language.this, variable.language.self, variable.language.super#D65A3Aitalic
variable.parameter, meta.function.parameters variable#E6DED3italic
variable.other.property, variable.other.member, variable.other.object.property, meta.object-literal.key#7A8FA2
entity.name.namespace, entity.name.module, entity.name.package#D4A05A
entity.name.function.constructor, meta.function-call.constructor#D4A05A
entity.name.label#D4A05A
entity.other.attribute-name, meta.attribute#D4A05A
meta.decorator#E4C397
punctuation, punctuation.separator, punctuation.terminator, punctuation.accessor, punctuation.definition.string#E6DED3
punctuation.definition.block, punctuation.definition.parameters, punctuation.definition.arguments, punctuation.definition.array, punctuation.brackets, punctuation.section#E6DED3
punctuation.definition.interpolation, punctuation.section.embedded#D4A05A
keyword.operator.arithmetic, keyword.operator.assignment, keyword.operator.bitwise, keyword.operator.relational, keyword.operator.ternary#E6DED3
entity.name.tag, punctuation.definition.tag#E26A3B
support.tag#7A8FA2
entity.other.attribute-name.html, entity.other.attribute-name.xml#D4A05A
markup.heading, markup.heading.setext, entity.name.section#E26A3Bbold
markup.heading.1#E26A3Bbold
markup.heading.2#E4C397bold
markup.heading.3#D65A3Abold
markup.heading.4#D4A05Abold
markup.heading.5#9BABB9bold
markup.heading.6#7A8FA2bold
markup.bold, punctuation.definition.boldbold
markup.italic, punctuation.definition.italicitalic
markup.strikethroughstrikethrough
markup.underline.link, string.other.link#A7B5C1underline
string.other.link.title, string.other.link.description#6F8F8A
markup.list, punctuation.definition.list#6F8F8A
markup.quote#9BABB9italic
markup.raw, markup.inline.raw, markup.fenced_code, fenced_code.block.language#A1C492
markup.inserted, meta.diff.header.to-file#7FAF6A
markup.deleted, meta.diff.header.from-file#D25046
markup.changed#E26A3B
invalid#D25046
invalid.deprecatedstrikethrough
source.json meta.structure.dictionary.json support.type.property-name.json#E26A3B
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#D4A05A
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#D4A05A
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#7FAF6A
entity.name.tag.yaml#E26A3B
keyword.key.toml, support.type.property-name.toml#E26A3B
entity.name.section.toml, entity.other.attribute-name.table.toml#D4A05A
support.type.property-name.css#6F8F8A
support.constant.property-value.css, support.constant.font-name#E6DED3
entity.name.tag.css, entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#E26A3B
entity.other.attribute-name.pseudo-class, entity.other.attribute-name.pseudo-element#8E7BA0
keyword.control.at-rule.mixin, keyword.control.at-rule.include, keyword.control.at-rule.extend#B4A7C0
support.constant.property-value.css#D65A3A
keyword.other.unit.css#D65A3A
variable.other.normal.shell, variable.other.special.shell, variable.other.positional.shell#E6DED3
support.function.builtin.shell#E4C397
punctuation.definition.template-expression, punctuation.section.embedded#D4A05A
keyword.blade, keyword.control.twig, entity.name.function.blade#6F8F8A