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#00C1B4
  • activityBar.background#11141F
  • activityBar.foreground#FF9500
  • activityBarBadge.background#FF9500
  • activityBarBadge.foreground#0B0F20
  • badge.background#FF9500
  • badge.foreground#0B0F20
  • button.background#141724
  • button.foreground#FFFFFF
  • button.hoverBackground#1A1F32
  • dropdown.background#101324
  • dropdown.border#141724
  • dropdown.foreground#E4E6F0
  • editor.background#0B0F20
  • editor.findMatchBackground#00C1B455
  • editor.findMatchHighlightBackground#00C1B433
  • editor.foreground#E4E6F0
  • editor.lineHighlightBackground#20253D
  • editor.lineHighlightBorder#334066
  • editor.selectionBackground#FF950033
  • editor.selectionHighlightBackground#00C1B433
  • editorBracketMatch.background#FF950033
  • editorBracketMatch.border#FF9500
  • editorCursor.foreground#FF9500
  • editorGroupHeader.tabsBackground#0B0F20
  • editorIndentGuide.activeBackground#506080
  • editorIndentGuide.background#2A2E44
  • editorLineNumber.activeForeground#00C1B4
  • editorLineNumber.foreground#4A5578
  • editorWhitespace.foreground#2A2E44
  • focusBorder#00C1B4
  • gitDecoration.conflictingResourceForeground#FF9500
  • gitDecoration.deletedResourceForeground#FF6F61
  • gitDecoration.modifiedResourceForeground#00C1B4
  • gitDecoration.untrackedResourceForeground#9FD966
  • input.background#101324
  • input.border#141724
  • input.foreground#E4E6F0
  • input.placeholderForeground#4A5578
  • inputOption.activeBorder#00C1B4
  • list.activeSelectionBackground#1A1F32
  • list.activeSelectionForeground#FFFFFF
  • list.focusBackground#1A1F32
  • list.highlightForeground#00C1B4
  • list.hoverBackground#1A1F32AA
  • minimap.background#0B0F20
  • minimapSlider.activeBackground#00C1B477
  • minimapSlider.background#00C1B433
  • minimapSlider.hoverBackground#00C1B455
  • panel.background#0B0F20
  • panel.border#141724
  • panelTitle.activeBorder#00C1B4
  • panelTitle.activeForeground#00C1B4
  • panelTitle.inactiveForeground#7A849E
  • scrollbar.shadow#00000055
  • scrollbarSlider.activeBackground#00C1B5AA
  • scrollbarSlider.background#4A557844
  • scrollbarSlider.hoverBackground#4A557888
  • sideBar.background#101324
  • sideBar.foreground#C0C4D6
  • sideBarSectionHeader.background#151822
  • sideBarSectionHeader.foreground#00C1B4
  • sideBarTitle.foreground#FF9500
  • statusBar.background#141724
  • statusBar.debuggingBackground#FF9500
  • statusBar.foreground#E4E6F0
  • statusBar.noFolderBackground#11141F
  • statusBarItem.hoverBackground#1A1E2F
  • tab.activeBackground#141724
  • tab.activeBorder#00C1B4
  • tab.activeForeground#FFFFFF
  • tab.border#0B0F20
  • tab.inactiveBackground#101324
  • tab.inactiveForeground#7A849E
  • terminal.ansiBlue#5A9FFF
  • terminal.ansiBrightBlue#82BFFF
  • terminal.ansiBrightCyan#33E6D6
  • terminal.ansiBrightGreen#B5E28C
  • terminal.ansiBrightMagenta#E5A5FF
  • terminal.ansiBrightRed#FF9385
  • terminal.ansiBrightYellow#FFD47A
  • terminal.ansiCyan#00C1B4
  • terminal.ansiGreen#9FD966
  • terminal.ansiMagenta#D480FF
  • terminal.ansiRed#FF6F61
  • terminal.ansiYellow#FFB84D
  • terminal.background#0B0F20
  • terminal.foreground#E4E6F0
  • titleBar.activeBackground#11141F
  • titleBar.activeForeground#E4E6F0
  • titleBar.inactiveBackground#0B0F20
  • titleBar.inactiveForeground#7A849E

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#5A6A8Citalic
string, string.quoted, string.template#FFB84D
keyword, storage.type, storage.modifier#FF9500bold
keyword.operator, punctuation.accessor#FF9500
variable, variable.other#E4E6F0
variable.parameter#D480FFitalic
entity.name.function, support.function#00C1B4
meta.function-call#9FD966
entity.name.class, entity.name.type.class, support.class#9FD966bold
entity.name.type, support.type#9FD966
entity.name.type.interface#00C1B4italic
constant.numeric#D480FF
constant, constant.language, constant.character#FFB84D
constant.language.boolean#D480FFbold
variable.other.property, support.variable.property#E4E6F0
meta.object-literal.key#00C1B4
entity.name.tag, punctuation.definition.tag#FF9500
entity.other.attribute-name#D480FFitalic
punctuation, meta.brace#E4E6F0
string.regexp#FF6F61
constant.character.escape#D480FF
meta.decorator, punctuation.decorator#FF9500
invalid, invalid.illegal#FF6F61strikethrough
markup.heading, entity.name.section#FF9500bold
markup.bold#FFB84Dbold
markup.italic#D480FFitalic
markup.underline.link#00C1B4
markup.inline.raw, markup.fenced_code#9FD966
support.type.property-name.json#9FD966
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#FF9500
support.type.property-name.css#00C1B4
support.constant.property-value.css#FFB84D