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#000000
  • activityBarBadge.background#000000
  • badge.background#121212
  • badge.foreground#7ab8e1
  • button.background#3498db
  • debugExceptionWidget.background#000000
  • debugExceptionWidget.border#f92672
  • debugIcon.continueForeground#7ab8e1
  • debugIcon.disconnectForeground#f92672
  • debugIcon.pauseForeground#7ab8e1
  • debugIcon.restartForeground#a6e22e
  • debugIcon.startForeground#7ab8e1
  • debugIcon.stepBackForeground#7ab8e1
  • debugIcon.stepIntoForeground#7ab8e1
  • debugIcon.stepOutForeground#7ab8e1
  • debugIcon.stepOverForeground#7ab8e1
  • debugIcon.stopForeground#f92672
  • debugToolBar.background#212121
  • dropdown.background#121212
  • dropdown.border#121212
  • dropdown.listBackground#000000
  • editor.background#080808
  • editor.findMatchHighlightBackground#503880
  • editor.foreground#eeffff
  • editorBracketMatch.background#505354
  • editorBracketMatch.border#505354
  • editorError.foreground#f92672
  • editorGroup.emptyBackground#000000
  • editorGroupHeader.noTabsBackground#000000
  • editorGroupHeader.tabsBackground#000000
  • editorIndentGuide.activeBackground#505354
  • editorIndentGuide.background#222222
  • editorLineNumber.foreground#555555
  • editorOverviewRuler.border#121212
  • editorOverviewRuler.errorForeground#f92672
  • editorOverviewRuler.findMatchForeground#9e6ffe
  • editorOverviewRuler.warningForeground#fd971f
  • editorSuggestWidget.background#000000
  • editorSuggestWidget.border#212121
  • editorWarning.foreground#fd971f
  • editorWidget.background#000000
  • editorWidget.border#212121
  • focusBorder#3498db
  • input.background#121212
  • input.border#121212
  • inputValidation.errorBackground#f92672
  • inputValidation.errorBorder#f92672
  • inputValidation.errorForeground#000000
  • list.activeSelectionBackground#000000
  • list.activeSelectionForeground#3498db
  • list.errorForeground#f92672
  • list.filterMatchBackground#121212
  • list.filterMatchBorder#3498db
  • list.focusBackground#000000
  • list.focusForeground#7ab8e1
  • list.hoverBackground#000000
  • list.hoverForeground#7ab8e1
  • list.inactiveSelectionBackground#000000
  • list.inactiveSelectionForeground#3498db
  • list.warningForeground#9e6ffe
  • listFilterWidget.background#121212
  • listFilterWidget.noMatchesOutline#63283E
  • listFilterWidget.outline#7ab8e1
  • menu.background#000000
  • menu.selectionBackground#000000
  • menu.separatorBackground#121212
  • menubar.selectionBackground#000000
  • minimap.errorHighlight#f92672
  • minimap.findMatchHighlight#9e6ffe
  • notebook.cellBorderColor#ff0000
  • panel.background#000000
  • panel.border#000000
  • pickerGroup.border#212121
  • pickerGroup.foreground#3498db
  • quickInput.background#000000
  • quickInput.foreground#ccccc6
  • quickInputTitle.background#000000
  • scrollbarSlider.background#ffffff16
  • sideBar.background#000000
  • sideBar.foreground#666666
  • sideBarSectionHeader.background#000000
  • sideBarTitle.foreground#888888
  • statusBar.background#000000
  • statusBar.debuggingBackground#3498db
  • tab.border#000000
  • tab.inactiveBackground#000000
  • terminal.ansiBlack#1b1d1e
  • terminal.ansiBlue#3498db
  • terminal.ansiBrightBlack#505354
  • terminal.ansiBrightBlue#7ab8e1
  • terminal.ansiBrightCyan#a3babf
  • terminal.ansiBrightGreen#beed5f
  • terminal.ansiBrightMagenta#9e6ffe
  • terminal.ansiBrightRed#ff669d
  • terminal.ansiBrightWhite#f8f8f2
  • terminal.ansiBrightYellow#e6db74
  • terminal.ansiCyan#5e7175
  • terminal.ansiGreen#a6e22e
  • terminal.ansiMagenta#9e6ffe
  • terminal.ansiRed#f92672
  • terminal.ansiWhite#ccccc6
  • terminal.ansiYellow#fd971f
  • terminal.background#000000
  • textLink.activeForeground#3498db
  • textLink.foreground#3498db
  • titleBar.activeBackground#000000
  • titleBar.inactiveBackground#000000

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#575757
variable#FFFFFF
keyword#3498DB
keyword.operator.comparison#CCCCC6
keyword.operator.assignment#CCCCC6
keyword.operator.arithmetic#CCCCC6
constant.numeric#FD971F
constant#FD971F
constant.language#FD971F
constant.language.boolean#FD971F
string#BEED5F
constant.character.escape, string source#A6E22E
meta.preprocessor#5E7175
keyword.control.import#5E7175
entity.name.function, keyword.other.name-of-parameter.objc#FFFFFF
entity.name.type#F92672
storage.type#7AB8E1
storage.modifier#569CD6
entity.other.inherited-class#FF669D
variable.parameter
storage.type.method#70727E
meta.section entity.name.section, declaration.section entity.name.section
support.function#DCDCDC
support.class, support.type#DCDCDC
support.constant#FFFFFF
support.variable#DCDCDC
keyword.operator.js#687687
invalid#ff3333
invalid.deprecated.trailing-whitespace
text source, string.unquoted
meta.xml-processing, declaration.xml-processing#68685B
meta.doctype, declaration.doctype#808080
meta.doctype.DTD, declaration.doctype.DTD
meta.tag, declaration.tag#808080
entity.name.tag#569CD6
entity.other.attribute-name#92CAF4
string.quoted.double.xml, string.quoted.double.html#C8C8C8
markup.heading#569CD6
markup.quote#DCDCDC
markup.list#DCDCDC
meta.selector.css entity.name.tag#F92672 bold
meta.selector.css entity.other.attribute-name.tag.pseudo-class#D7BA7D
meta.selector.css entity.other.attribute-name.id#A6E22E
meta.selector.css entity.other.attribute-name.class#3498DB
support.type.property-name.css#DCDCDC
meta.property-group support.constant.property-value.css, meta.property-value support.constant.property-value.css#FFFFFF
meta.preprocessor.at-rule keyword.control.at-rule#87CEFA
source.cs comment.block.documentation.source.cs meta.tag.xml, source.cs comment.block.documentation.source.cs meta.tag.xml entity.name.tag.localname.xml, source.cs comment.block.documentation.source.cs meta.tag.xml entity.other.attribute-name#608B4E
markup.deleted.git_gutter#F92672
markup.inserted.git_gutter#A6E22E
markup.changed.git_gutter#967EFB
markup.ignored.git_gutter#565656
markup.untracked.git_gutter#565656
git.changes.x
git.changes.+
git.changes.-
Hardcore by Daniel Probst - VS Code Theme