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#00E5FF
  • activityBar.background#0A0C13
  • activityBar.foreground#00E5FF
  • activityBarBadge.background#FF00D4
  • activityBarBadge.foreground#0B0F1A
  • badge.background#FF00D4
  • badge.foreground#0B0F1A
  • button.background#101420
  • button.foreground#FFFFFF
  • button.hoverBackground#1A1E2B
  • dropdown.background#0A0C13
  • dropdown.border#101420
  • dropdown.foreground#D0D0D0
  • editor.background#0B0F1A
  • editor.findMatchBackground#FF00D444
  • editor.findMatchHighlightBackground#FF00D422
  • editor.foreground#D0D0D0
  • editor.lineHighlightBackground#10142080
  • editor.lineHighlightBorder#00E5FF30
  • editor.selectionBackground#33445588
  • editor.selectionHighlightBackground#33445544
  • editorBracketMatch.background#FF00D433
  • editorBracketMatch.border#FF00D4
  • editorCursor.foreground#00E5FF
  • editorGroupHeader.tabsBackground#0B0F1A
  • editorIndentGuide.activeBackground#24283888
  • editorIndentGuide.background#24283844
  • editorLineNumber.activeForeground#00E5FF
  • editorLineNumber.foreground#555555
  • editorWhitespace.foreground#242838
  • focusBorder#00E5FF
  • gitDecoration.conflictingResourceForeground#FFDD55
  • gitDecoration.deletedResourceForeground#FF5555
  • gitDecoration.modifiedResourceForeground#4D9EFF
  • gitDecoration.untrackedResourceForeground#A5FF66
  • input.background#0A0C13
  • input.border#101420
  • input.foreground#D0D0D0
  • input.placeholderForeground#555555
  • inputOption.activeBorder#00E5FF
  • list.activeSelectionBackground#101420
  • list.activeSelectionForeground#FFFFFF
  • list.focusBackground#101420
  • list.highlightForeground#00E5FF
  • list.hoverBackground#10142066
  • minimap.background#0B0F1A
  • minimapSlider.activeBackground#00E5FF66
  • minimapSlider.background#00E5FF22
  • minimapSlider.hoverBackground#00E5FF44
  • panel.background#0B0F1A
  • panel.border#101420
  • panelTitle.activeBorder#00E5FF
  • panelTitle.activeForeground#00E5FF
  • panelTitle.inactiveForeground#B0B0B0
  • scrollbar.shadow#00000044
  • scrollbarSlider.activeBackground#00E5FF88
  • scrollbarSlider.background#55555544
  • scrollbarSlider.hoverBackground#55555588
  • sideBar.background#0A0C13
  • sideBar.foreground#B0B0B0
  • sideBarSectionHeader.background#0A0C13
  • sideBarSectionHeader.foreground#00E5FF
  • sideBarTitle.foreground#00E5FF
  • statusBar.background#101420
  • statusBar.debuggingBackground#FF00D4
  • statusBar.foreground#D0D0D0
  • statusBar.noFolderBackground#0A0C13
  • statusBarItem.hoverBackground#1A1E2B
  • tab.activeBackground#101420
  • tab.activeBorder#00E5FF
  • tab.activeForeground#FFFFFF
  • tab.border#0B0F1A
  • tab.inactiveBackground#0A0C13
  • tab.inactiveForeground#B0B0B0
  • terminal.ansiBlue#4D9EFF
  • terminal.ansiBrightBlue#80BFFF
  • terminal.ansiBrightCyan#80FFF0
  • terminal.ansiBrightGreen#C0FF99
  • terminal.ansiBrightMagenta#FFAAFF
  • terminal.ansiBrightRed#FF8888
  • terminal.ansiBrightYellow#FFEE88
  • terminal.ansiCyan#5FFFD7
  • terminal.ansiGreen#A5FF66
  • terminal.ansiMagenta#FF77FF
  • terminal.ansiRed#FF5555
  • terminal.ansiYellow#FFDD55
  • terminal.background#0B0F1A
  • terminal.foreground#D0D0D0
  • titleBar.activeBackground#0A0C13
  • titleBar.activeForeground#E0E0E0
  • titleBar.inactiveBackground#0B0F1A
  • titleBar.inactiveForeground#B0B0B0

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#555555italic
string, string.quoted, string.template#A5FF66
keyword, storage.type, storage.modifier#FF5555bold
keyword.operator, punctuation.accessor#4D9EFF
variable, variable.other#D0D0D0
variable.parameter#4D9EFFitalic
entity.name.function, support.function#4D9EFF
meta.function-call#D0D0D0
entity.name.class, entity.name.type.class, support.class#4D9EFFbold
entity.name.type, support.type#4D9EFF
entity.name.type.interface#5FFFD7italic
constant.numeric#FFDD55
constant, constant.language, constant.character#FFDD55
constant.language.boolean#FFDD55bold
variable.other.property, support.variable.property#D0D0D0
meta.object-literal.key#4D9EFF
entity.name.tag, punctuation.definition.tag#FF5555
entity.other.attribute-name#5FFFD7italic
punctuation, meta.brace#B0B0B0
string.regexp#FFDD55
constant.character.escape#5FFFD7
meta.decorator, punctuation.decorator#FFDD55
invalid, invalid.illegal#FF5555strikethrough
markup.heading, entity.name.section#FF5555bold
markup.bold#FFDD55bold
markup.italic#5FFFD7italic
markup.underline.link#4D9EFF
markup.inline.raw, markup.fenced_code#A5FF66
support.type.property-name.json#4D9EFF
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#FFDD55
support.type.property-name.css#4D9EFF
support.constant.property-value.css#A5FF66