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#3A8DFF
  • activityBar.background#0A0A20
  • activityBar.foreground#3A8DFF
  • activityBarBadge.background#3A8DFF
  • activityBarBadge.foreground#0A0A20
  • badge.background#3A8DFF
  • badge.foreground#0A0A20
  • button.background#1F2330
  • button.foreground#E1E4E8
  • button.hoverBackground#27496D
  • dropdown.background#1F2330
  • dropdown.border#3A8DFF
  • dropdown.foreground#E1E4E8
  • editor.background#0A0A20
  • editor.findMatchBackground#3A8DFF44
  • editor.findMatchHighlightBackground#3A8DFF22
  • editor.foreground#E1E4E8
  • editor.lineHighlightBackground#1A1F30
  • editor.lineHighlightBorder#1A1F30
  • editor.selectionBackground#27496D
  • editor.selectionHighlightBackground#27496D88
  • editorBracketMatch.background#3A8DFF33
  • editorBracketMatch.border#3A8DFF
  • editorCursor.foreground#3A8DFF
  • editorGroupHeader.tabsBackground#0A0A20
  • editorIndentGuide.activeBackground#3A8DFF
  • editorIndentGuide.background#2E354B
  • editorLineNumber.activeForeground#3A8DFF
  • editorLineNumber.foreground#5A6374
  • editorWhitespace.foreground#4A5270
  • focusBorder#3A8DFF
  • gitDecoration.conflictingResourceForeground#FFCC57
  • gitDecoration.deletedResourceForeground#FF5F57
  • gitDecoration.modifiedResourceForeground#3A8DFF
  • gitDecoration.untrackedResourceForeground#A8FF60
  • input.background#1F2330
  • input.border#3A8DFF
  • input.foreground#E1E4E8
  • input.placeholderForeground#5A6374
  • inputOption.activeBorder#3A8DFF
  • list.activeSelectionBackground#27496D
  • list.activeSelectionForeground#E1E4E8
  • list.focusBackground#27496D
  • list.highlightForeground#3A8DFF
  • list.hoverBackground#1F2330
  • minimap.background#0A0A20
  • minimapSlider.activeBackground#3A8DFF66
  • minimapSlider.background#3A8DFF22
  • minimapSlider.hoverBackground#3A8DFF44
  • panel.background#0A0A20
  • panel.border#1F2330
  • panelTitle.activeBorder#3A8DFF
  • panelTitle.activeForeground#3A8DFF
  • panelTitle.inactiveForeground#A0A5B0
  • scrollbar.shadow#00000044
  • scrollbarSlider.activeBackground#3A8DFF88
  • scrollbarSlider.background#3A8DFF44
  • scrollbarSlider.hoverBackground#3A8DFF66
  • sideBar.background#0F1120
  • sideBar.foreground#C0C8D1
  • sideBarSectionHeader.background#121430
  • sideBarSectionHeader.foreground#3A8DFF
  • sideBarTitle.foreground#3A8DFF
  • statusBar.background#121430
  • statusBar.debuggingBackground#3A8DFF
  • statusBar.foreground#E1E4E8
  • statusBar.noFolderBackground#0A0A20
  • statusBarItem.hoverBackground#1A1F30
  • tab.activeBackground#121430
  • tab.activeBorder#3A8DFF
  • tab.activeForeground#E1E4E8
  • tab.border#0A0A20
  • tab.inactiveBackground#0A0A20
  • tab.inactiveForeground#A0A5B0
  • terminal.ansiBlue#3A8DFF
  • terminal.ansiBrightBlue#5A9BD4
  • terminal.ansiBrightCyan#78F0E0
  • terminal.ansiBrightGreen#C8FF90
  • terminal.ansiBrightMagenta#E09FFF
  • terminal.ansiBrightRed#FF7B71
  • terminal.ansiBrightYellow#FFE08A
  • terminal.ansiCyan#58E0D4
  • terminal.ansiGreen#A8FF60
  • terminal.ansiMagenta#D57CFF
  • terminal.ansiRed#FF5F57
  • terminal.ansiYellow#FFCC57
  • terminal.background#0A0A20
  • terminal.foreground#E1E4E8
  • titleBar.activeBackground#0A0A20
  • titleBar.activeForeground#E1E4E8
  • titleBar.inactiveBackground#0F1120
  • titleBar.inactiveForeground#A0A5B0

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#5A6374italic
string, string.quoted, string.template#A8FF60
keyword, storage.type, storage.modifier#3A8DFFbold
keyword.operator, punctuation.accessor#5A9BD4
variable, variable.other#E1E4E8
variable.parameter#58E0D4italic
entity.name.function, support.function#FFCC57
meta.function-call#58E0D4
entity.name.class, entity.name.type.class, support.class#D57CFFbold
entity.name.type, support.type#D57CFF
entity.name.type.interface#58E0D4italic
constant.numeric#FFCC57
constant, constant.language, constant.character#FFB86C
constant.language.boolean#FF5F57bold
variable.other.property, support.variable.property#58E0D4
meta.object-literal.key#3A8DFF
entity.name.tag, punctuation.definition.tag#3A8DFF
entity.other.attribute-name#D57CFFitalic
punctuation, meta.brace#5A9BD4
string.regexp#FF5F57
constant.character.escape#D57CFF
meta.decorator, punctuation.decorator#FFCC57
invalid, invalid.illegal#FF5F57strikethrough
markup.heading, entity.name.section#3A8DFFbold
markup.bold#FFB86Cbold
markup.italic#D57CFFitalic
markup.underline.link#58E0D4
markup.inline.raw, markup.fenced_code#A8FF60
support.type.property-name.json#3A8DFF
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#FFB86C
support.type.property-name.css#58E0D4
support.constant.property-value.css#58E0D4
themesmith by CyberBoost - VS Code Theme