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.background#1a1559
  • activityBarBadge.background#FF8C00
  • activityBarBadge.foreground#ffffff
  • badge.background#FF8C00
  • badge.foreground#ffffff
  • button.background#FF8C00
  • button.foreground#ffffff
  • debugToolBar.background#1a1559
  • dropdown.background#1e1866
  • editor.background#130f40
  • editor.foreground#00AB9F
  • editor.lineHighlightBorder#FFFFFF1a
  • editor.rangeHighlightBackground#FFFFFF0d
  • editorGroup.dropBackground#FF8C0080
  • editorGroup.focusedEmptyBorder#FF8C00
  • editorGroupHeader.tabsBackground#16124c
  • editorHoverWidget.background#16124c
  • editorLineNumber.activeForeground#FF8C00
  • editorLineNumber.foreground#FFFFFF4d
  • editorMarkerNavigation.background#16124c
  • editorWidget.background#16124c
  • focusBorder#FF8C00
  • foreground#00AB9F
  • input.background#1e1866
  • inputOption.activeBorder#FF8C00
  • list.activeSelectionBackground#FF8C0080
  • list.activeSelectionForeground#FF8C00
  • list.dropBackground#FF8C0080
  • list.focusBackground#FF8C0080
  • list.focusForeground#FF8C00
  • list.highlightForeground#FF8C00
  • list.hoverBackground#4834d4
  • list.inactiveSelectionBackground#FFFFFF33
  • panel.background#130f40
  • panel.border#130f40
  • panelTitle.activeBorder#FF8C00
  • panelTitle.inactiveForeground#00AB9F80
  • peekView.border#FF8C00
  • peekViewEditor.background#0f0c33
  • peekViewResult.background#16124c
  • peekViewTitle.background#130f40
  • pickerGroup.border#FFFFFF1a
  • selection.background#00AB9F
  • sideBar.background#16124c
  • sideBarSectionHeader.background#1a1559
  • statusBar.background#00AB9F
  • statusBar.debuggingBackground#00AB9F
  • statusBar.debuggingForeground#fff
  • statusBar.noFolderBackground#0f0c33
  • statusBarItem.activeBackground#FF8C0080
  • statusBarItem.hoverBackground#FFFFFF1a
  • statusBarItem.remoteBackground#FF8C00
  • statusBarItem.remoteForeground#FF8C00
  • tab.activeBorder#FF8C00
  • tab.activeModifiedBorder#FF8C00
  • tab.border#00AB9F
  • tab.inactiveBackground#1a1559
  • tab.inactiveModifiedBorder#995400
  • tab.unfocusedActiveModifiedBorder#cc7000
  • tab.unfocusedInactiveModifiedBorder#995400
  • titleBar.activeBackground#00AB9F

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
Global settings#00AB9F
string#00AB9F
constant.character.escape, text.html constant.character.entity.named, punctuation.definition.entity.html#00AB9F
constant.language.boolean#FF8C00
constant.numeric#FF8C00
variable, support.variable, support.class, support.constant, meta.definition.variable entity.name.function#ffd200
keyword, modifier, variable.language.this, support.type.object, constant.language#FF8C00
entity.name.function, support.function#FF8C00
storage.type, storage.modifier#FF8C00
support.module, support.node#ffd200italic
support.type#00AB9F
entity.name.type, entity.other.inherited-class#00AB9F
comment#5b1fa0italic
entity.name.type.class#00AB9Funderline
variable.object.property, meta.field.declaration entity.name.function#00AB9F
meta.definition.method entity.name.function#00AB9F
meta.function entity.name.function#00AB9F
template.expression.begin, template.expression.end, punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end#FF8C00
meta.embedded, source.groovy.embedded, meta.template.expression#00AB9F
entity.name.tag.yaml#ffd200
meta.object-literal.key, meta.object-literal.key string, support.type.property-name.json#ffd200
constant.language.json#FF8C00
entity.other.attribute-name.class#FF8C00
entity.other.attribute-name.id#00AB9F
source.css entity.name.tag#00AB9F
meta.tag, punctuation.definition.tag#FF8C00
entity.name.tag#ffd200
entity.other.attribute-name#FF8C00
markup.heading#FF8C00
text.html.markdown meta.link.inline, meta.link.reference#ffd200
text.html.markdown beginning.punctuation.definition.list#FF8C00
markup.italic#ffd200italic
markup.bold#ffd200bold
markup.bold markup.italic, markup.italic markup.bold#ffd200italic bold
markup.fenced_code.block.markdown punctuation.definition.markdown#00AB9F
markup.inline.raw.string.markdown#00AB9F
keyword.other.definition.ini#ffd200
entity.name.section.group-title.ini#FF8C00
source.cs meta.class.identifier storage.type#00AB9Funderline
source.cs meta.method.identifier entity.name.function#00AB9F
source.cs meta.method-call meta.method, source.cs entity.name.function#FF8C00
source.cs storage.type#00AB9F
source.cs meta.method.return-type#00AB9F
source.cs meta.preprocessor#392dc0
source.cs entity.name.type.namespace#00AB9F
Global settings#00AB9F
Seven Dev theme by Thalhatou Yahya - VS Code Theme