Skip to main content
CodingTheme

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
meta.jsx.children#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#FF652F
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.html, 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.jsitalic

Shiki preview

TypeScript sample highlighted with this variant's colors and tokenColors.

Loading...