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.background#77216F
  • activityBar.foreground#F2F0EC
  • activityBarBadge.background#E95420
  • activityBarBadge.foreground#F2F0EC
  • commandCenter.activeBackground#77216F
  • commandCenter.activeForeground#F2F0EC
  • commandCenter.background#2C001E
  • commandCenter.border#77216F
  • commandCenter.foreground#F2F0EC
  • dropdown.background#3B1C2A
  • dropdown.border#77216F
  • dropdown.foreground#F2F0EC
  • editor.background#2C001E
  • editor.foreground#F2F0EC
  • editor.inactiveSelectionBackground#77216F33
  • editor.lineHighlightBackground#3B1C2A
  • editor.lineHighlightBorder#77216F
  • editor.selectionBackground#77216F55
  • editorCursor.foreground#E95420
  • editorGroup.border#77216F
  • editorGroupHeader.noTabsBackground#2C001E
  • editorGroupHeader.tabsBackground#2C001E
  • editorHoverWidget.background#2C001E
  • editorHoverWidget.border#77216F
  • editorHoverWidget.foreground#F2F0EC
  • editorHoverWidget.highlightForeground#E95420
  • editorHoverWidget.statusBarBackground#2C001E
  • editorIndentGuide.activeBackground1#E66A3C
  • editorIndentGuide.activeBackground2#E66A3C
  • editorIndentGuide.activeBackground3#E66A3C
  • editorIndentGuide.activeBackground4#E66A3C
  • editorIndentGuide.background1#6A2E55
  • editorIndentGuide.background2#6A2E55
  • editorIndentGuide.background3#6A2E55
  • editorIndentGuide.background4#6A2E55
  • editorLineNumber.foreground#AE9BA5
  • editorMarkerNavigation.background#2C001E
  • editorMarkerNavigationError.background#E95420
  • editorMarkerNavigationInfo.background#66CCCC
  • editorMarkerNavigationWarning.background#EFB73E
  • editorRuler.foreground#77216F88
  • editorStickyScroll.background#2C001E
  • editorStickyScrollHover.background#3B1C2A
  • editorSuggestWidget.background#2C001E
  • editorSuggestWidget.border#77216F
  • editorSuggestWidget.foreground#F2F0EC
  • editorSuggestWidget.selectedBackground#77216F
  • input.background#3B1C2A
  • input.border#77216F
  • input.foreground#F2F0EC
  • input.placeholderForeground#AE9BA5
  • list.activeSelectionBackground#77216F
  • list.activeSelectionForeground#F2F0EC
  • list.dropBackground#3B1C2A
  • list.focusBackground#77216F
  • list.focusForeground#F2F0EC
  • list.hoverBackground#3B1C2A
  • list.hoverForeground#F2F0EC
  • list.inactiveSelectionBackground#2C001E
  • menu.background#2C001E
  • menu.border#77216F
  • menu.foreground#F2F0EC
  • menu.selectionBackground#77216F
  • menu.selectionForeground#F2F0EC
  • notifications.background#2C001E
  • notifications.foreground#F2F0EC
  • notificationsErrorIcon.foreground#E95420
  • notificationsInfoIcon.foreground#66CCCC
  • notificationsWarningIcon.foreground#EFB73E
  • panel.background#2C001E
  • panel.border#77216F
  • panelTitle.activeBorder#E95420
  • panelTitle.activeForeground#F2F0EC
  • panelTitle.inactiveForeground#AEA79F
  • peekView.border#E95420
  • peekViewEditor.background#2C001E
  • peekViewResult.background#2C001E
  • peekViewTitle.background#77216F
  • quickInput.background#2C001E
  • quickInput.foreground#F2F0EC
  • quickInputList.focusBackground#77216F
  • quickInputList.focusForeground#F2F0EC
  • quickInputTitle.background#77216F
  • scrollbar.shadow#2C001E
  • scrollbarSlider.activeBackground#E9542088
  • scrollbarSlider.background#3B1C2A88
  • scrollbarSlider.hoverBackground#77216F88
  • searchEditor.findMatchBackground#E9542055
  • searchEditor.textInputBorder#77216F
  • sideBar.background#2C001E
  • sideBar.foreground#F2F0EC
  • sideBarSectionHeader.background#2C001E
  • sideBarSectionHeader.border#77216F
  • sideBarSectionHeader.foreground#F2F0EC
  • statusBar.background#77216F
  • statusBar.debuggingBackground#E95420
  • statusBar.foreground#F2F0EC
  • tab.activeBackground#77216F
  • tab.activeBorderTop#E95420
  • tab.activeForeground#F2F0EC
  • tab.border#77216F
  • tab.inactiveBackground#2C001E
  • tab.inactiveForeground#AEA79F
  • terminal.ansiBlack#2C001E
  • terminal.ansiBlue#66CCCC
  • terminal.ansiCyan#33CCCC
  • terminal.ansiGreen#99CC99
  • terminal.ansiMagenta#77216F
  • terminal.ansiRed#E95420
  • terminal.ansiWhite#F2F0EC
  • terminal.ansiYellow#EFB73E
  • terminal.background#2C001E
  • terminal.foreground#F2F0EC
  • terminalCursor.foreground#E95420
  • titleBar.activeBackground#77216F
  • titleBar.activeForeground#F2F0EC
  • titleBar.inactiveBackground#2C001E
  • titleBar.inactiveForeground#AEA79F

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#AEA79Fitalic
keyword, storage.type, storage.modifier#E95420
variable, string constant.other.placeholder#F2F0EC
string, constant.character#EFB73E
constant.numeric, constant.language.boolean#66CCCC
entity.name.function, support.function#99CC99
entity.name.type, support.type, storage.type.class#DD4814
entity.name.tag, support.class.component#E95420
punctuation, meta.brace, meta.delimiter#F2F0EC
Ubuntu Aubergine Theme by RINDAMAN2426 - VS Code Theme