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
Pink Heart Theme & Rain by codedbyelif - VS Code Theme