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#333c47
  • activityBar.border#2a2e38
  • activityBar.foreground#fdf8ce
  • activityBar.inactiveForeground#f0fdff
  • activityBarBadge.background#d08785
  • activityBarBadge.foreground#333c47
  • badge.background#f0fdff
  • badge.foreground#2a2e38
  • button.background#6f98b3
  • button.foreground#f0fdff
  • button.secondaryBackground#6f98b3
  • button.secondaryForeground#f0fdff
  • editor.background#2a2e38
  • editor.findMatchBackground#405766
  • editor.findMatchHighlightBackground#333c47
  • editor.findRangeHighlightBackground#333c47
  • editor.foreground#f0fdff
  • editor.lineHighlightBackground#333c47
  • editor.selectionBackground#333c47
  • editor.selectionHighlightBackground#333c47
  • editor.wordHighlightBackground#405766
  • editorBracketMatch.background#6f98b3
  • editorBracketMatch.border#6f98b3
  • editorBracketPairGuide.activeBackground1#d08785
  • editorBracketPairGuide.activeBackground2#d08785
  • editorBracketPairGuide.activeBackground3#d08785
  • editorBracketPairGuide.activeBackground4#d08785
  • editorBracketPairGuide.activeBackground5#d08785
  • editorBracketPairGuide.activeBackground6#d08785
  • editorBracketPairGuide.background1#d08785
  • editorBracketPairGuide.background2#d08785
  • editorBracketPairGuide.background3#d08785
  • editorBracketPairGuide.background4#d08785
  • editorBracketPairGuide.background5#d08785
  • editorBracketPairGuide.background6#d08785
  • editorCursor.foreground#f0fdff
  • editorGroupHeader.tabsBackground#2a2e38
  • editorIndentGuide.background#333c47
  • editorLineNumber.activeForeground#ffd17f
  • editorLineNumber.foreground#fdf8ce
  • editorRuler.foreground#333c47
  • foreground#f0fdff
  • input.background#2a2e38
  • input.foreground#f0fdff
  • list.activeSelectionBackground#405766
  • list.activeSelectionForeground#fdf8ce
  • list.errorForeground#d08785
  • list.focusAndSelectionOutline#fdf8ce
  • list.focusForeground#fdf8ce
  • list.focusOutline#f0fdff
  • list.hoverBackground#333c47
  • list.hoverForeground#fdf8ce
  • list.inactiveFocusBackground#405766
  • list.inactiveFocusOutline#f0fdff
  • list.inactiveSelectionBackground#333c47
  • list.inactiveSelectionForeground#fdf8ce
  • list.warningForeground#ffd17f
  • sideBar.background#2a2e38
  • sideBar.border#333c47
  • sideBarSectionHeader.background#333c47
  • sideBarSectionHeader.foreground#fcdbd9
  • statusBar.background#f0fdff
  • statusBar.debuggingBackground#fcdbd9
  • statusBar.foreground#2a2e38
  • symbolIcon.classForeground#fcdbd9
  • symbolIcon.constantForeground#f0fdff
  • symbolIcon.enumeratorForeground#fcdbd9
  • symbolIcon.enumeratorMemberForeground#f0fdff
  • symbolIcon.fieldForeground#f0fdff
  • symbolIcon.functionForeground#d08785
  • symbolIcon.interfaceForeground#fcdbd9
  • symbolIcon.keywordForeground#6f98b3
  • symbolIcon.nullForeground#a5b7cb
  • symbolIcon.numberForeground#a5b7cb
  • symbolIcon.operatorForeground#6f98b3
  • symbolIcon.stringForeground#fdf8ce
  • symbolIcon.structForeground#fcdbd9
  • symbolIcon.variableForeground#f0fdff
  • tab.activeBackground#405766
  • tab.activeForeground#fdf8ce
  • tab.border#2a2e38
  • tab.inactiveBackground#333c47
  • tab.inactiveForeground#f0fdff
  • titleBar.activeBackground#f0fdff
  • titleBar.activeForeground#2a2e38

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#6d8b7bitalic
comment.block#6d7b8b
keyword, storage, variable.language.this#6f98b3bold
keyword.operator
string#fdf8ce
constant, keyword.other.unit#a5b7cb
constant.other, constant.character.escape, punctuation.definition.template-expression, keyword.interpolation#ffd17f
entity.name.type, entity.name.class, entity.other.inherited-class, storage.type.generic, storage.type.java#fcdbd9
entity.name.function#d08785
entity.name.function.preprocessor#d08785underline
variable#f0fdff
variable.other.enummember, variable.other.constantitalic
variable.parameterbold
heading.1#6f98b3bold underline
heading.2#6f98b3bold
heading.3#6f98b3
heading.4#6f98b3italic
markup.inline#ffd17f
markup.list#d08785
markup.italic#fcdbd9italic
markup.bold#fcdbd9bold
markup.underline#fcdbd9underline
markup.quote#ffd17fitalic
support.type.property-name#d08785
entity.name.tag#d08785