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.background#0c1a25
  • activityBar.dropBackground#FF652F80
  • activityBarBadge.background#FF652F
  • activityBarBadge.foreground#ffffff
  • badge.background#FF652F
  • badge.foreground#ffffff
  • button.background#FF652F
  • button.foreground#ffffff
  • debugToolBar.background#0c1a25
  • dropdown.background#0e1e2b
  • editor.background#09131b
  • editor.foreground#FFFFFF
  • editor.lineHighlightBorder#FFFFFF1a
  • editor.rangeHighlightBackground#FFFFFF0d
  • editorCursor.foreground#FFE400
  • editorGroup.dropBackground#FF652F80
  • editorGroup.focusedEmptyBorder#FF652F
  • editorGroupHeader.tabsBackground#0a1620
  • editorHoverWidget.background#0a1620
  • editorLineNumber.activeForeground#FF652F
  • editorLineNumber.foreground#FFFFFF4d
  • editorMarkerNavigation.background#0a1620
  • editorWidget.background#0a1620
  • focusBorder#7e2200
  • foreground#FFFFFF
  • input.background#0e1e2b
  • inputOption.activeBorder#FF652F
  • list.activeSelectionBackground#FF652F80
  • list.activeSelectionForeground#FFFFFF
  • list.dropBackground#FF652F80
  • list.focusBackground#FF652F80
  • list.focusForeground#FFFFFF
  • list.highlightForeground#FF652F
  • list.hoverBackground#FFFFFF1a
  • list.inactiveSelectionBackground#FFFFFF33
  • panel.background#0a1620
  • panel.border#FFFFFF1a
  • panelTitle.activeBorder#FFFFFF80
  • panelTitle.inactiveForeground#FFFFFF80
  • peekView.border#FF652F
  • peekViewEditor.background#070f15
  • peekViewResult.background#0a1620
  • peekViewTitle.background#09131b
  • pickerGroup.border#FFFFFF1a
  • sash.hoverBorder#ff652F
  • selection.background#FF652F
  • sideBar.background#0a1620
  • sideBarSectionHeader.background#0c1a25
  • statusBar.background#070f15
  • statusBar.debuggingBackground#FF652F
  • statusBar.debuggingForeground#ffffff
  • statusBar.noFolderBackground#070f15
  • statusBarItem.activeBackground#FF652F80
  • statusBarItem.hoverBackground#FFFFFF1a
  • statusBarItem.remoteBackground#FF652F
  • statusBarItem.remoteForeground#ffffff
  • tab.activeBorder#FF652F
  • tab.activeModifiedBorder#FF652F
  • tab.border#00000033
  • tab.inactiveBackground#0c1a25
  • tab.inactiveModifiedBorder#993c1c
  • tab.lastPinnedBorder#ff652f
  • tab.unfocusedActiveModifiedBorder#cc5025
  • tab.unfocusedInactiveModifiedBorder#993c1c
  • titleBar.activeBackground#070f15

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
Global settings#FFFFFF—
string#14A76C—
constant.character.escape, text.html constant.character.entity.named, punctuation.definition.entity.html#1efaa2—
constant.language.boolean#FF652F—
constant.numeric#FFE400—
variable, support.variable, support.class, support.constant, meta.definition.variable, entity.name.function#746aff—
variable.other.constant#ff5177—
keyword, modifier, variable.language.this, support.type.object, constant.language#5eb7ee—
keyword.control.flow.js#FFE400—
entity.name.function, support.function#FFE400—
storage.type, storage.modifier, keyword.operator.expression#FF652F—
support.module, support.node#ff9746italic
support.type#ff9d00—
entity.name.type, entity.other.inherited-class#ff9d00—
comment, comment.block.js#577997italic
entity.name.type.class#ff9d00underline
variable.object.property, meta.field.declaration entity.name.function#5eb7ee—
meta.definition.method entity.name.function#5eb7ee—
meta.function, entity.name.function#5eb7ee—
template.expression.begin, template.expression.end, punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end#FF652F—
meta.embedded, source.groovy.embedded, meta.template.expression#FFFFFF—
entity.name.tag.yaml#ff9746—
meta.object-literal.key, meta.object-literal.key string, support.type.property-name.json#5eb7ee—
constant.language.json#FF652F—
entity.other.attribute-name.class#FF652F—
entity.other.attribute-name.id#14A76C—
source.css entity.name.tag#5eb7ee—
meta.tag, punctuation.definition.tag#FF652F—
entity.name.tag#ffc598—
entity.other.attribute-name#FFE400—
markup.heading#FF652F—
text.html.markdown meta.link.inline, meta.link.reference#ff9746—
text.html.markdown beginning.punctuation.definition.list#FF652F—
markup.italic#ff9746italic
markup.bold#ff9746bold
markup.bold markup.italic, markup.italic markup.bold#ff9746italic bold
markup.fenced_code.block.markdown punctuation.definition.markdown#14A76C—
markup.inline.raw.string.markdown#14A76C—
punctuation.definition.heading.markdown, punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown, punctuation.definition.quote.begin.markdown, punctuation.definition.list.begin.markdown, markup.fenced_code.block.markdown, meta.separator.markdown#356ea0—
keyword.other.definition.ini#ff9746—
entity.name.section.group-title.ini#FF652F—
source.cs meta.class.identifier storage.type#5eb7eeunderline
source.cs meta.method.identifier entity.name.function#5eb7ee—
source.cs meta.method-call meta.method, source.cs entity.name.function#FFE400—
source.cs storage.type#5eb7ee—
source.cs meta.method.return-type#5eb7ee—
source.cs meta.preprocessor#1b3951—
source.cs entity.name.type.namespace#FFFFFF—
Global settings#FFFFFF—
modifier, this, comment, storage.modifier.js, storage.modifier.ts, storage.modifier.tsx, entity.other.attribute-name.js, entity.other.attribute-name.ts, entity.other.attribute-name.tsx, entity.other.attribute-name.html, keyword.control.flow.js—italic