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#ffe3ef
  • activityBar.border#ffdcec
  • activityBar.foreground#c2185b
  • activityBar.inactiveForeground#c98faf
  • activityBarBadge.background#d6337f
  • activityBarBadge.foreground#ffffff
  • badge.background#d6337f
  • badge.foreground#ffffff
  • button.background#e0488f
  • button.foreground#ffffff
  • button.hoverBackground#d6337f
  • button.secondaryBackground#ffc4de
  • button.secondaryForeground#5a3548
  • dropdown.background#ffffff
  • dropdown.border#f5a8cd
  • dropdown.foreground#3a2230
  • editor.background#fff5fa
  • editor.findMatchBackground#ff8fc066
  • editor.findMatchHighlightBackground#ffb3d966
  • editor.foreground#3a2230
  • editor.lineHighlightBackground#ffeaf3
  • editor.selectionBackground#ffc4de
  • editor.selectionHighlightBackground#ffc4de80
  • editorBracketMatch.background#ffc4de66
  • editorBracketMatch.border#e0488f
  • editorCursor.foreground#e0488f
  • editorError.foreground#d32f4f
  • editorGroupHeader.tabsBackground#ffe3ef
  • editorGroupHeader.tabsBorder#ffdcec
  • editorGutter.background#fff5fa
  • editorHoverWidget.background#ffffff
  • editorHoverWidget.border#ffc4de
  • editorIndentGuide.activeBackground1#f5a8cd
  • editorIndentGuide.background1#ffdcec
  • editorInfo.foreground#e0488f
  • editorLineNumber.activeForeground#e0488f
  • editorLineNumber.foreground#d9a8c4
  • editorSuggestWidget.background#ffffff
  • editorSuggestWidget.highlightForeground#e0488f
  • editorSuggestWidget.selectedBackground#ffdcec
  • editorWarning.foreground#c87a1e
  • editorWhitespace.foreground#ffdcec
  • editorWidget.background#ffffff
  • editorWidget.border#ffc4de
  • focusBorder#e0488f
  • foreground#3a2230
  • gitDecoration.deletedResourceForeground#d32f4f
  • gitDecoration.ignoredResourceForeground#c98faf
  • gitDecoration.modifiedResourceForeground#c2185b
  • gitDecoration.untrackedResourceForeground#4a8a2a
  • input.background#ffffff
  • input.border#f5a8cd
  • input.foreground#3a2230
  • input.placeholderForeground#c98faf
  • inputOption.activeBorder#e0488f
  • inputValidation.errorBackground#ffe0e6
  • inputValidation.errorBorder#d32f4f
  • list.activeSelectionBackground#ffc4de
  • list.activeSelectionForeground#3a2230
  • list.focusBackground#ffc4de
  • list.highlightForeground#d6337f
  • list.hoverBackground#ffeaf3
  • list.inactiveSelectionBackground#ffdcec
  • menu.background#ffffff
  • menu.foreground#3a2230
  • menu.selectionBackground#ffc4de
  • menu.selectionForeground#3a2230
  • notificationCenterHeader.background#ffe3ef
  • notifications.background#ffffff
  • notifications.foreground#3a2230
  • panel.background#ffeef6
  • panel.border#ffdcec
  • panelTitle.activeBorder#e0488f
  • panelTitle.activeForeground#c2185b
  • panelTitle.inactiveForeground#c98faf
  • peekView.border#e0488f
  • peekViewEditor.background#fff5fa
  • peekViewResult.background#ffeef6
  • progressBar.background#e0488f
  • scrollbarSlider.activeBackground#e0488f88
  • scrollbarSlider.background#f5a8cd66
  • scrollbarSlider.hoverBackground#f5a8cd99
  • selection.background#ffc4de99
  • sideBar.background#ffeef6
  • sideBar.border#ffdcec
  • sideBar.foreground#5a3548
  • sideBarSectionHeader.background#ffe3ef
  • sideBarSectionHeader.foreground#c2185b
  • sideBarTitle.foreground#c2185b
  • statusBar.background#ff8fc0
  • statusBar.border#ffdcec
  • statusBar.debuggingBackground#d6337f
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#3a1326
  • statusBar.noFolderBackground#f5a8cd
  • statusBarItem.hoverBackground#ffa8d0
  • statusBarItem.remoteBackground#d6337f
  • statusBarItem.remoteForeground#ffffff
  • tab.activeBackground#ffffff
  • tab.activeBorder#e0488f
  • tab.activeBorderTop#e0488f
  • tab.activeForeground#3a2230
  • tab.border#ffdcec
  • tab.hoverBackground#ffeaf3
  • tab.inactiveBackground#ffe3ef
  • tab.inactiveForeground#a06b85
  • tab.unfocusedActiveForeground#7a5068
  • terminal.ansiBlack#3a2230
  • terminal.ansiBlue#7b1fa2
  • terminal.ansiBrightBlack#a06b85
  • terminal.ansiBrightBlue#9c27b0
  • terminal.ansiBrightCyan#2a9a9a
  • terminal.ansiBrightGreen#5a9a3a
  • terminal.ansiBrightMagenta#d6337f
  • terminal.ansiBrightRed#e0485f
  • terminal.ansiBrightWhite#3a2230
  • terminal.ansiBrightYellow#d68a2e
  • terminal.ansiCyan#1a8a8a
  • terminal.ansiGreen#4a8a2a
  • terminal.ansiMagenta#c2185b
  • terminal.ansiRed#d32f4f
  • terminal.ansiWhite#5a3548
  • terminal.ansiYellow#c87a1e
  • terminal.background#ffeef6
  • terminal.foreground#3a2230
  • terminalCursor.foreground#e0488f
  • titleBar.activeBackground#ffe3ef
  • titleBar.activeForeground#5a3548
  • titleBar.border#ffdcec
  • titleBar.inactiveBackground#ffeef6
  • titleBar.inactiveForeground#c98faf

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment, comment.block, comment.line#b08aa0italic
string, string.quoted, string.template, punctuation.definition.string#b5176b
constant.character.escape, string.regexp#c2410c
keyword, keyword.control, keyword.operator.new, keyword.operator.expression#c2185b
keyword.operator, punctuation.separator, punctuation.accessor#c2185b
storage, storage.type, storage.modifier, keyword.declaration#8e24aa
entity.name.function, meta.function-call, support.function.builtin#9c27b0
entity.name.class, entity.name.type, entity.name.type.class, support.type, support.class#7b1fa2
variable, meta.definition.variable.name, variable.other, variable.other.readwrite#3a2230
variable.parameter, variable.language.this, variable.other.object.property#5a3548
constant.numeric, constant.numeric.integer, constant.numeric.float#c2410c
constant.language, constant.language.boolean, constant.language.null, constant.language.undefined#ad1457
constant.other, variable.other.constant#ad1457
support.function, support.constant#b5176b
punctuation, meta.brace, punctuation.definition.parameters, punctuation.section#7a5068
entity.name.tag, punctuation.definition.tag#c2185b
entity.other.attribute-name#8e24aa
markup.heading, entity.name.section#c2185bbold
markup.bold#9c27b0bold
markup.italic#b5176bitalic
invalid, invalid.illegal#d32f4f
Pink Heart Theme & Rain by codedbyelif - VS Code Theme