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#0D0D0D
  • activityBar.border#FF0080
  • activityBar.foreground#00F5FF
  • activityBar.inactiveForeground#888888
  • activityBarBadge.background#FF0080
  • activityBarBadge.foreground#0D0D0D
  • badge.background#FF0080
  • badge.foreground#0D0D0D
  • breadcrumb.activeSelectionForeground#FF0080
  • breadcrumb.background#0D0D0D
  • breadcrumb.focusForeground#00F5FF
  • breadcrumb.foreground#888888
  • button.background#FF0080
  • button.foreground#0D0D0D
  • button.hoverBackground#FF40A0
  • dropdown.background#0D0D0D
  • dropdown.border#FF0080
  • dropdown.foreground#00F5FF
  • editor.background#0D0D0D
  • editor.findMatchBackground#FFFF00AA
  • editor.findMatchHighlightBackground#FFFF0060
  • editor.foreground#00F5FF
  • editor.lineHighlightBackground#1A1A1A
  • editor.selectionBackground#FF008080
  • editor.selectionHighlightBackground#00F5FF50
  • editor.wordHighlightBackground#00FF8060
  • editor.wordHighlightStrongBackground#FF006680
  • editorCursor.foreground#FF0080
  • editorGroupHeader.tabsBackground#0D0D0D
  • editorGroupHeader.tabsBorder#FF0080
  • editorIndentGuide.activeBackground#00F5FF
  • editorIndentGuide.background#444444
  • editorLineNumber.activeForeground#00F5FF
  • editorLineNumber.foreground#888888
  • editorOverviewRuler.addedForeground#00FF80
  • editorOverviewRuler.border#0D0D0D
  • editorOverviewRuler.deletedForeground#FF0040
  • editorOverviewRuler.errorForeground#FF0040
  • editorOverviewRuler.infoForeground#00F5FF
  • editorOverviewRuler.modifiedForeground#FFFF00
  • editorOverviewRuler.warningForeground#FFFF00
  • editorRuler.foreground#444444
  • editorWhitespace.foreground#666666
  • gitDecoration.conflictingResourceForeground#FF8000
  • gitDecoration.deletedResourceForeground#FF0040
  • gitDecoration.ignoredResourceForeground#888888
  • gitDecoration.modifiedResourceForeground#FFFF00
  • gitDecoration.submoduleResourceForeground#00F5FF
  • gitDecoration.untrackedResourceForeground#00FF80
  • input.background#0D0D0D
  • input.border#FF0080
  • input.foreground#00F5FF
  • input.placeholderForeground#888888
  • inputOption.activeBorder#FF0080
  • list.activeSelectionBackground#FF008080
  • list.activeSelectionForeground#00F5FF
  • list.focusBackground#FF008080
  • list.hoverBackground#00F5FF40
  • list.inactiveSelectionBackground#FF008040
  • menu.background#0D0D0D
  • menu.foreground#00F5FF
  • menu.selectionBackground#FF008080
  • menu.selectionForeground#00F5FF
  • menu.separatorBackground#FF0080
  • menubar.selectionBackground#FF008080
  • menubar.selectionForeground#00F5FF
  • minimap.background#0D0D0D
  • minimapSlider.activeBackground#FF0080A0
  • minimapSlider.background#FF008060
  • minimapSlider.hoverBackground#FF008080
  • panel.background#0D0D0D
  • panel.border#FF0080
  • panelTitle.activeBorder#FF0080
  • panelTitle.activeForeground#00F5FF
  • panelTitle.inactiveForeground#888888
  • progressBar.background#FF0080
  • scrollbar.shadow#0D0D0D
  • scrollbarSlider.activeBackground#FF0080A0
  • scrollbarSlider.background#FF008060
  • scrollbarSlider.hoverBackground#FF008080
  • sideBar.background#0D0D0D
  • sideBar.border#FF0080
  • sideBar.foreground#00F5FF
  • sideBarSectionHeader.background#1A1A1A
  • sideBarSectionHeader.foreground#00F5FF
  • sideBarTitle.foreground#FF0080
  • statusBar.background#0D0D0D
  • statusBar.border#FF0080
  • statusBar.debuggingBackground#FF0040
  • statusBar.debuggingForeground#0D0D0D
  • statusBar.foreground#00F5FF
  • statusBar.nofolderBackground#0D0D0D
  • tab.activeBackground#0D0D0D
  • tab.activeBorder#FF0080
  • tab.activeBorderTop#FF0080
  • tab.activeForeground#00F5FF
  • tab.border#444444
  • tab.inactiveBackground#0D0D0D
  • tab.inactiveForeground#888888
  • terminal.ansiBlack#0D0D0D
  • terminal.ansiBlue#0080FF
  • terminal.ansiBrightBlack#888888
  • terminal.ansiBrightBlue#4080FF
  • terminal.ansiBrightCyan#80F5FF
  • terminal.ansiBrightGreen#40FF80
  • terminal.ansiBrightMagenta#FF40FF
  • terminal.ansiBrightRed#FF4080
  • terminal.ansiBrightWhite#FFFFFF
  • terminal.ansiBrightYellow#FFFF80
  • terminal.ansiCyan#00F5FF
  • terminal.ansiGreen#00FF80
  • terminal.ansiMagenta#FF0080
  • terminal.ansiRed#FF0040
  • terminal.ansiWhite#FFFFFF
  • terminal.ansiYellow#FFFF00
  • terminal.background#0D0D0D
  • terminal.foreground#00F5FF
  • titleBar.activeBackground#0D0D0D
  • titleBar.activeForeground#00F5FF
  • titleBar.border#FF0080
  • titleBar.inactiveBackground#0D0D0D
  • titleBar.inactiveForeground#888888
  • tree.indentGuidesStroke#FF0080

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#A6A6A6italic
string, string.quoted, string.template#32FF7E
constant.numeric, constant.language#FFD700
keyword, keyword.control, keyword.other#FF1493bold
entity.name.function, support.function, meta.function-call#1E90FFbold
entity.name.class, entity.name.type, support.class#ADFF2Fbold
variable, variable.other#87CEFA
variable.parameter, parameter#FF6347italic
variable.other.property, support.type.property-name#98FB98
constant, constant.other#FFA500bold
keyword.operator, punctuation#FF4500
entity.name.type, support.type, storage.type#9370DBbold
keyword.control.import, keyword.control.export, keyword.control.from#FF69B4bold
entity.name.tag, punctuation.definition.tag#FF4500bold
entity.other.attribute-name#4682B4
entity.name.tag.css, entity.other.attribute-name.class.css#FF6347bold
support.type.property-name.css#32CD32
support.constant.property-value.css#87CEEB
support.type.property-name.json#FFA07A
support.class.component#20B2AAbold
string.regexp#DC143C
string.template, punctuation.definition.template-expression#40E0D0
entity.name.function.decorator, punctuation.decorator#DAA520italic
markup.heading#5F9EA0bold
markup.underline.link#7FFFD4
markup.inline.raw, markup.fenced_code#8A2BE2
invalid, invalid.illegal#FF0000bold underline
invalid.deprecated#FF8C00strikethrough
Null Theme by kimberlycasamina - VS Code Theme