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#FF8C42
  • activityBar.background#0F0F1A
  • activityBar.foreground#A0A0C0
  • activityBarBadge.background#FF8C42
  • activityBarBadge.foreground#101020
  • badge.background#FF8C42
  • badge.foreground#101020
  • button.background#111124
  • button.foreground#E0E0FF
  • button.hoverBackground#21213A
  • dropdown.background#0E0E18
  • dropdown.border#111124
  • dropdown.foreground#E0E0FF
  • editor.background#101020
  • editor.findMatchBackground#FF8C4230
  • editor.findMatchHighlightBackground#FFB86C20
  • editor.foreground#E0E0FF
  • editor.lineHighlightBackground#21213A80
  • editor.lineHighlightBorder#FFB86C
  • editor.selectionBackground#FF8C4240
  • editor.selectionHighlightBackground#FFB86C30
  • editorBracketMatch.background#FFB86C20
  • editorBracketMatch.border#FFB86C
  • editorCursor.foreground#FF8C42
  • editorGroupHeader.tabsBackground#101020
  • editorIndentGuide.activeBackground#FF8C4288
  • editorIndentGuide.background#33334744
  • editorLineNumber.activeForeground#FF8C42
  • editorLineNumber.foreground#555563
  • editorWhitespace.foreground#444452
  • focusBorder#FF8C42
  • gitDecoration.conflictingResourceForeground#FFEB84
  • gitDecoration.deletedResourceForeground#FF8C42
  • gitDecoration.modifiedResourceForeground#FFB86C
  • gitDecoration.untrackedResourceForeground#9CFF9C
  • input.background#0E0E18
  • input.border#111124
  • input.foreground#E0E0FF
  • input.placeholderForeground#555563
  • inputOption.activeBorder#FF8C42
  • list.activeSelectionBackground#111124
  • list.activeSelectionForeground#E0E0FF
  • list.focusBackground#111124
  • list.highlightForeground#FF8C42
  • list.hoverBackground#21213A66
  • minimap.background#101020
  • minimapSlider.activeBackground#FF8C4288
  • minimapSlider.background#FF8C4222
  • minimapSlider.hoverBackground#FF8C4244
  • panel.background#101020
  • panel.border#111124
  • panelTitle.activeBorder#FF8C42
  • panelTitle.activeForeground#E0E0FF
  • panelTitle.inactiveForeground#A0A0C0
  • scrollbar.shadow#00000044
  • scrollbarSlider.activeBackground#FF8C4288
  • scrollbarSlider.background#44445244
  • scrollbarSlider.hoverBackground#44445288
  • sideBar.background#0E0E18
  • sideBar.foreground#C0C0D0
  • sideBarSectionHeader.background#0F0F1A
  • sideBarSectionHeader.foreground#FFB86C
  • sideBarTitle.foreground#E0E0FF
  • statusBar.background#111124
  • statusBar.debuggingBackground#FF8C42
  • statusBar.foreground#E0E0FF
  • statusBar.noFolderBackground#0E0E18
  • statusBarItem.hoverBackground#21213A
  • tab.activeBackground#111124
  • tab.activeBorder#FF8C42
  • tab.activeForeground#E0E0FF
  • tab.border#101020
  • tab.inactiveBackground#090914
  • tab.inactiveForeground#A0A0C0
  • terminal.ansiBlue#5A9FFF
  • terminal.ansiBrightBlue#8FB8FF
  • terminal.ansiBrightCyan#8FFFEF
  • terminal.ansiBrightGreen#9CFF9C
  • terminal.ansiBrightMagenta#E5B8FF
  • terminal.ansiBrightRed#FFB86C
  • terminal.ansiBrightYellow#FFE755
  • terminal.ansiCyan#5AFFFF
  • terminal.ansiGreen#8CFF8C
  • terminal.ansiMagenta#D878FF
  • terminal.ansiRed#FF8C42
  • terminal.ansiYellow#FFEB84
  • terminal.background#101020
  • terminal.foreground#E0E0FF
  • titleBar.activeBackground#0F0F1A
  • titleBar.activeForeground#E0E0FF
  • titleBar.inactiveBackground#090914
  • titleBar.inactiveForeground#A0A0C0

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#5A5A70italic
string, string.quoted, string.template#FFEB84
keyword, storage.type, storage.modifier#FF8C42bold
keyword.operator, punctuation.accessor#FFB86C
variable, variable.other#E0E0FF
variable.parameter#FFB86Citalic
entity.name.function, support.function#5A9FFF
meta.function-call#5A9FFF
entity.name.class, entity.name.type.class, support.class#FFB86Cbold
entity.name.type, support.type#9CFF9C
entity.name.type.interface#5AFFFFitalic
constant.numeric#9CFF9C
constant, constant.language, constant.character#D878FF
constant.language.boolean#FF8C42bold
variable.other.property, support.variable.property#8FB8FF
meta.object-literal.key#8FB8FF
entity.name.tag, punctuation.definition.tag#FF8C42
entity.other.attribute-name#D878FFitalic
punctuation, meta.brace#5A9FFF
string.regexp#9CFF9C
constant.character.escape#D878FF
meta.decorator, punctuation.decorator#FFE755
invalid, invalid.illegal#FF8C42strikethrough
markup.heading, entity.name.section#FF8C42bold
markup.bold#FFB86Cbold
markup.italic#5AFFFFitalic
markup.underline.link#5A9FFF
markup.inline.raw, markup.fenced_code#FFEB84
support.type.property-name.json#FFB86C
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#FF8C42
support.type.property-name.css#8FB8FF
support.constant.property-value.css#FFEB84