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#F5A623
  • activityBar.background#1A162D
  • activityBar.foreground#C5BEE1
  • activityBarBadge.background#F5A623
  • activityBarBadge.foreground#1A162D
  • badge.background#8B66FF
  • badge.foreground#0F0C1A
  • button.background#F5A623
  • button.foreground#0F0C1A
  • button.hoverBackground#FFC447
  • dropdown.background#1A162D
  • dropdown.border#3F3A5A
  • dropdown.foreground#E0E0F0
  • editor.background#0F0C1A
  • editor.findMatchBackground#F5A623
  • editor.findMatchHighlightBackground#FFC447
  • editor.foreground#E0E0F0
  • editor.lineHighlightBackground#2D2849
  • editor.lineHighlightBorder#3F3A5A
  • editor.selectionBackground#5A3D9F
  • editor.selectionHighlightBackground#4E3370
  • editorBracketMatch.background#5A3D9F
  • editorBracketMatch.border#8B66FF
  • editorCursor.foreground#E0E0F0
  • editorGroupHeader.tabsBackground#1A162D
  • editorIndentGuide.activeBackground#5A3D9F
  • editorIndentGuide.background#3F3A5A
  • editorLineNumber.activeForeground#E0E0F0
  • editorLineNumber.foreground#77778A
  • editorWhitespace.foreground#4A4A6A
  • focusBorder#8B66FF
  • gitDecoration.conflictingResourceForeground#D28CFF
  • gitDecoration.deletedResourceForeground#FF6F6F
  • gitDecoration.modifiedResourceForeground#5A3D9F
  • gitDecoration.untrackedResourceForeground#8BD35F
  • input.background#1A162D
  • input.border#3F3A5A
  • input.foreground#E0E0F0
  • input.placeholderForeground#77778A
  • inputOption.activeBorder#F5A623
  • list.activeSelectionBackground#2D2849
  • list.activeSelectionForeground#E0E0F0
  • list.focusBackground#4A447A
  • list.highlightForeground#F5A623
  • list.hoverBackground#3A3765
  • minimap.background#0F0C1A
  • minimapSlider.activeBackground#8B66FF
  • minimapSlider.background#3F3A5A
  • minimapSlider.hoverBackground#5A3D9F
  • panel.background#171425
  • panel.border#2A2740
  • panelTitle.activeBorder#F5A623
  • panelTitle.activeForeground#E0E0F0
  • panelTitle.inactiveForeground#77778A
  • scrollbar.shadow#00000010
  • scrollbarSlider.activeBackground#8B66FF
  • scrollbarSlider.background#3F3A5A
  • scrollbarSlider.hoverBackground#5A3D9F
  • sideBar.background#171425
  • sideBar.foreground#C5BEE1
  • sideBarSectionHeader.background#1A162D
  • sideBarSectionHeader.foreground#E0E0F0
  • sideBarTitle.foreground#C5BEE1
  • statusBar.background#1A162D
  • statusBar.debuggingBackground#8B00FF
  • statusBar.foreground#E0E0F0
  • statusBar.noFolderBackground#0F0C1A
  • statusBarItem.hoverBackground#2D2849
  • tab.activeBackground#1A162D
  • tab.activeBorder#F5A623
  • tab.activeForeground#E0E0F0
  • tab.border#2A2740
  • tab.inactiveBackground#171425
  • tab.inactiveForeground#77778A
  • terminal.ansiBlue#3A8DFF
  • terminal.ansiBrightBlue#5FAFFF
  • terminal.ansiBrightCyan#8FEFFF
  • terminal.ansiBrightGreen#B3FF8F
  • terminal.ansiBrightMagenta#E6B3FF
  • terminal.ansiBrightRed#FF9F9F
  • terminal.ansiBrightYellow#FFE58F
  • terminal.ansiCyan#5FD7FF
  • terminal.ansiGreen#8BD35F
  • terminal.ansiMagenta#D28CFF
  • terminal.ansiRed#FF6F6F
  • terminal.ansiYellow#FFC447
  • terminal.background#0F0C1A
  • terminal.foreground#E0E0F0
  • titleBar.activeBackground#1A162D
  • titleBar.activeForeground#E0E0F0
  • titleBar.inactiveBackground#12101B
  • titleBar.inactiveForeground#8888A0

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#77778Aitalic
string, string.quoted, string.template#FFC447
keyword, storage.type, storage.modifier#8B66FFbold
keyword.operator, punctuation.accessor#8B66FF
variable, variable.other#C5BEE1
variable.parameter#C5BEE1italic
entity.name.function, support.function#5FD7FF
meta.function-call#8BD35F
entity.name.class, entity.name.type.class, support.class#D28CFFbold
entity.name.type, support.type#5A3D9F
entity.name.type.interface#8B66FFitalic
constant.numeric#FF6F6F
constant, constant.language, constant.character#FFC447
constant.language.boolean#F5A623bold
variable.other.property, support.variable.property#C5BEE1
meta.object-literal.key#5FD7FF
entity.name.tag, punctuation.definition.tag#8B66FF
entity.other.attribute-name#5A3D9Fitalic
punctuation, meta.brace#77778A
string.regexp#FF6F6F
constant.character.escape#FFC447
meta.decorator, punctuation.decorator#8B66FF
invalid, invalid.illegal#FF6F6Fstrikethrough
markup.heading, entity.name.section#F5A623bold
markup.bold#F5A623bold
markup.italic#C5BEE1italic
markup.underline.link#5FD7FF
markup.inline.raw, markup.fenced_code#E0E0F0
support.type.property-name.json#5A3D9F
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#8B66FF
support.type.property-name.css#5FD7FF
support.constant.property-value.css#FFC447