Skip to main content
Coding Theme

Color themes

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#143200
  • activityBar.background#000000
  • activityBar.border#55ff3544
  • activityBar.foreground#39ff14
  • activityBar.inactiveForeground#91b27a
  • activityBarBadge.background#28ff00
  • activityBarBadge.foreground#000000
  • badge.background#39ff14
  • badge.foreground#000000
  • breadcrumb.activeSelectionForeground#ffffff
  • breadcrumb.background#000000
  • breadcrumb.focusForeground#ffffff
  • breadcrumb.foreground#ffffffcc
  • button.background#0e2e03
  • button.foreground#ffffff
  • button.hoverBackground#2c4528
  • button.secondaryBackground#0e2e03
  • button.secondaryForeground#ffffff
  • button.secondaryHoverBackground#2c3d29
  • checkbox.background#000000
  • checkbox.border#e03e3e00
  • checkbox.foreground#39ff14
  • debugExceptionWidget.background#333333
  • debugExceptionWidget.border#474747
  • debugToolBar.background#333333
  • debugToolBar.border#474747
  • diffEditor.border#444444
  • diffEditor.insertedTextBackground#9bb95533
  • diffEditor.removedTextBackground#ff000033
  • dropdown.background#000000
  • dropdown.border#e03e3e00
  • dropdown.foreground#39ff14
  • editor.background#000000
  • editor.findMatchBackground#ffffff00
  • editor.findMatchBorder#39ff14
  • editor.findMatchHighlightBackground#39ff1444
  • editor.findMatchHighlightBorder#ffffff00
  • editor.findRangeHighlightBackground#15253b66
  • editor.findRangeHighlightBorder#ffffff00
  • editor.foldBackground#1b46714d
  • editor.foreground#ceffc5
  • editor.hoverHighlightBackground#264f7840
  • editor.inactiveSelectionBackground#3a3d41
  • editor.lineHighlightBackground#0c1f19
  • editor.lineHighlightBorder#124d0d
  • editor.rangeHighlightBackground#00000000
  • editor.rangeHighlightBorder#51ad27
  • editor.selectionBackground#59665644
  • editor.selectionHighlightBackground#39ff1444
  • editor.selectionHighlightBorder#ffffff00
  • editor.wordHighlightBackground#3d3d3db8
  • editor.wordHighlightStrongBackground#032132b8
  • editorBracketMatch.background#010541
  • editorBracketMatch.border#888888
  • editorCodeLens.foreground#83f58f
  • editorCursor.background#000000
  • editorCursor.foreground#36ff10
  • editorError.background#f2281f83
  • editorError.border#ff0000b1
  • editorError.foreground#ff2f2f
  • editorGroup.border#2affcd
  • editorGroup.emptyBackground#000000
  • editorGroupHeader.border#39ff1444
  • editorGroupHeader.tabsBackground#000000
  • editorGroupHeader.tabsBorder#000000
  • editorGutter.addedBackground#587c0c
  • editorGutter.background#000000
  • editorGutter.commentRangeForeground#61e8db
  • editorGutter.deletedBackground#94151b
  • editorGutter.foldingControlForeground#61e8db
  • editorGutter.modifiedBackground#0c7d9d
  • editorHoverWidget.background#0a2224
  • editorHoverWidget.border#21b2a4
  • editorHoverWidget.foreground#a0ff7d
  • editorIndentGuide.activeBackground#a5ff84
  • editorIndentGuide.background#c2ff98
  • editorInfo.background#4490BF00
  • editorInfo.border#4490BF00
  • editorInfo.foreground#75beff
  • editorLineNumber.activeForeground#2aff02
  • editorLineNumber.foreground#b4ffa6d7
  • editorLink.activeForeground#4cffa2
  • editorMarkerNavigation.background#041d00
  • editorMarkerNavigationError.background#a39a9a
  • editorMarkerNavigationInfo.background#75beff
  • editorMarkerNavigationWarning.background#ad8e00
  • editorOverviewRuler.background#022b01
  • editorOverviewRuler.border#ffffff4d
  • editorRuler.foreground#4d714a
  • editorSuggestWidget.background#062400
  • editorSuggestWidget.border#4f6b62
  • editorSuggestWidget.foreground#84cbc4
  • editorSuggestWidget.highlightForeground#42e2ad
  • editorSuggestWidget.selectedBackground#003826
  • editorWarning.background#A9904000
  • editorWarning.border#ffffff00
  • editorWarning.foreground#cc8f00
  • editorWhitespace.foreground#ffffff10
  • editorWidget.background#061500
  • editorWidget.foreground#cccccc
  • editorWidget.resizeBorder#5F5F5F
  • focusBorder#39ff1444
  • foreground#39ff14
  • gitDecoration.addedResourceForeground#81b88b
  • gitDecoration.conflictingResourceForeground#6c6cc4
  • gitDecoration.deletedResourceForeground#c74e39
  • gitDecoration.ignoredResourceForeground#8c8c8c
  • gitDecoration.modifiedResourceForeground#e2c08d
  • gitDecoration.stageDeletedResourceForeground#c74e39
  • gitDecoration.stageModifiedResourceForeground#e2c08d
  • gitDecoration.submoduleResourceForeground#8db9e2
  • gitDecoration.untrackedResourceForeground#73c991
  • icon.foreground#39ff14
  • input.background#000000
  • input.border#e03e3e00
  • input.foreground#39ff14
  • input.placeholderForeground#39ff14
  • inputOption.activeBackground#000000
  • inputOption.activeBorder#39ff1444
  • inputOption.activeForeground#ffffff
  • list.activeSelectionBackground#39ff1444
  • list.activeSelectionForeground#ffffff
  • list.dropBackground#383b3d
  • list.focusBackground#39ff1444
  • list.focusForeground#ffffff
  • list.highlightForeground#39ff14
  • list.hoverBackground#39ff1444
  • list.hoverForeground#ffffff
  • list.inactiveSelectionBackground#39ff1444
  • list.inactiveSelectionForeground#ffffff
  • listFilterWidget.background#39ff1444
  • listFilterWidget.noMatchesOutline#be1100
  • listFilterWidget.outline#39ff1444
  • menu.background#020d02
  • menu.border#ffffff44
  • menu.foreground#b7ffb1
  • menu.selectionBackground#39ff1444
  • menu.selectionBorder#e4727200
  • menu.selectionForeground#ffffff
  • menu.separatorBackground#39ff1444
  • menubar.selectionBackground#192c0e
  • menubar.selectionBorder#ffffff
  • menubar.selectionForeground#ffffff
  • merge.commonContentBackground#191919
  • merge.commonHeaderBackground#303030
  • merge.currentContentBackground#192e2a
  • merge.currentHeaderBackground#1f473e
  • merge.incomingContentBackground#172332
  • merge.incomingHeaderBackground#1a304b
  • minimap.background#000000
  • minimap.errorHighlight#ff2f2f
  • minimap.findMatchHighlight#ffffff00
  • minimap.selectionHighlight#59665644
  • minimap.warningHighlight#cc8f00
  • minimapGutter.addedBackground#587c0c
  • minimapGutter.deletedBackground#94151b
  • minimapGutter.modifiedBackground#0c7d9d
  • notificationCenter.border#4d4b4b
  • notificationCenterHeader.background#0b2c08
  • notificationCenterHeader.foreground#38ff00
  • notifications.background#031b01
  • notifications.border#303031
  • notifications.foreground#8cffe4b3
  • notificationsErrorIcon.foreground#f48771
  • notificationsInfoIcon.foreground#01ffcf
  • notificationsWarningIcon.foreground#cca700
  • notificationToast.border#08ff00
  • panel.background#000000
  • panel.border#39ff1444
  • panelSection.border#39ff1444
  • panelTitle.activeBorder#39ff14
  • panelTitle.activeForeground#39ff14
  • panelTitle.inactiveForeground#ffffff
  • peekView.border#4087b6
  • peekViewEditor.background#0a1308
  • peekViewEditor.matchHighlightBackground#202c1e99
  • peekViewEditor.matchHighlightBorder#348823
  • peekViewEditorGutter.background#0a1308
  • peekViewResult.background#131313
  • peekViewResult.fileForeground#69ff88
  • peekViewResult.lineForeground#13f700
  • peekViewResult.matchHighlightBackground#6099884d
  • peekViewResult.selectionBackground#47ad8733
  • peekViewResult.selectionForeground#70cfb0
  • peekViewTitle.background#111f0b
  • peekViewTitleDescription.foreground#87ffddb3
  • peekViewTitleLabel.foreground#57e8b2
  • pickerGroup.border#3f3f46
  • pickerGroup.foreground#39ff14
  • progressBar.background#39ff14
  • scrollbar.shadow#54c24438
  • scrollbarSlider.activeBackground#bfbfbf66
  • scrollbarSlider.background#79797966
  • scrollbarSlider.hoverBackground#646464b3
  • selection.background#86804d54
  • settings.focusedRowBackground#ffffff07
  • settings.headerForeground#39ff14
  • sideBar.background#000000
  • sideBar.border#39ff1444
  • sideBar.dropBackground#383b3d
  • sideBar.foreground#39ff14
  • sideBarSectionHeader.background#000000
  • sideBarSectionHeader.border#c6ff618d
  • sideBarSectionHeader.foreground#a6ff86
  • sideBarTitle.foreground#6cc743
  • statusBar.background#000000
  • statusBar.border#39ff1444
  • statusBar.debuggingBackground#ff141444
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#ffffff
  • statusBar.noFolderBackground#000000
  • statusBar.noFolderForeground#39ff14
  • statusBarItem.activeBackground#FFFFFF25
  • statusBarItem.hoverBackground#39ff1444
  • statusBarItem.remoteBackground#39ff14
  • statusBarItem.remoteForeground#000000
  • tab.activeBackground#39ff1444
  • tab.activeBorder#39ff14
  • tab.activeBorderTop#39ff1400
  • tab.activeForeground#ffffff
  • tab.border#39ff1444
  • tab.hoverBackground#39ff1444
  • tab.hoverBorder#39ff1444
  • tab.inactiveBackground#000000
  • tab.inactiveForeground#ffffff80
  • terminal.ansiBlack#39ff14
  • terminal.ansiBlue#2472c8
  • terminal.ansiBrightBlack#666666
  • terminal.ansiBrightBlue#3b8eea
  • terminal.ansiBrightCyan#29b8db
  • terminal.ansiBrightGreen#23d18b
  • terminal.ansiBrightMagenta#d670d6
  • terminal.ansiBrightRed#f14c4c
  • terminal.ansiBrightWhite#e5e5e5
  • terminal.ansiBrightYellow#f5f543
  • terminal.ansiCyan#11a8cd
  • terminal.ansiGreen#0dbc79
  • terminal.ansiMagenta#bc3fbc
  • terminal.ansiRed#cd3131
  • terminal.ansiWhite#e5e5e5
  • terminal.ansiYellow#e5e510
  • terminal.border#39ff1444
  • terminal.foreground#45ff01
  • terminal.selectionBackground#39ff1444
  • terminalCursor.background#39ff1444
  • terminalCursor.foreground#ffffff
  • textLink.foreground#ffffff
  • titleBar.activeBackground#000000
  • titleBar.activeForeground#c5ffc5
  • titleBar.border#39ff1444
  • titleBar.inactiveBackground#041d0099
  • titleBar.inactiveForeground#ffffff99
  • tree.indentGuidesStroke#39ff1444
  • walkThrough.embeddedEditorBackground#00000050
  • widget.shadow#0000005c

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#888388italic
variable, string constant.other.placeholder#e6ffe2
constant.other.color#00ffdd
invalid, invalid.illegal#a2ff91
keyword, storage.type, storage.modifier#39ff14
keyword.control, constant.other.color, punctuation, meta.tag, punctuation.definition.tag, punctuation.separator.inheritance.php, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, punctuation.section.embedded, keyword.other.template, keyword.other.substitution#ffffff
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter#24ff0c
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name#bdffffitalic
source.css support.type.property-name, source.sass support.type.property-name, source.scss support.type.property-name, source.less support.type.property-name, source.stylus support.type.property-name, source.postcss support.type.property-name#a2cea5
entity.other.attribute-name.class#d2ffcc
source.sass keyword.control#63c855
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method#37ff41
meta.block variable.other#a9ff63
support.other.variable, string.other.link#b3faaa
constant.numeric, constant.language, support.constant, constant.character, constant.escape, variable.parameter, keyword.other.unit, keyword.other#83fa89
string, constant.other.symbol, constant.other.key, entity.other.inherited-class, markup.heading, markup.inserted.git_gutter, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js#bdffff
entity.name, support.type, support.class, support.other.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types#86edfc
support.type#a5faa2
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#acffb3
variable.language#bfffa1italic
entity.name.method.js#13ff0fitalic
meta.class-method.js entity.name.function.js, variable.function.constructor#acfcac
entity.other.attribute-name#48ff6f
markup.inserted#f5d5ff
markup.deleted#d791ff
markup.changed#eaa6ff
string.regexp#aeff86
constant.character.escape#98ff91
*url*, *link*, *uri*underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#0b3b02italic
source.js constant.other.object.key.js string.unquoted.label.js#bcf5aeitalic
source.json meta.structure.dictionary.json support.type.property-name.json#b20cff
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#05f3ff
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#caa9ff
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#bfffbd
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#ff9eae
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#ffdbe1
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#ffe96e
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#b6f6ff
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#c7bbff
text.html.markdown, punctuation.definition.list_item.markdown#bc8dff
text.html.markdown markup.inline.raw.markdown#a6beff
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown#ff9aab
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown#ffbcad
markup.italic#c7ffb9italic
markup.bold, markup.bold string#d6ffd4bold
markup.bold markup.italic, markup.italic markup.bold, markup.quote markup.bold, markup.bold markup.italic string, markup.italic markup.bold string, markup.quote markup.bold string#e9ffd0bold
markup.underline#ffe2b7underline
markup.quote punctuation.definition.blockquote.markdown#ffcbd4
markup.quoteitalic
string.other.link.title.markdown#c5c4ff
string.other.link.description.title.markdown#d3ffc5
constant.other.reference.link.markdown#ffe0cd
markup.raw.block#ffcff7
markup.raw.block.fenced.markdown#fff3f5
punctuation.definition.fenced.markdown#ff9fcc
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end#ffb381
variable.language.fenced.markdown#ffb9e8
meta.separator#d6ffc5bold
markup.table#f5ffbb

Shiki preview

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

Loading...

hacker dark PRO - Coding Theme