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#0b1015
  • activityBar.foreground#97a7c8ff
  • activityBarBadge.background#ff8d03
  • button.hoverBackground#ff8d03
  • debugToolBar.background#111820
  • editor.background#0b1015
  • editor.findMatchBackground#2c3e50
  • editor.foreground#f5f5f5
  • editor.lineHighlightBackground#14344B
  • editor.lineHighlightBorder#14344B
  • editor.selectionBackground#3d4148
  • editorCursor.foreground#ff8d03
  • editorError.border#FB467B
  • editorGroup.background#0b1015
  • editorGroup.border#05080a
  • editorGroupHeader.noTabsBackground#0b1015
  • editorGroupHeader.tabsBackground#0b1015
  • editorGutter.addedBackground#56D6D6
  • editorGutter.deletedBackground#FB467B
  • editorGutter.modifiedBackground#FFCC00
  • editorHoverWidget.background#14344B
  • editorIndentGuide.background#2c3e50
  • editorOverviewRuler.border#0b1015
  • editorRuler.foreground#2c3e50
  • editorSuggestWidget.background#13232E
  • editorSuggestWidget.selectedBackground#14344B
  • editorWarning.border#FFCC00
  • editorWhitespace.foreground#2c3e50
  • editorWidget.background#111820
  • focusBorder#2c3e50
  • input.background#05080a
  • input.border#ff8d03
  • list.activeSelectionBackground#111820
  • list.activeSelectionForeground#ff8d03
  • list.focusBackground#111820
  • list.highlightForeground#ff8d03
  • list.hoverBackground#111820
  • list.inactiveSelectionBackground#111820
  • notification.background#111820
  • panel.background#05080a
  • panel.border#05080a
  • panelTitle.activeForeground#ff8d03
  • panelTitle.inactiveForeground#97a7c8ff
  • scrollbar.shadow#05080a
  • scrollbarSlider.hoverBackground#2c3e50
  • sideBar.background#080b0f
  • sideBarSectionHeader.background#080b0f
  • statusBar.background#111820
  • statusBar.debuggingBackground#111820
  • statusBar.foreground#97a7c8ff
  • tab.activeBackground#111820
  • tab.activeBorder#ff8d03
  • tab.activeForeground#ff8d03
  • tab.border#0b1015
  • tab.inactiveBackground#0b1015
  • tab.inactiveForeground#97a7c8ff
  • tab.unfocusedActiveBorder#97a7c8ff
  • titleBar.activeBackground#111820
  • titleBar.inactiveForeground#111820
  • widget.shadow#000000

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#f5f5f5
string#ff4495
constant.language.boolean#b254ff
constant.numeric#FFCB5B
variable, support.variable, support.class, support.constant, meta.definition.variable entity.name.function#ff7eff
keyword, modifier, variable.language.this, support.type.object, constant.language#b254ffitalic
entity.name.function, support.function#FFCB5B
storage.type, storage.modifier#b254ff
support.module, support.node#ff7effitalic
support.type#54edff
entity.name.type, entity.other.inherited-class#54edff
comment#8175d2italic
entity.name.type.class#54edffunderline
variable.object.property#54edff
meta.definition.method entity.name.function#54edff
meta.function entity.name.function#54edff
template.expression.begin, template.expression.end#b254ff
entity.name.tag.yaml#ff7eff
meta.object-literal.key, meta.object-literal.key string, support.type.property-name.json#ff7eff
constant.language.json#b254ff
entity.other.attribute-name.class#b254ff
entity.other.attribute-name.id#ff4495
source.css entity.name.tag#54edff
meta.tag, punctuation.definition.tag#b254ff
entity.name.tag#ff7eff
entity.other.attribute-name#FFCB5Bitalic
markup.heading#b254ff
text.html.markdown meta.link.inline, meta.link.reference#ff7eff
text.html.markdown beginning.punctuation.definition.list#b254ff
markup.italic#ff7effitalic
markup.bold#ff7effbold
markup.bold markup.italic, markup.italic markup.bold#ff7effitalic bold
keyword.other.definition.ini#ff7eff
entity.name.section.group-title.ini#b254ff
source.cs meta.class.identifier storage.type#54edffunderline
source.cs meta.method.identifier entity.name.function#54edff
source.cs meta.method-call meta.method, source.cs entity.name.function#FFCB5B
source.cs storage.type#54edff
source.cs meta.method.return-type#54edff
source.cs meta.preprocessor#8175d2
source.cs entity.name.type.namespace#f5f5f5
token.info-token#6796e6
token.warn-token#cd9731
token.error-token#f44747
token.debug-token#b267e6

Shiki preview

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

Loading...