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.background#EBEBECFF
  • activityBar.foreground#242529FF
  • activityBarBadge.background#5C78E2FF
  • activityBarBadge.foreground#FFFFFF
  • badge.background#5C78E2FF
  • badge.foreground#FFFFFF
  • button.background#5C78E2FF
  • button.foreground#FFFFFF
  • button.hoverBackground#4A66D0FF
  • dropdown.background#FFFFFF
  • dropdown.border#C9C9CAFF
  • dropdown.foreground#242529FF
  • editor.background#FAFAFA
  • editor.findMatchBackground#5C78E266
  • editor.findMatchHighlightBackground#5C78E21A
  • editor.foreground#242529
  • editor.hoverHighlightBackground#A3A3A466
  • editor.inactiveSelectionBackground#A349AB3D
  • editor.lineHighlightBackground#EBEBECBf
  • editor.rangeHighlightBackground#5C78E21A
  • editor.selectionBackground#5C78E23D
  • editor.wordHighlightBackground#A3A3A466
  • editor.wordHighlightStrongBackground#5C78E21A
  • editorBracketMatch.background#5C78E21A
  • editorBracketMatch.border#5C78E2FF
  • editorCursor.foreground#5C78E2FF
  • editorIndentGuide.background1#383A410D
  • editorLineNumber.foreground#383A4159
  • editorRuler.foreground#383A410D
  • editorWhitespace.foreground#383A410D
  • focusBorder#5C78E2FF
  • input.background#FFFFFF
  • input.border#C9C9CAFF
  • input.foreground#242529FF
  • inputOption.activeBorder#5C78E2FF
  • list.activeSelectionBackground#CACACAFF
  • list.dropBackground#7E808780
  • list.hoverBackground#DFDFE0FF
  • list.inactiveSelectionBackground#DFDFE0FF
  • panel.background#EBEBECFF
  • panel.border#DFDFE0FF
  • pickerGroup.foreground#5C78E2FF
  • progressBar.background#5C78E2FF
  • scrollbarSlider.activeBackground#DFDFE0FF
  • scrollbarSlider.background#383A414C
  • scrollbarSlider.hoverBackground#DFDFE0FF
  • sideBar.background#EBEBECFF
  • sideBar.border#DFDFE0FF
  • sideBar.foreground#242529FF
  • sideBarTitle.foreground#242529FF
  • statusBar.background#DCDCDDFF
  • statusBar.debuggingBackground#DCDCDDFF
  • statusBar.debuggingForeground#242529FF
  • statusBar.foreground#242529FF
  • statusBar.noFolderBackground#DCDCDDFF
  • statusBarItem.hoverBackground#CACACAFF
  • tab.activeBackground#FAFAFAFF
  • tab.activeBorder#5C78E2FF
  • tab.activeForeground#242529FF
  • tab.inactiveBackground#EBEBECFF
  • tab.inactiveForeground#7E8086FF
  • terminal.background#FAFAFAFF
  • terminal.foreground#242529FF
  • terminalCursor.background#242529FF
  • terminalCursor.foreground#5C78E2FF
  • titleBar.activeBackground#DCDCDDFF
  • titleBar.activeForeground#242529FF
  • titleBar.inactiveBackground#EBEBECFF
  • titleBar.inactiveForeground#7E8086FF

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
keyword.cmake#A449AB
comment.source.cmake#A2A3A7italic
string.source.cmake#649F57
storage.source.cmake#AD6E25
variable.source.cmake#383A41
entity.source.cmake#3882B7
constant.source.cmake#D3604F
argument.source.cmake#242529
keyword.control.import, storage.modifier, storage.type, keyword.control#A449AB
string, text.literal, string.quoted.double#649F57
variable, variable.language, variable.parameter#383A41
constant.numeric, constant.language, constant.character#AD6E25
entity.name.function#5C78E2
meta.function-call, meta.method-call#D3604F
entity.name.class, entity.name.type, support.class#3882B7
comment#A2A3A7italic
punctuation.definition.tag, entity.name.tag#5C78E2
meta.decorator, entity.name.function.decorator#5C78E2
storage.type.function, keyword.operator#A449AB
markup.heading, markup.heading.setext, markup.heading.markdown#5C78E2bold
markup.bold, markup.bold.markdown#A449ABbold
markup.italic, markup.italic.markdown#D3604Fitalic
markup.inline.raw, markup.fenced_code.block, markup.raw.block#AD6E25
markup.link, markup.underline.link, string.other.link#3882B7underline
markup.quote, punctuation.definition.quote#649F57italic
markup.list, markup.list.numbered, markup.list.unnumbered#D3604F
markup.separator#A2A3A7