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#00B5D8
  • activityBar.background#F5F0E6
  • activityBar.foreground#2B2D2F
  • activityBarBadge.background#00B5D8
  • activityBarBadge.foreground#FFFDF5
  • badge.background#00B5D8
  • badge.foreground#FFFDF5
  • button.background#00B5D8
  • button.foreground#FFFFFF
  • button.hoverBackground#0099B9
  • dropdown.background#FFFFFF
  • dropdown.border#00B5D8
  • dropdown.foreground#2B2D2F
  • editor.background#FFFDF5
  • editor.findMatchBackground#00B5D844
  • editor.findMatchHighlightBackground#00B5D822
  • editor.foreground#2B2D2F
  • editor.lineHighlightBackground#E5F7FA
  • editor.lineHighlightBorder#00B5D822
  • editor.selectionBackground#00B5D833
  • editor.selectionHighlightBackground#00B5D822
  • editorBracketMatch.background#00B5D822
  • editorBracketMatch.border#00B5D8
  • editorCursor.foreground#00B5D8
  • editorGroupHeader.tabsBackground#FFFDF5
  • editorIndentGuide.activeBackground#00B5D888
  • editorIndentGuide.background#6E778144
  • editorLineNumber.activeForeground#00B5D8
  • editorLineNumber.foreground#6E7781
  • editorWhitespace.foreground#6E778188
  • focusBorder#00B5D8
  • gitDecoration.conflictingResourceForeground#F9C64A
  • gitDecoration.deletedResourceForeground#E75454
  • gitDecoration.modifiedResourceForeground#00B5D8
  • gitDecoration.untrackedResourceForeground#79D867
  • input.background#FFFFFF
  • input.border#00B5D8
  • input.foreground#2B2D2F
  • input.placeholderForeground#6E7781
  • inputOption.activeBorder#00B5D8
  • list.activeSelectionBackground#00B5D833
  • list.activeSelectionForeground#FFFFFF
  • list.focusBackground#00B5D833
  • list.highlightForeground#00B5D8
  • list.hoverBackground#00B5D81A
  • minimap.background#FFFDF5
  • minimapSlider.activeBackground#00B5D866
  • minimapSlider.background#00B5D822
  • minimapSlider.hoverBackground#00B5D844
  • panel.background#FFFDF5
  • panel.border#00B5D8
  • panelTitle.activeBorder#00B5D8
  • panelTitle.activeForeground#00B5D8
  • panelTitle.inactiveForeground#6E7781
  • scrollbar.shadow#00000044
  • scrollbarSlider.activeBackground#6E778188
  • scrollbarSlider.background#6E778144
  • scrollbarSlider.hoverBackground#6E778166
  • sideBar.background#FAF7F0
  • sideBar.foreground#2B2D2F
  • sideBarSectionHeader.background#FAF7F0
  • sideBarSectionHeader.foreground#00B5D8
  • sideBarTitle.foreground#00B5D8
  • statusBar.background#00B5D8
  • statusBar.debuggingBackground#FFB200
  • statusBar.foreground#FFFFFF
  • statusBar.noFolderBackground#00B5D8
  • statusBarItem.hoverBackground#009DC57A
  • tab.activeBackground#FFFDF5
  • tab.activeBorder#00B5D8
  • tab.activeForeground#2B2D2F
  • tab.border#DAD5CB
  • tab.inactiveBackground#EDEAE3
  • tab.inactiveForeground#6E7781
  • terminal.ansiBlue#00B5D8
  • terminal.ansiBrightBlue#3FD6FF
  • terminal.ansiBrightCyan#5FF9FF
  • terminal.ansiBrightGreen#9CFF8E
  • terminal.ansiBrightMagenta#FF84FF
  • terminal.ansiBrightRed#FF7777
  • terminal.ansiBrightYellow#FFE066
  • terminal.ansiCyan#00F0FF
  • terminal.ansiGreen#79D867
  • terminal.ansiMagenta#D96ED9
  • terminal.ansiRed#E75454
  • terminal.ansiYellow#F9C64A
  • terminal.background#FFFDF5
  • terminal.foreground#2B2D2F
  • titleBar.activeBackground#F5F0E6
  • titleBar.activeForeground#2B2D2F
  • titleBar.inactiveBackground#FFFDF5
  • titleBar.inactiveForeground#6E7781

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#6E7781italic
string, string.quoted, string.template#79D867
keyword, storage.type, storage.modifier#00B5D8bold
keyword.operator, punctuation.accessor#00F0FF
variable, variable.other#2B2D2F
variable.parameter#00B5D8italic
entity.name.function, support.function#00F0FF
meta.function-call#00B5D8
entity.name.class, entity.name.type.class, support.class#00B5D8bold
entity.name.type, support.type#00F0FF
entity.name.type.interface#79D867italic
constant.numeric#F9C64A
constant, constant.language, constant.character#D96ED9
constant.language.boolean#00B5D8bold
variable.other.property, support.variable.property#00B5D8
meta.object-literal.key#00B5D8
entity.name.tag, punctuation.definition.tag#D96ED9
entity.other.attribute-name#79D867italic
punctuation, meta.brace#6E7781
string.regexp#F9C64A
constant.character.escape#D96ED9
meta.decorator, punctuation.decorator#F9C64A
invalid, invalid.illegal#E75454strikethrough
markup.heading, entity.name.section#00B5D8bold
markup.bold#00B5D8bold
markup.italic#79D867italic
markup.underline.link#00F0FF
markup.inline.raw, markup.fenced_code#79D867
support.type.property-name.json#00B5D8
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#F9C64A
support.type.property-name.css#00B5D8
support.constant.property-value.css#79D867
themesmith by CyberBoost - VS Code Theme