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#ffb400
  • activityBar.background#0c2235
  • activityBar.foreground#ffb400
  • activityBarBadge.background#ffb400
  • activityBarBadge.foreground#0a1c2b
  • badge.background#ffb400
  • badge.foreground#0a1c2b
  • button.background#102c44
  • button.foreground#ffffff
  • button.hoverBackground#1e3b5a
  • dropdown.background#0c2235
  • dropdown.border#102c44
  • dropdown.foreground#d0d8e0
  • editor.background#0a1c2b
  • editor.findMatchBackground#ffb40044
  • editor.findMatchHighlightBackground#ffb40022
  • editor.foreground#d0d8e0
  • editor.lineHighlightBackground#0f2c43
  • editor.lineHighlightBorder#0f2c43
  • editor.selectionBackground#ffb40066
  • editor.selectionHighlightBackground#ffb40033
  • editorBracketMatch.background#ffb40033
  • editorBracketMatch.border#ffb400
  • editorCursor.foreground#ffb400
  • editorGroupHeader.tabsBackground#0a1c2b
  • editorIndentGuide.activeBackground#1e3b5a88
  • editorIndentGuide.background#1e3b5a44
  • editorLineNumber.activeForeground#ffb400
  • editorLineNumber.foreground#5a6b8c
  • editorWhitespace.foreground#1e3b5a
  • focusBorder#ffb400
  • gitDecoration.conflictingResourceForeground#ffb400
  • gitDecoration.deletedResourceForeground#e57373
  • gitDecoration.modifiedResourceForeground#5a8fd9
  • gitDecoration.untrackedResourceForeground#6ec5c4
  • input.background#0c2235
  • input.border#102c44
  • input.foreground#d0d8e0
  • input.placeholderForeground#5a6b8c
  • inputOption.activeBorder#ffb400
  • list.activeSelectionBackground#102c44
  • list.activeSelectionForeground#ffffff
  • list.focusBackground#102c44
  • list.highlightForeground#ffb400
  • list.hoverBackground#102c4466
  • minimap.background#0a1c2b
  • minimapSlider.activeBackground#ffb40066
  • minimapSlider.background#ffb40022
  • minimapSlider.hoverBackground#ffb40044
  • panel.background#0a1c2b
  • panel.border#102c44
  • panelTitle.activeBorder#ffb400
  • panelTitle.activeForeground#ffb400
  • panelTitle.inactiveForeground#b0c3d5
  • scrollbar.shadow#00000044
  • scrollbarSlider.activeBackground#ffb40088
  • scrollbarSlider.background#5a6b8c44
  • scrollbarSlider.hoverBackground#5a6b8c88
  • sideBar.background#0c2235
  • sideBar.foreground#b0c3d5
  • sideBarSectionHeader.background#0c2235
  • sideBarSectionHeader.foreground#ffb400
  • sideBarTitle.foreground#ffb400
  • statusBar.background#102c44
  • statusBar.debuggingBackground#5a8fd9
  • statusBar.foreground#d0d8e0
  • statusBar.noFolderBackground#0c2235
  • statusBarItem.hoverBackground#1e3b5a
  • tab.activeBackground#102c44
  • tab.activeBorder#ffb400
  • tab.activeForeground#ffffff
  • tab.border#0a1c2b
  • tab.inactiveBackground#0c2235
  • tab.inactiveForeground#b0c3d5
  • terminal.ansiBlue#5a8fd9
  • terminal.ansiBrightBlue#8ab4f8
  • terminal.ansiBrightCyan#8fe7df
  • terminal.ansiBrightGreen#a5d96a
  • terminal.ansiBrightMagenta#ea9ed1
  • terminal.ansiBrightRed#ff8a80
  • terminal.ansiBrightYellow#ffd740
  • terminal.ansiCyan#6ec5c4
  • terminal.ansiGreen#91c56a
  • terminal.ansiMagenta#e19abf
  • terminal.ansiRed#e57373
  • terminal.ansiYellow#ffb400
  • terminal.background#0a1c2b
  • terminal.foreground#d0d8e0
  • titleBar.activeBackground#0c2235
  • titleBar.activeForeground#d0d8e0
  • titleBar.inactiveBackground#0a1c2b
  • titleBar.inactiveForeground#b0c3d5

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#708090italic
string, string.quoted, string.template#6ec5c4
keyword, storage.type, storage.modifier#5a8fd9bold
keyword.operator, punctuation.accessor#ffb400
variable, variable.other#d0d8e0
variable.parameter#ffb400italic
entity.name.function, support.function#58d4b9
meta.function-call#c8d2dd
entity.name.class, entity.name.type.class, support.class#e19abfbold
entity.name.type, support.type#91c56a
entity.name.type.interface#6ec5c4italic
constant.numeric#ffb400
constant, constant.language, constant.character#ffb400
constant.language.boolean#ffb400bold
variable.other.property, support.variable.property#d0d8e0
meta.object-literal.key#58d4b9
entity.name.tag, punctuation.definition.tag#5a8fd9
entity.other.attribute-name#e19abfitalic
punctuation, meta.brace#ffb400
string.regexp#e57373
constant.character.escape#e19abf
meta.decorator, punctuation.decorator#ffb400
invalid, invalid.illegal#e57373strikethrough
markup.heading, entity.name.section#5a8fd9bold
markup.bold#ffb400bold
markup.italic#e19abfitalic
markup.underline.link#6ec5c4
markup.inline.raw, markup.fenced_code#91c56a
support.type.property-name.json#58d4b9
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#ffb400
support.type.property-name.css#58d4b9
support.constant.property-value.css#6ec5c4
themesmith by CyberBoost - VS Code Theme