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#ADB6C2
  • activityBar.foreground#69727E
  • activityBarBadge.background#B2BBC7
  • activityBarBadge.foreground#69727E
  • button.background#69727E
  • button.foreground#B8C1CD
  • debugToolBar.background#B8C1CD
  • dropdown.background#B8C1CD
  • dropdown.foreground#69727E
  • editor.background#BCC5D1
  • editor.findMatchBackground#8ba2c0
  • editor.findMatchHighlightBackground#8ba2c060
  • editor.findMatchHighlightForeground#B8C1CDF0
  • editor.foreground#9BA4B0
  • editor.lineHighlightBorder#38414D1a
  • editor.rangeHighlightBackground#89929E1a
  • editor.selectionBackground#8ba2c060
  • editorError.foreground#c08b8b
  • editorGroup.dropBackground#69727E80
  • editorGroup.focusedEmptyBorder#909AA6
  • editorGroupHeader.tabsBackground#B2BBC7
  • editorGutter.addedBackground#7399ca
  • editorGutter.deletedBackground#7399ca
  • editorGutter.modifiedBackground#7399ca
  • editorHoverWidget.background#B8C1CD
  • editorLineNumber.activeForeground#8F98A4
  • editorLineNumber.foreground#69727E4d
  • editorMarkerNavigation.background#B8C1CD
  • editorWarning.foreground#c0bb8b
  • editorWidget.background#B8C1CD
  • focusBorder#828B97
  • foreground#69727E
  • gitDecoration.addedResourceForeground#7399ca
  • gitDecoration.conflictingResourceForeground#9495aa
  • gitDecoration.deletedResourceForeground#c08b8b
  • gitDecoration.ignoredResourceForeground#A8B1BD
  • gitDecoration.modifiedResourceForeground#8ba2c0
  • gitDecoration.stageDeletedResourceForeground#c4a0a0
  • gitDecoration.stageModifiedResourceForeground#bab19a
  • gitDecoration.untrackedResourceForeground#7399ca
  • input.background#B8C1CD
  • input.foreground#69727E
  • inputOption.activeBorder#B8C1CD
  • list.activeSelectionBackground#D1DAE633
  • list.activeSelectionForeground#6C7682
  • list.dropBackground#B8C1CD
  • list.focusBackground#B8C1CD80
  • list.focusOutline#38414D1a
  • list.hoverBackground#D1DAE61a
  • list.inactiveSelectionBackground#D1DAE633
  • menu.selectionForeground#69727E
  • notificationsErrorIcon.foreground#8ba2c0
  • notificationsInfoIcon.foreground#8ba2c0
  • notificationsWarningIcon.foreground#8ba2c0
  • panel.background#B8C1CD
  • panel.border#909AA6
  • panelTitle.activeBorder#909AA6
  • panelTitle.activeForeground#909AA6
  • panelTitle.inactiveForeground#69727E70
  • peekView.border#909AA6
  • peekViewEditor.background#B8C1CD
  • peekViewEditor.matchHighlightBackground#7399ca
  • peekViewResult.background#B8C1CD
  • peekViewResult.matchHighlightBackground#7399ca
  • peekViewResult.selectionBackground#7399ca
  • peekViewTitle.background#B8C1CD
  • pickerGroup.border#38414D1a
  • progressBar.background#7399ca
  • selection.background#8ba2c060
  • sideBar.background#B8C1CD
  • sideBar.foreground#8A94A0
  • sideBarSectionHeader.background#ADB6C2
  • statusBar.background#B8C1CD
  • statusBar.debuggingBackground#B8C1CD
  • statusBar.foreground#69727E
  • statusBar.noFolderBackground#B8C1CD
  • statusBarItem.activeBackground#69727E80
  • statusBarItem.hoverBackground#69727E1a
  • tab.activeBackground#BCC5D1
  • tab.activeBorder#7399ca
  • tab.activeForeground#69727E
  • tab.border#D1DAE633
  • tab.inactiveBackground#B8C1CDA0
  • tab.inactiveForeground#69727E
  • terminal.border#7399ca
  • terminal.selectionBackground#8ba2c060
  • textLink.foreground#8ba2c0
  • titleBar.activeBackground#B8C1CD
  • titleBar.activeForeground#69727E

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
Global settings#A1AAB6
string#8ba2c0
constant.language.false, constant.language.true#AAB3BF
constant.numeric#707985
variable, support.variable, support.class, support.constant, meta.definition.variable entity.name.function#929BA7
variable.parameter#A2ABB7
keyword, modifier, variable.language.this, support.type.object, constant.language#99A3AF
entity.name.function, support.function#7F8894
storage.type, storage.modifier#A3ACB8
support.module, support.node#A7B0BCitalic
support.type#828B97
entity.name.type, entity.other.inherited-class, storage.type.java, entity.name.type.class.java, support.type.primitive#8ba2c0
comment#A4ADB9
entity.name.type.class#7F8894
variable.object.property, meta.field.declaration entity.name.function#828B97
meta.definition.method entity.name.function#707985
meta.function entity.name.function#707985
template.expression.begin, template.expression.end, punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end#929BA7
entity.name.scope-resolution, entity.name.namespace#8B94A0
meta.embedded, source.groovy.embedded, meta.template.expression#A8B2BE
meta.object-literal.key, meta.object-literal.key string, support.type.property-name.json#828B97
constant.language.json#8D97A3
entity.other.attribute-name.class#7F8894
entity.other.attribute-name.id#7F8894
source.css entity.name.tag#7F8894
meta.tag, punctuation.definition.tag#828B97
entity.name.tag#A7B0BC
entity.other.attribute-name#69727E
markup.heading#858E9A
text.html.markdown meta.link.inline, meta.link.reference#858E9A
text.html.markdown beginning.punctuation.definition.list#858E9A
markup.italic#A7B0BCitalic
markup.bold#A7B0BCbold
markup.bold markup.italic, markup.italic markup.bold#A7B0BCitalic bold
markup.fenced_code.block.markdown punctuation.definition.markdown#858E9A
markup.inline.raw.string.markdown#858E9A
keyword.other.definition.ini#858E9A
entity.name.section.group-title.ini#858E9A
source.cpp meta.preprocessor, keyword.control.directive#828B97
source.cpp meta.preprocessor.pragma.cpp#69727E
keyword.other.unit.user-defined.cpp#828B97
source.cpp meta.preprocessor, entity.name.function.preprocessor.cpp#8bbac0
variable.other.property, variable.other.enummember#9EA7B3
storage.modifier.import.java#8ba2c0
support.type.property-name.toml#69727E
support.type.property-name.table.toml#9FA9B5
variable.source.cmake#87919D
, storage.source.cmake#87919D
Global settings#A8B2BE