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#0d0d0d
  • activityBar.foreground#d0d6f0
  • activityBarBadge.background#f8b080
  • activityBarBadge.foreground#1a1a1a
  • badge.background#f8b080
  • badge.foreground#1a1a1a
  • button.background#f8b080
  • button.foreground#1a1a1a
  • button.hoverBackground#f9c0a0
  • dropdown.background#252525
  • dropdown.border#333333
  • dropdown.foreground#d0d6f0
  • editor.background#1a1a1a
  • editor.foreground#d0d6f0
  • editor.lineHighlightBackground#141414
  • editor.selectionBackground#333333
  • editor.selectionHighlightBackground#33333366
  • editorBracketMatch.background#33333366
  • editorBracketMatch.border#f8b080
  • editorCursor.foreground#f8b080
  • editorError.foreground#f08898
  • editorGroupHeader.tabsBackground#0d0d0d
  • editorHint.foreground#90dcd0
  • editorIndentGuide.activeBackground1#444444
  • editorIndentGuide.background1#333333
  • editorInfo.foreground#84d8e8
  • editorLineNumber.activeForeground#b0b8fc
  • editorLineNumber.foreground#444444
  • editorWarning.foreground#f5dea4
  • editorWhitespace.foreground#444444
  • focusBorder#f8b080
  • gitDecoration.conflictingResourceForeground#f08898
  • gitDecoration.deletedResourceForeground#f08898
  • gitDecoration.ignoredResourceForeground#6a7284
  • gitDecoration.modifiedResourceForeground#f5dea4
  • gitDecoration.untrackedResourceForeground#a4e09c
  • input.background#252525
  • input.border#333333
  • input.foreground#d0d6f0
  • input.placeholderForeground#7c8498
  • inputOption.activeBorder#f8b080
  • list.activeSelectionBackground#333333
  • list.activeSelectionForeground#d0d6f0
  • list.focusBackground#333333
  • list.highlightForeground#f8b080
  • list.hoverBackground#252525
  • panel.background#141414
  • panel.border#333333
  • panelTitle.activeBorder#f8b080
  • panelTitle.activeForeground#d0d6f0
  • panelTitle.inactiveForeground#7c8498
  • peekView.border#f8b080
  • peekViewEditor.background#141414
  • peekViewResult.background#0d0d0d
  • peekViewTitle.background#0d0d0d
  • scrollbarSlider.activeBackground#555555
  • scrollbarSlider.background#33333388
  • scrollbarSlider.hoverBackground#444444aa
  • sideBar.background#141414
  • sideBar.foreground#d0d6f0
  • sideBarSectionHeader.background#0d0d0d
  • sideBarTitle.foreground#d0d6f0
  • statusBar.background#0d0d0d
  • statusBar.foreground#d0d6f0
  • statusBar.noFolderBackground#0d0d0d
  • statusBarItem.hoverBackground#333333
  • tab.activeBackground#1a1a1a
  • tab.activeForeground#d0d6f0
  • tab.border#0d0d0d
  • tab.inactiveBackground#0d0d0d
  • tab.inactiveForeground#7c8498
  • terminal.ansiBlack#1a1a1a
  • terminal.ansiBlue#84b4f8
  • terminal.ansiBrightBlack#444444
  • terminal.ansiBrightBlue#84b4f8
  • terminal.ansiBrightCyan#90dcd0
  • terminal.ansiBrightGreen#a4e09c
  • terminal.ansiBrightMagenta#c8a2f4
  • terminal.ansiBrightRed#f08898
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#f5dea4
  • terminal.ansiCyan#90dcd0
  • terminal.ansiGreen#a4e09c
  • terminal.ansiMagenta#c8a2f4
  • terminal.ansiRed#f08898
  • terminal.ansiWhite#d0d6f0
  • terminal.ansiYellow#f5dea4
  • terminal.background#1a1a1a
  • terminal.foreground#d0d6f0
  • titleBar.activeBackground#0d0d0d
  • titleBar.activeForeground#d0d6f0
  • titleBar.inactiveBackground#141414

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#9098b0italic
string, string.quoted#a4e09c
constant.numeric, constant.language, constant.character#f8b080
variable, variable.other#d0d6f0
variable.language, variable.other.constant#f08898
variable.parameter#e69ca4italic
keyword, storage.type, storage.modifier#c8a2f4
keyword.control#c8a2f4
keyword.operator#84d8e8
entity.name.function, support.function, meta.function-call#f8b080
entity.name.type, entity.name.class, support.type, support.class#f5dea4
entity.name.tag#84b4f8
entity.other.attribute-name#f5dea4
entity.other.inherited-class#90dcd0
punctuation, meta.brace#9098b0
support.constant, constant.other#f8b080
meta.decorator, entity.name.decorator#f8b080
string.regexp#f2c0e4
constant.character.escape#f2c0e4
markup.heading#f8b080bold
markup.bold#f08898bold
markup.italic#f08898italic
markup.inline.raw#a4e09c
markup.quote#f5dea4italic
markup.list#90dcd0
markup.inserted#a4e09c
markup.deleted#f08898
markup.changed#f5dea4
meta.diff.header#84b4f8
Aizen Theme by vivy - VS Code Theme