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#7A3D9F
  • activityBar.background#12081F
  • activityBar.foreground#BFA99C
  • activityBarBadge.background#7A3D9F
  • activityBarBadge.foreground#E5D8B3
  • badge.background#7A3D9F
  • badge.foreground#E5D8B3
  • button.background#7A3D9F
  • button.foreground#E5D8B3
  • button.hoverBackground#8A4DAF
  • dropdown.background#160C23
  • dropdown.border#7A3D9F40
  • dropdown.foreground#E5D8B3
  • editor.background#1B0D2E
  • editor.findMatchBackground#00D4C822
  • editor.findMatchHighlightBackground#00D4C811
  • editor.foreground#E5D8B3
  • editor.lineHighlightBackground#7A3D9F20
  • editor.lineHighlightBorder#7A3D9F40
  • editor.selectionBackground#7A3D9F33
  • editor.selectionHighlightBackground#7A3D9F1A
  • editorBracketMatch.background#7A3D9F22
  • editorBracketMatch.border#7A3D9F
  • editorCursor.foreground#00D4C8
  • editorGroupHeader.tabsBackground#12081F
  • editorIndentGuide.activeBackground#7A3D9F44
  • editorIndentGuide.background#7A3D9F22
  • editorLineNumber.activeForeground#7A3D9F
  • editorLineNumber.foreground#5A4A6A
  • editorWhitespace.foreground#7A3D9F33
  • focusBorder#7A3D9F
  • gitDecoration.conflictingResourceForeground#FFE66B
  • gitDecoration.deletedResourceForeground#FF6B6B
  • gitDecoration.modifiedResourceForeground#00D4C8
  • gitDecoration.untrackedResourceForeground#7EE8A3
  • input.background#160C23
  • input.border#7A3D9F40
  • input.foreground#E5D8B3
  • input.placeholderForeground#5A4A6A
  • inputOption.activeBorder#7A3D9F
  • list.activeSelectionBackground#7A3D9F40
  • list.activeSelectionForeground#E5D8B3
  • list.focusBackground#7A3D9F33
  • list.highlightForeground#7A3D9F
  • list.hoverBackground#7A3D9F20
  • minimap.background#160C23
  • minimapSlider.activeBackground#7A3D9F66
  • minimapSlider.background#7A3D9F22
  • minimapSlider.hoverBackground#7A3D9F44
  • panel.background#160C23
  • panel.border#7A3D9F40
  • panelTitle.activeBorder#7A3D9F
  • panelTitle.activeForeground#7A3D9F
  • panelTitle.inactiveForeground#BFA99C
  • scrollbar.shadow#00000044
  • scrollbarSlider.activeBackground#7A3D9F66
  • scrollbarSlider.background#7A3D9F22
  • scrollbarSlider.hoverBackground#7A3D9F44
  • sideBar.background#160C23
  • sideBar.foreground#BFA99C
  • sideBarSectionHeader.background#12081F
  • sideBarSectionHeader.foreground#7A3D9F
  • sideBarTitle.foreground#7A3D9F
  • statusBar.background#12081F
  • statusBar.debuggingBackground#7A3D9F
  • statusBar.foreground#E5D8B3
  • statusBar.noFolderBackground#160C23
  • statusBarItem.hoverBackground#2A122F
  • tab.activeBackground#1B0D2E
  • tab.activeBorder#7A3D9F
  • tab.activeForeground#E5D8B3
  • tab.border#12081F
  • tab.inactiveBackground#160C23
  • tab.inactiveForeground#BFA99C
  • terminal.ansiBlue#6A5EE9
  • terminal.ansiBrightBlue#8FA6FF
  • terminal.ansiBrightCyan#9ED8F3
  • terminal.ansiBrightGreen#9EF8C3
  • terminal.ansiBrightMagenta#E8AFFF
  • terminal.ansiBrightRed#FF8B8B
  • terminal.ansiBrightYellow#FFF68B
  • terminal.ansiCyan#00D4C8
  • terminal.ansiGreen#7EE8A3
  • terminal.ansiMagenta#C88FFF
  • terminal.ansiRed#FF6B6B
  • terminal.ansiYellow#FFE66B
  • terminal.background#160C23
  • terminal.foreground#E5D8B3
  • titleBar.activeBackground#12081F
  • titleBar.activeForeground#E5D8B3
  • titleBar.inactiveBackground#160C23
  • titleBar.inactiveForeground#BFA99C

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#7A6F6Fitalic
string, string.quoted, string.template#00D4C8
keyword, storage.type, storage.modifier#D0A0FFbold
keyword.operator, punctuation.accessor#BFA99C
variable, variable.other#E5D8B3
variable.parameter#FFB86Bitalic
entity.name.function, support.function#7EE8A3
meta.function-call#9EF8C3
entity.name.class, entity.name.type.class, support.class#D0A0FFbold
entity.name.type, support.type#D0A0FF
entity.name.type.interface#7A9FC8italic
constant.numeric#FF9B6B
constant, constant.language, constant.character#FFB86B
constant.language.boolean#FF9B6Bbold
variable.other.property, support.variable.property#BFA99C
meta.object-literal.key#7EE8A3
entity.name.tag, punctuation.definition.tag#C88FFF
entity.other.attribute-name#FFB86Bitalic
punctuation, meta.brace#BFA99C
string.regexp#FF9B6B
constant.character.escape#C88FFF
meta.decorator, punctuation.decorator#FFE66B
invalid, invalid.illegal#FF6B6Bstrikethrough
markup.heading, entity.name.section#C88FFFbold
markup.bold#FFB86Bbold
markup.italic#C88FFFitalic
markup.underline.link#00D4C8
markup.inline.raw, markup.fenced_code#7EE8A3
support.type.property-name.json#7EE8A3
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#FFE66B
support.type.property-name.css#7EE8A3
support.constant.property-value.css#00D4C8
themesmith by CyberBoost - VS Code Theme