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#0097a7
  • activityBar.background#e0e0e0
  • activityBar.foreground#424242
  • activityBarBadge.background#0097a7
  • activityBarBadge.foreground#ffffff
  • badge.background#0097a7
  • badge.foreground#ffffff
  • button.background#cfd8dc
  • button.foreground#212121
  • button.hoverBackground#b0bec580
  • dropdown.background#ffffff
  • dropdown.border#b0b0b0
  • dropdown.foreground#212121
  • editor.background#fafafa
  • editor.findMatchBackground#0097a740
  • editor.findMatchHighlightBackground#80deea40
  • editor.foreground#2c3e50
  • editor.lineHighlightBackground#e0e0e080
  • editor.lineHighlightBorder#cfd8dc80
  • editor.selectionBackground#80deea80
  • editor.selectionHighlightBackground#80deea40
  • editorBracketMatch.background#80deea33
  • editorBracketMatch.border#0097a7
  • editorCursor.foreground#0097a7
  • editorGroupHeader.tabsBackground#fafafa
  • editorIndentGuide.activeBackground#bdbdbd80
  • editorIndentGuide.background#bdbdbd40
  • editorLineNumber.activeForeground#0097a7
  • editorLineNumber.foreground#9e9e9e
  • editorWhitespace.foreground#b0b0b0
  • focusBorder#0097a7
  • gitDecoration.conflictingResourceForeground#fdd835
  • gitDecoration.deletedResourceForeground#e53935
  • gitDecoration.modifiedResourceForeground#0097a7
  • gitDecoration.untrackedResourceForeground#43a047
  • input.background#ffffff
  • input.border#b0b0b0
  • input.foreground#212121
  • input.placeholderForeground#9e9e9e
  • inputOption.activeBorder#0097a7
  • list.activeSelectionBackground#cfd8dc
  • list.activeSelectionForeground#212121
  • list.focusBackground#b0bec5
  • list.highlightForeground#0097a7
  • list.hoverBackground#b0bec540
  • minimap.background#fafafa
  • minimapSlider.activeBackground#0097a766
  • minimapSlider.background#0097a722
  • minimapSlider.hoverBackground#0097a744
  • panel.background#ffffff
  • panel.border#cfd8dc
  • panelTitle.activeBorder#0097a7
  • panelTitle.activeForeground#0097a7
  • panelTitle.inactiveForeground#757575
  • scrollbar.shadow#00000022
  • scrollbarSlider.activeBackground#0097a788
  • scrollbarSlider.background#bdbdbd44
  • scrollbarSlider.hoverBackground#bdbdbd88
  • sideBar.background#f5f5f5
  • sideBar.foreground#424242
  • sideBarSectionHeader.background#e0e0e0
  • sideBarSectionHeader.foreground#0097a7
  • sideBarTitle.foreground#2c3e50
  • statusBar.background#cfd8dc
  • statusBar.debuggingBackground#0097a7
  • statusBar.foreground#212121
  • statusBar.noFolderBackground#e0e0e0
  • statusBarItem.hoverBackground#b0bec5
  • tab.activeBackground#ffffff
  • tab.activeBorder#0097a7
  • tab.activeForeground#2c3e50
  • tab.border#bdbdbd
  • tab.inactiveBackground#f5f5f5
  • tab.inactiveForeground#757575
  • terminal.ansiBlue#1976d2
  • terminal.ansiBrightBlue#42a5f5
  • terminal.ansiBrightCyan#26c6da
  • terminal.ansiBrightGreen#66bb6a
  • terminal.ansiBrightMagenta#f06292
  • terminal.ansiBrightRed#ef5350
  • terminal.ansiBrightYellow#ffeb3b
  • terminal.ansiCyan#0097a7
  • terminal.ansiGreen#43a047
  • terminal.ansiMagenta#c2185b
  • terminal.ansiRed#e53935
  • terminal.ansiYellow#fdd835
  • terminal.background#ffffff
  • terminal.foreground#2c3e50
  • titleBar.activeBackground#e0e0e0
  • titleBar.activeForeground#2c3e50
  • 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#0097a7
keyword, storage.type, storage.modifier#0097a7bold
keyword.operator, punctuation.accessor#757575
variable, variable.other#212121
variable.parameter#ff9800italic
entity.name.function, support.function#43a047
meta.function-call#fdd835
entity.name.class, entity.name.type.class, support.class#c2185bbold
entity.name.type, support.type#1976d2
entity.name.type.interface#42a5f5italic
constant.numeric#ff9800
constant, constant.language, constant.character#ffb74d
constant.language.boolean#ff9800bold
variable.other.property, support.variable.property#0097a7
meta.object-literal.key#42a5f5
entity.name.tag, punctuation.definition.tag#c2185b
entity.other.attribute-name#ff9800italic
punctuation, meta.brace#757575
string.regexp#ff9800
constant.character.escape#ff9800
meta.decorator, punctuation.decorator#fdd835
invalid, invalid.illegal#e53935strikethrough
markup.heading, entity.name.section#0097a7bold
markup.bold#ff9800bold
markup.italic#ff9800italic
markup.underline.link#1976d2
markup.inline.raw, markup.fenced_code#43a047
support.type.property-name.json#1976d2
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#c2185b
support.type.property-name.css#1976d2
support.constant.property-value.css#43a047
themesmith by CyberBoost - VS Code Theme