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#e0e0e0
  • activityBar.foreground#525252
  • activityBarBadge.background#cccccc
  • activityBarBadge.foreground#525252
  • button.background#313131
  • button.foreground#e4e4e4
  • debugToolBar.background#e4e4e4
  • dropdown.background#e4e4e4
  • dropdown.foreground#525252
  • editor.background#ebebeb
  • editor.findMatchBackground#aaaaaa
  • editor.findMatchHighlightBackground#aaaaaa60
  • editor.findMatchHighlightForeground#e4e4e4F0
  • editor.foreground#a5a5a5
  • editor.lineHighlightBorder#0000001a
  • editor.rangeHighlightBackground#8888881a
  • editor.selectionBackground#d3d3d360
  • editorError.foreground#d1d1d1
  • editorGroup.dropBackground#9b9b9b80
  • editorGroup.focusedEmptyBorder#949494
  • editorGroupHeader.tabsBackground#e7e7e7
  • editorGutter.addedBackground#d1d1d1
  • editorGutter.deletedBackground#d1d1d1
  • editorGutter.modifiedBackground#d1d1d1
  • editorHoverWidget.background#e4e4e4
  • editorLineNumber.activeForeground#919191
  • editorLineNumber.foreground#5252524d
  • editorMarkerNavigation.background#e4e4e4
  • editorWarning.foreground#d1d1d1
  • editorWidget.background#e4e4e4
  • focusBorder#7c7c7c
  • foreground#525252
  • gitDecoration.addedResourceForeground#d1d1d1
  • gitDecoration.conflictingResourceForeground#d1d1d1
  • gitDecoration.deletedResourceForeground#d1d1d1
  • gitDecoration.ignoredResourceForeground#bbbbbb
  • gitDecoration.modifiedResourceForeground#aaaaaa
  • gitDecoration.stageDeletedResourceForeground#d1d1d1
  • gitDecoration.stageModifiedResourceForeground#d1d1d1
  • gitDecoration.untrackedResourceForeground#d1d1d1
  • input.background#e4e4e4
  • input.foreground#525252
  • inputOption.activeBorder#e4e4e4
  • list.activeSelectionBackground#ffffff33
  • list.activeSelectionForeground#d1d1d1
  • list.dropBackground#e4e4e4
  • list.errorForeground#000000
  • list.focusBackground#e4e4e480
  • list.focusOutline#0000001a
  • list.hoverBackground#ffffff1a
  • list.inactiveSelectionBackground#ffffff33
  • menu.selectionForeground#525252
  • notificationsErrorIcon.foreground#aaaaaa
  • notificationsInfoIcon.foreground#aaaaaa
  • notificationsWarningIcon.foreground#aaaaaa
  • panel.background#e4e4e4
  • panel.border#949494
  • panelTitle.activeBorder#949494
  • panelTitle.activeForeground#949494
  • panelTitle.inactiveForeground#52525270
  • peekView.border#949494
  • peekViewEditor.background#e4e4e4
  • peekViewEditor.matchHighlightBackground#d1d1d1
  • peekViewResult.background#e4e4e4
  • peekViewResult.matchHighlightBackground#d1d1d1
  • peekViewResult.selectionBackground#d1d1d1
  • peekViewTitle.background#e4e4e4
  • pickerGroup.border#0000001a
  • progressBar.background#d1d1d1
  • selection.background#aaaaaa60
  • sideBar.background#e4e4e4
  • sideBar.foreground#8a8a8a
  • sideBarSectionHeader.background#e0e0e0
  • statusBar.background#e4e4e4
  • statusBar.debuggingBackground#e4e4e4
  • statusBar.foreground#525252
  • statusBar.noFolderBackground#e4e4e4
  • statusBarItem.activeBackground#52525280
  • statusBarItem.hoverBackground#5252521a
  • tab.activeBackground#ebebeb
  • tab.activeBorder#d1d1d1
  • tab.activeForeground#525252
  • tab.border#ffffff33
  • tab.inactiveBackground#e4e4e4A0
  • tab.inactiveForeground#525252
  • terminal.border#d1d1d1
  • terminal.selectionBackground#dadada60
  • textLink.foreground#aaaaaa
  • titleBar.activeBackground#e4e4e4
  • titleBar.activeForeground#525252

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
Global settings#afafaf
string#aaaaaa
constant.language.false, constant.language.true#bebebe
constant.numeric#5e5e5e
variable, support.variable, support.class, support.constant, meta.definition.variable entity.name.function#979797
variable.parameter#b1b1b1
keyword, modifier, variable.language.this, support.type.object, constant.language#a3a3a3
entity.name.function, support.function#777777
storage.type, storage.modifier#b3b3b3
support.module, support.node#bababaitalic
support.type#7c7c7c
entity.name.type, entity.other.inherited-class, storage.type.java, entity.name.type.class.java, support.type.primitive#aaaaaa
comment#b4b4b4
entity.name.type.class#777777
variable.object.property, meta.field.declaration entity.name.function#7c7c7c
meta.definition.method entity.name.function#5e5e5e
meta.function entity.name.function#5e5e5e
template.expression.begin, template.expression.end, punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end#979797
entity.name.scope-resolution, entity.name.namespace#8b8b8b
meta.embedded, source.groovy.embedded, meta.template.expression#bcbcbc
meta.object-literal.key, meta.object-literal.key string, support.type.property-name.json#7c7c7c
constant.language.json#8f8f8f
entity.other.attribute-name.class#777777
entity.other.attribute-name.id#777777
source.css entity.name.tag#777777
meta.tag, punctuation.definition.tag#7c7c7c
entity.name.tag#bababa
entity.other.attribute-name#525252
markup.heading#818181
text.html.markdown meta.link.inline, meta.link.reference#818181
text.html.markdown beginning.punctuation.definition.list#818181
markup.italic#bababaitalic
markup.bold#babababold
markup.bold markup.italic, markup.italic markup.bold#bababaitalic bold
markup.fenced_code.block.markdown punctuation.definition.markdown#818181
markup.inline.raw.string.markdown#818181
keyword.other.definition.ini#818181
entity.name.section.group-title.ini#818181
source.cpp meta.preprocessor, keyword.control.directive#7c7c7c
source.cpp meta.preprocessor.pragma.cpp#525252
keyword.other.unit.user-defined.cpp#7c7c7c
source.cpp meta.preprocessor, entity.name.function.preprocessor.cpp#666666
variable.other.property, variable.other.enummember#aaaaaa
storage.modifier.import.java#aaaaaa
support.type.property-name.toml#525252
support.type.property-name.table.toml#adadad
variable.source.cmake#858585
, storage.source.cmake#858585
Global settings#bcbcbc
cybercore theme & utilities by krn intelligence - VS Code Theme