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#FF6C5C
  • activityBar.background#08081A
  • activityBar.foreground#FF6C5C
  • activityBarBadge.background#FF6C5C
  • activityBarBadge.foreground#0A0A1F
  • badge.background#FF6C5C
  • badge.foreground#0A0A1F
  • button.background#111133
  • button.foreground#FFFFFF
  • button.hoverBackground#1B1B3A
  • dropdown.background#09092E
  • dropdown.border#111133
  • dropdown.foreground#C0CAF5
  • editor.background#0A0A1F
  • editor.findMatchBackground#A07AFF44
  • editor.findMatchHighlightBackground#A07AFF22
  • editor.foreground#C0CAF5
  • editor.lineHighlightBackground#11113380
  • editor.lineHighlightBorder#111133C0
  • editor.selectionBackground#FF6C5C33
  • editor.selectionHighlightBackground#FF6C5C22
  • editorBracketMatch.background#FF6C5C33
  • editorBracketMatch.border#FF6C5C
  • editorCursor.foreground#FF6C5C
  • editorGroupHeader.tabsBackground#0A0A1F
  • editorIndentGuide.activeBackground#1B1B3A88
  • editorIndentGuide.background#1B1B3A44
  • editorLineNumber.activeForeground#A07AFF
  • editorLineNumber.foreground#3A3E5A
  • editorWhitespace.foreground#1B1B3A
  • focusBorder#FF6C5C
  • gitDecoration.conflictingResourceForeground#FF6C5C
  • gitDecoration.deletedResourceForeground#FF6C5C
  • gitDecoration.modifiedResourceForeground#FF6C5C
  • gitDecoration.untrackedResourceForeground#7FFFD4
  • input.background#09092E
  • input.border#111133
  • input.foreground#C0CAF5
  • input.placeholderForeground#3A3E5A
  • inputOption.activeBorder#FF6C5C
  • list.activeSelectionBackground#111133
  • list.activeSelectionForeground#FFFFFF
  • list.focusBackground#111133
  • list.highlightForeground#FF6C5C
  • list.hoverBackground#11113366
  • minimap.background#0A0A1F
  • minimapSlider.activeBackground#FF6C5C66
  • minimapSlider.background#FF6C5C22
  • minimapSlider.hoverBackground#FF6C5C44
  • panel.background#0A0A1F
  • panel.border#111133
  • panelTitle.activeBorder#FF6C5C
  • panelTitle.activeForeground#FF6C5C
  • panelTitle.inactiveForeground#6A6D8B
  • scrollbar.shadow#00000044
  • scrollbarSlider.activeBackground#FF6C5C88
  • scrollbarSlider.background#1B1B3A44
  • scrollbarSlider.hoverBackground#1B1B3A88
  • sideBar.background#09092E
  • sideBar.foreground#A1A8C9
  • sideBarSectionHeader.background#08081A
  • sideBarSectionHeader.foreground#FF6C5C
  • sideBarTitle.foreground#FF6C5C
  • statusBar.background#111133
  • statusBar.debuggingBackground#FF6C5C
  • statusBar.foreground#C0CAF5
  • statusBar.noFolderBackground#08081A
  • statusBarItem.hoverBackground#1B1B3A
  • tab.activeBackground#111133
  • tab.activeBorder#FF6C5C
  • tab.activeForeground#FFFFFF
  • tab.border#0A0A1F
  • tab.inactiveBackground#09092E
  • tab.inactiveForeground#6A6D8B
  • terminal.ansiBlue#7A9FFF
  • terminal.ansiBrightBlue#9ABFFF
  • terminal.ansiBrightCyan#9FFFD8
  • terminal.ansiBrightGreen#9FFFBE
  • terminal.ansiBrightMagenta#E2B5FF
  • terminal.ansiBrightRed#FF8F80
  • terminal.ansiBrightYellow#FFD166
  • terminal.ansiCyan#7FFFE5
  • terminal.ansiGreen#7FFFA1
  • terminal.ansiMagenta#D18CFF
  • terminal.ansiRed#FF6C5C
  • terminal.ansiYellow#FFB84D
  • terminal.background#0A0A1F
  • terminal.foreground#C0CAF5
  • titleBar.activeBackground#08081A
  • titleBar.activeForeground#C0CAF5
  • titleBar.inactiveBackground#0A0A1F
  • titleBar.inactiveForeground#6A6D8B

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#6A6D8Bitalic
string, string.quoted, string.template#7FFFD4
keyword, storage.type, storage.modifier#FF6C5Cbold
keyword.operator, punctuation.accessor#A07AFF
variable, variable.other#C0CAF5
variable.parameter#A07AFFitalic
entity.name.function, support.function#9ABFFF
meta.function-call#C0CAF5
entity.name.class, entity.name.type.class, support.class#A07AFFbold
entity.name.type, support.type#A07AFF
entity.name.type.interface#7FFFD4italic
constant.numeric#A07AFF
constant, constant.language, constant.character#A07AFF
constant.language.boolean#FF6C5Cbold
variable.other.property, support.variable.property#C0CAF5
meta.object-literal.key#9ABFFF
entity.name.tag, punctuation.definition.tag#FF6C5C
entity.other.attribute-name#D18CFFitalic
punctuation, meta.brace#A07AFF
string.regexp#FF6C5C
constant.character.escape#D18CFF
meta.decorator, punctuation.decorator#A07AFF
invalid, invalid.illegal#FF6C5Cstrikethrough
markup.heading, entity.name.section#FF6C5Cbold
markup.bold#A07AFFbold
markup.italic#D18CFFitalic
markup.underline.link#7FFFD4
markup.inline.raw, markup.fenced_code#7FFFD4
support.type.property-name.json#9ABFFF
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#A07AFF
support.type.property-name.css#9ABFFF
support.constant.property-value.css#7FFFD4
themesmith by CyberBoost - VS Code Theme