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#D4A76A
  • activityBar.background#F2EDE9
  • activityBar.foreground#5B4E44
  • activityBarBadge.background#C28B59
  • activityBarBadge.foreground#FFFFFF
  • badge.background#A65A3F
  • badge.foreground#FFFFFF
  • button.background#D4A76A
  • button.foreground#FFFFFF
  • button.hoverBackground#C28B59
  • dropdown.background#FFFFFF
  • dropdown.border#D8D3CF
  • dropdown.foreground#4A3C31
  • editor.background#FAF8F5
  • editor.findMatchBackground#BFA37C
  • editor.findMatchHighlightBackground#E2CBA8
  • editor.foreground#4A3C31
  • editor.lineHighlightBackground#FFF8E1
  • editor.lineHighlightBorder#E0D5C5
  • editor.selectionBackground#C5A880
  • editor.selectionHighlightBackground#D9C5A5
  • editorBracketMatch.background#FFEBCD
  • editorBracketMatch.border#D4A76A
  • editorCursor.foreground#5B4E44
  • editorGroupHeader.tabsBackground#F5F2EE
  • editorIndentGuide.activeBackground#B5A89E
  • editorIndentGuide.background#D8D3CF
  • editorLineNumber.activeForeground#5B4E44
  • editorLineNumber.foreground#A89F96
  • editorWhitespace.foreground#C9C3BF
  • focusBorder#D4A76A
  • gitDecoration.conflictingResourceForeground#A7849E
  • gitDecoration.deletedResourceForeground#A65A3F
  • gitDecoration.modifiedResourceForeground#8B9670
  • gitDecoration.untrackedResourceForeground#C5A880
  • input.background#FFFFFF
  • input.border#D8D3CF
  • input.foreground#4A3C31
  • input.placeholderForeground#A89F96
  • inputOption.activeBorder#D4A76A
  • list.activeSelectionBackground#C5A880
  • list.activeSelectionForeground#FFFFFF
  • list.focusBackground#D4A76A33
  • list.highlightForeground#D4A76A
  • list.hoverBackground#E8E2DC
  • minimap.background#FAF8F5
  • minimapSlider.activeBackground#C9C3BFCC
  • minimapSlider.background#C9C3BF66
  • minimapSlider.hoverBackground#C9C3BF99
  • panel.background#F5F2EE
  • panel.border#D8D3CF
  • panelTitle.activeBorder#D4A76A
  • panelTitle.activeForeground#4A3C31
  • panelTitle.inactiveForeground#8A7D73
  • scrollbar.shadow#00000033
  • scrollbarSlider.activeBackground#C9C3BFCC
  • scrollbarSlider.background#C9C3BF66
  • scrollbarSlider.hoverBackground#C9C3BF99
  • sideBar.background#F5F2EE
  • sideBar.foreground#4A3C31
  • sideBarSectionHeader.background#EFEAE5
  • sideBarSectionHeader.foreground#5B4E44
  • sideBarTitle.foreground#5B4E44
  • statusBar.background#D4A76A
  • statusBar.debuggingBackground#A65A3F
  • statusBar.foreground#FFFFFF
  • statusBar.noFolderBackground#C28B59
  • statusBarItem.hoverBackground#B58A70
  • tab.activeBackground#FFFFFF
  • tab.activeBorder#D4A76A
  • tab.activeForeground#4A3C31
  • tab.border#D8D3CF
  • tab.inactiveBackground#F5F2EE
  • tab.inactiveForeground#8A7D73
  • terminal.ansiBlue#6A8A9E
  • terminal.ansiBrightBlue#7EA2C1
  • terminal.ansiBrightCyan#9AB8BC
  • terminal.ansiBrightGreen#9FAF7E
  • terminal.ansiBrightMagenta#B892A6
  • terminal.ansiBrightRed#B66044
  • terminal.ansiBrightYellow#D0B37A
  • terminal.ansiCyan#88A5A9
  • terminal.ansiGreen#8B9670
  • terminal.ansiMagenta#A7849E
  • terminal.ansiRed#A65A3F
  • terminal.ansiYellow#C5A880
  • terminal.background#FAF8F5
  • terminal.foreground#4A3C31
  • titleBar.activeBackground#E9E5E1
  • titleBar.activeForeground#4A3C31
  • titleBar.inactiveBackground#F2EEEA
  • titleBar.inactiveForeground#8A7D73

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#8A7D73italic
string, string.quoted, string.template#8B9670
keyword, storage.type, storage.modifier#A65A3Fbold
keyword.operator, punctuation.accessor#5B4E44
variable, variable.other#4A3C31
variable.parameter#6A8A9Eitalic
entity.name.function, support.function#6A8A9E
meta.function-call#5B4E44
entity.name.class, entity.name.type.class, support.class#A65A3Fbold
entity.name.type, support.type#6A8A9E
entity.name.type.interface#8B9670italic
constant.numeric#C28B59
constant, constant.language, constant.character#C28B59
constant.language.boolean#A65A3Fbold
variable.other.property, support.variable.property#8B9670
meta.object-literal.key#5B4E44
entity.name.tag, punctuation.definition.tag#A65A3F
entity.other.attribute-name#6A8A9Eitalic
punctuation, meta.brace#5B4E44
string.regexp#C28B59
constant.character.escape#A65A3F
meta.decorator, punctuation.decorator#6A8A9E
invalid, invalid.illegal#FF0000strikethrough
markup.heading, entity.name.section#A65A3Fbold
markup.bold#A65A3Fbold
markup.italic#5B4E44italic
markup.underline.link#6A8A9E
markup.inline.raw, markup.fenced_code#8B9670
support.type.property-name.json#5B4E44
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#A65A3F
support.type.property-name.css#8B9670
support.constant.property-value.css#C28B59
themesmith by CyberBoost - VS Code Theme