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#00B5FF
  • activityBar.background#0B0C10
  • activityBar.foreground#FF4D4D
  • activityBarBadge.background#FF4D4D
  • activityBarBadge.foreground#0B0C10
  • badge.background#FF4D4D
  • badge.foreground#0B0C10
  • button.background#00B5FF
  • button.foreground#0B0C10
  • button.hoverBackground#00B5FFC0
  • dropdown.background#111218
  • dropdown.border#00B5FF
  • dropdown.foreground#C5C8C6
  • editor.background#0B0C10
  • editor.findMatchBackground#FF4D4D60
  • editor.findMatchHighlightBackground#FF4D4D30
  • editor.foreground#C5C8C6
  • editor.lineHighlightBackground#FF4D4D20
  • editor.lineHighlightBorder#FF4D4D40
  • editor.selectionBackground#00B5FF80
  • editor.selectionHighlightBackground#00B5FF40
  • editorBracketMatch.background#00B5FF20
  • editorBracketMatch.border#00B5FF
  • editorCursor.foreground#FFB86C
  • editorGroupHeader.tabsBackground#0B0C10
  • editorIndentGuide.activeBackground#555677
  • editorIndentGuide.background#333444
  • editorLineNumber.activeForeground#FF4D4D
  • editorLineNumber.foreground#6A6A6A
  • editorWhitespace.foreground#6A6A6A
  • focusBorder#FF4D4D
  • gitDecoration.conflictingResourceForeground#F1FA8C
  • gitDecoration.deletedResourceForeground#FF4D4D
  • gitDecoration.modifiedResourceForeground#00B5FF
  • gitDecoration.untrackedResourceForeground#A6E22E
  • input.background#111218
  • input.border#00B5FF
  • input.foreground#C5C8C6
  • input.placeholderForeground#6A6A6A
  • inputOption.activeBorder#FF4D4D
  • list.activeSelectionBackground#00B5FF80
  • list.activeSelectionForeground#0B0C10
  • list.focusBackground#00B5FF80
  • list.highlightForeground#FF4D4D
  • list.hoverBackground#00B5FF40
  • minimap.background#0B0C10
  • minimapSlider.activeBackground#00B5F066
  • minimapSlider.background#00B5F022
  • minimapSlider.hoverBackground#00B5F044
  • panel.background#0B0C10
  • panel.border#00B5FF
  • panelTitle.activeBorder#FF4D4D
  • panelTitle.activeForeground#C5C8C6
  • panelTitle.inactiveForeground#6A6A6A
  • scrollbar.shadow#00000044
  • scrollbarSlider.activeBackground#FF4D4D88
  • scrollbarSlider.background#55555544
  • scrollbarSlider.hoverBackground#55555588
  • sideBar.background#111218
  • sideBar.foreground#C5C8C6
  • sideBarSectionHeader.background#0B0C10
  • sideBarSectionHeader.foreground#00B5FF
  • sideBarTitle.foreground#FF4D4D
  • statusBar.background#00B5FF
  • statusBar.debuggingBackground#FF4D4D
  • statusBar.foreground#0B0C10
  • statusBar.noFolderBackground#0B0C10
  • statusBarItem.hoverBackground#FF4D4D33
  • tab.activeBackground#0B0C10
  • tab.activeBorder#FF4D4D
  • tab.activeForeground#C5C8C6
  • tab.border#0B0C10
  • tab.inactiveBackground#08090A
  • tab.inactiveForeground#6A6A6A
  • terminal.ansiBlue#00B5FF
  • terminal.ansiBrightBlue#5FAFFF
  • terminal.ansiBrightCyan#79E6FF
  • terminal.ansiBrightGreen#C9FF9E
  • terminal.ansiBrightMagenta#FF92D0
  • terminal.ansiBrightRed#FF6E6E
  • terminal.ansiBrightYellow#FFF79A
  • terminal.ansiCyan#66D9EF
  • terminal.ansiGreen#A6E22E
  • terminal.ansiMagenta#FF79C6
  • terminal.ansiRed#FF4D4D
  • terminal.ansiYellow#F1FA8C
  • terminal.background#0B0C10
  • terminal.foreground#C5C8C6
  • titleBar.activeBackground#0B0C10
  • titleBar.activeForeground#C5C8C6
  • titleBar.inactiveBackground#08090A
  • titleBar.inactiveForeground#6A6A6A

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#6A6A6Aitalic
string, string.quoted, string.template#FFB86C
keyword, storage.type, storage.modifier#FF4D4Dbold
keyword.operator, punctuation.accessor#00B5FF
variable, variable.other#C5C8C6
variable.parameter#FFB86Citalic
entity.name.function, support.function#00B5FF
meta.function-call#5FAFFF
entity.name.class, entity.name.type.class, support.class#FF4D4Dbold
entity.name.type, support.type#00B5FF
entity.name.type.interface#5FAFFFitalic
constant.numeric#F1FA8C
constant, constant.language, constant.character#FFB86C
constant.language.boolean#F1FA8Cbold
variable.other.property, support.variable.property#00B5FF
meta.object-literal.key#5FAFFF
entity.name.tag, punctuation.definition.tag#FF4D4D
entity.other.attribute-name#FF79C6italic
punctuation, meta.brace#C5C8C6
string.regexp#FFB86C
constant.character.escape#FF79C6
meta.decorator, punctuation.decorator#F1FA8C
invalid, invalid.illegal#FF6E6Estrikethrough
markup.heading, entity.name.section#00B5FFbold
markup.bold#FF4D4Dbold
markup.italic#FF79C6italic
markup.underline.link#5FAFFF
markup.inline.raw, markup.fenced_code#FFB86C
support.type.property-name.json#00B5FF
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#F1FA8C
support.type.property-name.css#00B5FF
support.constant.property-value.css#FFB86C