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.activeBackground#e973183a
  • activityBar.activeBorder#E97318
  • activityBar.background#2c2c2c
  • activityBar.border#444444
  • activityBar.foreground#d4d4d4
  • activityBar.inactiveForeground#d4d4d47a
  • activityBarBadge.background#E97318
  • activityBarBadge.foreground#ffffff
  • badge.background#E97318
  • badge.foreground#ffffff
  • button.background#E97318
  • contrastBorder#444444
  • dropdown.border#E97318
  • editor.background#1e1e1e
  • editor.foreground#d4d4d4
  • editor.lineHighlightBackground#2a2a2a
  • editor.lineHighlightBorder#333333
  • editor.selectionBackground#e9731870
  • editor.selectionForeground#ffffff
  • editorBracketHighlight.foreground1#D94848
  • editorBracketHighlight.foreground2#E56E4B
  • editorBracketHighlight.foreground3#E97318
  • editorBracketHighlight.foreground4#F79A4B
  • editorBracketHighlight.foreground5#FF7070
  • editorBracketHighlight.foreground6#FF9C5E
  • editorBracketMatch.border#888888
  • editorBracketPairGuide.activeBackground1#D94848a0
  • editorBracketPairGuide.activeBackground2#E56E4Ba0
  • editorBracketPairGuide.activeBackground3#E97318a0
  • editorBracketPairGuide.activeBackground4#F79A4Ba0
  • editorBracketPairGuide.activeBackground5#FF7070a0
  • editorBracketPairGuide.activeBackground6#FF9C5Ea0
  • editorBracketPairGuide.background1#D9484850
  • editorBracketPairGuide.background2#E56E4B50
  • editorBracketPairGuide.background3#e9731850
  • editorBracketPairGuide.background4#F79A4B50
  • editorBracketPairGuide.background5#FF707050
  • editorBracketPairGuide.background6#FF9C5E50
  • editorCursor.foreground#E97318
  • editorLightBulb.foreground#E97318
  • editorLightBulbAutoFix.foreground#E97318
  • editorLineNumber.foreground#858585
  • editorOverviewRuler.bracketMatchForeground#E97318
  • editorSuggestWidget.background#252526
  • editorSuggestWidget.border#454545
  • editorSuggestWidget.foreground#d4d4d4
  • editorSuggestWidget.highlightForeground#E97318
  • focusBorder#E97318
  • list.activeSelectionBackground#e9731870
  • list.hoverBackground#2a2a2a
  • list.inactiveSelectionBackground#e9731840
  • menu.selectionBackground#E97318
  • menu.selectionForeground#ffffff
  • menubar.selectionBackground#E97318
  • menubar.selectionForeground#ffffff
  • panel.background#1e1e1e
  • panel.border#444444
  • panelTitle.activeBorder#E97318
  • panelTitle.activeForeground#e7e7e7
  • panelTitle.inactiveForeground#e7e7e799
  • scrollbarSlider.activeBackground#e97318a0
  • scrollbarSlider.hoverBackground#e97318
  • selection.background#E97318
  • sideBar.background#252526
  • sideBar.border#444444
  • sideBar.foreground#cccccc
  • sideBarSectionHeader.background#2a2a2a
  • sideBarSectionHeader.foreground#E97318
  • sideBarTitle.foreground#E97318
  • statusBar.background#2a2a2a
  • statusBar.border#444444
  • statusBar.foreground#cccccc
  • statusBar.noFolderBackground#2a2a2a
  • statusBarItem.prominentBackground#E97318
  • statusBarItem.remoteBackground#2a2a2a
  • statusBarItem.remoteForeground#E97318
  • symbolIcon.arrayForeground#E97318
  • tab.activeBackground#1e1e1e
  • tab.activeBorder#E97318
  • tab.activeModifiedBorder#b52f0a
  • tab.inactiveBackground#2a2a2a
  • tab.inactiveForeground#ccccccaa
  • tab.inactiveModifiedBorder#E97318
  • tab.unfocusedActiveModifiedBorder#E97318
  • tab.unfocusedInactiveModifiedBorder#E97318
  • terminal.background#1e1e1e
  • terminal.foreground#cccccc
  • textLink.activeForeground#FF9D4D
  • textLink.foreground#E97318
  • titleBar.activeBackground#2a2a2a
  • titleBar.activeForeground#cccccc
  • titleBar.border#444444
  • titleBar.inactiveBackground#202020
  • titleBar.inactiveForeground#cccccc99

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#d4d4d4—
punctuation.definition.string.begin, punctuation.definition.string.end, punctuation.definition.string.template.begin, punctuation.definition.string.template.end, string.quoted punctuation.definition.string.begin, string.quoted punctuation.definition.string.end#ce9178—
comment, punctuation.definition.comment#52525bitalic
variable, string constant.other.placeholder#fdba74—
source#d4d4d4—
constant.other.color, punctuation.definition.entity, constant.character.entity, punctuation.definition.template-expression, punctuation.section.tag.twig#ce9178—
invalid, invalid.illegal#f44747—
keyword, storage.type, storage.modifier, constant.language, support.constant#E97318—
constant.numeric, constant.character, constant.escape#E97318—
punctuation, punctuation.definition.tag, punctuation.separator.inheritance.php, punctuation.definition.tag.html, punctuation.section.embedded, keyword.other.template, keyword.other.substitution, meta.brace, meta.block, meta.jsx, meta.embedded.expression, meta.template.expression, meta.tag.block.any.html, string.unquoted.tag-string.nunjucks, text.html.nunjucks#d4d4d4—
punctuation.separator.key-value.html, keyword.control, keyword.operator, punctuation.definition.constant, meta.function.block.start.handlebars, meta.function.inline.other, meta.property-value, support.constant.mathematical-symbols, support.constant.vendored.property-value, punctuation.definition.keyword, punctuation.accessor, punctuation.separator.property, string.unquoted.filter-pipe#E97318—
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter, support.variable.dom, meta.import, meta.export, meta.export.default, support.class.builtin, support.class.component, variable.other.object#E97318—
markup.deleted.git_gutter#f44747—
keyword.control.import, keyword.control.export, keyword.control.from#E97318—
entity.name.function, variable.function, support.function, keyword.other.special-method, meta.function-call, keyword.control.filter#DCDCAA—
meta.block variable.other#d4d4d4—
variable.parameter, punctuation.section.property-list, meta.property-value.scss punctuation, meta.property-list, keyword.operator.type.annotation, variable.other.object.property#d4d4d4—
text.html#d4d4d4—
string, constant.other.symbol, constant.other.key, markup.heading, markup.inserted.git_gutter, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js, punctuation.definition.string, entity.name.section.markdown, meta.attribute-selector, entity.name.import.go, storage.type.attr.nunjucks#ce9178—
markup.inserted.git_gutter#a0a0a0—
markup.heading, entity.name.section.markdown#E97318bold
meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js#d4d4d4—
entity.name.import.go#d4d4d4—
entity.name, support.orther.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, meta.object-literal.key#d7ba7d—
support.type, support.type.sys-types#d7ba7d—
markup.changed.git_gutter#E97318—
support.class, entity.other.inherited-class, meta.property-name, punctuation.definition.raw.markdown, variable.graphql, variable.other.readwrite#d7ba7d—
keyword.other.debugger#E97318—
variable.graphql, variable.other.readwrite#d4d4d4—
meta.property-name, punctuation.definition.raw.markdown#d4d4d4—
support.type.property-name, support.variable.object.node, support.variable.object.process#d4d4d4—
source.css support.type.property-name, source.sass support.type.property-name, source.scss support.type.property-name, source.less support.type.property-name, source.stylus support.type.property-name, source.postcss support.type.property-name#d4d4d4—
entity.name.module.js, variable.import.parameter.js#d7ba7d—
variable.language#E97318—
entity.name.method.js#DCDCAA—
meta.class-method.js entity.name.function.js, variable.function.constructor#DCDCAA—
entity.other.attribute-name#E97318—
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name#E97318—
entity.other.attribute-name.class, punctuation.definition.entity.css#d7ba7d—
source.sass keyword.control, entity.other.attribute-name.id#d7ba7d—
markup.inserted#a0a0a0—
markup.deleted#f44747—
markup.changed#E97318—
string.regexp#d16969—
constant.character.escape#d7ba7d—
*url*, *link*, *uri*#E97318underline
meta.decorator, tag.decorator.js entity.name.tag, tag.decorator.js punctuation.definition.tag#DCDCAA—
source.js constant.other.object.key.js string.unquoted.label.js#d4d4d4—
source.json meta.structure.dictionary.json support.type.property-name.json#E97318—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#DCDCAA—
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#DCDCAA—
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 meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json, 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 meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json, 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 meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json, 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 meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json, 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 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, 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 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 meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#d7ba7d—
markup.italic#E97318italic
markup.bold#E97318bold
markup.underline—underline
markup.strike#888888strikethrough
markup.quote#a0a0a0italic
markup.raw.block#ce9178—
markup.table#d4d4d4—
text.html.markdown, punctuation.definition.list_item.markdown#d4d4d4—
text.html.markdown markup.raw.inline, text.html.markdown markup.inline.raw.string.markdown#ce9178—
text.html.markdown meta.dummy.line-break#d4d4d4—
punctuation.definition.heading.markdown#E97318bold
punctuation.definition.blockquote.markdown#a0a0a0italic
string.other.link.title.markdown, markup.underline.link.markdown#ce9178
markup.underline.link.markdown#E97318underline
markup.raw.block.fenced.markdown#ce9178—
punctuation.definition.fenced.markdown, variable.language.fenced.markdown#858585—
meta.separator#858585bold
token.info-token#E97318—
token.warn-token#FFA500—
token.error-token#F44747—
token.debug-token#ffae57—
storage.type.error.go#858585—
punctuation.other.period.go#d4d4d4—
Firecrawl Theme by Firecrawl - VS Code Theme