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#1A1A1A
  • activityBar.foreground#F1F1F1
  • activityBarBadge.background#5C78FF
  • activityBarBadge.foreground#F1F1F1
  • badge.background#5C78FF
  • badge.foreground#F1F1F1
  • button.background#5C78FF
  • button.foreground#F1F1F1
  • diffEditor.insertedTextBackground#7129FF33
  • diffEditor.removedTextBackground#A52AFF33
  • dropdown.background#1A1A1A
  • dropdown.border#666666
  • editor.background#1A1A1A
  • editor.findMatchBackground#5C78FF
  • editor.findMatchHighlightBackground#5C78FF
  • editor.foreground#F1F1F1
  • editor.lineHighlightBackground#121212
  • editor.selectionBackground#FFFFFF33
  • editor.selectionHighlightBackground#FFFFFF33
  • editorCursor.foreground#FFFFFF
  • editorGroupHeader.tabsBackground#1A1A1A
  • editorHoverWidget.background#1A1A1A
  • editorHoverWidget.border#666666
  • editorIndentGuide.background1#666666
  • editorLineNumber.foreground#666666
  • editorLink.activeForeground#5C78FF
  • editorSuggestWidget.background#1A1A1A
  • editorSuggestWidget.border#666666
  • editorSuggestWidget.selectedBackground#5C78FF
  • editorWarning.foreground#BA5AFF
  • editorWhitespace.foreground#666666
  • editorWidget.background#1A1A1A
  • editorWidget.border#666666
  • focusBorder#5C78FF
  • foreground#F1F1F1
  • input.background#1A1A1A
  • input.border#666666
  • input.placeholderForeground#666666
  • list.activeSelectionBackground#5C78FF
  • list.activeSelectionForeground#F1F1F1
  • list.focusBackground#5C78FF
  • list.hoverBackground#121212
  • list.inactiveSelectionBackground#5C78FF
  • list.inactiveSelectionForeground#F1F1F1
  • list.warningForeground#BA5AFF
  • menu.background#1A1A1A
  • menu.foreground#F1F1F1
  • menu.selectionBackground#5C78FF
  • menu.selectionForeground#F1F1F1
  • menubar.selectionBackground#5C78FF
  • menubar.selectionForeground#F1F1F1
  • notificationCenterHeader.background#1A1A1A
  • panel.background#1A1A1A
  • panel.border#666666
  • panelTitle.activeBorder#5C78FF
  • peekViewEditor.background#1A1A1A
  • peekViewEditor.matchHighlightBackground#5C78FF
  • peekViewResult.background#1A1A1A
  • peekViewResult.matchHighlightBackground#5C78FF
  • pickerGroup.border#666666
  • scrollbar.shadow#000000
  • scrollbarSlider.activeBackground#5C78FF
  • scrollbarSlider.background#666666
  • scrollbarSlider.hoverBackground#5C78FF
  • sideBar.background#1A1A1A
  • sideBar.foreground#F1F1F1
  • sideBarSectionHeader.background#1A1A1A
  • statusBar.background#1A1A1A
  • statusBar.foreground#F1F1F1
  • statusBar.noFolderBackground#1A1A1A
  • statusBarItem.hoverBackground#5C78FF
  • tab.activeBackground#1A1A1A
  • tab.activeBorder#5C78FF
  • tab.activeForeground#F1F1F1
  • tab.border#666666
  • tab.inactiveBackground#1A1A1A
  • tab.inactiveForeground#666666
  • terminal.ansiBlack#121212
  • terminal.ansiBlue#2B4FFF
  • terminal.ansiBrightBlack#666666
  • terminal.ansiBrightBlue#5C78FF
  • terminal.ansiBrightCyan#5AC8FF
  • terminal.ansiBrightGreen#905AFF
  • terminal.ansiBrightMagenta#5EA2FF
  • terminal.ansiBrightRed#BA5AFF
  • terminal.ansiBrightWhite#FFFFFF
  • terminal.ansiBrightYellow#685AFF
  • terminal.ansiCyan#28B9FF
  • terminal.ansiGreen#7129FF
  • terminal.ansiMagenta#2883FF
  • terminal.ansiRed#A52AFF
  • terminal.ansiWhite#F1F1F1
  • terminal.ansiYellow#3D2AFF

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#28B9FF
constant#5EA2FF
entity.name#5C78FF
keyword#BA5AFF
storage#BA5AFF
string#2883FF
support.function#905AFF
variable#F1F1F1
entity.other.inherited-class#5C78FF
entity.other.attribute-name#5C78FF
entity.other.attribute-name.id#5C78FF
entity.other.attribute-name.class#5C78FF
entity.other.attribute-name.pseudo-class#5C78FF
entity.other.attribute-name.pseudo-element#5C78FF
entity.other.attribute-name.parent-selector#5C78FF
meta.selector#5C78FF
meta.preprocessor#BA5AFF
meta.preprocessor.string#2883FF
meta.preprocessor.numeric#2883FF
meta.diff#BA5AFF
meta.diff.header#BA5AFF
markup.heading#5C78FF
markup.boldbold
markup.italicitalic
markup.quote#28B9FF
markup.list#28B9FF
markup.raw#28B9FF
markup.deleted#BA5AFF
markup.inserted#905AFF
markup.changed#2883FF
punctuation.definition.comment#28B9FF
punctuation.definition.string#2883FF
punctuation.definition.variable#F1F1F1
punctuation.definition.list#28B9FF
punctuation.definition.bold#BA5AFF
punctuation.definition.italic#BA5AFF
punctuation.definition.raw#BA5AFF
punctuation.definition.heading#5C78FF
punctuation.definition.variable#F1F1F1
punctuation.definition.entity#5C78FF
punctuation.definition.heading#5C78FF
punctuation.definition.inserted#905AFF
punctuation.definition.deleted#BA5AFF
punctuation.definition.changed#2883FF
punctuation.definition.italic#BA5AFF
punctuation.definition.bold#BA5AFF
punctuation.definition.string#2883FF
punctuation.definition.variable#F1F1F1
punctuation.definition.raw#BA5AFF
punctuation.definition.entity#5C78FF
punctuation.definition.heading#5C78FF
punctuation.definition.inserted#905AFF
punctuation.definition.deleted#BA5AFF
punctuation.definition.changed#2883FF
punctuation.definition.italic#BA5AFF
punctuation.definition.bold#BA5AFF
punctuation.definition.string#2883FF
punctuation.definition.variable#F1F1F1
punctuation.definition.raw#BA5AFF
punctuation.definition.entity#5C78FF
punctuation.definition.heading#5C78FF
punctuation.definition.inserted#905AFF
punctuation.definition.deleted#BA5AFF
punctuation.definition.changed#2883FF
punctuation.definition.italic#BA5AFF
punctuation.definition.string.begin#2883FF
punctuation.definition.string.end#2883FF
punctuation.definition.variable#F1F1F1
punctuation.definition.raw#BA5AFF
punctuation.definition.entity#5C78FF
punctuation.definition.heading#5C78FF
punctuation.definition.inserted#905AFF
punctuation.definition.deleted#BA5AFF
punctuation.definition.changed#2883FF
punctuation.definition.italic#BA5AFF
punctuation.definition.bold#BA5AFF
punctuation.definition.string#2883FF
punctuation.definition.variable#F1F1F1
punctuation.definition.raw#BA5AFF
punctuation.definition.entity#5C78FF
punctuation.definition.heading#5C78FF
punctuation.definition.inserted#905AFF
punctuation.definition.deleted#BA5AFF
punctuation.definition.changed#2883FF
source#F1F1F1
source.css#F1F1F1
source.css.embedded#F1F1F1
source.gfm#F1F1F1
source.go#F1F1F1
source.ini#F1F1F1
source.java#F1F1F1
source.js#F1F1F1
source.json#F1F1F1
source.json.comments#28B9FF
source.less#F1F1F1
source.php#F1F1F1
source.python#F1F1F1
source.ruby#F1F1F1
source.sass#F1F1F1
source.scss#F1F1F1
source.shell#F1F1F1
source.sql#F1F1F1
source.toml#F1F1F1
source.ts#F1F1F1
source.tsx#F1F1F1
source.yaml#F1F1F1
source.yaml.comments#28B9FF
source.coffee#F1F1F1
source.coffee.embedded#F1F1F1
source.css.less#F1F1F1
source.css.scss#F1F1F1
source.diff#BA5AFF
source.diff.header#BA5AFF
source.gfm#F1F1F1
source.go#F1F1F1
source.ini#F1F1F1
source.java#F1F1F1
source.js#F1F1F1
source.json#F1F1F1
source.json.comments#28B9FF
source.less#F1F1F1
source.php#F1F1F1
source.python#F1F1F1
source.ruby#F1F1F1
source.sass#F1F1F1
source.scss#F1F1F1
source.shell#F1F1F1
source.sql#F1F1F1
source.toml#F1F1F1
source.ts#F1F1F1
source.tsx#F1F1F1
source.yaml#F1F1F1
source.yaml.comments#28B9FF
source.coffee#F1F1F1
source.coffee.embedded#F1F1F1
source.css.less#F1F1F1
source.css.scss#F1F1F1
source.diff#BA5AFF
source.diff.header#BA5AFF
source.gfm#F1F1F1
source.go#F1F1F1
source.ini#F1F1F1
source.java#F1F1F1
source.js#F1F1F1
source.json#F1F1F1
source.json.comments#28B9FF
source.less#F1F1F1
source.php#F1F1F1
source.python#F1F1F1
source.ruby#F1F1F1
source.sass#F1F1F1
source.scss#F1F1F1
source.shell#F1F1F1
source.sql#F1F1F1
source.toml#F1F1F1
source.ts#F1F1F1
source.tsx#F1F1F1
source.yaml#F1F1F1
source.yaml.comments#28B9FF
source.coffee#F1F1F1
source.coffee.embedded#F1F1F1
source.css.less#F1F1F1
source.css.scss#F1F1F1
Neon Dark High Contrast Theme by Zuygui - VS Code Theme