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#1DA1F2
  • activityBar.background#0d1520
  • activityBar.foreground#1DA1F2
  • activityBarBadge.background#1DA1F2
  • activityBarBadge.foreground#ffffff
  • badge.background#ffad1f
  • badge.foreground#ffffff
  • button.background#1DA1F2
  • button.foreground#ffffff
  • button.hoverBackground#0d95e8
  • dropdown.background#111b2a
  • dropdown.border#1DA1F2
  • dropdown.foreground#cbd4e0
  • editor.background#0d1520
  • editor.findMatchBackground#ffad1f
  • editor.findMatchHighlightBackground#ffb84d
  • editor.foreground#cbd4e0
  • editor.lineHighlightBackground#1a2b3c
  • editor.lineHighlightBorder#1DA1F2
  • editor.selectionBackground#1a4f8f
  • editor.selectionHighlightBackground#274b7a
  • editorBracketMatch.background#274b7a
  • editorBracketMatch.border#1DA1F2
  • editorCursor.foreground#1DA1F2
  • editorGroupHeader.tabsBackground#111b2a
  • editorIndentGuide.activeBackground#1DA1F2
  • editorIndentGuide.background#2c3e5a
  • editorLineNumber.activeForeground#1DA1F2
  • editorLineNumber.foreground#6e7b91
  • editorWhitespace.foreground#4b5e75
  • focusBorder#1DA1F2
  • gitDecoration.conflictingResourceForeground#ffad1f
  • gitDecoration.deletedResourceForeground#e74c3c
  • gitDecoration.modifiedResourceForeground#1a2b3c
  • gitDecoration.untrackedResourceForeground#2ecc71
  • input.background#1a2b3c
  • input.border#1DA1F2
  • input.foreground#cbd4e0
  • input.placeholderForeground#6e7b91
  • inputOption.activeBorder#1DA1F2
  • list.activeSelectionBackground#1a2b3c
  • list.activeSelectionForeground#cbd4e0
  • list.focusBackground#274b7a
  • list.highlightForeground#ffad1f
  • list.hoverBackground#274b7a
  • minimap.background#0d1520
  • minimapSlider.activeBackground#1DA1F2
  • minimapSlider.background#274b7a
  • minimapSlider.hoverBackground#1a2b3c
  • panel.background#111b2a
  • panel.border#1DA1F2
  • panelTitle.activeBorder#1DA1F2
  • panelTitle.activeForeground#cbd4e0
  • panelTitle.inactiveForeground#6e7b91
  • scrollbar.shadow#000000
  • scrollbarSlider.activeBackground#1DA1F2
  • scrollbarSlider.background#274b7a
  • scrollbarSlider.hoverBackground#1a2b3c
  • sideBar.background#111b2a
  • sideBar.foreground#cbd4e0
  • sideBarSectionHeader.background#111b2a
  • sideBarSectionHeader.foreground#cbd4e0
  • sideBarTitle.foreground#1DA1F2
  • statusBar.background#0d1520
  • statusBar.debuggingBackground#ffad1f
  • statusBar.foreground#cbd4e0
  • statusBar.noFolderBackground#0d1520
  • statusBarItem.hoverBackground#1a2b3c
  • tab.activeBackground#0d1520
  • tab.activeBorder#1DA1F2
  • tab.activeForeground#cbd4e0
  • tab.border#1DA1F2
  • tab.inactiveBackground#111b2a
  • tab.inactiveForeground#6e7b91
  • terminal.ansiBlue#1DA1F2
  • terminal.ansiBrightBlue#0d95e8
  • terminal.ansiBrightCyan#16a085
  • terminal.ansiBrightGreen#27ae60
  • terminal.ansiBrightMagenta#8e44ad
  • terminal.ansiBrightRed#c0392b
  • terminal.ansiBrightYellow#f39c12
  • terminal.ansiCyan#1abc9c
  • terminal.ansiGreen#2ecc71
  • terminal.ansiMagenta#9b59b6
  • terminal.ansiRed#e74c3c
  • terminal.ansiYellow#f1c40f
  • terminal.background#0d1520
  • terminal.foreground#cbd4e0
  • titleBar.activeBackground#111b2a
  • titleBar.activeForeground#cbd4e0
  • titleBar.inactiveBackground#0d1520
  • titleBar.inactiveForeground#6e7b91

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#6e7b91italic
string, string.quoted, string.template#2ecc71
keyword, storage.type, storage.modifier#1DA1F2bold
keyword.operator, punctuation.accessor#cbd4e0
variable, variable.other#cbd4e0
variable.parameter#ffad1fitalic
entity.name.function, support.function#1abc9c
meta.function-call#1abc9c
entity.name.class, entity.name.type.class, support.class#9b59b6bold
entity.name.type, support.type#ffb84d
entity.name.type.interface#ffb84ditalic
constant.numeric#f1c40f
constant, constant.language, constant.character#f1c40f
constant.language.boolean#ffad1fbold
variable.other.property, support.variable.property#1abc9c
meta.object-literal.key#1abc9c
entity.name.tag, punctuation.definition.tag#e74c3c
entity.other.attribute-name#ffad1fitalic
punctuation, meta.brace#cbd4e0
string.regexp#ffad1f
constant.character.escape#ffad1f
meta.decorator, punctuation.decorator#9b59b6
invalid, invalid.illegal#e74c3cstrikethrough
markup.heading, entity.name.section#1DA1F2bold
markup.bold#cbd4e0bold
markup.italic#cbd4e0italic
markup.underline.link#1abc9c
markup.inline.raw, markup.fenced_code#2ecc71
support.type.property-name.json#ffb84d
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#1abc9c
support.type.property-name.css#ffb84d
support.constant.property-value.css#f1c40f
themesmith by CyberBoost - VS Code Theme