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#000000
  • activityBar.border#003300
  • activityBar.foreground#00FF00
  • activityBar.inactiveForeground#006600
  • activityBarBadge.background#00FF00
  • activityBarBadge.foreground#000000
  • badge.background#00FF00
  • badge.foreground#000000
  • breadcrumb.activeSelectionForeground#39FF14
  • breadcrumb.focusForeground#00FF00
  • breadcrumb.foreground#008800
  • button.background#004400
  • button.foreground#00FF00
  • button.hoverBackground#006600
  • diffEditor.insertedTextBackground#00550033
  • diffEditor.removedTextBackground#55000033
  • dropdown.background#001100
  • dropdown.border#004400
  • dropdown.foreground#00FF00
  • editor.background#000000
  • editor.findMatchBackground#00880088
  • editor.findMatchHighlightBackground#00440066
  • editor.foreground#00FF00
  • editor.inactiveSelectionBackground#00220055
  • editor.lineHighlightBackground#00220055
  • editor.lineHighlightBorder#003300
  • editor.selectionBackground#00550088
  • editor.selectionHighlightBackground#00330066
  • editor.wordHighlightBackground#00440055
  • editor.wordHighlightStrongBackground#00660066
  • editorBracketMatch.background#00440066
  • editorBracketMatch.border#00FF00
  • editorCursor.foreground#00FF00
  • editorGroupHeader.tabsBackground#000000
  • editorGroupHeader.tabsBorder#003300
  • editorGutter.addedBackground#00AA00
  • editorGutter.background#000000
  • editorGutter.deletedBackground#880000
  • editorGutter.modifiedBackground#008800
  • editorIndentGuide.activeBackground1#006600
  • editorIndentGuide.background1#002200
  • editorLineNumber.activeForeground#00FF00
  • editorLineNumber.foreground#005500
  • editorRuler.foreground#002200
  • editorWhitespace.foreground#003300
  • gitDecoration.deletedResourceForeground#FF4444
  • gitDecoration.ignoredResourceForeground#005500
  • gitDecoration.modifiedResourceForeground#80FF80
  • gitDecoration.untrackedResourceForeground#39FF14
  • input.background#001100
  • input.border#004400
  • input.foreground#00FF00
  • input.placeholderForeground#006600
  • inputOption.activeBorder#00FF00
  • list.activeSelectionBackground#003300
  • list.activeSelectionForeground#00FF00
  • list.focusBackground#003300
  • list.highlightForeground#39FF14
  • list.hoverBackground#001800
  • list.hoverForeground#39FF14
  • list.inactiveSelectionBackground#002200
  • list.inactiveSelectionForeground#00FF00
  • minimap.background#000000
  • minimapSlider.activeBackground#00FF0066
  • minimapSlider.background#00FF0022
  • minimapSlider.hoverBackground#00FF0044
  • notification.background#001100
  • notification.border#004400
  • notification.foreground#00FF00
  • notificationButton.background#004400
  • notificationButton.foreground#00FF00
  • notificationButton.hoverBackground#006600
  • panel.background#000000
  • panel.border#003300
  • panelTitle.activeBorder#00FF00
  • panelTitle.activeForeground#00FF00
  • panelTitle.inactiveForeground#006600
  • pickerGroup.border#003300
  • pickerGroup.foreground#00FF00
  • quickInput.background#001100
  • quickInput.foreground#00FF00
  • scrollbarSlider.activeBackground#00FF0099
  • scrollbarSlider.background#00FF0033
  • scrollbarSlider.hoverBackground#00FF0066
  • sideBar.background#000000
  • sideBar.border#003300
  • sideBar.foreground#00FF00
  • sideBarSectionHeader.background#002200
  • sideBarSectionHeader.border#003300
  • sideBarSectionHeader.foreground#00FF00
  • sideBarTitle.foreground#00FF00
  • statusBar.background#000000
  • statusBar.border#003300
  • statusBar.debuggingBackground#005500
  • statusBar.debuggingForeground#00FF00
  • statusBar.foreground#00FF00
  • statusBar.noFolderBackground#000000
  • statusBarItem.hoverBackground#003300
  • statusBarItem.remoteBackground#003300
  • statusBarItem.remoteForeground#00FF00
  • tab.activeBackground#000000
  • tab.activeBorder#00FF00
  • tab.activeForeground#00FF00
  • tab.border#003300
  • tab.hoverBackground#002200
  • tab.hoverForeground#39FF14
  • tab.inactiveBackground#001500
  • tab.inactiveForeground#006600
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#00AAFF
  • terminal.ansiBrightBlue#55CCFF
  • terminal.ansiBrightCyan#55FFCC
  • terminal.ansiBrightGreen#39FF14
  • terminal.ansiBrightMagenta#FF55FF
  • terminal.ansiBrightRed#FF5555
  • terminal.ansiBrightWhite#FFFFFF
  • terminal.ansiBrightYellow#FFFF55
  • terminal.ansiCyan#00FFAA
  • terminal.ansiGreen#00FF00
  • terminal.ansiMagenta#FF00FF
  • terminal.ansiRed#FF3333
  • terminal.ansiWhite#D0FFD0
  • terminal.ansiYellow#FFEE00
  • terminal.background#000000
  • terminal.border#003300
  • terminal.foreground#00FF00
  • terminalCursor.background#000000
  • terminalCursor.foreground#00FF00
  • titleBar.activeBackground#000000
  • titleBar.activeForeground#00FF00
  • titleBar.border#003300
  • titleBar.inactiveBackground#001100
  • titleBar.inactiveForeground#005500

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#007700italic
keyword, keyword.control, storage, storage.type, storage.modifier#39FF14bold
string, string.quoted, string.template, punctuation.definition.string#80FF80
constant.numeric, constant.language, constant.other, keyword.other.unit#50FA7B
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method#00FF66
entity.name.type, entity.name.class, entity.name.struct, entity.name.enum, entity.other.inherited-class, support.class, support.type#66FF66bold
variable, variable.other, variable.parameter, meta.block variable.other, support.other.variable#00FF00
variable.other.property, variable.other.object.property, meta.object-literal.key, support.type.property-name, constant.other.key#00EE55
entity.name.tag, meta.tag, punctuation.definition.tag#39FF14
entity.other.attribute-name#80FF80
keyword.operator, punctuation, punctuation.separator, punctuation.terminator, punctuation.section#00CC00
string.regexp, constant.character.escape#A6FF00
invalid, invalid.illegal#FF3333