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.background#030001
  • activityBar.border#0f0005
  • activityBar.foreground#ff1a1a
  • activityBar.inactiveForeground#331122
  • activityBarBadge.background#ff1a1a
  • activityBarBadge.foreground#ffffff
  • badge.background#ff1a1a
  • badge.foreground#ffffff
  • breadcrumb.activeSelectionForeground#ffcccc
  • breadcrumb.focusForeground#ff1a1a
  • breadcrumb.foreground#441122
  • breadcrumbPicker.background#050002
  • button.background#cc0000
  • button.foreground#ffffff
  • button.hoverBackground#ff1a1a
  • button.secondaryBackground#1a0008
  • button.secondaryForeground#ffcccc
  • diffEditor.insertedTextBackground#00440055
  • diffEditor.removedTextBackground#44000055
  • dropdown.background#0f0005
  • dropdown.border#2a0010
  • dropdown.foreground#ffcccc
  • editor.background#070003
  • editor.findMatchBackground#ff000070
  • editor.findMatchHighlightBackground#ff000040
  • editor.foreground#ffcccc
  • editor.inactiveSelectionBackground#ff000015
  • editor.lineHighlightBackground#0f0005
  • editor.selectionBackground#ff000040
  • editor.selectionHighlightBackground#ff000020
  • editor.wordHighlightBackground#1a0008
  • editor.wordHighlightStrongBackground#ff000030
  • editorBracketMatch.background#ff000030
  • editorBracketMatch.border#ff1a1a
  • editorCursor.foreground#ff1a1a
  • editorGroupHeader.noTabsBackground#040001
  • editorGroupHeader.tabsBackground#040001
  • editorGutter.background#070003
  • editorIndentGuide.activeBackground#440011
  • editorIndentGuide.background#1a0008
  • editorLineNumber.activeForeground#ff1a1a
  • editorLineNumber.foreground#330010
  • editorRuler.foreground#1a0008
  • editorWhitespace.foreground#1a0008
  • focusBorder#ff1a1a
  • gitDecoration.addedResourceForeground#446644
  • gitDecoration.deletedResourceForeground#ff1a1a
  • gitDecoration.ignoredResourceForeground#441122
  • gitDecoration.modifiedResourceForeground#cc4400
  • gitDecoration.untrackedResourceForeground#446644
  • input.background#0f0005
  • input.border#2a0010
  • input.foreground#ffcccc
  • input.placeholderForeground#441122
  • inputValidation.errorBackground#1a0005
  • inputValidation.errorBorder#ff1a1a
  • list.activeSelectionBackground#ff000030
  • list.activeSelectionForeground#ff4444
  • list.focusBackground#ff000030
  • list.highlightForeground#ff1a1a
  • list.hoverBackground#0f0005
  • list.inactiveSelectionBackground#0f0005
  • minimap.background#050002
  • minimapSlider.background#ff000020
  • panel.background#050002
  • panel.border#0f0005
  • panelTitle.activeBorder#ff1a1a
  • panelTitle.activeForeground#ff1a1a
  • panelTitle.inactiveForeground#441122
  • pickerGroup.border#1a0008
  • pickerGroup.foreground#ff1a1a
  • progressBar.background#ff1a1a
  • quickInput.background#050002
  • quickInput.foreground#ffcccc
  • quickInputHighlightForeground#ff4444
  • quickInputTitle.background#040001
  • scrollbarSlider.activeBackground#ff000060
  • scrollbarSlider.background#ff000020
  • scrollbarSlider.hoverBackground#ff000040
  • selection.background#ff000040
  • sideBar.background#050002
  • sideBar.border#0f0005
  • sideBar.foreground#cc8888
  • sideBarSectionHeader.background#040001
  • sideBarSectionHeader.foreground#663344
  • sideBarTitle.foreground#ff1a1a
  • statusBar.background#cc0000
  • statusBar.border#880000
  • statusBar.debuggingBackground#ff0000
  • statusBar.foreground#ffffff
  • statusBar.noFolderBackground#660000
  • statusBarItem.activeBackground#990000
  • statusBarItem.hoverBackground#dd0000
  • statusBarItem.warningBackground#880000
  • statusBarItem.warningForeground#ffffff
  • tab.activeBackground#070003
  • tab.activeBorderTop#ff1a1a
  • tab.activeForeground#ff4444
  • tab.border#0f0005
  • tab.hoverBackground#0f0005
  • tab.inactiveBackground#040001
  • tab.inactiveForeground#441122
  • terminal.ansiBlue#334488
  • terminal.ansiBrightBlack#441122
  • terminal.ansiBrightBlue#5566bb
  • terminal.ansiBrightCyan#5577aa
  • terminal.ansiBrightGreen#66aa66
  • terminal.ansiBrightMagenta#994466
  • terminal.ansiBrightRed#ff4444
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#ccaa00
  • terminal.ansiCyan#334455
  • terminal.ansiGreen#446644
  • terminal.ansiMagenta#661144
  • terminal.ansiRed#ff1a1a
  • terminal.ansiWhite#ffcccc
  • terminal.ansiYellow#886600
  • terminal.background#040001
  • terminal.foreground#ffcccc
  • terminal.selectionBackground#ff000040
  • terminalCursor.foreground#ff1a1a
  • titleBar.activeBackground#040001
  • titleBar.activeForeground#ff1a1a
  • titleBar.border#0f0005
  • titleBar.inactiveBackground#030001
  • titleBar.inactiveForeground#331122
  • widget.shadow#00000099

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#441122italic
keyword, keyword.control, storage.type, storage.modifier#ff1a1abold
string, string.quoted, string.template#cc8888
constant.numeric#ff4444
constant, constant.language, constant.character.escape#ff3333
entity.name.function, meta.function-call, support.function#ff8888
entity.name.type, entity.name.class, support.type, support.class#ee6666
variable, variable.other#ffcccc
variable.parameter#dd9999
keyword.operator#ff1a1a
punctuation, meta.brace#441122
entity.name.tag#ff1a1a
entity.other.attribute-name#cc8888
keyword.control.import, keyword.control.from#ff1a1abold
meta.decorator, punctuation.decorator#880022
invalid, invalid.illegal#ffffffbold underline
Star Wars: Force Theme by b4mm3r - VS Code Theme