Skip to main content
Coding Theme

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.activeBorder#0d0457
  • activityBar.background#08013b
  • activityBarBadge.background#3507b3
  • activityBarBadge.foreground#ffffff
  • badge.background#3507b3
  • badge.foreground#ffffff
  • button.background#2e0a7dc3
  • button.foreground#ffffff
  • debugToolBar.background#08013b
  • dropdown.background#08013B
  • editor.background#08013b
  • editor.foreground#FFFFFF
  • editor.lineHighlightBorder#FFFFFF1a
  • editor.rangeHighlightBackground#FFFFFF0d
  • editor.wordHighlightBackground#5737d8
  • editorCursor.foreground#381fc3
  • editorError.foreground#ff0000
  • editorGroup.dropBackground#2f3dff80
  • editorGroup.focusedEmptyBorder#2f66ff
  • editorGroupHeader.tabsBackground#08013b
  • editorHoverWidget.background#08013b
  • editorLineNumber.activeForeground#0d0b68
  • editorLineNumber.foreground#FFFFFF4d
  • editorMarkerNavigation.background#08013b
  • editorWidget.background#08013b
  • editorWidget.border#08013b
  • focusBorder#32007e
  • foreground#FFFFFF
  • input.background#130e3b
  • inputOption.activeBorder#2f00a6
  • list.activeSelectionBackground#4e2fff80
  • list.activeSelectionForeground#ffffff
  • list.dropBackground#7543ff80
  • list.focusBackground#6d2fff80
  • list.focusForeground#FFFFFF
  • list.highlightForeground#200688
  • list.hoverBackground#FFFFFF1a
  • list.inactiveSelectionBackground#FFFFFF33
  • notifications.background#08013b
  • panel.background#08013b
  • panel.border#08013b
  • panelTitle.activeBorder#FFFFFF80
  • panelTitle.inactiveForeground#FFFFFF80
  • peekView.border#632fff
  • peekViewEditor.background#0d0715
  • peekViewResult.background#08013b
  • peekViewTitle.background#08013b
  • pickerGroup.border#FFFFFF1a
  • sash.hoverBorder#2f1987
  • scrollbarSlider.background#3c085bad
  • selection.background#6a2fff
  • sideBar.background#08013b
  • sideBarSectionHeader.background#08013b
  • statusBar.background#08013b
  • statusBar.debuggingBackground#08013b
  • statusBar.noFolderBackground#08013b
  • statusBarItem.activeBackground#08013b
  • statusBarItem.hoverBackground#08013b
  • statusBarItem.remoteBackground#08013b
  • statusBarItem.remoteForeground#08013b
  • tab.activeBackground#08013b
  • tab.activeBorder#1b078f
  • tab.activeModifiedBorder#4c00ff
  • tab.border#00000000
  • tab.inactiveBackground#08013b
  • tab.inactiveModifiedBorder#441c99
  • tab.lastPinnedBorder#570ca2
  • tab.unfocusedActiveModifiedBorder#4c00ff
  • tab.unfocusedInactiveModifiedBorder#441c99
  • titleBar.activeBackground#08013b

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
string#3d19ca
constant.character.escape, text.html constant.character.entity.named, punctuation.definition.entity.html#2a12a7
constant.language.boolean#6a2fff
constant.numeric#0015ff
variable, support.variable, support.class, support.constant, meta.definition.variable, entity.name.function#886aff
variable.other.constant#6551ff
keyword, modifier, variable.language.this, support.type.object, constant.language#3533b9
keyword.control.flow.js#5d00ff
entity.name.function, support.function#2400c6
storage.type, storage.modifier, keyword.operator.expression#592fff
support.type#5d00ff
entity.name.type, entity.other.inherited-class#5200c5
variable.object.property, meta.field.declaration entity.name.function#3733b9
meta.definition.method entity.name.function#3733b9
meta.function, entity.name.function#3733b9
template.expression.begin, template.expression.end, punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end#4013c6
meta.embedded, source.groovy.embedded, meta.template.expression#FFFFFF
entity.name.tag.yaml#2e0a90
comment#3c0c9b
meta.object-literal.key, meta.object-literal.key string, support.type.property-name.json#7b5eee
constant.language.json#552fff
entity.other.attribute-name.class#552fff
entity.other.attribute-name.id#3114a7
source.css entity.name.tag#685eee
meta.tag, punctuation.definition.tag#39119d
entity.name.tag#4e26d2
entity.other.attribute-name#6600ff
markup.heading#5f2fff
text.html.markdown meta.link.inline, meta.link.reference#6b46ff
text.html.markdown beginning.punctuation.definition.list#712fff
markup.fenced_code.block.markdown punctuation.definition.markdown#3e14a7
markup.inline.raw.string.markdown#3e14a7
punctuation.definition.heading.markdown, punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown, punctuation.definition.quote.begin.markdown, punctuation.definition.list.begin.markdown, markup.fenced_code.block.markdown, meta.separator.markdown#4035a0
keyword.other.definition.ini#6246ff
entity.name.section.group-title.ini#552fff
source.cs meta.method.identifier entity.name.function#3733b9
source.cs meta.method-call meta.method, source.cs entity.name.function#4400ff
source.cs storage.type#4533b9
source.cs meta.method.return-type#3733b9
source.cs meta.preprocessor#1b2151
source.cs entity.name.type.namespace#ffffff
Co-Dark Blue by Bisher Almasri - VS Code Theme