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#D04A4A
  • activityBar.background#F2E9E0
  • activityBar.foreground#555555
  • activityBarBadge.background#D04A4A
  • activityBarBadge.foreground#FFFFFF
  • badge.background#D04A4A
  • badge.foreground#FFFFFF
  • button.background#D04A4A
  • button.foreground#FFFFFF
  • button.hoverBackground#D04A4A80
  • dropdown.background#FFFFFF
  • dropdown.border#CCCCCC
  • dropdown.foreground#2B2B2B
  • editor.background#FFF8F0
  • editor.findMatchBackground#FFB87080
  • editor.findMatchHighlightBackground#FFB87040
  • editor.foreground#2B2B2B
  • editor.lineHighlightBackground#FFE5D480
  • editor.lineHighlightBorder#FFE5D4
  • editor.selectionBackground#D04A4A30
  • editor.selectionHighlightBackground#D04A4A20
  • editorBracketMatch.background#FFD1C060
  • editorBracketMatch.border#D04A4A
  • editorCursor.foreground#FF6B35
  • editorGroupHeader.tabsBackground#F2F2F2
  • editorIndentGuide.activeBackground#BBBBBB
  • editorIndentGuide.background#DDDDDD
  • editorLineNumber.activeForeground#2B2B2B
  • editorLineNumber.foreground#999999
  • editorWhitespace.foreground#CCCCCC
  • focusBorder#D04A4A
  • gitDecoration.conflictingResourceForeground#FF6B35
  • gitDecoration.deletedResourceForeground#D04A4A
  • gitDecoration.modifiedResourceForeground#E08A4A
  • gitDecoration.untrackedResourceForeground#7ED957
  • input.background#FFFFFF
  • input.border#CCCCCC
  • input.foreground#2B2B2B
  • input.placeholderForeground#999999
  • inputOption.activeBorder#D04A4A
  • list.activeSelectionBackground#FFE5D4
  • list.activeSelectionForeground#2B2B2B
  • list.focusBackground#FFE5D4
  • list.highlightForeground#D04A4A
  • list.hoverBackground#FFE5D440
  • minimap.background#FFF8F0
  • minimapSlider.activeBackground#D04A4A66
  • minimapSlider.background#D04A4A22
  • minimapSlider.hoverBackground#D04A4A44
  • panel.background#F2F2F2
  • panel.border#CCCCCC
  • panelTitle.activeBorder#D04A4A
  • panelTitle.activeForeground#2B2B2B
  • panelTitle.inactiveForeground#777777
  • scrollbar.shadow#00000020
  • scrollbarSlider.activeBackground#D04A4A88
  • scrollbarSlider.background#CCCCCC44
  • scrollbarSlider.hoverBackground#CCCCCC88
  • sideBar.background#F7F1EC
  • sideBar.foreground#444444
  • sideBarSectionHeader.background#EFE5DD
  • sideBarSectionHeader.foreground#D04A4A
  • sideBarTitle.foreground#333333
  • statusBar.background#F5EDE7
  • statusBar.debuggingBackground#D04A4A
  • statusBar.foreground#2B2B2B
  • statusBar.noFolderBackground#EAE0D9
  • statusBarItem.hoverBackground#D04A4A33
  • tab.activeBackground#FFFFFF
  • tab.activeBorder#D04A4A
  • tab.activeForeground#2B2B2B
  • tab.border#CCCCCC
  • tab.inactiveBackground#F2F2F2
  • tab.inactiveForeground#777777
  • terminal.ansiBlue#4A90D0
  • terminal.ansiBrightBlue#6FB3FF
  • terminal.ansiBrightCyan#5FF5F5
  • terminal.ansiBrightGreen#A1F285
  • terminal.ansiBrightMagenta#E19FFF
  • terminal.ansiBrightRed#FF6B35
  • terminal.ansiBrightYellow#FFB450
  • terminal.ansiCyan#3AD9D9
  • terminal.ansiGreen#7ED957
  • terminal.ansiMagenta#C96FF6
  • terminal.ansiRed#D04A4A
  • terminal.ansiYellow#E08A4A
  • terminal.background#FFF8F0
  • terminal.foreground#2B2B2B
  • titleBar.activeBackground#F5EDE7
  • titleBar.activeForeground#2B2B2B
  • titleBar.inactiveBackground#EAE0D9
  • titleBar.inactiveForeground#777777

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#8A8A8Aitalic
string, string.quoted, string.template#FF6B35
keyword, storage.type, storage.modifier#D04A4Abold
keyword.operator, punctuation.accessor#E08A4A
variable, variable.other#555555
variable.parameter#E08A4Aitalic
entity.name.function, support.function#7ED957
meta.function-call#A1F285
entity.name.class, entity.name.type.class, support.class#C96FF6bold
entity.name.type, support.type#5FAFFF
entity.name.type.interface#5FF5F5italic
constant.numeric#FFB450
constant, constant.language, constant.character#E08A4A
constant.language.boolean#FF6B35bold
variable.other.property, support.variable.property#C96FF6
meta.object-literal.key#5FAFFF
entity.name.tag, punctuation.definition.tag#D04A4A
entity.other.attribute-name#E08A4Aitalic
punctuation, meta.brace#A0A0A0
string.regexp#FF6B35
constant.character.escape#C96FF6
meta.decorator, punctuation.decorator#7ED957
invalid, invalid.illegal#FF6B35strikethrough
markup.heading, entity.name.section#D04A4Abold
markup.bold#D04A4Abold
markup.italic#E08A4Aitalic
markup.underline.link#5FAFFF
markup.inline.raw, markup.fenced_code#FF6B35
support.type.property-name.json#5FAFFF
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#C96FF6
support.type.property-name.css#7ED957
support.constant.property-value.css#E08A4A
themesmith by CyberBoost - VS Code Theme