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#FF5F3A
  • activityBar.background#080808
  • activityBar.foreground#FF5F3A
  • activityBarBadge.background#FF5F3A
  • activityBarBadge.foreground#0A0A0A
  • badge.background#FF5F3A
  • badge.foreground#0A0A0A
  • button.background#1A1A1A
  • button.foreground#E0E0E0
  • button.hoverBackground#2A2A2A
  • dropdown.background#0C0C0C
  • dropdown.border#1A1A1A
  • dropdown.foreground#E0E0E0
  • editor.background#0A0A0A
  • editor.findMatchBackground#FF5F3A33
  • editor.findMatchHighlightBackground#FF5F3A11
  • editor.foreground#E0E0E0
  • editor.lineHighlightBackground#1A1A1A80
  • editor.lineHighlightBorder#3B6EA533
  • editor.selectionBackground#3B6EA522
  • editor.selectionHighlightBackground#3B6EA511
  • editorBracketMatch.background#3B6EA522
  • editorBracketMatch.border#3B6EA5
  • editorCursor.foreground#FF5F3A
  • editorGroupHeader.tabsBackground#0A0A0A
  • editorIndentGuide.activeBackground#3B6EA533
  • editorIndentGuide.background#2A2A2A33
  • editorLineNumber.activeForeground#FF5F3A
  • editorLineNumber.foreground#3A3A3A
  • editorWhitespace.foreground#2A2A2A
  • focusBorder#3B6EA5
  • gitDecoration.conflictingResourceForeground#FFB86B
  • gitDecoration.deletedResourceForeground#FF5F3A
  • gitDecoration.modifiedResourceForeground#3B6EA5
  • gitDecoration.untrackedResourceForeground#58D68D
  • input.background#0C0C0C
  • input.border#1A1A1A
  • input.foreground#E0E0E0
  • input.placeholderForeground#555555
  • inputOption.activeBorder#FF5F3A
  • list.activeSelectionBackground#1A1A1A
  • list.activeSelectionForeground#FFFFFF
  • list.focusBackground#1A1A1A
  • list.highlightForeground#FF5F3A
  • list.hoverBackground#1A1A1A33
  • minimap.background#0A0A0A
  • minimapSlider.activeBackground#FF5F3A66
  • minimapSlider.background#FF5F3A22
  • minimapSlider.hoverBackground#FF5F3A44
  • panel.background#0A0A0A
  • panel.border#1A1A1A
  • panelTitle.activeBorder#FF5F3A
  • panelTitle.activeForeground#FF5F3A
  • panelTitle.inactiveForeground#A0A0A0
  • scrollbar.shadow#00000044
  • scrollbarSlider.activeBackground#3B6EA566
  • scrollbarSlider.background#3B6EA522
  • scrollbarSlider.hoverBackground#3B6EA544
  • sideBar.background#0C0C0C
  • sideBar.foreground#A0A0A0
  • sideBarSectionHeader.background#0A0A0A
  • sideBarSectionHeader.foreground#3B6EA5
  • sideBarTitle.foreground#FF5F3A
  • statusBar.background#121212
  • statusBar.debuggingBackground#FF5F3A
  • statusBar.foreground#E0E0E0
  • statusBar.noFolderBackground#0A0A0A
  • statusBarItem.hoverBackground#1A1A1A
  • tab.activeBackground#121212
  • tab.activeBorder#FF5F3A
  • tab.activeForeground#FFFFFF
  • tab.border#0A0A0A
  • tab.inactiveBackground#0C0C0C
  • tab.inactiveForeground#A0A0A0
  • terminal.ansiBlue#3B6EA5
  • terminal.ansiBrightBlue#5A9FFB
  • terminal.ansiBrightCyan#7ED9E3
  • terminal.ansiBrightGreen#6EEB87
  • terminal.ansiBrightMagenta#D8AFFF
  • terminal.ansiBrightRed#FF8B8B
  • terminal.ansiBrightYellow#FFD68B
  • terminal.ansiCyan#5EAEBE
  • terminal.ansiGreen#58D68D
  • terminal.ansiMagenta#C58BFA
  • terminal.ansiRed#FF5F3A
  • terminal.ansiYellow#FFB86B
  • terminal.background#0A0A0A
  • terminal.foreground#E0E0E0
  • titleBar.activeBackground#080808
  • titleBar.activeForeground#E0E0E0
  • titleBar.inactiveBackground#0A0A0A
  • titleBar.inactiveForeground#A0A0A0

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#555555italic
string, string.quoted, string.template#8BC34A
keyword, storage.type, storage.modifier#FF6F61bold
keyword.operator, punctuation.accessor#E0E0E0
variable, variable.other#E0E0E0
variable.parameter#FFB86Bitalic
entity.name.function, support.function#4A90E2
meta.function-call#A0A0A0
entity.name.class, entity.name.type.class, support.class#FFB86Bbold
entity.name.type, support.type#4A90E2
entity.name.type.interface#5DADE2italic
constant.numeric#FFB86B
constant, constant.language, constant.character#FFB86B
constant.language.boolean#FF6F61bold
variable.other.property, support.variable.property#A0A0A0
meta.object-literal.key#4A90E2
entity.name.tag, punctuation.definition.tag#FF6F61
entity.other.attribute-name#C88FFFitalic
punctuation, meta.brace#A0A0A0
string.regexp#FFB86B
constant.character.escape#C88FFF
meta.decorator, punctuation.decorator#FFB86B
invalid, invalid.illegal#FF6F61strikethrough
markup.heading, entity.name.section#FF6F61bold
markup.bold#FFB86Bbold
markup.italic#C88FFFitalic
markup.underline.link#4A90E2
markup.inline.raw, markup.fenced_code#8BC34A
support.type.property-name.json#4A90E2
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#FFB86B
support.type.property-name.css#4A90E2
support.constant.property-value.css#8BC34A
themesmith by CyberBoost - VS Code Theme