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#FFCC00
  • activityBar.background#EDEDED
  • activityBar.foreground#FFCC00
  • activityBarBadge.background#FFCC00
  • activityBarBadge.foreground#FFFFFF
  • badge.background#FFCC00
  • badge.foreground#2B2B2B
  • button.background#FFD580
  • button.foreground#2B2B2B
  • button.hoverBackground#FFCC66
  • dropdown.background#FFFFFF
  • dropdown.border#CCCCCC
  • dropdown.foreground#2B2B2B
  • editor.background#F5F5F5
  • editor.findMatchBackground#FF8800
  • editor.findMatchHighlightBackground#FF880080
  • editor.foreground#2B2B2B
  • editor.lineHighlightBackground#FFF4CC
  • editor.lineHighlightBorder#FFE680
  • editor.selectionBackground#FFD58066
  • editor.selectionHighlightBackground#FFE6B366
  • editorBracketMatch.background#FFCC0033
  • editorBracketMatch.border#FFCC00
  • editorCursor.foreground#FF8800
  • editorGroupHeader.tabsBackground#EDEDED
  • editorIndentGuide.activeBackground#A0A0A0
  • editorIndentGuide.background#C0C0C0
  • editorLineNumber.activeForeground#FFCC00
  • editorLineNumber.foreground#999999
  • editorWhitespace.foreground#B0B0B0
  • focusBorder#FFCC00
  • gitDecoration.conflictingResourceForeground#FFCC00
  • gitDecoration.deletedResourceForeground#D0021B
  • gitDecoration.modifiedResourceForeground#FF8800
  • gitDecoration.untrackedResourceForeground#7ED321
  • input.background#FFFFFF
  • input.border#CCCCCC
  • input.foreground#2B2B2B
  • input.placeholderForeground#888888
  • inputOption.activeBorder#FFCC00
  • list.activeSelectionBackground#FFD580
  • list.activeSelectionForeground#2B2B2B
  • list.focusBackground#FFD580
  • list.highlightForeground#FFCC00
  • list.hoverBackground#FFE6B3
  • minimap.background#F5F5F5
  • minimapSlider.activeBackground#FFCC6666
  • minimapSlider.background#FFCC2222
  • minimapSlider.hoverBackground#FFCC4444
  • panel.background#EEEEEE
  • panel.border#CCCCCC
  • panelTitle.activeBorder#FFCC00
  • panelTitle.activeForeground#FFCC00
  • panelTitle.inactiveForeground#777777
  • scrollbar.shadow#00000033
  • scrollbarSlider.activeBackground#FFCC0080
  • scrollbarSlider.background#B0B0B040
  • scrollbarSlider.hoverBackground#B0B0B060
  • sideBar.background#EEEEEE
  • sideBar.foreground#2B2B2B
  • sideBarSectionHeader.background#E0E0E0
  • sideBarSectionHeader.foreground#FF8800
  • sideBarTitle.foreground#FF8800
  • statusBar.background#E0E0E0
  • statusBar.debuggingBackground#FF8800
  • statusBar.foreground#2B2B2B
  • statusBar.noFolderBackground#CCCCCC
  • statusBarItem.hoverBackground#CCCCCC
  • tab.activeBackground#FFFFFF
  • tab.activeBorder#FFCC00
  • tab.activeForeground#FFCC00
  • tab.border#CCCCCC
  • tab.inactiveBackground#EDEDED
  • tab.inactiveForeground#777777
  • terminal.ansiBlue#4A90E2
  • terminal.ansiBrightBlue#6EB5FF
  • terminal.ansiBrightCyan#71EFC5
  • terminal.ansiBrightGreen#9FF36C
  • terminal.ansiBrightMagenta#D96EFF
  • terminal.ansiBrightRed#FF5B5B
  • terminal.ansiBrightYellow#FFE066
  • terminal.ansiCyan#50E3C2
  • terminal.ansiGreen#7ED321
  • terminal.ansiMagenta#BD10E0
  • terminal.ansiRed#D0021B
  • terminal.ansiYellow#FFCC00
  • terminal.background#F5F5F5
  • terminal.foreground#2B2B2B
  • titleBar.activeBackground#E0E0E0
  • titleBar.activeForeground#2B2B2B
  • titleBar.inactiveBackground#D0D0D0
  • titleBar.inactiveForeground#777777

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#6A7B8Citalic
string, string.quoted, string.template#7ED321
keyword, storage.type, storage.modifier#FFCC00bold
keyword.operator, punctuation.accessor#FF8800
variable, variable.other#2B2B2B
variable.parameter#FF8800italic
entity.name.function, support.function#4A90E2
meta.function-call#6EB5FF
entity.name.class, entity.name.type.class, support.class#FFEE88bold
entity.name.type, support.type#50E3C2
entity.name.type.interface#50E3C2italic
constant.numeric#D0021B
constant, constant.language, constant.character#BD10E0
constant.language.boolean#D0021Bbold
variable.other.property, support.variable.property#2B2B2B
meta.object-literal.key#6EB5FF
entity.name.tag, punctuation.definition.tag#FFCC00
entity.other.attribute-name#FF8800italic
punctuation, meta.brace#2B2B2B
string.regexp#D0021B
constant.character.escape#FF8800
meta.decorator, punctuation.decorator#BD10E0
invalid, invalid.illegal#FF0000strikethrough
markup.heading, entity.name.section#FFCC00bold
markup.bold#FFCC00bold
markup.italic#FF8800italic
markup.underline.link#4A90E2
markup.inline.raw, markup.fenced_code#7ED321
support.type.property-name.json#6EB5FF
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#FF8800
support.type.property-name.css#4A90E2
support.constant.property-value.css#7ED321
themesmith by CyberBoost - VS Code Theme