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.activeBackground#141414
  • activityBar.background#000000
  • activityBar.foreground#d7e3fc
  • breadcrumb.background#0d0d0d
  • breadcrumb.focusForeground#8c8c8c
  • breadcrumb.foreground#595959
  • debugToolBar.background#0d0d0d
  • descriptionForeground#d7e3fc
  • editor.background#0d0d0d
  • editor.inactiveSelectionBackground#8c8c8c50
  • editor.selectionBackground#8c8c8c50
  • editorCursor.foreground#d7e3fc
  • editorGroup.border#0d0d0d
  • editorGroup.dropBackground#26262670
  • editorGroup.emptyBackground#0d0d0d
  • editorGroupHeader.border#0a0e14
  • editorGroupHeader.tabsBackground#0d0d0d
  • editorGroupHeader.tabsBorder#0d0d0d
  • editorHoverWidget.background#1a1a1a
  • editorHoverWidget.border#000000
  • editorHoverWidget.foreground#fafafa
  • editorLineNumber.foreground#595959
  • editorSuggestWidget.background#1a1a1a
  • editorSuggestWidget.border#000000
  • editorSuggestWidget.foreground#f5f5f5
  • editorSuggestWidget.highlightForeground#1890ff
  • editorSuggestWidget.selectedBackground#262626
  • editorWidget.background#1f1f1f
  • editorWidget.border#0d0d0d
  • editorWidget.foreground#f5f5f5
  • editorWidget.resizeBorder#262626
  • errorForeground#ff3333
  • focusBorder#262626
  • foreground#8c8c8c
  • icon.foreground#f5f5f5
  • menu.background#0d0d0d
  • menu.border#000000
  • menu.foreground#d7e3fc
  • menu.selectionBackground#262626
  • menu.selectionBorder#262626
  • menu.selectionForeground#d7e3fc
  • menu.separatorBackground#595959
  • menubar.selectionBackground#262626
  • menubar.selectionBorder#262626
  • menubar.selectionForeground#d7e3fc
  • notificationCenter.border#000000
  • notificationCenterHeader.background#0d0d0d
  • notificationCenterHeader.foreground#d7e3fc
  • notifications.background#0d0d0d
  • notifications.foreground#d7e3fc
  • notificationToast.border#0d0d0d
  • panel.background#0d0d0d
  • panel.border#0d0d0d
  • panelInput.border#595959
  • panelTitle.activeBorder#8c8c8c
  • panelTitle.activeForeground#d7e3fc
  • panelTitle.inactiveForeground#8c8c8c
  • peekView.border#434343
  • pickerGroup.border#434343
  • pickerGroup.foreground#595959
  • quickInput.background#0d0d0d
  • quickInput.foreground#d7e3fc
  • selection.background#273747fd
  • sideBar.background#0d0d0d
  • sideBar.border#0d0d0d
  • sideBar.foreground#d7e3fc
  • sideBarSectionHeader.background#0d0d0d
  • sideBarSectionHeader.border#0d0d0d
  • sideBarTitle.foreground#d7e3fc
  • statusBar.background#0d0d0d
  • statusBar.border#0d0d0d
  • statusBar.debuggingBackground#FA9672
  • statusBar.debuggingBorder#0d0d0d
  • statusBar.debuggingForeground#1f1f1f
  • statusBar.foreground#d7e3fc
  • statusBar.noFolderBackground#0d0d0d
  • statusBar.noFolderBorder#0d0d0d
  • statusBarItem.activeBackground#fa541c
  • tab.activeBackground#000000
  • tab.activeBorderTop#f0f0f0
  • tab.activeForeground#f5f5f5
  • tab.hoverBackground#0d0d0d80
  • tab.inactiveBackground#0d0d0d
  • tab.unfocusedActiveBackground#00000090
  • tab.unfocusedHoverBackground#0d0d0d80
  • terminal.ansiBrightWhite
  • terminal.ansiBrightYellow
  • terminal.ansiCyan#69c0ff
  • terminal.ansiGreen#69c0ff
  • terminal.ansiMagenta#95de64
  • terminal.ansiRed#FA9672
  • terminal.ansiWhite#FA9672
  • terminal.ansiYellow#FA9672
  • terminal.foreground#d7e3fc
  • terminal.selectionBackground#ffffff50
  • terminalCursor.background#d7e3fc
  • terminalCursor.foreground#d7e3fc
  • textBlockQuote.background#1f0707
  • titleBar.activeBackground#0d0d0d
  • titleBar.activeForeground#d7e3fc
  • titleBar.border#0d0d0d
  • titleBar.inactiveBackground#0d0d0d
  • titleBar.inactiveForeground#8c8c8c

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
source#d7e3fc—
—#d7e3fc—
comment#626a73italic
string, constant.other.symbol#d7e3fc—
string.regexp, constant.character, constant.other#5cdbd3—
constant.numeric#ffd666—
constant.language#ffd666—
variable#d7e3fc—
variable.member#69c0ff—
variable.language#69c0ffitalic
storage#95de64—
keyword#95de64—
keyword.operator#FA9672—
punctuation.separator, punctuation.terminator#FA9672—
punctuation.definition.string, punctuation.definition.variable, punctuation.definition.string, punctuation.definition.parameters, punctuation.definition.string, punctuation.definition.array, punctuation.definition.entity, punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.separator.inheritance, comment.line.keyword.punctuation.yard, comment.line.punctuation.yard, punctuation.section.function.ruby, punctuation.separator.object.ruby#FA7F55—
keyword.other.unit.percentage, keyword.other.unit.px, keyword.other.unit.rem, keyword.other.unit.em#FA7F55—
none#FA9672—
meta.separator#FA9672—
punctuation.accessor#FA9672—
source.java storage.type, source.haskell storage.type, source.c storage.type#59c2ff—
entity.other.inherited-class#39bae6—
storage.type.function#d7e3fc—
source.java storage.type.primitive#39bae6—
entity.name.function#FA9672—
variable.parameter, meta.parameter#ffffb8—
variable.function, variable.annotation, meta.function-call.generic, support.function.go#d7e3fc—
support.function, support.macro#69c0ff—
entity.name.import, entity.name.package#d7e3fc—
entity.name#d7e3fc—
entity.name.tag, meta.tag.sgml#69c0ff—
punctuation.definition.tag.end, punctuation.definition.tag.begin, punctuation.definition.tag#40a9ff80—
entity.other.attribute-name#FA9672—
support.constant#FA9672italic
support.type, support.class, source.go storage.type#69c0ff—
meta.decorator variable.other, meta.decorator punctuation.decorator, storage.type.annotation#ffd591—
invalid#ff4d4f—
meta.diff, meta.diff.header#c594c5—
source.ruby variable.other.readwrite#FA9672—
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#8c8c8c—
support.type.property-name#d9d9d9normal
constant.numeric.line-number.find-in-files - match#595959—
constant.numeric.line-number.match#95de64—
entity.name.filename.find-in-files#d7e3fc—
message.error#52c41a—
markup.heading, markup.heading entity.name#8c8c8cbold
markup.underline.link, string.other.link#40a9ff—
markup.italic#40a9ffitalic
markup.bold#40a9ffbold
markup.italic markup.bold, markup.bold markup.italic—bold italic
markup.raw——
markup.raw.inline——
meta.separator#626a73bold
markup.quote#b5f5ecitalic
markup.list punctuation.definition.list.begin#ff7a45—
markup.inserted#91b362—
markup.changed#bae7ff—
markup.deleted#efdbff—
markup.strike#ffc069—
markup.table#39bae6—
text.html.markdown markup.inline.raw#ffc069—
text.html.markdown meta.dummy.line-break#8c8c8c—
punctuation.definition.markdown#8c8c8c—
antyu by jevill - VS Code Theme