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#00BFA6
  • activityBar.background#11131A
  • activityBar.foreground#00BFA6
  • activityBarBadge.background#FFB300
  • activityBarBadge.foreground#0B0C10
  • badge.background#FFB300
  • badge.foreground#0B0C10
  • button.background#2D313D
  • button.foreground#D0D0D0
  • button.hoverBackground#3A3F4C
  • dropdown.background#11131A
  • dropdown.border#2D313D
  • dropdown.foreground#D0D0D0
  • editor.background#0B0C10
  • editor.findMatchBackground#FF6D0066
  • editor.findMatchHighlightBackground#FF6D0033
  • editor.foreground#D0D0D0
  • editor.lineHighlightBackground#1E2127
  • editor.lineHighlightBorder#2D313D
  • editor.selectionBackground#2A3B4C
  • editor.selectionHighlightBackground#1F2A38
  • editorBracketMatch.background#FFB30033
  • editorBracketMatch.border#FFB300
  • editorCursor.foreground#00BFA6
  • editorGroupHeader.tabsBackground#0B0C10
  • editorIndentGuide.activeBackground#2D313D88
  • editorIndentGuide.background#2D313D44
  • editorLineNumber.activeForeground#00BFA6
  • editorLineNumber.foreground#5C6370
  • editorWhitespace.foreground#2D313D
  • focusBorder#00BFA6
  • gitDecoration.conflictingResourceForeground#FF6D00
  • gitDecoration.deletedResourceForeground#FF6D00
  • gitDecoration.modifiedResourceForeground#FFB300
  • gitDecoration.untrackedResourceForeground#99C794
  • input.background#11131A
  • input.border#2D313D
  • input.foreground#D0D0D0
  • input.placeholderForeground#5C6370
  • inputOption.activeBorder#00BFA6
  • list.activeSelectionBackground#2A3B4C
  • list.activeSelectionForeground#FFFFFF
  • list.focusBackground#2A3B4C
  • list.highlightForeground#FFB300
  • list.hoverBackground#1F2A38
  • minimap.background#0B0C10
  • minimapSlider.activeBackground#FFB30066
  • minimapSlider.background#FFB30022
  • minimapSlider.hoverBackground#FFB30044
  • panel.background#0B0C10
  • panel.border#2D313D
  • panelTitle.activeBorder#00BFA6
  • panelTitle.activeForeground#00BFA6
  • panelTitle.inactiveForeground#7A8288
  • scrollbar.shadow#00000044
  • scrollbarSlider.activeBackground#5A637A88
  • scrollbarSlider.background#3A3F4C44
  • scrollbarSlider.hoverBackground#4A515F66
  • sideBar.background#11131A
  • sideBar.foreground#C5C8C6
  • sideBarSectionHeader.background#11131A
  • sideBarSectionHeader.foreground#00BFA6
  • sideBarTitle.foreground#00BFA6
  • statusBar.background#11131A
  • statusBar.debuggingBackground#FF6D00
  • statusBar.foreground#D0D0D0
  • statusBar.noFolderBackground#11131A
  • statusBarItem.hoverBackground#1E2127
  • tab.activeBackground#15171F
  • tab.activeBorder#00BFA6
  • tab.activeForeground#FFFFFF
  • tab.border#0B0C10
  • tab.inactiveBackground#11131A
  • tab.inactiveForeground#7A8288
  • terminal.ansiBlue#5AA9E6
  • terminal.ansiBrightBlue#80C0FF
  • terminal.ansiBrightCyan#8FFFFF
  • terminal.ansiBrightGreen#B6E28D
  • terminal.ansiBrightMagenta#D6A0FF
  • terminal.ansiBrightRed#FF8C42
  • terminal.ansiBrightYellow#F9D47B
  • terminal.ansiCyan#5FD7D7
  • terminal.ansiGreen#99C794
  • terminal.ansiMagenta#C594C5
  • terminal.ansiRed#FF6D00
  • terminal.ansiYellow#E6C07B
  • terminal.background#0B0C10
  • terminal.foreground#D0D0D0
  • titleBar.activeBackground#11131A
  • titleBar.activeForeground#D0D0D0
  • titleBar.inactiveBackground#0B0C10
  • titleBar.inactiveForeground#7A8288

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#5C6370italic
string, string.quoted, string.template#99C794
keyword, storage.type, storage.modifier#FF6D00bold
keyword.operator, punctuation.accessor#5AA9E6
variable, variable.other#D0D0D0
variable.parameter#FFB300italic
entity.name.function, support.function#5FD7D7
meta.function-call#C594C5
entity.name.class, entity.name.type.class, support.class#E5C07Bbold
entity.name.type, support.type#5FD7D7
entity.name.type.interface#80C0FFitalic
constant.numeric#FFB300
constant, constant.language, constant.character#FFB300
constant.language.boolean#FF6D00bold
variable.other.property, support.variable.property#D0D0D0
meta.object-literal.key#E5C07B
entity.name.tag, punctuation.definition.tag#FF6D00
entity.other.attribute-name#C594C5italic
punctuation, meta.brace#5AA9E6
string.regexp#FFB300
constant.character.escape#C594C5
meta.decorator, punctuation.decorator#FFB300
invalid, invalid.illegal#FF6D00strikethrough
markup.heading, entity.name.section#FF6D00bold
markup.bold#FFB300bold
markup.italic#C594C5italic
markup.underline.link#5AA9E6
markup.inline.raw, markup.fenced_code#99C794
support.type.property-name.json#E5C07B
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#FFB300
support.type.property-name.css#5FD7D7
support.constant.property-value.css#99C794
themesmith by CyberBoost - VS Code Theme