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#f74319
  • activityBar.background#18191a
  • activityBar.border#141516
  • activityBarBadge.background#f74319
  • button.background#f74319
  • button.hoverBackground#fc5631
  • button.secondaryBackground#f74319
  • button.secondaryHoverBackground#fc5631
  • checkbox.background#222324
  • checkbox.border#141516
  • debugToolBar.background#242526
  • descriptionForeground#959da5
  • dropdown.background#1a1c1c
  • dropdown.border#141516
  • dropdown.foreground#e1e4e8
  • dropdown.listBackground#1a1a1b
  • editor.background#18191a
  • editor.foreground#adadad
  • editor.lineHighlightBackground#d3d3d310
  • editor.selectionBackground#f0796685
  • editorGroup.border#141516
  • editorGroupHeader.tabsBackground#18191a
  • editorWidget.border#141516
  • focusBorder#141516
  • foreground#adadad
  • gitDecoration.addedResourceForeground#34d058
  • gitDecoration.conflictingResourceForeground#ffab70
  • gitDecoration.deletedResourceForeground#ea4a5a
  • gitDecoration.ignoredResourceForeground#6a737d
  • gitDecoration.modifiedResourceForeground#79b8ff
  • gitDecoration.submoduleResourceForeground#6a737d
  • gitDecoration.untrackedResourceForeground#34d058
  • list.activeSelectionBackground#2a2b2b
  • list.activeSelectionForeground#ffffff
  • list.focusBackground#f74319
  • list.hoverBackground#2a2b2b
  • list.hoverForeground#adadad
  • list.inactiveFocusBackground#1b1c1d
  • list.inactiveSelectionBackground#2a2b2b
  • list.inactiveSelectionForeground#adadad
  • minimap.selectionHighlight#f0796685
  • notificationLink.foreground#f74319
  • panel.background#1b1c1d
  • panel.border#141516
  • panelTitle.activeBorder#f74319
  • panelTitle.activeForeground#ffffff
  • panelTitle.inactiveForeground#adadad
  • peekViewEditor.background#1f242888
  • progressBar.background#fc5631
  • sideBar.background#1b1c1d
  • sideBar.border#141516
  • sideBarSectionHeader.background#1b1c1d
  • sideBarTitle.foreground#bbbbbb
  • statusBar.background#1b1c1d
  • statusBar.border#141516
  • statusBar.debuggingBackground#931c06
  • statusBar.debuggingForeground#fff
  • statusBar.foreground#d1d5da
  • statusBar.noFolderBackground#1b1c1d
  • statusBarItem.prominentBackground#242526
  • tab.activeBackground#1a1b1c
  • tab.activeBorder#242526
  • tab.activeBorderTop#f74319
  • tab.activeForeground#e1e4e8
  • tab.border#242526
  • tab.hoverBackground#242526
  • tab.inactiveBackground#18191a
  • tab.inactiveForeground#959da5
  • tab.unfocusedActiveBorder#24292e
  • tab.unfocusedActiveBorderTop#1b1f23
  • tab.unfocusedHoverBackground#2b2c2d
  • terminal.ansiBlack#242526
  • terminal.ansiBlue#2c70b7
  • terminal.ansiBrightBlue#3393ca
  • terminal.ansiBrightCyan#4fbce6
  • terminal.ansiBrightGreen#74ec4c
  • terminal.ansiBrightMagenta#e75e4f
  • terminal.ansiBrightRed#f74319
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#fdc325
  • terminal.ansiCyan#3ca1a6
  • terminal.ansiGreen#565747
  • terminal.ansiMagenta#f02e4f
  • terminal.ansiRed#f8511b
  • terminal.ansiWhite#adadad
  • terminal.ansiYellow#fa771d
  • terminal.background#1b1c1d
  • terminal.border#141516
  • terminal.foreground#adadad
  • terminal.tab.activeBorder#f74319
  • textLink.activeForeground#fc6d4e
  • textLink.foreground#fc5631
  • titleBar.activeBackground#18191a
  • titleBar.border#141516
  • titleBar.inactiveBackground#18191a
  • tree.indentGuidesStroke#313132

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, string.comment.buffered.block.jade#70B880italic
comment.block.html#808080italic
entity.name.type.instance#ff8b19bold
entity.name.function#ff8b19bold
support.class.js#f6485d
storage#ffd2a690
keyword#ff681e
string.quoted.double.css, string.quoted.double.js, variable.parameter.url, string.quoted.jade, string.quoted.single.js, string.quoted.double.attribute-value.css, string.quoted.double.ruby, string.quoted.single.ruby, string.quoted.single.coffee, string.quoted.double.coffee, meta.string-contents.quoted.double.php, string.quoted.double.php, string.quoted.single.php, meta.string-contents.quoted.single.php, string.quoted.variable.parameter.url, string.quoted.single.css, string.quoted.single.css, string.quoted.double.elixir, string.quoted.single.elixir, string.quoted.double.python, string.quoted.single.python, string.quoted.svelte#FC0
constant.numeric#fb5b1d
keyword.operator#FC0
punctuation.definition.parameters, meta.brace, meta.delimiter, punctuation.terminator.expression.php, source.php.embedded.block.html, keyword.operator.class.php#ffffff30
support.class.php, variable.other.global.safer.php, entity.name.type.class.php, entity.other.inherited-class.php, meta.function.php, variable.other.constant.elixir, variable.parameter.function-call.python#ff8b19
text.html.basic, variable.other.global.php, variable.other.php, meta.function-call.object.php, variable.other.property.php, support.function.filestat.php, meta.function-call.static.php, support.function.head.php#bbbbbb
constant.language.php, keyword.operator.logical.php, punctuation.definition.variable.php, punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php, variable.other.class.php, constant.other.class.php, .construct.php#f6485d
support.function, support.function.array.php, meta.function-call.php, constant.other.php#bbbbbb
constant.other.symbol.ruby, constant.other.symbol.elixir, constant.language.symbol.elixir#3fa5d4
support.class.ruby #ee7561
variable.language.js, variable.assignment.coffee, variable.language.coffee#f6485d
constant.language.boolean.false.js, constant.language.boolean.true.js, constant.language.null.js#f6485d
source.json#f6485d
meta.structure.dictionary.value.json, constant.numeric.json#70B880
punctuation.separator.dictionary.key-value.json#a2a09040
punctuation.definition.dictionary.end.json, punctuation.definition.dictionary.begin.json#fff
text.xml#ccc
entity.other.attribute-name.html, entity.other.attribute-name.svelte, entity.other.attribute-name.localname.xml#ff8b19
string.quoted.double.html, string.quoted.single.html, string.quoted.single.xml, string.quoted.double.xml#70B880
punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, meta.tag.structure.any.html, punctuation.definition.tag.begin.xml, punctuation.definition.tag.end.xml#666666bold
source.jade#4d4e4e—
complete_tag.jade#aaa—
text.block.pipe.jade, text.jade#5c6461—
entity.name.tag.jade, entity.name.tag.script.jade, javascript.embedded.jade#f64861—
meta.first-class.jade, variable.control.import.include.jade#ff8b19—
tag.jade, complete_tag.jade, string.name.classes.tag.jade#3897e8—
constant.id.tag.jade #50d1d9—
meta.property-name.css, support.type.property-name.css, support.type.property-name.css.vendor, constant.numeric.css, support.constant.property-value.css, support.type.property-name.css#cccccc—
constant.numeric.css, keyword.unit.css, constant.other.color.rgb-value.css, constant.other.color.rgb-value.css, support.constant.property-value.css, constant.numeric.css keyword.other.unit.css, keyword.operator.less, entity.other.attribute-name.pseudo-element.css, entity.other.attribute-name.pseudo-element.css, support.constant.color.w3c-standard-color-name.css, meta.property-value.css#5c6461
meta.at-rule.import.css, keyword.control.at-rule, support.function.less, support.function.any-method.builtin.less#49afb5—
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css, meta.selector.css, variable.declaration.less#ff8b19
variable.other.less#fb5b1d—
constant.other.rgb-value.css#83eb5e—
entity.other.attribute-name.attribute.css, entity.other.attribute-name.pseudo-class.css, keyword.operator.less, entity.name.tag, entity.name.tag.localname.xml, support.class.component.svelte#f6475d—
comment.documentation.heredoc.elixir#646464—