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#ff3b30
  • activityBar.background#e0e5eb
  • activityBar.foreground#ff3b30
  • activityBarBadge.background#ff3b30
  • activityBarBadge.foreground#ffffff
  • badge.background#ff3b30
  • badge.foreground#ffffff
  • button.background#ff3b30
  • button.foreground#ffffff
  • button.hoverBackground#ff5722
  • dropdown.background#ffffff
  • dropdown.border#c0c4c8
  • dropdown.foreground#2e3440
  • editor.background#f5f7fa
  • editor.findMatchBackground#ff3b4444
  • editor.findMatchHighlightBackground#ff3b3022
  • editor.foreground#2e3440
  • editor.lineHighlightBackground#e8eef3
  • editor.lineHighlightBorder#c0c4c8
  • editor.selectionBackground#ff3b3022
  • editor.selectionHighlightBackground#ff3b3011
  • editorBracketMatch.background#ff3b3022
  • editorBracketMatch.border#ff3b30
  • editorCursor.foreground#ff3b30
  • editorGroupHeader.tabsBackground#f5f7fa
  • editorIndentGuide.activeBackground#c0c4c8aa
  • editorIndentGuide.background#c0c4c859
  • editorLineNumber.activeForeground#ff3b30
  • editorLineNumber.foreground#c0c4c8
  • editorWhitespace.foreground#c0c4c8
  • focusBorder#ff3b30
  • gitDecoration.conflictingResourceForeground#ffeb3b
  • gitDecoration.deletedResourceForeground#ff5722
  • gitDecoration.modifiedResourceForeground#ff3b30
  • gitDecoration.untrackedResourceForeground#00c853
  • input.background#ffffff
  • input.border#c0c4c8
  • input.foreground#2e3440
  • input.placeholderForeground#7a8a99
  • inputOption.activeBorder#ff3b30
  • list.activeSelectionBackground#ff3b3022
  • list.activeSelectionForeground#ffffff
  • list.focusBackground#ff3b3022
  • list.highlightForeground#ff3b30
  • list.hoverBackground#ff3b3011
  • minimap.background#f5f7fa
  • minimapSlider.activeBackground#ff3b3088
  • minimapSlider.background#ff3b3022
  • minimapSlider.hoverBackground#ff3b3044
  • panel.background#f5f7fa
  • panel.border#e0e5eb
  • panelTitle.activeBorder#ff3b30
  • panelTitle.activeForeground#ff3b30
  • panelTitle.inactiveForeground#7a8a99
  • scrollbar.shadow#00000033
  • scrollbarSlider.activeBackground#ff3b30aa
  • scrollbarSlider.background#c0c4c859
  • scrollbarSlider.hoverBackground#c0c4c8aa
  • sideBar.background#edf0f4
  • sideBar.foreground#2e3440
  • sideBarSectionHeader.background#e0e5eb
  • sideBarSectionHeader.foreground#ff3b30
  • sideBarTitle.foreground#ff3b30
  • statusBar.background#e0e5eb
  • statusBar.debuggingBackground#ff5722
  • statusBar.foreground#2e3440
  • statusBar.noFolderBackground#d4d9df
  • statusBarItem.hoverBackground#ff3b3088
  • tab.activeBackground#ffffff
  • tab.activeBorder#ff3b30
  • tab.activeForeground#ff3b30
  • tab.border#c0c4c8
  • tab.inactiveBackground#f0f3f6
  • tab.inactiveForeground#7a8a99
  • terminal.ansiBlue#2196f3
  • terminal.ansiBrightBlue#64b5f6
  • terminal.ansiBrightCyan#26c6da
  • terminal.ansiBrightGreen#69f0ae
  • terminal.ansiBrightMagenta#ff80ab
  • terminal.ansiBrightRed#ff6e40
  • terminal.ansiBrightYellow#ffff8d
  • terminal.ansiCyan#00bcd4
  • terminal.ansiGreen#00c853
  • terminal.ansiMagenta#ff00ff
  • terminal.ansiRed#ff3b30
  • terminal.ansiYellow#ffeb3b
  • terminal.background#f5f7fa
  • terminal.foreground#2e3440
  • titleBar.activeBackground#e0e5eb
  • titleBar.activeForeground#2e3440
  • titleBar.inactiveBackground#d4d9df
  • titleBar.inactiveForeground#7a8a99

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#7a8a99italic
string, string.quoted, string.template#00bcd4
keyword, storage.type, storage.modifier#ff3b30bold
keyword.operator, punctuation.accessor#757575
variable, variable.other#009688
variable.parameter#00e676italic
entity.name.function, support.function#ff00ff
meta.function-call#64b5f6
entity.name.class, entity.name.type.class, support.class#ff9800bold
entity.name.type, support.type#2196f3
entity.name.type.interface#00e676italic
constant.numeric#d32f2f
constant, constant.language, constant.character#ff9800
constant.language.boolean#ff3b30bold
variable.other.property, support.variable.property#ff3b30
meta.object-literal.key#ff3b30
entity.name.tag, punctuation.definition.tag#ff5722
entity.other.attribute-name#ff00ffitalic
punctuation, meta.brace#757575
string.regexp#ff5722
constant.character.escape#ff00ff
meta.decorator, punctuation.decorator#ffeb3b
invalid, invalid.illegal#ff3b30strikethrough
markup.heading, entity.name.section#ff3b30bold
markup.bold#ff5722bold
markup.italic#ff00ffitalic
markup.underline.link#00bcd4
markup.inline.raw, markup.fenced_code#00c853
support.type.property-name.json#2196f3
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#ff00ff
support.type.property-name.css#2196f3
support.constant.property-value.css#00bcd4
themesmith by CyberBoost - VS Code Theme