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#B1ADC2
  • activityBar.foreground#6D697E
  • activityBarBadge.background#B6B2C7
  • activityBarBadge.foreground#6D697E
  • button.background#6D697E
  • button.foreground#BCB8CD
  • debugToolBar.background#BCB8CD
  • dropdown.background#BCB8CD
  • dropdown.foreground#6D697E
  • editor.background#C0BCD1
  • editor.findMatchBackground#958bc0
  • editor.findMatchHighlightBackground#958bc060
  • editor.findMatchHighlightForeground#BCB8CDF0
  • editor.foreground#9F9BB0
  • editor.lineHighlightBorder#3C384D1a
  • editor.rangeHighlightBackground#8D899E1a
  • editor.selectionBackground#958bc060
  • editorError.foreground#c08b8b
  • editorGroup.dropBackground#6D697E80
  • editorGroup.focusedEmptyBorder#9490A6
  • editorGroupHeader.tabsBackground#B6B2C7
  • editorGutter.addedBackground#9083cc
  • editorGutter.deletedBackground#9083cc
  • editorGutter.modifiedBackground#9083cc
  • editorHoverWidget.background#BCB8CD
  • editorLineNumber.activeForeground#938FA4
  • editorLineNumber.foreground#6D697E4d
  • editorMarkerNavigation.background#BCB8CD
  • editorWarning.foreground#c0bb8b
  • editorWidget.background#BCB8CD
  • focusBorder#868297
  • foreground#6D697E
  • gitDecoration.addedResourceForeground#9083cc
  • gitDecoration.conflictingResourceForeground#9495aa
  • gitDecoration.deletedResourceForeground#c08b8b
  • gitDecoration.ignoredResourceForeground#ACA8BD
  • gitDecoration.modifiedResourceForeground#958bc0
  • gitDecoration.stageDeletedResourceForeground#c4a0a0
  • gitDecoration.stageModifiedResourceForeground#bab19a
  • gitDecoration.untrackedResourceForeground#9083cc
  • input.background#BCB8CD
  • input.foreground#6D697E
  • inputOption.activeBorder#BCB8CD
  • list.activeSelectionBackground#D5D1E633
  • list.activeSelectionForeground#706C82
  • list.dropBackground#BCB8CD
  • list.focusBackground#BCB8CD80
  • list.focusOutline#3C384D1a
  • list.hoverBackground#D5D1E61a
  • list.inactiveSelectionBackground#D5D1E633
  • menu.selectionForeground#6D697E
  • notificationsErrorIcon.foreground#958bc0
  • notificationsInfoIcon.foreground#958bc0
  • notificationsWarningIcon.foreground#958bc0
  • panel.background#BCB8CD
  • panel.border#9490A6
  • panelTitle.activeBorder#9490A6
  • panelTitle.activeForeground#9490A6
  • panelTitle.inactiveForeground#6D697E70
  • peekView.border#9490A6
  • peekViewEditor.background#BCB8CD
  • peekViewEditor.matchHighlightBackground#9083cc
  • peekViewResult.background#BCB8CD
  • peekViewResult.matchHighlightBackground#9083cc
  • peekViewResult.selectionBackground#9083cc
  • peekViewTitle.background#BCB8CD
  • pickerGroup.border#3C384D1a
  • progressBar.background#9083cc
  • selection.background#958bc060
  • sideBar.background#BCB8CD
  • sideBar.foreground#8E8AA0
  • sideBarSectionHeader.background#B1ADC2
  • statusBar.background#BCB8CD
  • statusBar.debuggingBackground#BCB8CD
  • statusBar.foreground#6D697E
  • statusBar.noFolderBackground#BCB8CD
  • statusBarItem.activeBackground#6D697E80
  • statusBarItem.hoverBackground#6D697E1a
  • tab.activeBackground#C0BCD1
  • tab.activeBorder#9083cc
  • tab.activeForeground#6D697E
  • tab.border#D5D1E633
  • tab.inactiveBackground#BCB8CDA0
  • tab.inactiveForeground#6D697E
  • terminal.border#9083cc
  • terminal.selectionBackground#958bc060
  • textLink.foreground#958bc0
  • titleBar.activeBackground#BCB8CD
  • titleBar.activeForeground#6D697E

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
Global settings#A5A1B6
string#958bc0
constant.language.false, constant.language.true#AEAABF
constant.numeric#747085
variable, support.variable, support.class, support.constant, meta.definition.variable entity.name.function#9692A7
variable.parameter#A6A2B7
keyword, modifier, variable.language.this, support.type.object, constant.language#9D99AF
entity.name.function, support.function#837F94
storage.type, storage.modifier#A7A3B8
support.module, support.node#ABA7BCitalic
support.type#868297
entity.name.type, entity.other.inherited-class, storage.type.java, entity.name.type.class.java, support.type.primitive#958bc0
comment#A8A4B9
entity.name.type.class#837F94
variable.object.property, meta.field.declaration entity.name.function#868297
meta.definition.method entity.name.function#747085
meta.function entity.name.function#747085
template.expression.begin, template.expression.end, punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end#9692A7
entity.name.scope-resolution, entity.name.namespace#8F8BA0
meta.embedded, source.groovy.embedded, meta.template.expression#ACA8BE
meta.object-literal.key, meta.object-literal.key string, support.type.property-name.json#868297
constant.language.json#918DA3
entity.other.attribute-name.class#837F94
entity.other.attribute-name.id#837F94
source.css entity.name.tag#837F94
meta.tag, punctuation.definition.tag#868297
entity.name.tag#ABA7BC
entity.other.attribute-name#6D697E
markup.heading#89859A
text.html.markdown meta.link.inline, meta.link.reference#89859A
text.html.markdown beginning.punctuation.definition.list#89859A
markup.italic#ABA7BCitalic
markup.bold#ABA7BCbold
markup.bold markup.italic, markup.italic markup.bold#ABA7BCitalic bold
markup.fenced_code.block.markdown punctuation.definition.markdown#89859A
markup.inline.raw.string.markdown#89859A
keyword.other.definition.ini#89859A
entity.name.section.group-title.ini#89859A
source.cpp meta.preprocessor, keyword.control.directive#868297
source.cpp meta.preprocessor.pragma.cpp#6D697E
keyword.other.unit.user-defined.cpp#868297
source.cpp meta.preprocessor, entity.name.function.preprocessor.cpp#b58bc0
variable.other.property, variable.other.enummember#A29EB3
storage.modifier.import.java#958bc0
support.type.property-name.toml#6D697E
support.type.property-name.table.toml#A39FB5
variable.source.cmake#8B879D
, storage.source.cmake#8B879D
Global settings#ACA8BE
cybercore theme & utilities by krn intelligence - VS Code Theme