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—