Skip to main content
CodingTheme

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#000000
  • activityBarBadge.background#399EF4
  • activityBarBadge.foreground#ffffff
  • badge.background#399EF4
  • badge.foreground#ffffff
  • button.background#399EF4
  • button.foreground#ffffff
  • debugToolBar.background#000000
  • dropdown.background#000000
  • editor.background#000000
  • editor.foreground#ffa500
  • editor.lineHighlightBorder#FFFFFF1a
  • editor.rangeHighlightBackground#FFFFFF0d
  • editorGroup.dropBackground#399EF480
  • editorGroup.focusedEmptyBorder#399EF4
  • editorGroupHeader.tabsBackground#000000
  • editorHoverWidget.background#000000
  • editorLineNumber.activeForeground#399EF4
  • editorLineNumber.foreground#FFFFFF4c
  • editorMarkerNavigation.background#000000
  • editorWidget.background#000000
  • focusBorder#399EF4
  • foreground#ffa500
  • input.background#000000
  • inputOption.activeBorder#399EF4
  • list.activeSelectionBackground#399EF480
  • list.activeSelectionForeground#FFFFFF
  • list.dropBackground#399EF480
  • list.focusBackground#399EF480
  • list.focusForeground#FFFFFF
  • list.highlightForeground#399EF4
  • list.hoverBackground#FFFFFF1a
  • list.inactiveSelectionBackground#FFFFFF33
  • panel.background#000000
  • panel.border#FFFFFF1a
  • panelTitle.activeBorder#ffa50080
  • panelTitle.inactiveForeground#ffa50080
  • peekView.border#399EF4
  • peekViewEditor.background#000000
  • peekViewResult.background#000000
  • peekViewTitle.background#000000
  • pickerGroup.border#FFFFFF1a
  • selection.background#399EF4
  • sideBar.background#000000
  • sideBarSectionHeader.background#000000
  • statusBar.background#000000
  • statusBar.debuggingBackground#399EF4
  • statusBar.debuggingForeground#ffffff
  • statusBar.noFolderBackground#000000
  • statusBarItem.activeBackground#399EF480
  • statusBarItem.hoverBackground#FFFFFF1a
  • statusBarItem.remoteBackground#399EF4
  • statusBarItem.remoteForeground#ffffff
  • tab.activeBorder#399EF4
  • tab.activeModifiedBorder#399EF4
  • tab.border#00000033
  • tab.inactiveBackground#000000
  • tab.inactiveModifiedBorder#027ec3
  • tab.unfocusedActiveModifiedBorder#028edb
  • tab.unfocusedInactiveModifiedBorder#027ec3
  • titleBar.activeBackground#000000

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
string#DA6771
constant.character.escape, text.html constant.character.entity.named, punctuation.definition.entity.html#139aa9
constant.language.boolean#399EF4
constant.numeric#FFF099
variable, support.variable, support.class, support.constant, meta.definition.variable entity.name.function#04edff
keyword, modifier, variable.language.this, support.type.object, constant.language#399EF4
entity.name.function, support.function#FFF099
storage.type, storage.modifier#399EF4
support.module, support.node#04edffitalic
support.type#4EB071
entity.name.type, entity.other.inherited-class#4EB071
comment#000000italic
entity.name.type.class#4EB071underline
variable.object.property, meta.field.declaration entity.name.function#4EB071
meta.definition.method entity.name.function#4EB071
meta.function entity.name.function#4EB071
template.expression.begin, template.expression.end, punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end#399EF4
meta.embedded, source.groovy.embedded, meta.template.expression#ffa500
entity.name.tag.yaml#04edff
meta.object-literal.key, meta.object-literal.key string, support.type.property-name.json#04edff
constant.language.json#399EF4
entity.other.attribute-name.class#399EF4
entity.other.attribute-name.id#DA6771
source.css entity.name.tag#4EB071
meta.tag, punctuation.definition.tag#399EF4
entity.name.tag#04edff
entity.other.attribute-name#FFF099
markup.heading#399EF4
text.html.markdown meta.link.inline, meta.link.reference#04edff
text.html.markdown beginning.punctuation.definition.list#399EF4
markup.italic#04edffitalic
markup.bold#04edffbold
markup.bold markup.italic, markup.italic markup.bold#04edff
markup.fenced_code.block.markdown punctuation.definition.markdown#DA6771
markup.inline.raw.string.markdown#DA6771
keyword.other.definition.ini#04edff
entity.name.section.group-title.ini#399EF4
source.cs meta.class.identifier storage.type#4EB071underline
source.cs meta.method.identifier entity.name.function#4EB071
source.cs meta.method-call meta.method, source.cs entity.name.function#FFF099
source.cs storage.type#4EB071
source.cs meta.method.return-type#4EB071
source.cs meta.preprocessor#000000
source.cs entity.name.type.namespace#ffa500

Shiki preview

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

Loading...

Hacker Theme by Vedula Venkata Adithya - VS Code Theme