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#050505
  • activityBar.border#30363d
  • activityBar.foreground#f9f9f7
  • activityBar.inactiveForeground#30363d
  • activityBarBadge.background#CC0000
  • activityBarBadge.foreground#f9f9f7
  • badge.background#CC0000
  • badge.foreground#f9f9f7
  • button.background#CC0000
  • button.foreground#f9f9f7
  • button.hoverBackground#FF0000
  • button.secondaryBackground#30363d
  • button.secondaryForeground#f9f9f7
  • checkbox.background#050505
  • checkbox.border#30363d
  • debugToolBar.background#0d0d0d
  • debugToolBar.border#30363d
  • dropdown.background#0d0d0d
  • dropdown.border#30363d
  • dropdown.foreground#f9f9f7
  • editor.background#050505
  • editor.findMatchBackground#CC000050
  • editor.findMatchHighlightBackground#CC000030
  • editor.focusedStackFrameHighlightBackground#CC000050
  • editor.foreground#f9f9f7
  • editor.lineHighlightBackground#ffffff06
  • editor.selectionBackground#ffffff08
  • editor.selectionHighlightBackground#FF000020
  • editor.stackFrameHighlightBackground#CC000030
  • editorCursor.foreground#FF0000
  • editorGroupHeader.tabsBackground#080808
  • editorGroupHeader.tabsBorder#30363d
  • editorGutter.background#050505
  • editorHoverWidget.background#0d0d0d
  • editorHoverWidget.border#30363d
  • editorIndentGuide.activeBackground1#CC000060
  • editorIndentGuide.background1#30363d30
  • editorLineNumber.activeForeground#8b949e
  • editorLineNumber.foreground#30363d
  • editorSuggestWidget.background#0d0d0d
  • editorSuggestWidget.border#30363d
  • editorSuggestWidget.highlightForeground#FF0000
  • editorSuggestWidget.selectedBackground#CC000020
  • editorWhitespace.foreground#30363d50
  • editorWidget.background#0d0d0d
  • editorWidget.border#30363d
  • extensionButton.prominentBackground#CC0000
  • extensionButton.prominentHoverBackground#FF0000
  • focusBorder#CC0000
  • gitDecoration.addedResourceForeground#3fb950
  • gitDecoration.conflictingResourceForeground#FF0000
  • gitDecoration.deletedResourceForeground#CC0000
  • gitDecoration.ignoredResourceForeground#8b949e
  • gitDecoration.modifiedResourceForeground#d29922
  • gitDecoration.untrackedResourceForeground#3fb950
  • input.background#ffffff08
  • input.border#30363d
  • input.foreground#f9f9f7
  • input.placeholderForeground#8b949e
  • inputOption.activeBorder#CC0000
  • list.activeSelectionBackground#CC000025
  • list.activeSelectionForeground#f9f9f7
  • list.highlightForeground#FF0000
  • list.hoverBackground#ffffff06
  • list.inactiveSelectionBackground#ffffff06
  • menu.background#0d0d0d
  • menu.foreground#f9f9f7
  • menu.selectionBackground#CC000025
  • menu.selectionForeground#f9f9f7
  • menu.separatorBackground#30363d
  • menubar.selectionBackground#CC000025
  • menubar.selectionForeground#f9f9f7
  • notificationLink.foreground#FF0000
  • notifications.background#0d0d0d
  • notifications.border#30363d
  • panel.background#050505
  • panel.border#30363d
  • panelTitle.activeBorder#CC0000
  • panelTitle.activeForeground#CC0000
  • panelTitle.inactiveForeground#8b949e
  • pickerGroup.border#30363d
  • pickerGroup.foreground#CC0000
  • progressBar.background#CC0000
  • quickInput.background#0d0d0d
  • quickInput.foreground#f9f9f7
  • scrollbar.shadow#00000080
  • scrollbarSlider.activeBackground#CC0000
  • scrollbarSlider.background#30363d50
  • scrollbarSlider.hoverBackground#CC000050
  • sideBar.background#080808
  • sideBar.border#30363d
  • sideBar.foreground#f9f9f7
  • sideBarSectionHeader.background#050505
  • sideBarSectionHeader.border#30363d
  • sideBarSectionHeader.foreground#CC0000
  • sideBarTitle.foreground#8b949e
  • statusBar.background#0a0a0a
  • statusBar.border#30363d
  • statusBar.debuggingBackground#CC0000
  • statusBar.debuggingForeground#f9f9f7
  • statusBar.foreground#CC0000
  • statusBar.noFolderBackground#050505
  • tab.activeBackground#050505
  • tab.activeBorder#CC0000
  • tab.activeForeground#f9f9f7
  • tab.border#30363d
  • tab.inactiveBackground#080808
  • tab.inactiveForeground#8b949e
  • terminal.ansiBlack#050505
  • terminal.ansiBlue#58a6ff
  • terminal.ansiBrightBlack#8b949e
  • terminal.ansiBrightBlue#79c0ff
  • terminal.ansiBrightCyan#56d4dd
  • terminal.ansiBrightGreen#56d364
  • terminal.ansiBrightMagenta#d2a8ff
  • terminal.ansiBrightRed#FF0000
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#e3b341
  • terminal.ansiCyan#39c5cf
  • terminal.ansiGreen#3fb950
  • terminal.ansiMagenta#bc8cff
  • terminal.ansiRed#CC0000
  • terminal.ansiWhite#f9f9f7
  • terminal.ansiYellow#d29922
  • terminal.background#050505
  • terminal.foreground#f9f9f7
  • terminal.selectionBackground#CC000040
  • terminalCursor.foreground#FF0000
  • titleBar.activeBackground#050505
  • titleBar.activeForeground#f9f9f7
  • titleBar.border#30363d
  • titleBar.inactiveBackground#050505
  • titleBar.inactiveForeground#8b949e

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
keyword, keyword.control, keyword.operator.new, storage.type, storage.modifier#FF0000
support.type, keyword.type#CC0000
string, string.quoted, string.template#a5d6ff
constant.numeric, constant.language, constant.character#CC0000
entity.name.function, support.function, meta.function-call#f9f9f7bold
comment, punctuation.definition.comment#8b949eitalic
variable, variable.other, variable.parameter#f9f9f7
entity.name.type, entity.name.class, support.class#CC0000
keyword.operator#CC0000
punctuation#30363d
entity.name.tag#FF0000
entity.other.attribute-name#CC0000
keyword.control.import, keyword.control.from#FF0000
invalid, invalid.deprecated#FF0000underline
Apex Cyber-Industrial by AndreaBaldassarre - VS Code Theme