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.activeBorder#FFFFFF
  • activityBar.background#000000
  • activityBar.foreground#00B7FF
  • button.background#00B7FF
  • button.foreground#000000
  • button.hoverBackground#7DE2FF
  • descriptionForeground#6C8CA3
  • diffEditor.insertedTextBackground#00FF8522
  • diffEditor.removedTextBackground#FF2D5522
  • dropdown.background#050505
  • editor.background#000000
  • editor.foreground#F8FBFF
  • editor.inactiveSelectionBackground#00B7FF22
  • editor.lineHighlightBackground#00B7FF10
  • editor.selectionBackground#00B7FF44
  • editorCursor.foreground#00B7FF
  • editorGroupHeader.tabsBackground#000000
  • editorGutter.addedBackground#00FF85
  • editorGutter.background#000000
  • editorGutter.deletedBackground#FF2D55
  • editorGutter.modifiedBackground#FFD60A
  • editorIndentGuide.activeBackground1#00B7FF
  • editorIndentGuide.background1#222222
  • editorLineNumber.activeForeground#FFFFFF
  • editorLineNumber.foreground#6C8CA3
  • editorOverviewRuler.addedForeground#00FF85DD
  • editorOverviewRuler.deletedForeground#FF2D55DD
  • editorOverviewRuler.modifiedForeground#FFD60ADD
  • errorForeground#FF2D55
  • focusBorder#00B7FF99
  • foreground#F8FBFF
  • gitDecoration.addedResourceForeground#00FF85
  • gitDecoration.deletedResourceForeground#FF2D55
  • gitDecoration.modifiedResourceForeground#FFD60A
  • input.background#050505
  • input.border#00B7FF99
  • list.activeSelectionBackground#00B7FF33
  • list.highlightForeground#FFD60A
  • minimapGutter.addedBackground#00FF85
  • minimapGutter.deletedBackground#FF2D55
  • minimapGutter.modifiedBackground#FFD60A
  • panel.background#000000
  • sideBar.background#000000
  • sideBar.foreground#F8FBFF
  • statusBar.background#000000
  • statusBar.foreground#FFFFFF
  • tab.activeBackground#050505
  • tab.activeForeground#FFFFFF
  • tab.inactiveBackground#000000
  • tab.inactiveForeground#6C8CA3
  • terminal.background#000000
  • terminal.foreground#F8FBFF
  • terminalCursor.foreground#00B7FF
  • titleBar.activeBackground#000000
  • titleBar.activeForeground#F8FBFF

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#6C8CA3italic
keyword, storage.type, storage.modifier#00B7FF
entity.name.function, support.function#7DE2FF
entity.name.function.member, meta.method#B8F7FF
variable, meta.definition.variable#F8FBFF
variable.parameter, meta.parameter#FFFFFF
entity.name.type, support.type, entity.name.class#FFD60A
entity.name.type.interface#FFD60Aitalic
string, constant.other.symbol#FFFFFF
constant.numeric, constant.language.boolean#FFD60A
variable.other.property, support.variable.property#B8F7FF
keyword.operator, punctuation.accessor#00B7FF
entity.name.tag, entity.other.attribute-name#00B7FF
invalid, invalid.illegal#FF2D55bold
Rods Themes by PedroHRFerreira - VS Code Theme