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#1F262E
  • activityBar.activeBorder#AACBF0
  • activityBar.background#1B2026
  • activityBar.foreground#b2cee6
  • activityBar.inactiveForeground#b4d3fc8a
  • activityBarBadge.background#29ebaa
  • activityBarBadge.foreground#0202028f
  • badge.background#29ebaa
  • badge.foreground#0202026e
  • breadcrumb.activeSelectionForeground#29ebaa
  • breadcrumb.background#1F262E
  • breadcrumb.focusForeground#29ebaa
  • breadcrumb.foreground#b0c4e7
  • button.background#29ebaa
  • button.foreground#0202026e
  • debugToolBar.background#282F38
  • dropdown.background#282F38
  • dropdown.listBackground#282F38
  • editor.background#1F262E
  • editor.findMatchBackground#23c796
  • editor.findMatchHighlightBackground#435b7a
  • editor.foreground#AACBF0
  • editor.lineHighlightBackground#2b3b50
  • editor.lineHighlightBorder#2b3b50
  • editor.selectionBackground#2b3b50
  • editorBracketMatch.background#2A3036
  • editorBracketMatch.border#2A3036
  • editorGroup.dropBackground#000000aa
  • editorGroupHeader.border#1B2026
  • editorGroupHeader.tabsBackground#1B2026
  • editorGroupHeader.tabsBorder#1F262E
  • editorGutter.addedBackground#DA3254
  • editorGutter.modifiedBackground#0B86E4
  • editorIndentGuide.activeBackground#556578
  • editorIndentGuide.background#333d49
  • editorLineNumber.activeForeground#829BB8
  • editorLineNumber.foreground#556578
  • editorOverviewRuler.background#1B2026
  • editorOverviewRuler.border#1F242B
  • editorOverviewRuler.findMatchForeground#29ebaa
  • editorSuggestWidget.background#1F242B
  • editorSuggestWidget.border#282F38
  • editorSuggestWidget.selectedBackground#282F38
  • editorWidget.background#222830
  • editorWidget.border#292f38
  • editorWidget.foreground#b2cee6
  • extensionIcon.starForeground#a4dd3a
  • extensionIcon.verifiedForeground#3ddccc
  • focusBorder#00000000
  • gitDecoration.ignoredResourceForeground#9ad0ff8c
  • icon.foreground#AACBF0
  • input.background#282F38
  • input.foreground#AACBF0
  • input.placeholderForeground#bad9f1a2
  • list.activeSelectionBackground#282F38
  • list.activeSelectionIconForeground#29ebaa
  • list.hoverBackground#323e4d
  • list.inactiveSelectionBackground#323e4d
  • minimap.findMatchHighlight#29ebaa
  • notificationCenter.border#32435a
  • notificationCenterHeader.background#29ebaa
  • notificationCenterHeader.foreground#0202026e
  • notifications.background#1F242B
  • notifications.foreground#b0c4e7
  • panelSectionHeader.border#29ebaa
  • panelTitle.activeBorder#29ebaa
  • panelTitle.activeForeground#b0c4e7
  • settings.checkboxBackground#eeff00
  • settings.checkboxForeground#2e3000
  • settings.focusedRowBackground#282F38
  • settings.headerBorder#282F38
  • settings.modifiedItemIndicator#29ebaa
  • sideBar.background#1B2026
  • sideBar.border#101316
  • sideBar.foreground#bad9f1
  • sideBarSectionHeader.background#1B2026
  • sideBarSectionHeader.border#1B2026
  • sideBarTitle.foreground#AACBF0
  • statusBar.background#1B2026
  • statusBar.border#1B2026
  • statusBar.debuggingBackground#29ebaa
  • statusBar.debuggingForeground#1B2026
  • statusBar.foreground#9db8e7f1
  • statusBar.noFolderBackground#1B2026
  • statusBarItem.activeBackground#3d4eb3
  • statusBarItem.hoverBackground#0b0b137a
  • tab.activeBackground#1F262E
  • tab.border#1B2026
  • tab.inactiveBackground#1B2026
  • tab.inactiveForeground#899fc4
  • terminal.foreground#b0c4e7
  • terminal.selectionBackground#3070df
  • terminalCursor.background#00FE78
  • terminalCursor.foreground#00FE78
  • titleBar.activeBackground#1B2026
  • titleBar.activeForeground#AACBF0
  • tree.indentGuidesStroke#333d49
  • widget.shadow#1B2026

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#516073
string#d1ff51
variable#45a4fd
entity.name.type#FF5542
keyword, storage.type#8991ff
entity.name.function#91D4FF
constant.numeric#ffb951
entity.name.tag, support.class#FF5542
entity.other.attribute-name#FFB736
punctuation.definition.tag#869FBF
variable.other.property#18D5DB
keyword.other.unit#AACBF0
entity.other.attribute-name.pseudo-class.css#1EC7F6
support.other.namespace#AACBF0
entity.other.inherited-class#ebce4e
storage.modifier.extends#45a4fd
storage.modifier#45a4fd
meta.embedded.block#AACBF0
keyword.operator.logical#18D5DB
keyword.operator.comparison#b7db18
keyword.operator.arithmetic#AACBF0
string.regexp.find#e9253f
entity.name.type.class.python#d1ff51
meta.attribute.python#ffd651
entity.other.inherited-class.python#2fb3ff
variable.parameter.function.language.python#ff5165
meta.function-call.generic.python#91D4FF
constant.language.python#ff8551
keyword.operator.class.php#ffb951
keyword.other.phpdoc#ffd651
keyword.operator.key.php#91D4FF
support.class.php#ff5165
entity.name.type.class.php#d1ff51
variable.other.php#2fb3ff
entity.name.type.namespace.php#97ff51
storage.modifier.perl#ebce4e
punctuation.definition.variable.perl#FF5542
entity.other.attribute-name.class.css#eb4e4e
support.type.property-name.css#ebce4e
keyword.other.important.css#c1eb4e
entity.other.attribute-name.id.css#4e85eb
entity.name.tag.css#4eebde
support.type.property-name#7aa0f3

Shiki preview

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

Loading...

Theme Oblivion Dark by Arfaxad Zadot - VS Code Theme