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#FF6F00
  • activityBar.background#0C0C14
  • activityBar.foreground#FF6F00
  • activityBarBadge.background#FF6F00
  • activityBarBadge.foreground#0B0B13
  • badge.background#FF6F00
  • badge.foreground#0B0B13
  • button.background#111118
  • button.foreground#FFFFFF
  • button.hoverBackground#1A1A22
  • dropdown.background#0C0C14
  • dropdown.border#111118
  • dropdown.foreground#C0C0C0
  • editor.background#0B0B13
  • editor.findMatchBackground#FF6F0044
  • editor.findMatchHighlightBackground#FF6F0022
  • editor.foreground#C0C0C0
  • editor.lineHighlightBackground#11111880
  • editor.lineHighlightBorder#FF6F0040
  • editor.selectionBackground#FF6F1433
  • editor.selectionHighlightBackground#FF6F141A
  • editorBracketMatch.background#FF6F1433
  • editorBracketMatch.border#FF6F00
  • editorCursor.foreground#FF6F00
  • editorGroupHeader.tabsBackground#0B0B13
  • editorIndentGuide.activeBackground#FF6F00
  • editorIndentGuide.background#2D2D38
  • editorLineNumber.activeForeground#FF6F00
  • editorLineNumber.foreground#42424A
  • editorWhitespace.foreground#2D2D38
  • focusBorder#FF6F00
  • gitDecoration.conflictingResourceForeground#FFC700
  • gitDecoration.deletedResourceForeground#FF4500
  • gitDecoration.modifiedResourceForeground#FF6F00
  • gitDecoration.untrackedResourceForeground#00E5FF
  • input.background#0C0C14
  • input.border#111118
  • input.foreground#C0C0C0
  • input.placeholderForeground#42424A
  • inputOption.activeBorder#FF6F00
  • list.activeSelectionBackground#111118
  • list.activeSelectionForeground#FFFFFF
  • list.focusBackground#111118
  • list.highlightForeground#FF6F00
  • list.hoverBackground#11111866
  • minimap.background#0B0B13
  • minimapSlider.activeBackground#FF6F0066
  • minimapSlider.background#FF6F0022
  • minimapSlider.hoverBackground#FF6F0044
  • panel.background#0B0B13
  • panel.border#111118
  • panelTitle.activeBorder#FF6F00
  • panelTitle.activeForeground#FF6F00
  • panelTitle.inactiveForeground#7A7A7A
  • scrollbar.shadow#00000044
  • scrollbarSlider.activeBackground#FF6F0088
  • scrollbarSlider.background#42424A44
  • scrollbarSlider.hoverBackground#42424A88
  • sideBar.background#09090F
  • sideBar.foreground#A0A0A0
  • sideBarSectionHeader.background#0C0C14
  • sideBarSectionHeader.foreground#FF6F00
  • sideBarTitle.foreground#FF6F00
  • statusBar.background#111118
  • statusBar.debuggingBackground#FF6F00
  • statusBar.foreground#C0C0C0
  • statusBar.noFolderBackground#0C0C14
  • statusBarItem.hoverBackground#1A1A22
  • tab.activeBackground#111118
  • tab.activeBorder#FF6F00
  • tab.activeForeground#FFFFFF
  • tab.border#0B0B13
  • tab.inactiveBackground#09090F
  • tab.inactiveForeground#7A7A7A
  • terminal.ansiBlue#5B4B8A
  • terminal.ansiBrightBlue#7A5BBB
  • terminal.ansiBrightCyan#33EFFF
  • terminal.ansiBrightGreen#FF9F33
  • terminal.ansiBrightMagenta#E099FF
  • terminal.ansiBrightRed#FF6F33
  • terminal.ansiBrightYellow#FFE066
  • terminal.ansiCyan#00E5FF
  • terminal.ansiGreen#FF6F00
  • terminal.ansiMagenta#D96FFF
  • terminal.ansiRed#FF4500
  • terminal.ansiYellow#FFC700
  • terminal.background#0B0B13
  • terminal.foreground#C0C0C0
  • titleBar.activeBackground#0C0C14
  • titleBar.activeForeground#C0C0C0
  • titleBar.inactiveBackground#0B0B13
  • titleBar.inactiveForeground#7A7A7A

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#42424Aitalic
string, string.quoted, string.template#00E5FF
keyword, storage.type, storage.modifier#FF6F00bold
keyword.operator, punctuation.accessor#C0C0C0
variable, variable.other#C0C0C0
variable.parameter#FFC700italic
entity.name.function, support.function#FF6F00
meta.function-call#C0C0C0
entity.name.class, entity.name.type.class, support.class#D96FFFbold
entity.name.type, support.type#D96FFF
entity.name.type.interface#5B4B8Aitalic
constant.numeric#FFC700
constant, constant.language, constant.character#FFC700
constant.language.boolean#FFC700bold
variable.other.property, support.variable.property#C0C0C0
meta.object-literal.key#FF6F00
entity.name.tag, punctuation.definition.tag#FF6F00
entity.other.attribute-name#FFC700italic
punctuation, meta.brace#7A7A7A
string.regexp#FF4500
constant.character.escape#00E5FF
meta.decorator, punctuation.decorator#FFC700
invalid, invalid.illegal#FF4500strikethrough
markup.heading, entity.name.section#FF6F00bold
markup.bold#FFC700bold
markup.italic#FFC700italic
markup.underline.link#00E5FF
markup.inline.raw, markup.fenced_code#FF6F00
support.type.property-name.json#FF6F00
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#FFC700
support.type.property-name.css#FF6F00
support.constant.property-value.css#00E5FF