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#0F1115
  • activityBar.foreground#FF6F00
  • activityBarBadge.background#FF6F00
  • activityBarBadge.foreground#0B0C10
  • badge.background#FF6F00
  • badge.foreground#0B0C10
  • button.background#1A1E23
  • button.foreground#FFFFFF
  • button.hoverBackground#2C313A
  • dropdown.background#1A1E23
  • dropdown.border#333844
  • dropdown.foreground#D0D0D0
  • editor.background#0B0C10
  • editor.findMatchBackground#FF6F0060
  • editor.findMatchHighlightBackground#FF6F0030
  • editor.foreground#D0D0D0
  • editor.lineHighlightBackground#21252B40
  • editor.lineHighlightBorder#FF6F0080
  • editor.selectionBackground#FF6F0040
  • editor.selectionHighlightBackground#FF6F0030
  • editorBracketMatch.background#FF6F0040
  • editorBracketMatch.border#FF6F00
  • editorCursor.foreground#FF6F00
  • editorGroupHeader.tabsBackground#0B0C10
  • editorIndentGuide.activeBackground#FF6F0088
  • editorIndentGuide.background#33384444
  • editorLineNumber.activeForeground#FF6F00
  • editorLineNumber.foreground#5A6A73
  • editorWhitespace.foreground#333844
  • focusBorder#FF6F00
  • gitDecoration.conflictingResourceForeground#FFCB6B
  • gitDecoration.deletedResourceForeground#FF5370
  • gitDecoration.modifiedResourceForeground#FF6F00
  • gitDecoration.untrackedResourceForeground#C5E478
  • input.background#1A1E23
  • input.border#333844
  • input.foreground#D0D0D0
  • input.placeholderForeground#6A7A85
  • inputOption.activeBorder#FF6F00
  • list.activeSelectionBackground#1A1E23
  • list.activeSelectionForeground#FFFFFF
  • list.focusBackground#1A1E23
  • list.highlightForeground#FF6F00
  • list.hoverBackground#1A1E2366
  • minimap.background#0B0C10
  • minimapSlider.activeBackground#FF6F0066
  • minimapSlider.background#FF6F0022
  • minimapSlider.hoverBackground#FF6F0044
  • panel.background#0B0C10
  • panel.border#1A1E23
  • panelTitle.activeBorder#FF6F00
  • panelTitle.activeForeground#FF6F00
  • panelTitle.inactiveForeground#A0A0A0
  • scrollbar.shadow#00000044
  • scrollbarSlider.activeBackground#FF6F0088
  • scrollbarSlider.background#5A6A7344
  • scrollbarSlider.hoverBackground#5A6A7388
  • sideBar.background#0F1115
  • sideBar.foreground#B0B0B0
  • sideBarSectionHeader.background#1A1E22
  • sideBarSectionHeader.foreground#FF6F00
  • sideBarTitle.foreground#FF6F00
  • statusBar.background#1A1E23
  • statusBar.debuggingBackground#FF6F00
  • statusBar.foreground#D0D0D0
  • statusBar.noFolderBackground#0F1115
  • statusBarItem.hoverBackground#2C313A
  • tab.activeBackground#1A1E23
  • tab.activeBorder#FF6F00
  • tab.activeForeground#FFFFFF
  • tab.border#0B0C10
  • tab.inactiveBackground#0F1115
  • tab.inactiveForeground#A0A0A0
  • terminal.ansiBlue#6A9FFF
  • terminal.ansiBrightBlue#82AFFF
  • terminal.ansiBrightCyan#8CD8D3
  • terminal.ansiBrightGreen#D4F6A0
  • terminal.ansiBrightMagenta#F2B2FF
  • terminal.ansiBrightRed#FF8A80
  • terminal.ansiBrightYellow#FFE082
  • terminal.ansiCyan#66D9EF
  • terminal.ansiGreen#C5E478
  • terminal.ansiMagenta#C792EA
  • terminal.ansiRed#FF5370
  • terminal.ansiYellow#FFCB6B
  • terminal.background#0B0C10
  • terminal.foreground#D0D0D0
  • titleBar.activeBackground#0F1115
  • titleBar.activeForeground#D0D0D0
  • titleBar.inactiveBackground#0B0C10
  • titleBar.inactiveForeground#A0A0A0

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#5A6A73italic
string, string.quoted, string.template#C0FF33
keyword, storage.type, storage.modifier#FF6F00bold
keyword.operator, punctuation.accessor#FF8A50
variable, variable.other#D0D0D0
variable.parameter#C0FF33italic
entity.name.function, support.function#FF8A50
meta.function-call#D0D0D0
entity.name.class, entity.name.type.class, support.class#FF8A50bold
entity.name.type, support.type#FF8A50
entity.name.type.interface#C0FF33italic
constant.numeric#FFCB6B
constant, constant.language, constant.character#FFCB6B
constant.language.boolean#FF6F00bold
variable.other.property, support.variable.property#D0D0D0
meta.object-literal.key#FF8A50
entity.name.tag, punctuation.definition.tag#FF6F00
entity.other.attribute-name#C0FF33italic
punctuation, meta.brace#FF8A50
string.regexp#C0FF33
constant.character.escape#FF8A50
meta.decorator, punctuation.decorator#C0FF33
invalid, invalid.illegal#FF5370strikethrough
markup.heading, entity.name.section#FF6F00bold
markup.bold#C0FF33bold
markup.italic#FF8A50italic
markup.underline.link#C0FF33
markup.inline.raw, markup.fenced_code#C5E478
support.type.property-name.json#FF8A50
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#C0FF33
support.type.property-name.css#FF8A50
support.constant.property-value.css#C0FF33