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#FF6F00
  • activityBar.background#FFFFFF
  • activityBar.foreground#FF6F00
  • activityBarBadge.background#FF6F00
  • activityBarBadge.foreground#FFFFFF
  • badge.background#FF6F00
  • badge.foreground#FFFFFF
  • button.background#FF6F00
  • button.foreground#FFFFFF
  • button.hoverBackground#FF8F00
  • dropdown.background#FFFFFF
  • dropdown.border#BDBDBD
  • dropdown.foreground#212121
  • editor.background#FAFAFA
  • editor.findMatchBackground#FFAB0033
  • editor.findMatchHighlightBackground#FFAB0022
  • editor.foreground#212121
  • editor.lineHighlightBackground#FFF9C480
  • editor.lineHighlightBorder#FF6F0080
  • editor.selectionBackground#FF6F0033
  • editor.selectionHighlightBackground#FF6F0022
  • editorBracketMatch.background#FF6F0033
  • editorBracketMatch.border#FF6F00
  • editorCursor.foreground#FF6F00
  • editorGroupHeader.tabsBackground#EEEEEE
  • editorIndentGuide.activeBackground#FF6F0088
  • editorIndentGuide.background#E0E0E0
  • editorLineNumber.activeForeground#FF6F00
  • editorLineNumber.foreground#9E9E9E
  • editorWhitespace.foreground#BDBDBD
  • focusBorder#FF6F00
  • gitDecoration.conflictingResourceForeground#FFAB00
  • gitDecoration.deletedResourceForeground#D50000
  • gitDecoration.modifiedResourceForeground#FF6F00
  • gitDecoration.untrackedResourceForeground#00C853
  • input.background#FFFFFF
  • input.border#BDBDBD
  • input.foreground#212121
  • input.placeholderForeground#9E9E9E
  • inputOption.activeBorder#FF6F00
  • list.activeSelectionBackground#FF6F0033
  • list.activeSelectionForeground#FF6F00
  • list.focusBackground#FF6F0033
  • list.highlightForeground#FF6F00
  • list.hoverBackground#FF6F0033
  • minimap.background#FAFAFA
  • minimapSlider.activeBackground#FF6F0066
  • minimapSlider.background#FF6F0022
  • minimapSlider.hoverBackground#FF6F0044
  • panel.background#FAFAFA
  • panel.border#E0E0E0
  • panelTitle.activeBorder#FF6F00
  • panelTitle.activeForeground#FF6F00
  • panelTitle.inactiveForeground#9E9E9E
  • scrollbar.shadow#00000044
  • scrollbarSlider.activeBackground#FF6F0088
  • scrollbarSlider.background#BDBDBD44
  • scrollbarSlider.hoverBackground#BDBDBD88
  • sideBar.background#F5F5F5
  • sideBar.foreground#424242
  • sideBarSectionHeader.background#EEEEEE
  • sideBarSectionHeader.foreground#FF6F00
  • sideBarTitle.foreground#FF6F00
  • statusBar.background#E0E0E0
  • statusBar.debuggingBackground#FFAB00
  • statusBar.foreground#212121
  • statusBar.noFolderBackground#EEEEEE
  • statusBarItem.hoverBackground#D6D6D6
  • tab.activeBackground#FFFFFF
  • tab.activeBorder#FF6F00
  • tab.activeForeground#FF6F00
  • tab.border#E0E0E0
  • tab.inactiveBackground#F5F5F5
  • tab.inactiveForeground#757575
  • terminal.ansiBlue#2962FF
  • terminal.ansiBrightBlue#448AFF
  • terminal.ansiBrightCyan#00E5FF
  • terminal.ansiBrightGreen#69F0AE
  • terminal.ansiBrightMagenta#FF4081
  • terminal.ansiBrightRed#FF5252
  • terminal.ansiBrightYellow#FFEA00
  • terminal.ansiCyan#00B8D4
  • terminal.ansiGreen#00C853
  • terminal.ansiMagenta#D500F9
  • terminal.ansiRed#D50000
  • terminal.ansiYellow#FFAB00
  • terminal.background#FAFAFA
  • terminal.foreground#212121
  • titleBar.activeBackground#EEEEEE
  • titleBar.activeForeground#212121
  • titleBar.inactiveBackground#FAFAFA
  • titleBar.inactiveForeground#757575

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#9E9E9Eitalic
string, string.quoted, string.template#D500F9
keyword, storage.type, storage.modifier#FF6F00bold
keyword.operator, punctuation.accessor#FFAB00
variable, variable.other#37474F
variable.parameter#FFAB00italic
entity.name.function, support.function#2962FF
meta.function-call#2962FF
entity.name.class, entity.name.type.class, support.class#00C853bold
entity.name.type, support.type#00C853
entity.name.type.interface#00C853italic
constant.numeric#FF6F00
constant, constant.language, constant.character#FF6F00
constant.language.boolean#FF6F00bold
variable.other.property, support.variable.property#2962FF
meta.object-literal.key#2962FF
entity.name.tag, punctuation.definition.tag#FF6F00
entity.other.attribute-name#FFAB00italic
punctuation, meta.brace#37474F
string.regexp#FF6F00
constant.character.escape#FF6F00
meta.decorator, punctuation.decorator#FF6F00
invalid, invalid.illegal#D32F2Fstrikethrough
markup.heading, entity.name.section#FF6F00bold
markup.bold#FF6F00bold
markup.italic#FFAB00italic
markup.underline.link#2962FF
markup.inline.raw, markup.fenced_code#D500F9
support.type.property-name.json#FF6F00
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#FF6F00
support.type.property-name.css#00C853
support.constant.property-value.css#D500F9
themesmith by CyberBoost - VS Code Theme