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#160d12
  • activityBar.border#2a1a24
  • activityBar.foreground#ff9ec9
  • activityBar.inactiveForeground#8a6a7d
  • activityBarBadge.background#ff5d9e
  • activityBarBadge.foreground#1f1419
  • badge.background#ff5d9e
  • badge.foreground#1f1419
  • button.background#ff5d9e
  • button.foreground#1f1419
  • button.hoverBackground#ff7eb6
  • button.secondaryBackground#5a2a44
  • button.secondaryForeground#ffd6ea
  • dropdown.background#241620
  • dropdown.border#5a2a44
  • dropdown.foreground#f5d4e4
  • editor.background#1f1419
  • editor.findMatchBackground#ff5d9e66
  • editor.findMatchHighlightBackground#ff5d9e33
  • editor.foreground#f5d4e4
  • editor.lineHighlightBackground#2a1a24
  • editor.selectionBackground#5a2a44
  • editor.selectionHighlightBackground#5a2a4480
  • editorBracketMatch.background#5a2a4466
  • editorBracketMatch.border#ff7eb6
  • editorCursor.foreground#ff7eb6
  • editorError.foreground#ff5370
  • editorGroupHeader.tabsBackground#180f14
  • editorGroupHeader.tabsBorder#2a1a24
  • editorGutter.background#1f1419
  • editorHoverWidget.background#241620
  • editorHoverWidget.border#5a2a44
  • editorIndentGuide.activeBackground1#6e4159
  • editorIndentGuide.background1#3a2230
  • editorInfo.foreground#ff7eb6
  • editorLineNumber.activeForeground#ff7eb6
  • editorLineNumber.foreground#7a5068
  • editorSuggestWidget.background#241620
  • editorSuggestWidget.highlightForeground#ff7eb6
  • editorSuggestWidget.selectedBackground#3d1f33
  • editorWarning.foreground#ffb86c
  • editorWhitespace.foreground#3a2230
  • editorWidget.background#241620
  • editorWidget.border#5a2a44
  • focusBorder#ff5d9e
  • foreground#f5d4e4
  • gitDecoration.deletedResourceForeground#ff5370
  • gitDecoration.ignoredResourceForeground#6e4159
  • gitDecoration.modifiedResourceForeground#ff9ec9
  • gitDecoration.untrackedResourceForeground#a3d977
  • input.background#241620
  • input.border#5a2a44
  • input.foreground#f5d4e4
  • input.placeholderForeground#8a6a7d
  • inputOption.activeBorder#ff7eb6
  • inputValidation.errorBackground#5a1f2e
  • inputValidation.errorBorder#ff5370
  • list.activeSelectionBackground#5a2a44
  • list.activeSelectionForeground#ffffff
  • list.focusBackground#5a2a44
  • list.highlightForeground#ff7eb6
  • list.hoverBackground#2a1a24
  • list.inactiveSelectionBackground#3d1f33
  • menu.background#241620
  • menu.foreground#f5d4e4
  • menu.selectionBackground#5a2a44
  • menu.selectionForeground#ffffff
  • notificationCenterHeader.background#241620
  • notifications.background#241620
  • notifications.foreground#f5d4e4
  • panel.background#1a1015
  • panel.border#2a1a24
  • panelTitle.activeBorder#ff5d9e
  • panelTitle.activeForeground#ff9ec9
  • panelTitle.inactiveForeground#8a6a7d
  • peekView.border#ff5d9e
  • peekViewEditor.background#241620
  • peekViewResult.background#1a1015
  • progressBar.background#ff5d9e
  • scrollbarSlider.activeBackground#ff5d9e88
  • scrollbarSlider.background#5a2a4466
  • scrollbarSlider.hoverBackground#5a2a4499
  • selection.background#5a2a4499
  • sideBar.background#1a1015
  • sideBar.border#2a1a24
  • sideBar.foreground#e8c4d6
  • sideBarSectionHeader.background#241620
  • sideBarSectionHeader.foreground#ff9ec9
  • sideBarTitle.foreground#ff9ec9
  • statusBar.background#3d1f33
  • statusBar.border#2a1a24
  • statusBar.debuggingBackground#ff5d9e
  • statusBar.debuggingForeground#1f1419
  • statusBar.foreground#ffd6ea
  • statusBar.noFolderBackground#2a1a24
  • statusBarItem.hoverBackground#5a2a44
  • statusBarItem.remoteBackground#ff5d9e
  • statusBarItem.remoteForeground#1f1419
  • tab.activeBackground#2a1a24
  • tab.activeBorder#ff5d9e
  • tab.activeBorderTop#ff5d9e
  • tab.activeForeground#ffffff
  • tab.border#2a1a24
  • tab.hoverBackground#3d1f33
  • tab.inactiveBackground#180f14
  • tab.inactiveForeground#a58599
  • tab.unfocusedActiveForeground#d4a8c0
  • terminal.ansiBlack#160d12
  • terminal.ansiBlue#c792ea
  • terminal.ansiBrightBlack#8a6a7d
  • terminal.ansiBrightBlue#d9b3f5
  • terminal.ansiBrightCyan#a8e6e6
  • terminal.ansiBrightGreen#bce89a
  • terminal.ansiBrightMagenta#ffb3d9
  • terminal.ansiBrightRed#ff8099
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#ffd0a0
  • terminal.ansiCyan#7fd4d4
  • terminal.ansiGreen#a3d977
  • terminal.ansiMagenta#ff7eb6
  • terminal.ansiRed#ff5370
  • terminal.ansiWhite#f5d4e4
  • terminal.ansiYellow#ffb86c
  • terminal.background#1a1015
  • terminal.foreground#f5d4e4
  • terminalCursor.foreground#ff7eb6
  • titleBar.activeBackground#241620
  • titleBar.activeForeground#ffd6ea
  • titleBar.border#2a1a24
  • titleBar.inactiveBackground#160d12
  • titleBar.inactiveForeground#8a6a7d

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment, comment.block, comment.line#8a6a7ditalic
string, string.quoted, string.template, punctuation.definition.string#ffb3d9
constant.character.escape, string.regexp#ff9e64
keyword, keyword.control, keyword.operator.new, keyword.operator.expression#ff6fab
keyword.operator, punctuation.separator, punctuation.accessor#ff6fab
storage, storage.type, storage.modifier, keyword.declaration#d98fff
entity.name.function, meta.function-call, support.function.builtin#ffa8d4
entity.name.class, entity.name.type, entity.name.type.class, support.type, support.class#c792ea
variable, meta.definition.variable.name, variable.other, variable.other.readwrite#f5d4e4
variable.parameter, variable.language.this, variable.other.object.property#f0c4dc
constant.numeric, constant.numeric.integer, constant.numeric.float#ff9e64
constant.language, constant.language.boolean, constant.language.null, constant.language.undefined#e88fd0
constant.other, variable.other.constant#e88fd0
support.function, support.constant#ffb3d9
punctuation, meta.brace, punctuation.definition.parameters, punctuation.section#b58aa5
entity.name.tag, punctuation.definition.tag#ff6fab
entity.other.attribute-name#d98fff
markup.heading, entity.name.section#ff6fabbold
markup.bold#ffa8d4bold
markup.italic#ffb3d9italic
invalid, invalid.illegal#ff5370