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#9ab5a2
  • activityBar.dropBackground#7c928380
  • activityBar.foreground#262e25
  • activityBarBadge.background#7c9283
  • activityBarBadge.foreground#0e1e0e
  • badge.background#7c9283
  • badge.foreground#0e1e0e
  • button.background#293d29
  • button.foreground#000000
  • debugToolBar.background#a5c4ad
  • dropdown.background#9ab5a2
  • editor.background#b0d0b8
  • editor.foreground#262e25
  • editor.lineHighlightBorder#FFFFFF1a
  • editor.rangeHighlightBackground#FFFFFF0d
  • editor.selectionBackground#7c9283
  • editor.selectionHighlightBackground#7c9283
  • editorGroup.dropBackground#293d2980
  • editorGroup.focusedEmptyBorder#293d29
  • editorGroupHeader.tabsBackground#b0d0b8
  • editorHoverWidget.background#b0d0b8
  • editorLineNumber.activeForeground#0e1e0eff
  • editorLineNumber.foreground#315b31dd
  • editorMarkerNavigation.background#b0d0b8
  • editorWidget.background#b0d0b8
  • focusBorder#293d29
  • foreground#262e25
  • input.background#9ab5a2
  • inputOption.activeBorder#293d29
  • list.activeSelectionBackground#7c928380
  • list.activeSelectionForeground#FFFFFF
  • list.dropBackground#293d2980
  • list.focusBackground#293d2980
  • list.focusForeground#FFFFFF
  • list.highlightForeground#293d29
  • list.hoverBackground#FFFFFF1a
  • list.inactiveSelectionBackground#FFFFFF33
  • panel.background#b0d0b8
  • panel.border#FFFFFF1a
  • panelTitle.activeBorder#262e2580
  • panelTitle.inactiveForeground#262e2580
  • peekView.border#293d29
  • peekViewEditor.background#a5c4ad
  • peekViewResult.background#b0d0b8
  • peekViewTitle.background#b0d0b8
  • pickerGroup.border#FFFFFF1a
  • selection.background#7c9283
  • sideBar.background#a5c4ad
  • sideBar.foreground#262e25
  • sideBarSectionHeader.background#9ab5a2
  • statusBar.background#a5c4ad
  • statusBar.debuggingBackground#293d29
  • statusBar.debuggingForeground#000000
  • statusBar.foreground#262e25
  • statusBar.noFolderBackground#a5c4ad
  • statusBarItem.activeBackground#293d2980
  • statusBarItem.hoverBackground#FFFFFF1a
  • statusBarItem.remoteBackground#293d29
  • statusBarItem.remoteForeground#000000
  • tab.activeBorder#293d29
  • tab.activeModifiedBorder#293d29
  • tab.border#00000033
  • tab.inactiveBackground#a5c4ad
  • tab.inactiveModifiedBorder#908900
  • tab.unfocusedActiveModifiedBorder#c0b700
  • tab.unfocusedInactiveModifiedBorder#908900
  • titleBar.activeBackground#a5c4ad

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
Global settings#262e25
string#2b342a
constant.character.escape, text.html constant.character.entity.named, punctuation.definition.entity.html#293d29
constant.language.boolean#293d29
constant.numeric#445046
variable.instance, variable.other.instance, variable.readwrite.instance, variable.other.readwrite.instance, variable.other.property, meta.definition.variable, support.constant, support.variable#2b342a
variable, support.class, entity.name.function#262e25
keyword, modifier, variable.language.this, support.type.object, constant.language#293d29
entity.name.function, support.function#0e1e0e
storage.type, storage.modifier#0e1e0e
support.module, support.node#293d29italic
support.type#3e5f39
entity.name.type, entity.other.inherited-class#3e5f39
comment#5b5f59italic
entity.name.type.class#3e5f39underline
variable.object.property, meta.field.declaration entity.name.function#3e5f39
meta.definition.method entity.name.function#0e1e0e
meta.function entity.name.function#0e1e0e
template.expression.begin, template.expression.end, punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end#293d29
meta.embedded, source.groovy.embedded, meta.template.expression#262e25
entity.name.tag.yaml#293d29
meta.object-literal.key, meta.object-literal.key string, support.type.property-name.json#293d29
constant.language.json#293d29
entity.other.attribute-name.class#293d29
entity.other.attribute-name.id#2b342a
source.css entity.name.tag#3e5f39
meta.tag, punctuation.definition.tag#293d29
entity.name.tag#293d29
entity.other.attribute-name#0e1e0e
markup.heading#293d29
text.html.markdown meta.link.inline, meta.link.reference#293d29
text.html.markdown beginning.punctuation.definition.list#293d29
markup.italic#293d29italic
markup.bold#293d29bold
markup.bold markup.italic, markup.italic markup.bold#293d29italic bold
markup.fenced_code.block.markdown punctuation.definition.markdown#2b342a
markup.inline.raw.string.markdown#2b342a
keyword.other.definition.ini#293d29
entity.name.section.group-title.ini#293d29
source.cs meta.class.identifier storage.type#3e5f39underline
source.cs meta.method.identifier entity.name.function#3e5f39
source.cs meta.method-call meta.method, source.cs entity.name.function#0e1e0e
source.cs storage.type#3e5f39
source.cs meta.method.return-type#3e5f39
source.cs meta.preprocessor#0e1e0e
source.cs entity.name.type.namespace#262e25
Global settings#262e25

Shiki preview

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

Loading...