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#ff7043
  • activityBar.background#f2f2f2
  • activityBar.foreground#555555
  • activityBarBadge.background#ff7043
  • activityBarBadge.foreground#ffffff
  • badge.background#ff7043
  • badge.foreground#ffffff
  • button.background#ff7043
  • button.foreground#ffffff
  • button.hoverBackground#ff8a65
  • dropdown.background#ffffff
  • dropdown.border#e0e0e0
  • dropdown.foreground#333333
  • editor.background#ffffff
  • editor.findMatchBackground#ffab91
  • editor.findMatchHighlightBackground#ffccbc
  • editor.foreground#333333
  • editor.lineHighlightBackground#fff9c4
  • editor.lineHighlightBorder#fff176
  • editor.selectionBackground#ffcc80
  • editor.selectionHighlightBackground#ffe0b2
  • editorBracketMatch.background#ffe082
  • editorBracketMatch.border#ffb300
  • editorCursor.foreground#ff6f00
  • editorGroupHeader.tabsBackground#fafafa
  • editorIndentGuide.activeBackground#ff7043
  • editorIndentGuide.background#e0e0e0
  • editorLineNumber.activeForeground#ff7043
  • editorLineNumber.foreground#9e9e9e
  • editorWhitespace.foreground#cfd8dc
  • focusBorder#ff7043
  • gitDecoration.conflictingResourceForeground#ab47bc
  • gitDecoration.deletedResourceForeground#ef5350
  • gitDecoration.modifiedResourceForeground#ffb74d
  • gitDecoration.untrackedResourceForeground#66bb6a
  • input.background#ffffff
  • input.border#e0e0e0
  • input.foreground#333333
  • input.placeholderForeground#9e9e9e
  • inputOption.activeBorder#ff7043
  • list.activeSelectionBackground#ffe0b2
  • list.activeSelectionForeground#333333
  • list.focusBackground#ffecb3
  • list.highlightForeground#ff7043
  • list.hoverBackground#fff3e0
  • minimap.background#fafafa
  • minimapSlider.activeBackground#90a4ae
  • minimapSlider.background#cfd8dc
  • minimapSlider.hoverBackground#b0bec5
  • panel.background#fafafa
  • panel.border#e0e0e0
  • panelTitle.activeBorder#ff7043
  • panelTitle.activeForeground#333333
  • panelTitle.inactiveForeground#777777
  • scrollbar.shadow#00000033
  • scrollbarSlider.activeBackground#90a4ae
  • scrollbarSlider.background#cfd8dc
  • scrollbarSlider.hoverBackground#b0bec5
  • sideBar.background#fafafa
  • sideBar.foreground#333333
  • sideBarSectionHeader.background#e0e0e0
  • sideBarSectionHeader.foreground#333333
  • sideBarTitle.foreground#555555
  • statusBar.background#ff7043
  • statusBar.debuggingBackground#ffb74d
  • statusBar.foreground#ffffff
  • statusBar.noFolderBackground#cfd8dc
  • statusBarItem.hoverBackground#ffa726
  • tab.activeBackground#ffffff
  • tab.activeBorder#ff7043
  • tab.activeForeground#333333
  • tab.border#e0e0e0
  • tab.inactiveBackground#f9f9f9
  • tab.inactiveForeground#777777
  • terminal.ansiBlue#42a5f5
  • terminal.ansiBrightBlue#1e88e5
  • terminal.ansiBrightCyan#00acc1
  • terminal.ansiBrightGreen#43a047
  • terminal.ansiBrightMagenta#8e24aa
  • terminal.ansiBrightRed#e53935
  • terminal.ansiBrightYellow#f57c00
  • terminal.ansiCyan#26c6da
  • terminal.ansiGreen#66bb6a
  • terminal.ansiMagenta#ab47bc
  • terminal.ansiRed#ef5350
  • terminal.ansiYellow#ffb300
  • terminal.background#ffffff
  • terminal.foreground#333333
  • titleBar.activeBackground#f5f5f5
  • titleBar.activeForeground#333333
  • titleBar.inactiveBackground#eaeaea
  • titleBar.inactiveForeground#777777

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#9e9e9eitalic
string, string.quoted, string.template#66bb6a
keyword, storage.type, storage.modifier#ff7043bold
keyword.operator, punctuation.accessor#26c6da
variable, variable.other#42a5f5
variable.parameter#ab47bcitalic
entity.name.function, support.function#ab47bc
meta.function-call#ab47bc
entity.name.class, entity.name.type.class, support.class#26c6dabold
entity.name.type, support.type#42a5f5
entity.name.type.interface#ab47bcitalic
constant.numeric#ff7043
constant, constant.language, constant.character#26c6da
constant.language.boolean#ff7043bold
variable.other.property, support.variable.property#66bb6a
meta.object-literal.key#1e88e5
entity.name.tag, punctuation.definition.tag#ef5350
entity.other.attribute-name#ff7043italic
punctuation, meta.brace#9e9e9e
string.regexp#26c6da
constant.character.escape#ab47bc
meta.decorator, punctuation.decorator#8e24aa
invalid, invalid.illegal#d32f2fstrikethrough
markup.heading, entity.name.section#ff7043bold
markup.bold#ff7043bold
markup.italic#ab47bcitalic
markup.underline.link#42a5f5
markup.inline.raw, markup.fenced_code#66bb6a
support.type.property-name.json#26c6da
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#ab47bc
support.type.property-name.css#66bb6a
support.constant.property-value.css#ff7043
themesmith by CyberBoost - VS Code Theme