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#FBEEF2
  • activityBar.border#FBEEF2
  • activityBar.foreground#6F5962
  • activityBar.inactiveForeground#A38C97
  • badge.background#D0708D
  • badge.foreground#FFFFFF
  • button.background#D0708D
  • button.foreground#FFFFFF
  • button.hoverBackground#BD627D
  • descriptionForeground#7C6671
  • diffEditor.insertedTextBackground#7EA16420
  • diffEditor.removedTextBackground#C4586420
  • dropdown.background#FBEEF2
  • dropdown.border#FBEEF2
  • dropdown.foreground#2C2227
  • dropdown.listBackground#FBEEF2
  • editor.background#FFF8FA
  • editor.foreground#2C2227
  • editor.hover.background#FFFBFC
  • editor.hover.border#EADCE2
  • editor.hover.foreground#2C2227
  • editor.hover.statusBarBackground#FBEEF2
  • editor.lineHighlightBackground#FFF2F5
  • editor.selectionBackground#D0708D33
  • editor.selectionHighlightBackground#7EA16420
  • editor.wordHighlightBackground#D0708D15
  • editor.wordHighlightStrongBackground#D0708D1F
  • editorBracketHighlight.foreground1#C22060
  • editorBracketHighlight.foreground2#2A5CB8
  • editorBracketHighlight.foreground3#907010
  • editorBracketHighlight.foreground4#3E7A3E
  • editorBracketHighlight.foreground5#B06030
  • editorBracketHighlight.foreground6#0A7870
  • editorBracketMatch.background#D0708D15
  • editorBracketMatch.border#D0708D
  • editorCursor.foreground#D0708D
  • editorGroupHeader.tabsBackground#FBEEF2
  • editorGroupHeader.tabsBorder#FBEEF200
  • editorGutter.addedBackground#7EA164
  • editorGutter.deletedBackground#C45864
  • editorGutter.modifiedBackground#D0708D
  • editorHoverWidget.background#FFFBFC
  • editorHoverWidget.border#EADCE2
  • editorHoverWidget.foreground#2C2227
  • editorHoverWidget.statusBarBackground#FBEEF2
  • editorIndentGuide.activeBackground#E7D6DD
  • editorIndentGuide.background#F0E3E8
  • editorWhitespace.foreground#E7D6DD
  • editorWidget.background#FBEEF2
  • editorWidget.border#FBEEF2
  • errorForeground#C45864
  • focusBorder#D0708D80
  • foreground#2C2227
  • gitDecoration.conflictingResourceForeground#C45864
  • gitDecoration.ignoredResourceForeground#B7A4AC
  • gitDecoration.modifiedResourceForeground#D0708D
  • gitDecoration.untrackedResourceForeground#7EA164
  • icon.foreground#6F5962
  • input.background#FFFBFC
  • input.border#FFFBFC00
  • input.foreground#2C2227
  • input.placeholderForeground#A38C97
  • inputOption.activeBackground#D0708D1A
  • list.activeSelectionBackground#D0708D12
  • list.activeSelectionForeground#2C2227
  • list.focusBackground#D0708D12
  • list.hoverBackground#D0708D0D
  • list.inactiveSelectionBackground#D0708D12
  • menu.background#FBEEF2
  • menu.foreground#2C2227
  • menu.selectionBackground#D0708D1A
  • menu.separatorBackground#EADCE2
  • menubar.selectionBackground#F0E3E8
  • notificationCenter.background#FBEEF2
  • notificationCenter.border#EADCE2
  • notificationCenterHeader.background#FBEEF2
  • notificationCenterHeader.foreground#2C2227
  • notificationLink.foreground#C05B7A
  • notifications#C05B7A
  • notifications.background#FBEEF2
  • notifications.foreground#C05B7A
  • notificationsErrorIcon.foreground#C45864
  • notificationsInfoIcon.foreground#D0708D
  • notificationsWarningIcon.foreground#B57B36
  • notificationToast.background#FBEEF2
  • notificationToast.border#EADCE2
  • panel.background#FFF8FA
  • panel.border#FFF8FA
  • panelTitle.activeForeground#2C2227
  • panelTitle.inactiveForeground#6F5962
  • peekView.border#D0708D
  • peekViewEditor.background#FFF8FA
  • peekViewResult.background#FBEEF2
  • peekViewResult.selectionBackground#D0708D1A
  • peekViewTitle.background#FBEEF2
  • peekViewTitleDescription.foreground#7C6671
  • peekViewTitleLabel.foreground#2C2227
  • pickerGroup.border#FBEEF2
  • pickerGroup.foreground#A38C97
  • quickInput.background#FBEEF2
  • quickInput.foreground#2C2227
  • quickInputList.focusBackground#D0708D1A
  • quickInputList.focusForeground#2C2227
  • quickInputTitle.background#FBEEF2
  • scrollbar.shadow#00000000
  • scrollbarSlider.activeBackground#AD98A1
  • scrollbarSlider.background#CBB7BF80
  • scrollbarSlider.hoverBackground#BCA8B0B0
  • selection.background#D0708D33
  • sideBar.background#FBEEF2
  • sideBar.border#FBEEF2
  • sideBar.foreground#6F5962
  • sideBarSectionHeader.background#FBEEF2
  • sideBarSectionHeader.border#FBEEF2
  • sideBarSectionHeader.foreground#2C2227
  • statusBar.background#FBEEF2
  • statusBar.border#FBEEF2
  • statusBar.foreground#6F5962
  • tab.activeBackground#FFF8FA
  • tab.activeBorder#D0708D
  • tab.activeForeground#2C2227
  • tab.border#FBEEF200
  • tab.inactiveBackground#FBEEF2
  • tab.inactiveForeground#A38C97
  • tab.unfocusedActiveBorder#D0708D80
  • terminal.ansiBlack#5F4E55
  • terminal.ansiBlue#C05B7A
  • terminal.ansiCyan#2F8F8E
  • terminal.ansiGreen#7EA164
  • terminal.ansiMagenta#8A63C8
  • terminal.ansiRed#C45864
  • terminal.ansiWhite#FCF5F8
  • terminal.ansiYellow#B57B36
  • terminal.background#FFF8FA
  • terminal.foreground#5F4E55
  • terminal.selectionBackground#D0708D33
  • textCodeBlock.background#F7E3EA
  • textLink.foreground#C05B7A
  • textSeparator.foreground#F0E3E8
  • titleBar.activeBackground#FFF8FA
  • titleBar.activeForeground#2C2227
  • titleBar.border#FFF8FA
  • titleBar.inactiveBackground#FFF8FA
  • titleBar.inactiveForeground#A38C97
  • widget.shadow#00000000

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#8A7880italic
string, punctuation.definition.string#3E7A3E
constant.numeric, constant.language, constant.character, constant.other#B06030
keyword, storage.type, storage.modifier#C22060
keyword.operator#806878
entity.name.function, support.function, meta.function-call#2A5CB8
entity.name.type, entity.name.class, support.class, support.type, entity.other.inherited-class#907010
variable, meta.definition.variable, support.variable, entity.name.variable#4A3E4E
variable.parameter#4A3E4Eitalic
variable.other.property, support.type.property-name#0A7870
punctuation#806878
meta.object-literal.key#0A7870
entity.name.tag, punctuation.definition.tag#C22060
entity.other.attribute-name#907010
string.regexp#B06030
entity.name.tag.css, entity.other.attribute-name.class.css, entity.other.attribute-name.id.css, meta.selector.css#C22060
support.type.property-name.css#0A7870
support.constant.property-value.css, keyword.other.unit.css#B06030
entity.other.attribute-name.html.vue#C22060
support.class.component.html.vue#907010
meta.decorator punctuation.decorator, meta.decorator entity.name.function, meta.decorator entity.name.type, meta.decorator variable.other.object#B06030
markup.heading.markdown#2A5CB8
markup.underline.link.markdown, string.other.link.title.markdown#3E7A3E
markup.bold.markdownbold
markup.italic.markdownitalic
markup.inline.raw.string.markdown, markup.fenced_code.block.markdown#806878
invalid#C8485A
entity.name.namespace.wildcard.python, meta.statement.import.python entity.name.module.python, support.other.module.python#3E7A3E
support.function.builtin.python#2A5CB8italic
support.function.magic.python#2A5CB8italic
support.type.python#907010
variable.parameter.function.language.special.self.python, variable.parameter.function.language.special.cls.python#C22060italic
entity.name.function.decorator.python, punctuation.definition.decorator.python#B06030
support.variable.magic.python#0A7870
support.class.exception.python#907010
meta.fstring.python variable, constant.character.format.placeholder.other.python#4A3E4E