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#FFB300
  • activityBar.background#FFFAF0
  • activityBar.foreground#FFB300
  • activityBarBadge.background#FFB300
  • activityBarBadge.foreground#FFF9E6
  • badge.background#FFB300
  • badge.foreground#FFF9E6
  • button.background#FFB300
  • button.foreground#FFF9E6
  • button.hoverBackground#FFC945
  • dropdown.background#FFF3CC
  • dropdown.border#FFE699
  • dropdown.foreground#333333
  • editor.background#FFF9E6
  • editor.findMatchBackground#FFCC8044
  • editor.findMatchHighlightBackground#FFCC8022
  • editor.foreground#333333
  • editor.lineHighlightBackground#FFF9CC80
  • editor.lineHighlightBorder#FFB30040
  • editor.selectionBackground#FFB30033
  • editor.selectionHighlightBackground#FFB30022
  • editorBracketMatch.background#FFB30033
  • editorBracketMatch.border#FFB300
  • editorCursor.foreground#FFB300
  • editorGroupHeader.tabsBackground#F5EED9
  • editorIndentGuide.activeBackground#CCCCCC88
  • editorIndentGuide.background#CCCCCC44
  • editorLineNumber.activeForeground#FFB300
  • editorLineNumber.foreground#AAAAAA
  • editorWhitespace.foreground#CCCCCC
  • focusBorder#FFB300
  • gitDecoration.conflictingResourceForeground#FFCC80
  • gitDecoration.deletedResourceForeground#E57373
  • gitDecoration.modifiedResourceForeground#FFB300
  • gitDecoration.untrackedResourceForeground#7CB342
  • input.background#FFF3CC
  • input.border#FFE699
  • input.foreground#333333
  • input.placeholderForeground#AAAAAA
  • inputOption.activeBorder#FFB300
  • list.activeSelectionBackground#FFE699
  • list.activeSelectionForeground#333333
  • list.focusBackground#FFE699
  • list.highlightForeground#FFB300
  • list.hoverBackground#FFE69966
  • minimap.background#FFF9E6
  • minimapSlider.activeBackground#FFB30066
  • minimapSlider.background#FFB30022
  • minimapSlider.hoverBackground#FFB30044
  • panel.background#F5EED9
  • panel.border#E6D7B5
  • panelTitle.activeBorder#FFB300
  • panelTitle.activeForeground#FFB300
  • panelTitle.inactiveForeground#777777
  • scrollbar.shadow#00000020
  • scrollbarSlider.activeBackground#FFB30088
  • scrollbarSlider.background#CCCCCC44
  • scrollbarSlider.hoverBackground#CCCCCC88
  • sideBar.background#FFFAF0
  • sideBar.foreground#444444
  • sideBarSectionHeader.background#FFFAF0
  • sideBarSectionHeader.foreground#FFB300
  • sideBarTitle.foreground#FFB300
  • statusBar.background#FFF3CC
  • statusBar.debuggingBackground#FFCC80
  • statusBar.foreground#333333
  • statusBar.noFolderBackground#F5EED9
  • statusBarItem.hoverBackground#FFE699
  • tab.activeBackground#FFF3CC
  • tab.activeBorder#FFB300
  • tab.activeForeground#333333
  • tab.border#FFE699
  • tab.inactiveBackground#F5EED9
  • tab.inactiveForeground#777777
  • terminal.ansiBlue#5C9EEA
  • terminal.ansiBrightBlue#81BFFB
  • terminal.ansiBrightCyan#5FD8D8
  • terminal.ansiBrightGreen#96D462
  • terminal.ansiBrightMagenta#D198E5
  • terminal.ansiBrightRed#F28B84
  • terminal.ansiBrightYellow#FFD966
  • terminal.ansiCyan#41C7C0
  • terminal.ansiGreen#7CB342
  • terminal.ansiMagenta#C77ED2
  • terminal.ansiRed#E57373
  • terminal.ansiYellow#FFB300
  • terminal.background#FFF9E6
  • terminal.foreground#333333
  • titleBar.activeBackground#FFFAF0
  • titleBar.activeForeground#333333
  • titleBar.inactiveBackground#F5EED9
  • titleBar.inactiveForeground#777777

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#999999italic
string, string.quoted, string.template#7CB342
keyword, storage.type, storage.modifier#FFB300bold
keyword.operator, punctuation.accessor#FFCC80
variable, variable.other#333333
variable.parameter#FFCC80italic
entity.name.function, support.function#5C9EEA
meta.function-call#41C7C0
entity.name.class, entity.name.type.class, support.class#C77ED2bold
entity.name.type, support.type#5C9EEA
entity.name.type.interface#FFCC80italic
constant.numeric#D198E5
constant, constant.language, constant.character#FFCC80
constant.language.boolean#FFB300bold
variable.other.property, support.variable.property#7CB342
meta.object-literal.key#5C9EEA
entity.name.tag, punctuation.definition.tag#FFB300
entity.other.attribute-name#FFCC80italic
punctuation, meta.brace#333333
string.regexp#D198E5
constant.character.escape#FFCC80
meta.decorator, punctuation.decorator#FFB300
invalid, invalid.illegal#E57373strikethrough
markup.heading, entity.name.section#FFB300bold
markup.bold#FFB300bold
markup.italic#FFCC80italic
markup.underline.link#5C9EEA
markup.inline.raw, markup.fenced_code#7CB342
support.type.property-name.json#5C9EEA
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#FFB300
support.type.property-name.css#5C9EEA
support.constant.property-value.css#7CB342
themesmith by CyberBoost - VS Code Theme