Skip to main content
CodingTheme

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#a5c9ed10
  • activityBar.activeBorder#86b9ec
  • activityBar.activeFocusBorder#86b9ec
  • activityBar.background#171e23
  • activityBar.border#030a0f
  • activityBar.foreground#ffffff
  • activityBar.inactiveForeground#84a8cc60
  • activityBarBadge.background#f5cea8c0
  • activityBarBadge.foreground#000000
  • badge.background#f5cea8c0
  • badge.foreground#000000
  • breadcrumb.activeSelectionForeground#6699cca0
  • breadcrumb.background#111111
  • breadcrumb.focusForeground#6699cc
  • breadcrumb.foreground#6699cca0
  • button.background#171e23
  • button.foreground#ece5e0
  • button.hoverBackground#1b2227
  • descriptionForeground#ece5e0
  • dropdown.background#31383d
  • dropdown.border#131a1f
  • dropdown.foreground#b3babf
  • dropdown.listBackground#31383d
  • editor.background#111111
  • editor.findMatchBackground#fff5c21e
  • editor.findMatchHighlightBackground#fff5c23c
  • editor.findRangeHighlightBackground#9a9cff23
  • editor.foreground#a5c9ed60
  • editor.lineHighlightBackground#141414
  • editor.selectionBackground#6699cc40
  • editor.selectionHighlightBackground#6699cc49
  • editor.selectionHighlightBorder#6699cc40
  • editor.wordHighlightStrongBackground#6699cc49
  • editor.wordHighlightStrongBorder#6699cca0
  • editorBracketMatch.background#ff336660
  • editorBracketMatch.border#ff336660
  • editorError.foreground#ff0033
  • editorGroup.border#030a0f
  • editorGroupHeader.border#030a0f
  • editorGroupHeader.noTabsBackground#171e23
  • editorGroupHeader.tabsBackground#111111
  • editorGroupHeader.tabsBorder#1d1d1d
  • editorGutter.background#111111
  • editorGutter.modifiedBackground#6699cc
  • editorHoverWidget.border#6589ad60
  • editorIndentGuide.activeBackground#6699cc49
  • editorIndentGuide.background#1b2227
  • editorLineNumber.activeForeground#31f8ff
  • editorLineNumber.foreground#99b2cc40
  • editorOverviewRuler.errorForeground#ff0033
  • editorOverviewRuler.findMatchForeground#6699cc40
  • editorOverviewRuler.warningForeground#cc884478
  • editorOverviewRuler.wordHighlightForeground#6699cc49
  • editorPane.background#0b1217
  • editorSuggestWidget.background#131a1f
  • editorSuggestWidget.border#6589ad60
  • editorSuggestWidget.selectedBackground#232a2f
  • editorUnnecessaryCode.border#131a1f80
  • editorUnnecessaryCode.opacity#131a1f80
  • editorWidget.background#171e23
  • editorWidget.border#6699cc
  • editorWidget.foreground#6699cc
  • errorForeground#6699cc
  • focusBorder#6589ad60
  • foreground#a5c9ed60
  • gitDecoration.untrackedResourceForeground#99bb33
  • icon.foreground#6699cc
  • input.background#232a2f
  • input.border#131a1f
  • input.foreground#a9c2dca0
  • input.placeholderForeground#7992ac40
  • inputOption.activeBackground#5e91c43c
  • inputOption.activeBorder#5e91c44b
  • list.activeSelectionBackground#6699cc2a
  • list.activeSelectionForeground#fbc37b
  • list.dropBackground#31383d
  • list.errorForeground#bb6574
  • list.focusBackground#6699cc2a
  • list.focusForeground#a9cdf1f0
  • list.highlightForeground#5e91c480
  • list.hoverBackground#4679ac2a
  • list.hoverForeground#a9cdf1f0
  • list.inactiveSelectionBackground#4679ac2a
  • list.inactiveSelectionForeground#d5a669
  • list.invalidItemForeground#f58fff
  • list.warningForeground#feba76
  • listFilterWidget.outline#030a0f
  • menu.background#0b1217
  • menu.border#0b1217
  • menu.foreground#a5c9ed80
  • menu.selectionBackground#6699cc40
  • menu.selectionBorder#6699cc40
  • menu.selectionForeground#a9cdf1f0
  • menu.separatorBackground#6699cc80
  • menubar.selectionBackground#6699cc40
  • menubar.selectionBorder#6699cc40
  • menubar.selectionForeground#a5c9ed80
  • minimap.background#131313
  • minimap.errorHighlight#ff003378
  • minimap.selectionHighlight#6699cc40
  • minimap.warningHighlight#cc884478
  • notificationCenter.border#131a1f
  • notificationCenterHeader.background#1b2227
  • notificationCenterHeader.foreground#a5c9ed60
  • notificationLink.foreground#5e91c4
  • notifications.background#1b2227f0
  • notifications.border#6699ccf0
  • notifications.foreground#a5c9ed60
  • notificationsErrorIcon.foreground#ff003378
  • notificationsInfoIcon.foreground#6699cc
  • notificationsWarningIcon.foreground#cc884478
  • notificationToast.border#6699ccf0
  • panel.background#131a1f
  • panel.border#a5c9ed20
  • panelTitle.activeBorder#c9e2fc40
  • panelTitle.activeForeground#c9e2fc40
  • panelTitle.inactiveForeground#99b2cc40
  • pickerGroup.foreground#fbc37b
  • progressBar.background#1b2227
  • quickInput.foreground#a5c9ed60
  • scrollbar.shadow#030a0f
  • scrollbarSlider.activeBackground#6699cc80
  • scrollbarSlider.background#6699cc40
  • scrollbarSlider.hoverBackground#6699cc40
  • selection.background#6699cc40
  • settings.checkboxBackground#232a2f
  • settings.checkboxBorder#131a1f
  • settings.dropdownBorder#131a1f
  • settings.dropdownListBorder#131a1f
  • settings.headerForeground#6699cc
  • settings.modifiedItemIndicator#84a8cc60
  • settings.numberInputBorder#131a1f
  • settings.textInputBorder#131a1f
  • sideBar.background#111111
  • sideBar.border#0f161b
  • sideBar.dropBackground#84a8cc60
  • sideBar.foreground#6e767a
  • sideBarSectionHeader.background#171e23
  • sideBarSectionHeader.border#a5c9ed20
  • sideBarSectionHeader.foreground#95b5d560
  • sideBarTitle.foreground#84a8cc60
  • statusBar.background#171e23
  • statusBar.border#a5c9ed20
  • statusBar.debuggingBackground#7eb1e4
  • statusBar.debuggingForeground#000000
  • statusBar.foreground#a5c9ed60
  • statusBar.noFolderBackground#6699cc80
  • statusBar.noFolderForeground#ffffff
  • statusBarItem.activeBackground#6699cc80
  • statusBarItem.hoverBackground#6699cc40
  • statusBarItem.prominentBackground#6699cc80
  • statusBarItem.prominentHoverBackground#6699cc40
  • statusBarItem.remoteBackground#171e23
  • statusBarItem.remoteForeground#6699cc
  • tab.activeBackground#1b1b1b
  • tab.activeBorder#444444
  • tab.activeBorderTop#252525
  • tab.activeForeground#ffffff
  • tab.activeModifiedBorder#6699cc
  • tab.border#030a0f
  • tab.hoverBackground#6699cc10
  • tab.hoverBorder#252525
  • tab.hoverForeground#6699cca0
  • tab.inactiveBackground#111111
  • tab.inactiveForeground#ffffff80
  • tab.inactiveModifiedBorder#f5cea8
  • tab.lastPinnedBorder#84a8cc40
  • tab.unfocusedActiveBorder#1b2227
  • tab.unfocusedActiveBorderTop#6699cca0
  • tab.unfocusedActiveForeground#ffffffa0
  • tab.unfocusedActiveModifiedBorder#6699cca0
  • tab.unfocusedHoverForeground#6699cc60
  • tab.unfocusedInactiveBackground#171e23
  • tab.unfocusedInactiveForeground#ffffff40
  • tab.unfocusedInactiveModifiedBorder#f5cea8a0
  • terminal.ansiBlack#3f3f3f
  • terminal.ansiBlue#7cb8bb
  • terminal.ansiBrightBlack#4f4f4f
  • terminal.ansiBrightBlue#7cb8bb
  • terminal.ansiBrightCyan#93e0e3
  • terminal.ansiBrightGreen#5f7f5f
  • terminal.ansiBrightMagenta#dc8cc3
  • terminal.ansiBrightRed#dca3a3
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#e0cf9f
  • terminal.ansiCyan#93e0e3
  • terminal.ansiGreen#5f7f5f
  • terminal.ansiMagenta#dc8cc3
  • terminal.ansiRed#dca3a3
  • terminal.ansiWhite#dcdccc
  • terminal.ansiYellow#e0cf9f
  • terminal.background#171e23
  • terminal.border#030a0f
  • terminal.foreground#4c5e6f
  • terminal.selectionBackground#6699cc40
  • terminalCursor.foreground#4c5e6f
  • textBlockQuote.border#6699cc80
  • textCodeBlock.background#6699cc80
  • textLink.activeForeground#7eb1e4
  • textLink.foreground#5e91c4
  • textSeparator.foreground#6699cc80
  • titleBar.activeBackground#0b1217
  • titleBar.activeForeground#a5c9ed60
  • titleBar.border#030a0f
  • titleBar.inactiveBackground#131a1f
  • titleBar.inactiveForeground#6589ad60
  • welcomePage.background#131a1f
  • welcomePage.progress.foreground#6699cc
  • window.activeBorder#84a8cc60
  • window.inactiveBorder#6589ad60

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#6C906BEE
meta.preprocessor, punctuation.definition.preprocessor#C59D76EE
keyword.other.phpdoc#3F7337EE
punctuation.definition.comment, punctuation.whitespace.comment#83AE84EE
punctuation.section.embedded#6E6E6EEE
source.ruby.embedded#AC7879EE
keyword.other.directive#BCBCBCEE
keyword.other.directive.line-number
string, string.unquoted#B56B6BEE
string.unquoted.heredoc#B5B5B5EE
support.constant.numeric, constant.numeric#6CB5B4EE
constant, support.constant#B5B590EE
constant.character, constant.other#AC7879EE
variable.other.constant#B5B590EE
keyword, keyword.control, meta.selector.css, entity.other.attribute-name#DAB591EE
variable.other.readwrite.instance#DAB591EE
entity.name.module, support.other.module#DB6600EE
keyword.operator#C9C9C9EE
keyword.operator.symbol.infix.floating-point
source.ocaml, keyword.operator.symbol.prefix.floating-point
storage.type, storage.modifier, support.type#DBD780EE
entity.name.class.variant#2B6683EE
entity.other#B5B5B5EE
entity.other.inherited-class#B67209EE
storage.type.user-defined, meta.property-list#DBBE00EE
entity.name.type, entity.name.type.class, entity.other.attribute-name.class.css, support.class, entity.name.class#D0830DEE
invalid#DBACCBEE
entity.other.attribute-name.html#B5B691EE
entity.name.tag#B5B691EE
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php#6E6E6EEE
support.function.construct#DAB591EE
punctuation.definition.variable#DAB591EE
meta.function-name, entity.name.function#DBD96CEE
support.function#A79B06EE
meta.brace#5EAEACEE
punctuation.definition.string.begin, punctuation.definition.string.end#B5B5B5EE
punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, meta.tag.structure.any.html#DAB490EE
entity.name.tag.yaml#DAB591EE
punctuation.definition.entry#B5B5B5EE
keyword.other.DML.sql, keyword.other.data-integrity.sql#989898EE
source.sql, constant.other.database-name.sql, constant.other.table-name.sql, keyword.operator.star#79A0D0EE
source.diff, meta.diff.comment, meta.toc-list.comment.diff#DBDBDBEE
meta.diff.header.from-file#AA5859EE
meta.diff.header.to-file#48956FEE
meta.diff.range.unified#71AFB2EE
markup.inserted.diff#48956FEE
markup.deleted.diff#AA5859EE
string.regexp#A7562CEE
string.regexp.arbitrary-repitition#815247EE
punctuation.definition.arbitrary-repitition#DBDBDBEE
string.regexp.character-class#AB7367EE
punctuation.definition.character-class#DBDBDBEE
markup.raw.inline.markdown#DAB591EE
markup.heading.markdown, punctuation.definition.heading#DBDBDBEE
markup.list#BCBCBCEE
sublimelinter.mark.warning#BB9800EE
sublimelinter.gutter-mark#DBDBDBEE
sublimelinter.mark.error#AF0D00EE
doctype#A8AEACEE
entity#A8AEACEE
hyperlink#3D7483EE
invisibles#DBDBDBEE
level0#102F10EE
level1#10102FEE
level10#2C4B4BEE
level2#2F2F10EE
level3#2F102FEE
level4#102F2FEE
level5#4B2C2CEE
level6#2C4B2CEE
level7#2C2C4BEE
level8#4B4B2CEE
level9#4B2C4BEE
markup#B2B2B2EE
match#DBAC4EEE
meta#9D9083EE
none#624E54EE
property#6C7E97EE
punctuation#DBB152EE
source#BABABAEE
storage#632C4BEE
support#C788CCEE
text#BABABAEE
variable#9D8D7EEE
wordhighlight#5DDB00EE
ref.matchtext#FFFFFF
entity.name.function#228386
storage.type#00B7FF
support.type.property-name.json.comments#A19E72
token.info-token#6796E6
token.warn-token#CD9731
token.error-token#F44747
token.debug-token#B267E6

Shiki preview

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

Loading...

HelloNeptune - Eyefriendly Dimmed-Neon Black Theme by Hello Neptune - VS Code Theme