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.activeBorder#ff2cff
  • activityBar.background#001b38
  • activityBar.dropBorder#ff2cff
  • activityBar.foreground#004cff
  • activityBar.inactiveForeground#00a2ff66
  • activityBarBadge.background#2979ff
  • activityBarBadge.foreground#00c8ff
  • badge.background#282828
  • badge.foreground#01ff05
  • button.background#00025a
  • button.foreground#2580ff
  • dropdown.background#00004f
  • dropdown.border#fb00ff
  • dropdown.foreground#007bff
  • editor.background#000221
  • editor.findMatchBackground#ffffff
  • editor.findMatchHighlightBackground#0023eaca
  • editor.foreground#005eff
  • editor.hoverHighlightBackground#00346840
  • editor.inactiveSelectionBackground#02194c80
  • editor.lineHighlightBackground#0060f16e
  • editor.selectionBackground#136800
  • editor.selectionHighlightBackground#ffe18f
  • editorCursor.foreground#00b3ff
  • editorGroup.border#e600ff
  • editorGroupHeader.tabsBackground#001d3d
  • editorGroupHeader.tabsBorder#ff00bb
  • editorGutter.addedBackground#66ff00
  • editorGutter.background#000000
  • editorGutter.commentRangeForeground#ffffff
  • editorGutter.deletedBackground#ff000d
  • editorGutter.foldingControlForeground#f70000
  • editorGutter.modifiedBackground#00c8ff
  • editorHint.foreground#ffffff
  • editorHoverWidget.background#080308
  • editorIndentGuide.background#00325b
  • editorSuggestWidget.highlightForeground#2979ff
  • editorWhitespace.foreground#4d0042
  • editorWidget.background#070054
  • gitDecoration.addedResourceForeground#00ff2f
  • gitDecoration.conflictingResourceForeground#ff0008
  • gitDecoration.deletedResourceForeground#ff2600
  • gitDecoration.ignoredResourceForeground#3d003ceb
  • gitDecoration.modifiedResourceForeground#fffb00
  • gitDecoration.renamedResourceForeground#00ff2f
  • gitDecoration.stageDeletedResourceForeground#ff2600
  • gitDecoration.stageModifiedResourceForeground#fffb00
  • gitDecoration.submoduleResourceForeground#0084ff
  • gitDecoration.untrackedResourceForeground#00ff2f
  • input.background#330032
  • list.activeSelectionBackground#000561
  • list.activeSelectionForeground#2979ff
  • list.highlightForeground#ff2cff
  • list.hoverBackground#000000
  • list.inactiveSelectionBackground#0000b048
  • list.inactiveSelectionForeground#2979ff
  • menu.foreground#630062
  • menu.selectionBackground#280032
  • menu.selectionForeground#00a6ff
  • menu.separatorBackground#fff2f2
  • menubar.selectionBackground#47005a5d
  • menubar.selectionForeground#0095ff
  • panel.background#000126
  • panel.border#bb00ffdb
  • panel.dropBorder#0088ff
  • panelTitle.activeForeground#00a2ff
  • panelTitle.inactiveForeground#00a2ff99
  • pickerGroup.foreground#ff2cff
  • progressBar.background#001436
  • scrollbarSlider.activeBackground#005eff50
  • scrollbarSlider.background#9d00b5b3
  • scrollbarSlider.hoverBackground#dd00ffb3
  • sideBar.background#05002b
  • sideBar.foreground#9000bc
  • sideBarSectionHeader.background#000000
  • statusBar.background#16202b
  • statusBar.foreground#0099ff
  • tab.activeBackground#000924
  • tab.activeBorder#ff2cff
  • tab.activeForeground#860098
  • tab.activeModifiedBorder#00aaff
  • tab.border#162228
  • tab.hoverBackground#0f5100
  • tab.hoverForeground#ffffff
  • tab.inactiveBackground#00053e93
  • tab.inactiveForeground#a5009280
  • tab.inactiveModifiedBorder#00aaff80
  • tab.unfocusedActiveBackground#11005f
  • terminal.background#000126
  • terminal.border#e100fffe
  • terminal.foreground#0055ff
  • terminal.selectionBackground#2a5212
  • textLink.foreground#2979ff
  • titleBar.activeBackground#2300a2
  • titleBar.activeForeground#ff2cff

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
variable.parameter.function#f87000
variable.parameter#0077ff
comment, punctuation.definition.comment#bb8432bf italic
none#ffffff
keyword.operator#3cff00
keyword#B45EFF
meta.function-call#00ccff
meta.class#0099ff
variable.other#00CCFF
variable.name#cc00ff
entity.name.function, meta.require, support.function.any-method#FFEB00
support.class, entity.name.class, entity.name.type.class#00ffd5
meta.class#A8BDD5
keyword.other.special-method#00FFAE
storage#B366FF
support.function#FF7F29
string, constant.other.symbol, entity.other.inherited-class#64FE2E
constant.numeric#FFCC00
none#FFCC00
none#FF692E
constant#d69d00
entity.name.tag#FE7000
entity.other.attribute-name#B45EFF
entity.other.attribute-name.id, punctuation.definition.entity#FF2EB9
meta.selector#DF5CFF
none#FF692E
markup.heading punctuation.definition.heading, entity.name.section#FE0099
keyword.other.unit#FFCC00
markup.bold, punctuation.definition.bold#FFCC00
markup.italic, punctuation.definition.italic#DF5CFF
markup.raw.inline#4DFF00
string.other.link, punctuation.definition.string.end.markdown#FF8000
meta.link#FF692E
markup.list#FF8000
markup.quote#FF692E
meta.separator#ffffff
markup.inserted#4DFF00
markup.deleted#FF8000
markup.changed#DF5CFF
constant.other.color#FFCC00
string.regexp#eeff00
constant.character.escape#00e1ff
punctuation.section.embedded, variable.interpolation#ffffff
invalid.illegal#000000
invalid.broken#000000
invalid.deprecated#000000
invalid.unimplemented#000000
source.json meta.structure.dictionary.json string.quoted.double.json#bf00ff
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json#00CCFF
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json string.quoted.double.json#FF8000
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json#4DFF00
support.type.property-name.json#A349F9
support.type.property-name.json punctuation#A349F9
text.html.laravel-blade source.php.embedded.line.html entity.name.tag.laravel-blade#DF5CFF
text.html.laravel-blade source.php.embedded.line.html support.constant.laravel-blade#DF5CFF
meta.function-call variable.function#FFEB00
sublimelinter.mark.error#c90000
sublimelinter.gutter-mark#FFFFFF
sublimelinter.mark.warning#DDB700
flake8lint.mark.error#DA2000
flake8lint.mark.gutter#FFFFFF
flake8lint.mark.warning#EDBA00
flake8lint.mark.critical#981600
token.info-token#6796E6
token.warn-token#CD9731
token.error-token#F44747
token.debug-token#B267E6
string#a2e1ff
meta.embedded.assembly#95DCF1
entity.name.function#00FF40
support.function#00FF40
variable#f701ff
entity.name.variable#f701ff
support.variable#cf7c00italic bold
support.type.property-name#00ff0ditalic bold
UGLY KALEID INSPIRED THEME WHY IS THIS UPPERCASE by Brandon Kauffman - VS Code Theme