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#FF6F61
  • activityBar.background#F0F0F0
  • activityBar.foreground#333333
  • activityBarBadge.background#FF6F61
  • activityBarBadge.foreground#FAFAFA
  • badge.background#FF6F61
  • badge.foreground#FAFAFA
  • button.background#FF6F61
  • button.foreground#FAFAFA
  • button.hoverBackground#FF8567
  • dropdown.background#FFFFFF
  • dropdown.border#CCCCCC
  • dropdown.foreground#333333
  • editor.background#FAFAFA
  • editor.findMatchBackground#4A90E644
  • editor.findMatchHighlightBackground#4A90E622
  • editor.foreground#333333
  • editor.lineHighlightBackground#E6F7FF40
  • editor.lineHighlightBorder#E6F7FF80
  • editor.selectionBackground#FF6F6140
  • editor.selectionHighlightBackground#FF6F6020
  • editorBracketMatch.background#4A90E633
  • editorBracketMatch.border#4A90E6
  • editorCursor.foreground#FF6F61
  • editorGroupHeader.tabsBackground#FAFAFA
  • editorIndentGuide.activeBackground#FF6F6144
  • editorIndentGuide.background#CCCCCC44
  • editorLineNumber.activeForeground#FF6F61
  • editorLineNumber.foreground#AAAAAA
  • editorWhitespace.foreground#CCCCCC
  • focusBorder#FF6F61
  • gitDecoration.conflictingResourceForeground#F9A825
  • gitDecoration.deletedResourceForeground#D81B60
  • gitDecoration.modifiedResourceForeground#FF6F61
  • gitDecoration.untrackedResourceForeground#43A047
  • input.background#FFFFFF
  • input.border#CCCCCC
  • input.foreground#333333
  • input.placeholderForeground#AAAAAA
  • inputOption.activeBorder#FF6F61
  • list.activeSelectionBackground#E0F7FA
  • list.activeSelectionForeground#333333
  • list.focusBackground#D0D0D0
  • list.highlightForeground#FF6F61
  • list.hoverBackground#E0E0E0
  • minimap.background#FAFAFA
  • minimapSlider.activeBackground#FF6F6066
  • minimapSlider.background#FF6F6022
  • minimapSlider.hoverBackground#FF6F6044
  • panel.background#FAFAFA
  • panel.border#E0E0E0
  • panelTitle.activeBorder#FF6F61
  • panelTitle.activeForeground#333333
  • panelTitle.inactiveForeground#777777
  • scrollbar.shadow#00000022
  • scrollbarSlider.activeBackground#FF6F6188
  • scrollbarSlider.background#CCCCCC44
  • scrollbarSlider.hoverBackground#CCCCCC88
  • sideBar.background#F5F5F5
  • sideBar.foreground#333333
  • sideBarSectionHeader.background#E0E0E0
  • sideBarSectionHeader.foreground#FF6F61
  • sideBarTitle.foreground#333333
  • statusBar.background#E8E8E8
  • statusBar.debuggingBackground#4A90E2
  • statusBar.foreground#333333
  • statusBar.noFolderBackground#E0E0E0
  • statusBarItem.hoverBackground#D0D0D0
  • tab.activeBackground#FAFAFA
  • tab.activeBorder#FF6F61
  • tab.activeForeground#333333
  • tab.border#CCCCCC
  • tab.inactiveBackground#F0F0F0
  • tab.inactiveForeground#777777
  • terminal.ansiBlue#4A90E2
  • terminal.ansiBrightBlue#7FAFF5
  • terminal.ansiBrightCyan#66E0DC
  • terminal.ansiBrightGreen#66BB6A
  • terminal.ansiBrightMagenta#F48FB1
  • terminal.ansiBrightRed#FF8A80
  • terminal.ansiBrightYellow#FFEB3B
  • terminal.ansiCyan#00BFA5
  • terminal.ansiGreen#43A047
  • terminal.ansiMagenta#D81B60
  • terminal.ansiRed#FF6F61
  • terminal.ansiYellow#F9A825
  • terminal.background#FAFAFA
  • terminal.foreground#333333
  • titleBar.activeBackground#E8E8E8
  • titleBar.activeForeground#333333
  • titleBar.inactiveBackground#D8D8D8
  • titleBar.inactiveForeground#777777

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#9E9E9Eitalic
string, string.quoted, string.template#43A047
keyword, storage.type, storage.modifier#FF6F61bold
keyword.operator, punctuation.accessor#4A90E2
variable, variable.other#333333
variable.parameter#777777italic
entity.name.function, support.function#4A90E2
meta.function-call#4A90E2
entity.name.class, entity.name.type.class, support.class#F57C00bold
entity.name.type, support.type#4A90E2
entity.name.type.interface#F57C00italic
constant.numeric#F57C00
constant, constant.language, constant.character#F57C00
constant.language.boolean#F57C00bold
variable.other.property, support.variable.property#333333
meta.object-literal.key#4A90E2
entity.name.tag, punctuation.definition.tag#FF6F61
entity.other.attribute-name#F57C00italic
punctuation, meta.brace#777777
string.regexp#F57C00
constant.character.escape#F57C00
meta.decorator, punctuation.decorator#F57C00
invalid, invalid.illegal#FF6F61strikethrough
markup.heading, entity.name.section#FF6F61bold
markup.bold#FF6F61bold
markup.italic#4A90E2italic
markup.underline.link#4A90E2
markup.inline.raw, markup.fenced_code#43A047
support.type.property-name.json#4A90E2
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#F57C00
support.type.property-name.css#4A90E2
support.constant.property-value.css#43A047
themesmith by CyberBoost - VS Code Theme