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.activeBackground#000000
  • activityBar.activeBorder#FF609D
  • activityBar.activeFocusBorder#FF609D
  • activityBar.background#0F0019
  • activityBar.border#FF609D
  • activityBar.dropBackground#FF609D
  • activityBar.foreground#F7A10C
  • activityBar.inactiveForeground#FF609D
  • activityBarBadge.background#5D00FF
  • activityBarBadge.foreground#FFFFFF
  • badge.background#000000
  • badge.foreground#FFFFFF
  • breadcrumb.activeSelectionForeground#05F6FF
  • breadcrumb.background#1f0033
  • breadcrumb.focusForeground#0DD9BE
  • breadcrumb.foreground#F7A10C
  • breadcrumbPicker.background#0F0019
  • button.background#F7A10C
  • button.foreground#2E3734
  • button.hoverBackground#0DD9BE
  • checkbox.background#F9E3E5
  • checkbox.border#21ECFF
  • checkbox.foreground#70650A
  • dropdown.background#1f0033
  • dropdown.border#AD416C
  • dropdown.foreground#F7A10C
  • dropdown.listBackground#1f0033
  • editor.background#1f0033
  • editor.foreground#f5e6ff
  • editor.lineHighlightBackground#40006B
  • editor.snippetFinalTabstopHighlightBackground#0000FF
  • editor.snippetFinalTabstopHighlightBorder#0000FF
  • editor.snippetTabstopHighlightBackground#0000FF
  • editor.snippetTabstopHighlightBorder#0000FF
  • editorBracketMatch.background#000000
  • editorBracketMatch.border#F7A10C
  • editorCursor.background#2b7df0
  • editorCursor.foreground#12dfff
  • editorGroup.border#1f0033
  • editorGroup.dropBackground#40006B
  • editorGroup.emptyBackground#0F0019
  • editorGroup.focusedEmptyBorder#000000
  • editorGroupHeader.noTabsBackground#40006B
  • editorGroupHeader.tabsBackground#0F0019
  • editorGroupHeader.tabsBorder#1f0033
  • editorLineNumber.activeForeground#6B4677
  • editorLineNumber.foreground#6B4677
  • editorPane.background#05F6FF
  • input.background#2D004C
  • input.border#4E0087
  • input.foreground#05F6FF
  • input.placeholderForeground#438275
  • inputOption.activeBackground#4E0087
  • inputOption.activeBorder#1f0033
  • inputValidation.errorBackground#B7005E
  • inputValidation.errorBorder#FF609D
  • inputValidation.errorForeground#FFFFFF
  • menu.background#0DD9BE
  • menu.border#000000
  • menu.foreground#000000
  • menu.selectionBackground#000000
  • menu.selectionBorder#F7A10C
  • menu.selectionForeground#F7A10C
  • menu.separatorBackground#05F6FF
  • menubar.selectionBackground#0DD9BE
  • menubar.selectionBorder#05F6FF
  • menubar.selectionForeground#000000
  • notificationCenter.border#F7A10C
  • notificationCenterHeader.background#000000
  • notificationCenterHeader.foreground#F7A10C
  • notificationLink.foreground#F7A10C
  • notifications.background#1f0033
  • notifications.border#0EEFEC
  • notifications.foreground#0DD9BE
  • notificationsErrorIcon.foreground#FF0048
  • notificationsInfoIcon.foreground#FF0048
  • notificationsWarningIcon.foreground#FF0048
  • notificationToast.border#40006B
  • scrollbar.shadow#FFFFFF
  • scrollbarSlider.activeBackground#6B4677
  • scrollbarSlider.background#613263
  • scrollbarSlider.hoverBackground#A555A8
  • settings.checkboxBackground#0F0019
  • settings.checkboxBorder#05F6FF
  • settings.checkboxForeground#05F6FF
  • settings.dropdownBackground#0F0019
  • settings.dropdownBorder#C14788
  • settings.dropdownForeground#F7A10C
  • settings.dropdownListBorder#C14788
  • settings.headerForeground#E2930B
  • settings.modifiedItemIndicator#0EEFEC
  • settings.numberInputBackground#0F0019
  • settings.numberInputBorder#C14788
  • settings.numberInputForeground#F7A10C
  • settings.textInputBackground#0F0019
  • settings.textInputBorder#C14788
  • settings.textInputForeground#F7A10C
  • sideBar.background#1f0033
  • sideBar.border#FF609D
  • sideBar.dropBackground#000000
  • sideBar.foreground#0DD9BE
  • sideBarSectionHeader.background#000000
  • sideBarSectionHeader.border#09E5E1
  • sideBarSectionHeader.foreground#F7A10C
  • sideBarTitle.foreground#F7A10C
  • statusBar.background#1f0033
  • statusBar.border#000000
  • statusBar.debuggingBackground#000000
  • statusBar.debuggingBorder#000000
  • statusBar.debuggingForeground#FF5EB1
  • statusBar.foreground#FF609D
  • statusBar.noFolderBackground#1f0033
  • statusBar.noFolderBorder#FF609D
  • statusBar.noFolderForeground#F7A10C
  • statusBarItem.activeBackground#0000FF
  • statusBarItem.hoverBackground#000000
  • statusBarItem.prominentBackground#ff0000
  • statusBarItem.prominentForeground#ff0000
  • statusBarItem.prominentHoverBackground#ff0000
  • statusBarItem.remoteBackground#000000
  • statusBarItem.remoteForeground#05F6FF
  • tab.activeBackground#1f0033
  • tab.activeBorder#1f0033
  • tab.activeBorderTop#FF0066
  • tab.activeForeground#F7A10C
  • tab.activeModifiedBorder#40006B
  • tab.border#1f0033
  • tab.hoverBackground#0F0019
  • tab.hoverBorder#0DD9BE
  • tab.inactiveBackground#40006B
  • tab.inactiveForeground#886B8E
  • tab.inactiveModifiedBorder#40006B
  • tab.unfocusedActiveBackground#40006B
  • tab.unfocusedActiveBorder#1f0033
  • tab.unfocusedActiveBorderTop#0DD9BE
  • tab.unfocusedActiveForeground#886B8E
  • tab.unfocusedActiveModifiedBorder#40006B
  • tab.unfocusedHoverBackground#40006B
  • tab.unfocusedHoverBorder#05F6FF
  • tab.unfocusedInactiveForeground#40006B
  • tab.unfocusedInactiveModifiedBorder#40006B
  • terminal.ansiBlack#00E5D6
  • terminal.ansiBlue#000052
  • terminal.ansiBrightBlack#000000
  • terminal.ansiBrightBlue#AE00FF
  • terminal.ansiBrightCyan#00FFFF
  • terminal.ansiBrightGreen#0DD997
  • terminal.ansiBrightMagenta#FF00FF
  • terminal.ansiBrightRed#FF0000
  • terminal.ansiBrightWhite#FFFFFF
  • terminal.ansiBrightYellow#E0FF00
  • terminal.ansiCyan#00DDD5
  • terminal.ansiGreen#0400FF
  • terminal.ansiMagenta#FF00FF
  • terminal.ansiRed#C90000
  • terminal.ansiWhite#E5E5E5
  • terminal.ansiYellow#E2DF2D
  • terminal.background#1f0033
  • terminal.border#000000
  • terminal.foreground#00E2FF
  • terminalCursor.background#FF00FF
  • terminalCursor.foreground#FF609D
  • titleBar.activeBackground#0F0019
  • titleBar.activeForeground#FF609D
  • titleBar.border#FF609D
  • titleBar.inactiveBackground#0DD9BE
  • titleBar.inactiveForeground#310966
  • walkThrough.embeddedEditorBackground#1f0033
  • welcomePage.background#964555
  • welcomePage.buttonBackground#BC6207
  • welcomePage.buttonHoverBackground#1f0033
  • window.activeBorder#800287
  • window.inactiveBorder#1B0038

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
meta.embedded, source.groovy.embedded#D4D4D4
emphasisitalic
strongbold
header#000080
comment#965B39
constant.language#e354c9
constant.numeric, entity.name.operator.custom-literal.number, variable.other.enummember, keyword.operator.plus.exponent, keyword.operator.minus.exponent#b5cea8
constant.regexp#646695
entity.name.tag#e354c9
entity.name.tag.css#d7ba7d
entity.other.attribute-name#FF87BF
entity.other.attribute-name.class.css, entity.other.attribute-name.class.mixin.css, entity.other.attribute-name.id.css, entity.other.attribute-name.parent-selector.css, entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css, source.css.less entity.other.attribute-name.id, entity.other.attribute-name.attribute.scss, entity.other.attribute-name.scss#d7ba7d
invalid#f44747
markup.underlineunderline
markup.bold#e354c9bold
markup.heading#e354c9bold
markup.italicitalic
markup.inserted#b5cea8
markup.deleted#53e6cd
markup.changed#e354c9
punctuation.definition.quote.begin.markdown#6A9955
punctuation.definition.list.begin.markdown#6796e6
markup.inline.raw#53e6cd
punctuation.definition.tag#808080
meta.preprocessor, entity.name.function.preprocessor#e354c9
meta.preprocessor.string#53e6cd
meta.preprocessor.numeric#b5cea8
meta.structure.dictionary.key.python#FF87BF
meta.diff.header#e354c9
storage#e354c9
storage.type#e354c9
storage.modifier, keyword.operator.noexcept#e354c9
string, entity.name.operator.custom-literal.string, meta.embedded.assembly#53e6cd
string.tag#53e6cd
string.value#53e6cd
string.regexp#d16969
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded#e354c9
meta.template.expression#d4d4d4
support.type.vendored.property-name, support.type.property-name, variable.css, variable.scss, variable.other.less, source.coffee.embedded#FF87BF
keyword#e354c9
keyword.control#e354c9
keyword.operator#d4d4d4
keyword.operator.new, keyword.operator.expression, keyword.operator.cast, keyword.operator.sizeof, keyword.operator.alignof, keyword.operator.typeid, keyword.operator.alignas, keyword.operator.instanceof, keyword.operator.logical.python, keyword.operator.wordlike#e354c9
keyword.other.unit#b5cea8
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php#e354c9
support.function.git-rebase#FF87BF
constant.sha.git-rebase#b5cea8
storage.modifier.import.java, variable.language.wildcard.java, storage.modifier.package.java#d4d4d4
variable.language#e354c9
Ginseng Dark by hassan-k1 - VS Code Theme