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#D1B8C0
  • activityBar.foreground#AE6483
  • activityBar.inactiveForeground#957C8A
  • activityBarBadge.background#AB2C61
  • activityBarBadge.foreground#FFFFFF
  • badge.background#D44F87
  • badge.foreground#FFFFFF
  • button.background#B2778F
  • button.foreground#FFFFFF
  • button.hoverBackground#A06A83
  • commandCenter.activeBackground#F2E3EA
  • commandCenter.activeBorder#D6B9C5
  • commandCenter.activeForeground#5A4D54
  • commandCenter.background#EBDAE1
  • commandCenter.border#E0CCD5
  • commandCenter.foreground#846B7B
  • commandCenter.inactiveBorder#E0CCD5
  • commandCenter.inactiveForeground#9E8B96
  • dropdown.background#FEFCFC
  • dropdown.border#E0CCD5
  • dropdown.foreground#514349
  • editor.background#F9F0F4
  • editor.findMatchBackground#E07E9F70
  • editor.findMatchHighlightBackground#E07E9F50
  • editor.foreground#87717F
  • editor.lineHighlightBackground#F4E5EB
  • editor.selectionBackground#E07E9F40
  • editor.wordHighlightBackground#E07E9F50
  • editorBracketHighlight.foreground1#68A2B8
  • editorBracketHighlight.foreground2#68A2B8
  • editorBracketHighlight.foreground3#68A2B8
  • editorBracketHighlight.foreground4#68A2B8
  • editorBracketHighlight.foreground5#68A2B8
  • editorBracketHighlight.foreground6#68A2B8
  • editorBracketMatch.background#FF79AE30
  • editorBracketMatch.border#F1B8CF
  • editorCursor.foreground#AD738B
  • editorGroupHeader.tabsBackground#EBDAE0
  • editorGutter.addedBackground#3E8F15
  • editorGutter.deletedBackground#C33C47
  • editorGutter.modifiedBackground#AF7B48
  • editorIndentGuide.activeBackground#D8BFCC
  • editorIndentGuide.background#E1C7D2
  • editorLineNumber.activeForeground#9E7788
  • editorLineNumber.foreground#B798A5
  • editorRuler.foreground#E0CCD5
  • editorWidget.background#F9F0F4
  • editorWidget.border#E0CCD5
  • focusBorder#FAC6DB
  • gitDecoration.deletedResourceForeground#C33C47
  • gitDecoration.ignoredResourceForeground#84737CC0
  • gitDecoration.modifiedResourceForeground#DB3FB1
  • gitDecoration.untrackedResourceForeground#AE45DE
  • icon.foreground#4A3D44
  • input.background#FEFCFC
  • input.border#E0CCD5
  • input.foreground#514349
  • input.placeholderForeground#B7A1AA
  • inputOption.activeBorder#BF7F99
  • list.activeSelectionBackground#F6E8ED
  • list.activeSelectionForeground#514349
  • list.highlightForeground#D8759C
  • list.hoverBackground#F5E3E9
  • list.inactiveSelectionBackground#F5E8EC
  • menubar.selectionBackground#C69CAD
  • menubar.selectionForeground#4A3D44
  • minimap.selectionHighlight#BF7F9960
  • panel.background#F2E3EA
  • panel.border#C4A1B2
  • panelTitle.activeBorder#DF5A8F
  • panelTitle.activeForeground#DF5A8F
  • panelTitle.inactiveForeground#846B76
  • peekView.border#BF7F99
  • peekViewEditor.background#F9F0F4
  • peekViewResult.background#F2E3EA
  • peekViewTitle.background#EDDBE3
  • progressBar.background#BF7F99
  • quickInput.background#F9F0F4
  • quickInput.foreground#514349
  • quickInputList.focusBackground#EFD8E1
  • quickInputList.focusForeground#514349
  • scrollbarSlider.activeBackground#BF7F9980
  • scrollbarSlider.background#BF7F9960
  • scrollbarSlider.hoverBackground#BF7F9980
  • selection.background#BF7F9960
  • sideBar.background#EBDAE0
  • sideBar.foreground#806A77
  • sideBarSectionHeader.background#DEC6CE
  • sideBarSectionHeader.foreground#5B3142
  • sideBarTitle.foreground#5B3142
  • statusBar.background#D6B9C2
  • statusBar.debuggingBackground#DEB7C4
  • statusBar.focusBorder#BF7F99
  • statusBar.foreground#693957
  • statusBar.noFolderBackground#D6B9C2
  • statusBarItem.activeBackground#C69CAD
  • statusBarItem.focusBorder#BF7F99
  • statusBarItem.hoverBackground#D1A8B9
  • statusBarItem.hoverForeground#723A58
  • statusBarItem.remoteBackground#B2778F
  • statusBarItem.remoteForeground#FFFFFF
  • statusBarItem.remoteHoverBackground#A06A83
  • statusBarItem.remoteHoverForeground#FFFFFF
  • tab.activeBackground#FF96C70E
  • tab.activeBorder#D2419F
  • tab.activeBorderTop#DACCD200
  • tab.activeForeground#D2419F
  • tab.border#DACCD200
  • tab.inactiveBackground#EEE1E7
  • tab.inactiveForeground#85747A
  • terminal.ansiBlack#2D2D2D
  • terminal.ansiBlue#26C9FF
  • terminal.ansiBrightBlack#ECECEC
  • terminal.ansiBrightBlue#87E1FF
  • terminal.ansiBrightCyan#8CFFFF
  • terminal.ansiBrightGreen#88FF88
  • terminal.ansiBrightMagenta#F9ABFF
  • terminal.ansiBrightRed#FF96CA
  • terminal.ansiBrightWhite#FFFFFF
  • terminal.ansiBrightYellow#FEE581
  • terminal.ansiCyan#24EFEF
  • terminal.ansiGreen#21DD21
  • terminal.ansiMagenta#F89CFF
  • terminal.ansiRed#FF87C3
  • terminal.ansiWhite#F8F8F8
  • terminal.ansiYellow#F5CB25
  • terminal.background#6C3F50
  • terminal.foreground#FFE5EE
  • terminal.selectionBackground#60A7E080
  • terminalStickyScroll.background#824C60
  • terminalStickyScrollHover.background#975E74
  • textLink.activeForeground#A06A83
  • textLink.foreground#B2778F
  • titleBar.activeBackground#DEB7C8
  • titleBar.activeForeground#4A3D44
  • titleBar.hoverBackground#D1A8B9
  • titleBar.inactiveBackground#D6B9C2
  • titleBar.inactiveForeground#7A6B74
  • toolbar.activeBackground#C32E6C50
  • toolbar.hoverBackground#C32E6C30
  • windowControlsOverlay.background#DEB7C8

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment, string.quoted.docstring#C0ABB3italic
string, string.quoted#DE72B3
constant.numeric#E47C9F
keyword, storage.type, storage.modifier#4B90C0
keyword.control#F07BA2
entity.name.function, support.function#9B5DDC
entity.name.class, entity.name.type, support.class#C769C7
variable, variable.other#60575B
variable.parameter#70676B
constant, constant.language#E27DBD
keyword.operator#8E7F87
meta.brace#68A2B8
punctuation, punctuation.definition.string, punctuation.separator, punctuation.terminator#6A83B8
entity.name.tag#E46690
entity.other.attribute-name#C072C0
support.type.property-name, variable.other.property#8A7D84
support.type, entity.name.type#C072C0
meta.decorator, punctuation.decorator#6BC3E0
string.regexp#4EA6C8
markup.heading#F07BA2bold
markup.boldbold
markup.italicitalic
markup.inline.raw#5EBBD8
Elypink Theme by barineco - VS Code Theme