Skip to main content
Coding Theme

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.background#230905
  • activityBar.border#691b0f
  • activityBar.foreground#f7eae8
  • activityBar.inactiveForeground#efd5d199
  • activityBarBadge.background#af2e1a
  • activityBarBadge.foreground#f7eae8
  • badge.background#af2e1a
  • badge.foreground#f7eae8
  • breadcrumb.activeSelectionForeground#f7eae8
  • breadcrumb.background#110402
  • breadcrumb.focusForeground#f7eae8
  • breadcrumb.foreground#efd5d1
  • breadcrumbPicker.background#230905
  • button.background#af2e1a
  • button.foreground#f7eae8
  • button.hoverBackground#b74230
  • debugExceptionWidget.background#110402
  • debugExceptionWidget.border#bf5747
  • debugIcon.breakpointCurrentStackframeForeground#d4a759
  • debugIcon.breakpointDisabledForeground#bf574766
  • debugIcon.breakpointForeground#bf5747
  • debugToolBar.background#340d07
  • descriptionForeground#efd5d1
  • diffEditor.border#340d07
  • diffEditor.diagonalFill#46120a
  • diffEditor.insertedLineBackground#8fa66726
  • diffEditor.insertedTextBackground#8fa66740
  • diffEditor.removedLineBackground#bf574726
  • diffEditor.removedTextBackground#bf574740
  • disabledForeground#46120a
  • dropdown.background#230905
  • dropdown.border#691b0f
  • dropdown.foreground#f7eae8
  • dropdown.listBackground#340d07
  • editor.background#110402
  • editor.findMatchBackground#D4A75980
  • editor.findMatchBorder#AF2E1A
  • editor.findMatchHighlightBackground#D4A7594D
  • editor.findMatchHighlightBorder#00000000
  • editor.foldBackground#46120a33
  • editor.foreground#f7eae8
  • editor.hoverHighlightBackground#46120A66
  • editor.inactiveSelectionBackground#691B0F66
  • editor.lineHighlightBackground#340d0780
  • editor.linkedEditingBackground#691B0F33
  • editor.rangeHighlightBackground#691B0F3D
  • editor.selectionBackground#691B0FB3
  • editor.selectionHighlightBackground#691B0F55
  • editor.selectionHighlightBorder#AF2E1A80
  • editor.snippetFinalTabstopHighlightBackground#46120A80
  • editor.snippetTabstopHighlightBackground#691B0F66
  • editor.wordHighlightBackground#46120A66
  • editor.wordHighlightBorder#AF2E1A33
  • editor.wordHighlightStrongBackground#691B0F88
  • editor.wordHighlightStrongBorder#AF2E1A66
  • editorBracketHighlight.foreground1#6fa5a0
  • editorBracketHighlight.foreground2#d4a759
  • editorBracketHighlight.foreground3#ba5a7d
  • editorBracketHighlight.foreground4#8791b0
  • editorBracketHighlight.foreground5#d78556
  • editorBracketHighlight.foreground6#8fa667
  • editorBracketHighlight.unexpectedBracket.foreground#bf5747
  • editorBracketMatch.background#46120a
  • editorBracketMatch.border#00000000
  • editorBracketPairGuide.activeBackground1#6fa5a0
  • editorBracketPairGuide.activeBackground2#d4a759
  • editorBracketPairGuide.activeBackground3#ba5a7d
  • editorBracketPairGuide.background1#6fa5a033
  • editorBracketPairGuide.background2#d4a75933
  • editorBracketPairGuide.background3#ba5a7d33
  • editorCodeLens.foreground#efd5d1b3
  • editorCursor.background#110402
  • editorCursor.foreground#D4A759
  • editorError.border#bf5747
  • editorError.foreground#bf5747
  • editorGroup.border#691b0f
  • editorGroup.dropBackground#af2e1a33
  • editorGroupHeader.noTabsBackground#110402
  • editorGroupHeader.tabsBackground#110402
  • editorGroupHeader.tabsBorder#691b0f
  • editorGutter.addedBackground#8fa667
  • editorGutter.background#230905
  • editorGutter.deletedBackground#bf5747
  • editorGutter.modifiedBackground#6fa5a0
  • editorHint.foreground#efd5d180
  • editorHoverWidget.background#340d07
  • editorHoverWidget.border#691b0f
  • editorHoverWidget.foreground#f7eae8
  • editorHoverWidget.highlightForeground#d4a759
  • editorIndentGuide.activeBackground1#691B0F
  • editorIndentGuide.activeBackground2#691B0F
  • editorIndentGuide.activeBackground3#691B0F
  • editorIndentGuide.background1#46120A80
  • editorIndentGuide.background2#46120A80
  • editorIndentGuide.background3#46120A80
  • editorInfo.border#6fa5a0
  • editorInfo.foreground#6fa5a0
  • editorInlayHint.background#46120a33
  • editorInlayHint.foreground#efd5d180
  • editorInlayHint.parameterBackground#46120a40
  • editorInlayHint.parameterForeground#efd5d180
  • editorInlayHint.typeBackground#46120a33
  • editorInlayHint.typeForeground#efd5d199
  • editorLightBulb.foreground#d4a759
  • editorLightBulbAutoFix.foreground#6fa5a0
  • editorLineNumber.activeForeground#e7c0ba
  • editorLineNumber.dimmedForeground#46120a99
  • editorLineNumber.foreground#46120a
  • editorOverviewRuler.addedForeground#8fa667aa
  • editorOverviewRuler.border#340d07
  • editorOverviewRuler.deletedForeground#bf5747aa
  • editorOverviewRuler.errorForeground#bf5747cc
  • editorOverviewRuler.findMatchForeground#d4a75933
  • editorOverviewRuler.infoForeground#6fa5a0cc
  • editorOverviewRuler.modifiedForeground#6fa5a0aa
  • editorOverviewRuler.selectionHighlightForeground#691b0f99
  • editorOverviewRuler.warningForeground#d4a759cc
  • editorOverviewRuler.wordHighlightForeground#46120a88
  • editorOverviewRuler.wordHighlightStrongForeground#691b0faa
  • editorRuler.foreground#46120a66
  • editorSuggestWidget.background#340d07
  • editorSuggestWidget.border#691b0f
  • editorSuggestWidget.foreground#f7eae8
  • editorSuggestWidget.highlightForeground#d4a759
  • editorSuggestWidget.selectedBackground#46120a
  • editorSuggestWidget.selectedForeground#f7eae8
  • editorWarning.border#d4a759
  • editorWarning.foreground#d4a759
  • editorWhitespace.foreground#46120A80
  • editorWidget.background#340d07
  • editorWidget.border#691b0f
  • editorWidget.foreground#f7eae8
  • focusBorder#D4A759
  • foreground#f7eae8
  • gitDecoration.addedResourceForeground#8fa667
  • gitDecoration.conflictingResourceForeground#ba5a7d
  • gitDecoration.deletedResourceForeground#bf5747
  • gitDecoration.ignoredResourceForeground#46120acc
  • gitDecoration.modifiedResourceForeground#6fa5a0
  • gitDecoration.renamedResourceForeground#d4a759
  • gitDecoration.stageDeletedResourceForeground#bf574799
  • gitDecoration.stageModifiedResourceForeground#6fa5a099
  • gitDecoration.submoduleResourceForeground#d4a759
  • gitDecoration.untrackedResourceForeground#8fa667
  • input.background#230905
  • input.border#691b0f
  • input.foreground#f7eae8
  • input.placeholderForeground#efd5d180
  • list.activeSelectionBackground#46120a
  • list.activeSelectionForeground#f7eae8
  • list.dropBackground#691b0f7d
  • list.errorForeground#bf5747
  • list.focusBackground#46120acc
  • list.focusForeground#f7eae8
  • list.highlightForeground#d4a759
  • list.hoverBackground#691b0f80
  • list.hoverForeground#f7eae8
  • list.inactiveSelectionBackground#46120a99
  • list.inactiveSelectionForeground#f7eae8
  • list.warningForeground#d4a759
  • menu.background#230905
  • menu.border#691b0f
  • menu.foreground#f7eae8
  • menu.selectionBackground#46120a
  • menu.selectionForeground#f7eae8
  • menubar.selectionBackground#46120a
  • menubar.selectionForeground#f7eae8
  • minimap.background#110402
  • minimap.errorHighlight#bf574799
  • minimap.findMatchHighlight#d4a75966
  • minimap.selectionHighlight#691B0F7F
  • minimap.warningHighlight#d4a75966
  • minimapGutter.addedBackground#8fa667
  • minimapGutter.deletedBackground#bf5747
  • minimapGutter.modifiedBackground#6fa5a0
  • minimapSlider.activeBackground#af2e1acc
  • minimapSlider.background#46120a99
  • minimapSlider.hoverBackground#691b0faa
  • notificationCenterHeader.background#230905
  • notifications.background#230905
  • notifications.foreground#f7eae8
  • notificationsErrorIcon.foreground#bf5747
  • notificationsInfoIcon.foreground#6fa5a0
  • notificationsWarningIcon.foreground#d4a759
  • panel.background#340d07
  • panel.border#46120a
  • panelInput.border#691b0f
  • panelSection.border#46120a
  • panelSectionHeader.background#46120a
  • panelSectionHeader.border#340d07
  • panelSectionHeader.foreground#efd5d1
  • panelTitle.activeBorder#46120a
  • panelTitle.activeForeground#efd5d1
  • panelTitle.inactiveForeground#efd5d1
  • peekView.border#691b0f
  • peekViewEditor.background#110402
  • peekViewEditor.matchHighlightBackground#d4a75933
  • peekViewResult.background#340d07
  • peekViewResult.matchHighlightBackground#d4a75933
  • peekViewResult.selectionBackground#46120a
  • peekViewTitle.background#230905
  • peekViewTitleDescription.foreground#efd5d1
  • peekViewTitleLabel.foreground#f7eae8
  • problemsErrorIcon.foreground#bf5747
  • problemsInfoIcon.foreground#6fa5a0
  • problemsWarningIcon.foreground#d4a759
  • progressBar.background#d4a759
  • quickInput.background#230905
  • quickInput.foreground#f7eae8
  • scrollbar.shadow#00000000
  • scrollbarSlider.activeBackground#af2e1acc
  • scrollbarSlider.background#46120acc
  • scrollbarSlider.hoverBackground#691b0fcc
  • selection.background#691B0FB3
  • sideBar.background#230905
  • sideBar.border#46120a
  • sideBar.foreground#efd5d1
  • sideBarSectionHeader.background#46120a
  • sideBarSectionHeader.foreground#e7c0ba
  • sideBarTitle.foreground#f7eae8
  • statusBar.background#7a2012
  • statusBar.border#46120a
  • statusBar.debuggingBackground#8791b0
  • statusBar.debuggingForeground#110402
  • statusBar.foreground#f7eae8
  • statusBar.noFolderBackground#7a2012
  • statusBar.noFolderForeground#f7eae8
  • statusBarItem.activeBackground#46120a
  • statusBarItem.errorBackground#af2e1a
  • statusBarItem.errorForeground#f7eae8
  • statusBarItem.hoverBackground#46120a
  • statusBarItem.prominentBackground#bf5747
  • statusBarItem.prominentForeground#f7eae8
  • statusBarItem.remoteBackground#af2e1a
  • statusBarItem.remoteForeground#f7eae8
  • statusBarItem.warningBackground#bf5747
  • statusBarItem.warningForeground#f7eae8
  • tab.activeBackground#340d07
  • tab.activeBorder#691b0f
  • tab.activeBorderTop#691b0f
  • tab.activeForeground#f7eae8
  • tab.border#691b0f
  • tab.hoverBackground#46120a
  • tab.hoverBorder#af2e1a80
  • tab.hoverForeground#f7eae8
  • tab.inactiveBackground#110402
  • tab.inactiveForeground#efd5d1
  • tab.modifiedForeground#d4a759
  • tab.unfocusedActiveBorder#691b0f
  • tab.unfocusedActiveBorderTop#691b0f
  • terminal.ansiBlack#110402
  • terminal.ansiBlue#8791b0
  • terminal.ansiBrightBlack#46120a
  • terminal.ansiBrightBlue#999eaf
  • terminal.ansiBrightCyan#7fa5a1
  • terminal.ansiBrightGreen#94a577
  • terminal.ansiBrightMagenta#ba6b88
  • terminal.ansiBrightRed#cf8175
  • terminal.ansiBrightWhite#f7eae8
  • terminal.ansiBrightYellow#d3ae6e
  • terminal.ansiCyan#6fa5a0
  • terminal.ansiGreen#8fa667
  • terminal.ansiMagenta#ba5a7d
  • terminal.ansiRed#af2e1a
  • terminal.ansiWhite#efd5d1
  • terminal.ansiYellow#d4a759
  • terminal.background#110402
  • terminal.border#691b0f
  • terminal.dropBackground#691b0f66
  • terminal.foreground#f7eae8
  • terminal.selectionBackground#691B0FB3
  • terminalCommandDecoration.defaultBackground#46120a
  • terminalCommandDecoration.errorBackground#bf5747
  • terminalCommandDecoration.successBackground#8fa667
  • terminalCursor.background#110402
  • terminalCursor.foreground#d4a759
  • textBlockQuote.background#340d07
  • textBlockQuote.border#d7968c
  • textCodeBlock.background#46120a
  • textLink.activeForeground#cf8175
  • textLink.foreground#e7c0ba
  • textPreformat.background#46120a
  • textPreformat.foreground#8fa667
  • textSeparator.foreground#691b0f
  • titleBar.activeBackground#230905
  • titleBar.activeForeground#f7eae8
  • titleBar.border#46120a
  • titleBar.inactiveBackground#230905
  • titleBar.inactiveForeground#efd5d180
  • welcomePage.background#110402
  • widget.shadow#00000080
  • window.activeBorder#af2e1a
  • window.inactiveBorder#691b0f

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#AC6D4Aitalic
comment.block.documentation, comment.block.documentation punctuation.definition.comment#AC6D4Aitalic
string, punctuation.definition.string string, string.quoted, string.unquoted#8FA667
punctuation.definition.string, punctuation.definition.template-expression, punctuation.definition.heredoc#D7968C
source string.interpolated, string.quoted.double.interpolated, meta.interpolation, constant.character.escape#8FA667
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded, constant.other.placeholder, meta.embedded.line#D7968C
string.regexp, constant.other.character-class.regexp#8FA667
keyword.operator.quantifier.regexp, punctuation.definition.character-class.regexp, punctuation.section.regexp, punctuation.section.regexp.begin, punctuation.section.regexp.end#D7968C
constant.numeric, constant.numeric.integer, constant.numeric.float#D78556
constant.language, constant.character, constant.other, variable.language, keyword.other.this, keyword.other.self, support.constant.language, variable.other.constant#D3AE6E
keyword, storage, storage.modifier, keyword.control, keyword.operator.word#CF8175
storage.type, storage.type.class, storage.type.namespace, entity.name.type, entity.name.class, entity.name.namespace, entity.name.module, support.type, entity.name.enum#6FA5A0
entity.other.inherited-class, entity.name.trait, entity.name.impl, support.type.trait#6FA5A0
entity.name.lifetime, storage.modifier.lifetime, variable.language.lifetime#6FA5A0italic
variable.other.generic, variable.other.type, entity.name.type.parameter, support.type.variable#6FA5A0italic
meta.annotation, meta.decorator, storage.type.annotation, entity.other.attribute-name.annotation, punctuation.definition.annotation#6FA5A0italic
entity.name.function, meta.function-call entity.name.function, variable.function, support.function.any-method, support.function.macro, entity.name.function.macro#D4A759
variable.parameter, meta.function.parameters variable.other.readwrite, function.parameter#F7EAE8
variable, variable.other, variable.other.readwrite, meta.object-literal entity.name, meta.attribute, support.variable#F7EAE8
variable.other.property, variable.other.member, support.variable.property, variable.other.object#F7EAE8
support.function, support.class, support.constant, support.other.namespace, support.type.property-name#A07E43
constant.other.enum, variable.other.constant, entity.name.constant, support.constant.enum, support.constant.variant, constant.other.symbol#D3AE6E
keyword.operator, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.logical, meta.function.return-type, meta.function.parameters punctuation.separator#D7968C
punctuation, punctuation.accessor, punctuation.separator, punctuation.terminator, punctuation.section, punctuation.definition.parameters, punctuation.definition.arguments, meta.brace, meta.bracket#D7968C
punctuation.section.embedded.begin, punctuation.section.embedded.end, punctuation.section.block.html, punctuation.definition.block#D7968C
entity.name.tag, entity.name.tag.block.any.html, entity.name.tag.inline.any.html, meta.tag.metadata.html#6FA5A0
punctuation.definition.tag, punctuation.definition.tag.begin, punctuation.definition.tag.end#D7968C
entity.other.attribute-name, meta.tag punctuation.separator, support.type.attribute-name#A07E43
meta.tag string.quoted, meta.attribute-with-value string.quoted#8FA667
comment.block.html, comment.block.xml, comment.block.documentation.html#AC6D4Aitalic
markup.heading, markup.heading entity.name#CF8175bold
punctuation.definition.heading.markdown, markup.heading punctuation.definition.heading#D7968C
markup.bold, punctuation.definition.bold.markdown#F7EAE8bold
markup.italic, punctuation.definition.italic.markdown#F7EAE8italic
markup.bold markup.italic, markup.italic markup.bold#F7EAE8bold italic
markup.inline.raw, markup.inline.raw string, markup.fenced_code, markup.raw.block.fenced.markdown source#8FA667
punctuation.definition.fenced.markdown, variable.language.fenced.markdown#D7968C
markup.quote, punctuation.definition.blockquote.markdown#EFD5D1italic
markup.list, punctuation.definition.list_item.markdown, markup.list.numbered, markup.list.unnumbered#D7968C
markup.hr, markup.horizontal_rule, meta.separator.markdown, punctuation.definition.thematic-break.markdown#691B0F
markup.underline.link, meta.link.inline.markdown, markup.link, string.other.link.title.markdown#E7C0BAunderline
markup.underline.link markup.link.url, meta.link.markdown constant.other.reference.link, meta.link string.other.link.description#A07E43
support.type.property-name, support.type.property-name.json, meta.object-literal.key, meta.mapping.key, meta.structure.dictionary.json string.quoted.double.json > punctuation.definition.string, entity.name.section.toml#6FA5A0
punctuation.separator.dictionary.key-value, punctuation.separator.array, punctuation.definition.dictionary, punctuation.definition.sequence, punctuation.separator.key-value#D7968C
entity.name.tag.yaml, punctuation.definition.block.sequence.item.yaml, punctuation.separator.key-value.mapping.yaml, punctuation.definition.anchor.yaml#6FA5A0
source.css entity.name.tag, source.sass entity.name.tag, source.scss entity.name.tag#F7EAE8
source.css entity.other.attribute-name.class, source.css entity.other.attribute-name.id, source.scss entity.other.attribute-name.class, source.scss entity.other.attribute-name.id, source.sass entity.other.attribute-name.class, source.sass entity.other.attribute-name.id#6FA5A0
entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css, entity.other.attribute-name.pseudo-class.scss, entity.other.attribute-name.pseudo-element.scss, entity.other.attribute-name.pseudo-class.sass, entity.other.attribute-name.pseudo-element.sass#A07E43
meta.attribute-selector.css, meta.attribute-selector punctuation.definition.string#A07E43
support.type.property-name.css, support.type.property-name.sass, support.type.property-name.scss#A07E43
support.constant.property-value.css, support.constant.property-value.sass, support.constant.property-value.scss, keyword.other.css, keyword.other.sass, keyword.other.scss#D3AE6E
keyword.other.unit, keyword.other.unit.css, keyword.other.unit.px.css, keyword.other.unit.em.css, keyword.other.unit.rem.css, keyword.other.unit.percentage.css, keyword.other.unit.sass, keyword.other.unit.scss#A07E43
constant.other.color, constant.other.rgb-value, constant.other.color.rgb-value, support.constant.color, support.constant.color.w3c-standard, constant.other.color.sass, constant.other.color.scss, support.constant.color.sass, support.constant.color.scss#D78556
source.css string, source.scss string, source.sass string#8FA667
keyword.control.at-rule, keyword.control.at-rule.media, keyword.control.at-rule.keyframes#CF8175
comment.line.shebang, comment.line.shebang punctuation.definition.comment#AC6D4Aitalic
source.shell meta.function-call support.function, source.shell entity.name.command, source.makefile entity.name.function#D4A759
source.shell constant.other.option, source.shell punctuation.definition.parameter#CF8175
source.shell variable.other, source.shell punctuation.definition.variable, variable.language.shell#F7EAE8
string.unquoted.heredoc, string.interpolated.heredoc#8FA667
punctuation.definition.heredoc, entity.name.tag.heredoc, keyword.operator.heredoc#D7968C
source.sql keyword, source.sql keyword.other, source.sql keyword.operator#CF8175
source.sql support.function, source.sql entity.name.function#D4A759
source.sql storage.type, source.sql support.type, source.sql entity.name.type#6FA5A0
meta.diff, meta.diff.header, entity.name.filename#D4A759
meta.diff.range, meta.separator.diff, punctuation.definition.range.diff#8791B0
markup.inserted, markup.inserted.diff, meta.diff.header.from-file#F7EAE8
markup.deleted, markup.deleted.diff, meta.diff.header.to-file#E7C0BA
markup.changed, markup.changed.diff#F7EAE8
markup.inserted.diff punctuation.definition.inserted#8FA667
markup.deleted.diff punctuation.definition.deleted#BF5747
markup.error, invalid.illegal, message.error#BF5747underline
markup.warning, message.warning#D4A759underline
markup.info, message.info#6FA5A0
invalid, invalid.illegal#BF5747
invalid.deprecated, markup.strike, markup.deleted.diff.old#CF8175strikethrough
constant.numeric.line-number.find-in-files - match#D3AE6E
keyword.control.directive, punctuation.definition.directive, meta.preprocessor#CF8175
entity.name.function.preprocessor, entity.name.constant.preprocessor, support.constant.macro#D3AE6E
variable.parameter.preprocessor#F7EAE8italic
Digital Rust by Kat Suricata - VS Code Theme