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#036B52
  • activityBar.border#036B52
  • activityBar.dropBackground#036B5280
  • activityBar.foreground#FFFFFF
  • activityBarBadge.background#036B52
  • activityBarBadge.foreground#ffffff
  • badge.background#036B52
  • badge.foreground#ffffff
  • breadcrumb.background#FFFFFF
  • breadcrumb.focusForeground#3D495C
  • breadcrumb.foreground#3D495C
  • button.background#006dfb
  • button.foreground#FFFFFF
  • debugToolBar.background#ffffff
  • dropdown.background#ffffff
  • editor.background#FFFFFF
  • editor.foreground#29313D
  • editor.lineHighlightBorder#FFFFFF1a
  • editor.rangeHighlightBackground#FFFFFF0d
  • editorGroup.border#C5C9CE
  • editorGroup.dropBackground#036B5280
  • editorGroup.focusedEmptyBorder#036B52
  • editorGroupHeader.tabsBackground#ffffff
  • editorHoverWidget.background#ffffff
  • editorLineNumber.activeForeground#036B52
  • editorLineNumber.foreground#32A791
  • editorMarkerNavigation.background#ffffff
  • editorWidget.background#ffffff
  • focusBorder#036B52
  • foreground#29313D
  • input.background#ffffff
  • inputOption.activeBorder#036B52
  • list.activeSelectionBackground#2fc18c
  • list.activeSelectionForeground#023031
  • list.dropBackground#036B5280
  • list.focusBackground#036B5280
  • list.focusForeground#036B52
  • list.highlightForeground#036B52
  • list.hoverBackground#FFFFFF1a
  • list.inactiveSelectionBackground#FFFFFF33
  • panel.background#ffffff
  • panel.border#E1E5EB
  • panelTitle.activeBorder#29313D80
  • panelTitle.activeForeground#3D495C
  • panelTitle.inactiveForeground#29313D80
  • peekView.border#036B52
  • peekViewEditor.background#cccccc
  • peekViewResult.background#ffffff
  • peekViewTitle.background#FFFFFF
  • pickerGroup.border#FFFFFF1a
  • selection.background#036B52
  • sideBar.background#F0F2F5
  • sideBar.border#C5C9CE
  • sideBar.foreground#3D495C
  • sideBarSectionHeader.background#FFFFFF
  • sideBarSectionHeader.foreground#3D495C
  • sideBarTitle.foreground#3D495C
  • statusBar.background#41197f
  • statusBar.debuggingBackground#036B52
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#FFFFFF
  • statusBar.noFolderBackground#cccccc
  • statusBarItem.activeBackground#036B5280
  • statusBarItem.hoverBackground#FFFFFF1a
  • statusBarItem.remoteBackground#036B52
  • statusBarItem.remoteForeground#ffffff
  • tab.activeBackground#036B52
  • tab.activeBorder#036B52
  • tab.activeForeground#FFFFFF
  • tab.activeModifiedBorder#036B52
  • tab.border#C5C9CE
  • tab.inactiveBackground#F0F2F5
  • tab.inactiveForeground#3D495C
  • tab.inactiveModifiedBorder#014031
  • tab.unfocusedActiveModifiedBorder#025541
  • tab.unfocusedInactiveModifiedBorder#014031
  • titleBar.activeBackground#cccccc
  • welcomePage.buttonBackground#F0F2F5
  • welcomePage.buttonHoverBackground#E1E5EB

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
Global settings#29313D
string#006dfb
constant.character.escape, text.html constant.character.entity.named, punctuation.definition.entity.html#00a3ff
constant.language.boolean#036B52
constant.numeric#3D495C
variable, support.variable, support.class, support.constant, meta.definition.variable entity.name.function#04a07b
keyword, modifier, variable.language.this, support.type.object, constant.language#036B52
entity.name.function, support.function#3D495C
storage.type, storage.modifier#036B52
support.module, support.node#04a07bitalic
support.type#41197f
entity.name.type, entity.other.inherited-class#41197f
comment#B01726italic
entity.name.type.class#41197funderline
variable.object.property, meta.field.declaration entity.name.function#41197f
meta.definition.method entity.name.function#41197f
meta.function entity.name.function#41197f
template.expression.begin, template.expression.end, punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end#036B52
meta.embedded, source.groovy.embedded, meta.template.expression#29313D
entity.name.tag.yaml#04a07b
meta.object-literal.key, meta.object-literal.key string, support.type.property-name.json#04a07b
constant.language.json#036B52
entity.other.attribute-name.class#036B52
entity.other.attribute-name.id#006dfb
source.css entity.name.tag#41197f
meta.tag, punctuation.definition.tag#036B52
entity.name.tag#04a07b
entity.other.attribute-name#3D495C
markup.heading#036B52
text.html.markdown meta.link.inline, meta.link.reference#04a07b
text.html.markdown beginning.punctuation.definition.list#036B52
markup.italic#04a07bitalic
markup.bold#04a07bbold
markup.bold markup.italic, markup.italic markup.bold#04a07bitalic bold
markup.fenced_code.block.markdown punctuation.definition.markdown#006dfb
markup.inline.raw.string.markdown#006dfb
keyword.other.definition.ini#04a07b
entity.name.section.group-title.ini#036B52
source.cs meta.class.identifier storage.type#41197funderline
source.cs meta.method.identifier entity.name.function#41197f
source.cs meta.method-call meta.method, source.cs entity.name.function#3D495C
source.cs storage.type#41197f
source.cs meta.method.return-type#41197f
source.cs meta.preprocessor#ffffff
source.cs entity.name.type.namespace#29313D
Global settings#29313D

Shiki preview

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

Loading...

Trybe Theme by Trybe - VS Code Theme