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#EFF0F0
  • activityBar.border#EFF0F0
  • activityBar.foreground#000000
  • activityBarBadge.background#D73C7D
  • button.background#D73C7D
  • button.foreground#EFF0F0
  • dropdown.background#EFF0F0
  • dropdown.border#b2b2b2
  • dropdown.listBackground#EFF0F0
  • editor.background#EFF0F0
  • editor.foreground#000000
  • editor.lineHighlightBackground#d8eaf1
  • editor.lineHighlightBorder#d8eaf1
  • editor.selectionBackground#a4dff6
  • editorBracketHighlight.foreground1#3294b4
  • editorBracketHighlight.foreground2#777cd7
  • editorBracketHighlight.foreground3#cc7acc
  • editorBracketHighlight.foreground4#da73bd
  • editorBracketHighlight.foreground5#4eb1b4
  • editorGroup.border#EFF0F0
  • editorGroupHeader.noTabsBackground#EFF0F0
  • editorGroupHeader.tabsBackground#EFF0F0
  • editorGroupHeader.tabsBorder#EFF0F0
  • editorLineNumber.activeForeground#000000
  • editorLineNumber.foreground#babbbc
  • editorSuggestWidget.highlightForeground#D73C7D
  • editorSuggestWidget.selectedBackground#e1e1e1
  • editorWidget.background#EFF0F0
  • editorWidget.border#000000
  • focusBorder#f0f0f000
  • foreground#000000
  • input.background#EFF0F0
  • input.border#b2b2b2
  • inputOption.activeBorder#000000
  • inputOption.activeForeground#000000
  • list.activeSelectionBackground#dfdfdf
  • list.activeSelectionForeground#D73C7D
  • list.focusBackground#dfdfdf
  • list.focusForeground#D73C7D
  • list.highlightForeground#D73C7D
  • list.hoverBackground#dfdfdf
  • list.hoverForeground#D73C7D
  • list.inactiveSelectionBackground#dfdfdf
  • list.inactiveSelectionForeground#D73C7D
  • notificationCenter.border#EFF0F0
  • notificationCenterHeader.background#EFF0F0
  • notifications.background#EFF0F0
  • notifications.border#EFF0F0
  • notificationToast.border#EFF0F0
  • panel.border#D73C7D
  • scrollbar.shadow#EFF0F0
  • sideBar.background#EFF0F0
  • sideBar.border#EFF0F0
  • sideBar.foreground#000000
  • sideBarSectionHeader.background#EFF0F0
  • statusBar.background#EFF0F0
  • statusBar.border#EFF0F0
  • statusBar.debuggingBackground#D73C7D
  • statusBar.debuggingForeground#EFF0F0
  • statusBar.foreground#000000
  • statusBar.noFolderBackground#EFF0F0
  • statusBar.noFolderForeground#000000
  • tab.activeBackground#EFF0F0
  • tab.activeBorder#D73C7D
  • tab.activeModifiedBorder#D73C7D
  • tab.border#EFF0F0
  • tab.inactiveBackground#EFF0F0
  • titleBar.activeBackground#EFF0F0
  • titleBar.activeForeground#000000
  • titleBar.border#EFF0F0
  • titleBar.inactiveBackground#EFF0F0
  • titleBar.inactiveForeground#000000

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment, string.comment#6a737d
constant, entity.name.constant, variable.other.constant, variable.language#006AC7
keyword.operator.symbole, keyword.other.mark#000000
entity, entity.name#6f42c1
variable.parameter.function#000000
entity.name.tag#227687
keyword#D73C7D
storage, storage.type#D73C7D
storage.modifier.package, storage.modifier.import, storage.type.java#000000
string, punctuation.definition.string, string punctuation.section.embedded source#032f62
string.unquoted.import.ada
support#006AC7
meta.property-name#006AC7
variable#E378AC
variable.other#000000
invalid.broken#DC284Fbold italic underline
invalid.deprecated#DC284Fbold italic underline
invalid.illegal#DC284Fitalic underline
carriage-return#D73C7Ditalic underline
invalid.unimplemented#DC284Fbold italic underline
message.error#DC284F
string source#000000
string variable#006AC7
source.regexp, string.regexp#032f62
string.regexp.character-class, string.regexp constant.character.escape, string.regexp source.ruby.embedded, string.regexp string.regexp.arbitrary-repitition#032f62
string.regexp constant.character.escape#227687bold
support.constant#006AC7
support.variable#006AC7
meta.module-reference#006AC7
markup.list#735c0f
markup.heading, markup.heading entity.name#006AC7bold
markup.quote#227687
markup.italic#000000italic
markup.bold#000000bold
markup.raw#006AC7
markup.deleted, meta.diff.header.from-file, punctuation.definition.deleted#DC284F
markup.inserted, meta.diff.header.to-file, punctuation.definition.inserted#227687
markup.changed, punctuation.definition.changed#E378AC
markup.ignored, markup.untracked#006AC7
meta.diff.range#6f42c1bold
meta.diff.header#006AC7
meta.separator#006AC7bold
meta.output#006AC7
brackethighlighter.tag, brackethighlighter.curly, brackethighlighter.round, brackethighlighter.square, brackethighlighter.angle, brackethighlighter.quote#586069
brackethighlighter.unmatched#DC284F
sublimelinter.mark.error#DC284F
sublimelinter.mark.warning#E378AC
sublimelinter.gutter-mark#959da5
constant.other.reference.link, string.other.link#032f62underline
meta.function-call support.function, meta.function-call entity.name.function#006AC7
keyword.operator#000000
bubblecum by vaaski - VS Code Theme