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#050505
  • activityBarBadge.background#1778ff
  • badge.foreground#1778ff
  • button.background#1778ff
  • editor.background#050505ff
  • editor.foreground#bfbdb6
  • editor.lineHighlightBackground#1a1a1a
  • editor.lineHighlightBorder#0000
  • editor.selectionBackground#1778ff50
  • editor.selectionForeground#000000
  • editorCursor.foreground#fff
  • editorGroup.emptyBackground#050505
  • editorGroupHeader.tabsBackground#050505
  • editorSuggestWidget.background#000
  • editorSuggestWidget.focusHighlightForeground#1778ff
  • editorSuggestWidget.foreground#a0a0a0
  • editorSuggestWidget.selectedBackground#1778ff10
  • editorSuggestWidget.selectedForeground#1778ff
  • input.background#101010
  • input.border#202020
  • list.activeSelectionBackground#1778ffd0
  • list.focusOutline#0000
  • list.inactiveSelectionBackground#1a1a1a
  • panel.background#050505
  • panelSectionHeader.background#050505
  • panelSectionHeader.foreground#707070
  • panelTitle.activeForeground#ffffff
  • panelTitle.inactiveForeground#707070
  • quickInput.background#0a0a0a
  • quickInput.foreground#a0a0a0
  • quickInputList.focusBackground#1778ff10
  • quickInputList.focusForeground#1778ff
  • sideBar.background#050505
  • sideBar.border#202020
  • sideBarSectionHeader.background#0000
  • sideBarSectionHeader.border#202020
  • sideBarSectionHeader.foreground#707070
  • sideBarTitle.foreground#707070
  • statusBar.background#050505
  • statusBar.border#202020
  • statusBar.debuggingBackground#ff5e0010
  • statusBar.debuggingForeground#ff5e00
  • statusBar.foreground#707070
  • statusBar.noFolderBackground#202020
  • tab.activeBorderTop#202020
  • tab.border#202020
  • tab.inactiveBackground#0a0a0a
  • tab.inactiveForeground#707070
  • titleBar.activeBackground#050505
  • titleBar.inactiveBackground#050505

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#acb6bf8citalic
string, constant.other.symbol#aad94c
string.regexp, constant.character, constant.other#95e6cb
constant.numeric#d2a6ff
constant.language#d2a6ff
variable, variable.parameter.function-call#bfbdb6
variable.member#f07178
variable.language#39bae6italic
storage#ff8f40
keyword#ff8f40
keyword.operator#f29668
punctuation.separator, punctuation.terminator#bfbdb6b3
punctuation.section#bfbdb6
punctuation.accessor#f29668
punctuation.definition.template-expression#ff8f40
punctuation.section.embedded#ff8f40
meta.embedded#bfbdb6
source.java storage.type, source.haskell storage.type, source.c storage.type#59c2ff
entity.other.inherited-class#39bae6
storage.type.function#ff8f40
source.java storage.type.primitive#39bae6
entity.name.function#ffb454
variable.parameter, meta.parameter#d2a6ff
variable.function, variable.annotation, meta.function-call.generic, support.function.go#ffb454
support.function, support.macro#f07178
entity.name.import, entity.name.package#aad94c
entity.name#59c2ff
entity.name.tag, meta.tag.sgml#39bae6
support.class.component#59c2ff
punctuation.definition.tag.end, punctuation.definition.tag.begin, punctuation.definition.tag#39bae680
entity.other.attribute-name#ffb454
support.constant#f29668italic
support.type, support.class, source.go storage.type#39bae6
meta.decorator variable.other, meta.decorator punctuation.decorator, storage.type.annotation#e6b673
invalid#d95757
meta.diff, meta.diff.header#c594c5
source.ruby variable.other.readwrite#ffb454
source.css entity.name.tag, source.sass entity.name.tag, source.scss entity.name.tag, source.less entity.name.tag, source.stylus entity.name.tag#59c2ff
source.css support.type, source.sass support.type, source.scss support.type, source.less support.type, source.stylus support.type#acb6bf8c
support.type.property-name#39bae6
constant.numeric.line-number.find-in-files - match#acb6bf8c
constant.numeric.line-number.match#ff8f40
entity.name.filename.find-in-files#aad94c
message.error#d95757
markup.heading, markup.heading entity.name#aad94cbold
markup.underline.link, string.other.link#39bae6
markup.italic#f07178italic
markup.bold#f07178bold
markup.italic markup.bold, markup.bold markup.italicbold italic
markup.quote#95e6cbitalic
markup.list punctuation.definition.list.begin#ffb454
markup.inserted#7fd962
markup.changed#73b8ff
markup.deleted#f26d78
markup.strike#e6b673
text.html.markdown markup.inline.raw#f29668

Shiki preview

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

Loading...

Neue Dark - Coding Theme