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#251C21
  • activityBar.border#251C21
  • activityBar.foreground#C1AAB3
  • activityBar.inactiveForeground#8F7983
  • badge.background#E08BA6
  • badge.foreground#1D161A
  • button.background#E08BA6
  • button.foreground#1D161A
  • button.hoverBackground#E9A4BA
  • descriptionForeground#C1AAB3
  • diffEditor.insertedTextBackground#95B36D22
  • diffEditor.removedTextBackground#FF869222
  • dropdown.background#2D2329
  • dropdown.border#382C33
  • dropdown.foreground#F4E9EE
  • dropdown.listBackground#2D2329
  • editor.background#1D161A
  • editor.foreground#F4E9EE
  • editor.hover.background#2D2329
  • editor.hover.border#382C33
  • editor.hover.foreground#F4E9EE
  • editor.hover.statusBarBackground#251C21
  • editor.lineHighlightBackground#251C21
  • editor.selectionBackground#E08BA633
  • editor.selectionHighlightBackground#95B36D22
  • editor.wordHighlightBackground#E08BA622
  • editor.wordHighlightStrongBackground#E08BA633
  • editorBracketHighlight.foreground1#E88DA6
  • editorBracketHighlight.foreground2#7CB0E8
  • editorBracketHighlight.foreground3#E0C084
  • editorBracketHighlight.foreground4#ACD88C
  • editorBracketHighlight.foreground5#E0A080
  • editorBracketHighlight.foreground6#58C8C6
  • editorBracketMatch.background#E08BA622
  • editorBracketMatch.border#E08BA6
  • editorCursor.foreground#E08BA6
  • editorGroupHeader.tabsBackground#251C21
  • editorGroupHeader.tabsBorder#251C2100
  • editorGutter.addedBackground#95B36D
  • editorGutter.deletedBackground#FF8692
  • editorGutter.modifiedBackground#E08BA6
  • editorHoverWidget.background#2D2329
  • editorHoverWidget.border#382C33
  • editorHoverWidget.foreground#F4E9EE
  • editorHoverWidget.statusBarBackground#251C21
  • editorIndentGuide.activeBackground#4A3D46
  • editorIndentGuide.background#382C33
  • editorWhitespace.foreground#382C33
  • editorWidget.background#2D2329
  • editorWidget.border#382C33
  • errorForeground#FF8692
  • focusBorder#E08BA680
  • foreground#F4E9EE
  • gitDecoration.conflictingResourceForeground#FF8692
  • gitDecoration.ignoredResourceForeground#8F7983
  • gitDecoration.modifiedResourceForeground#E08BA6
  • gitDecoration.untrackedResourceForeground#95B36D
  • icon.foreground#C1AAB3
  • input.background#2D2329
  • input.border#2D232900
  • input.foreground#F4E9EE
  • input.placeholderForeground#8F7983
  • inputOption.activeBackground#E08BA622
  • list.activeSelectionBackground#E08BA61A
  • list.activeSelectionForeground#F4E9EE
  • list.focusBackground#E08BA61A
  • list.hoverBackground#E08BA610
  • list.inactiveSelectionBackground#E08BA61A
  • menu.background#2D2329
  • menu.foreground#F4E9EE
  • menu.selectionBackground#E08BA622
  • menu.separatorBackground#382C33
  • menubar.selectionBackground#382C33
  • notificationCenter.background#2D2329
  • notificationCenter.border#382C33
  • notificationCenterHeader.background#251C21
  • notificationCenterHeader.foreground#F4E9EE
  • notificationLink.foreground#F09CB1
  • notifications.background#2D2329
  • notifications.foreground#F4E9EE
  • notificationsErrorIcon.foreground#FF8692
  • notificationsInfoIcon.foreground#E08BA6
  • notificationsWarningIcon.foreground#E1AE63
  • notificationToast.background#2D2329
  • notificationToast.border#382C33
  • panel.background#251C21
  • panel.border#251C21
  • panelTitle.activeForeground#F4E9EE
  • panelTitle.inactiveForeground#C1AAB3
  • peekView.border#E08BA6
  • peekViewEditor.background#1D161A
  • peekViewResult.background#251C21
  • peekViewResult.selectionBackground#E08BA622
  • peekViewTitle.background#251C21
  • peekViewTitleDescription.foreground#C1AAB3
  • peekViewTitleLabel.foreground#F4E9EE
  • pickerGroup.border#251C21
  • pickerGroup.foreground#8F7983
  • quickInput.background#2D2329
  • quickInput.foreground#F4E9EE
  • quickInputList.focusBackground#E08BA622
  • quickInputList.focusForeground#F4E9EE
  • quickInputTitle.background#251C21
  • scrollbar.shadow#00000000
  • scrollbarSlider.activeBackground#7D6974
  • scrollbarSlider.background#5A495280
  • scrollbarSlider.hoverBackground#6B5963B0
  • selection.background#E08BA633
  • sideBar.background#251C21
  • sideBar.border#251C21
  • sideBar.foreground#C1AAB3
  • sideBarSectionHeader.background#251C21
  • sideBarSectionHeader.border#251C21
  • sideBarSectionHeader.foreground#F4E9EE
  • statusBar.background#251C21
  • statusBar.border#251C21
  • statusBar.foreground#C1AAB3
  • tab.activeBackground#1D161A
  • tab.activeBorder#E08BA6
  • tab.activeForeground#F4E9EE
  • tab.border#251C2100
  • tab.inactiveBackground#251C21
  • tab.inactiveForeground#8F7983
  • tab.unfocusedActiveBorder#E08BA680
  • terminal.ansiBlack#151015
  • terminal.ansiBlue#F09CB1
  • terminal.ansiCyan#80D0CC
  • terminal.ansiGreen#95B36D
  • terminal.ansiMagenta#C7A0F1
  • terminal.ansiRed#FF8692
  • terminal.ansiWhite#F4E9EE
  • terminal.ansiYellow#E1AE63
  • terminal.background#1D161A
  • terminal.foreground#F4E9EE
  • terminal.selectionBackground#E08BA633
  • textCodeBlock.background#2D2329
  • textLink.foreground#F09CB1
  • textSeparator.foreground#382C33
  • titleBar.activeBackground#251C21
  • titleBar.activeForeground#F4E9EE
  • titleBar.border#251C21
  • titleBar.inactiveBackground#251C21
  • titleBar.inactiveForeground#8F7983
  • widget.shadow#00000000

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#6C5C68italic
string, punctuation.definition.string#ACD88C
constant.numeric, constant.language, constant.character, constant.other#E0A080
keyword, storage.type, storage.modifier#E88DA6
keyword.operator#8C7E88
entity.name.function, support.function, meta.function-call#7CB0E8
entity.name.type, entity.name.class, support.class, support.type, entity.other.inherited-class#E0C084
variable, meta.definition.variable, support.variable, entity.name.variable#C8C0CA
variable.parameter#C8C0CAitalic
variable.other.property, support.type.property-name#58C8C6
punctuation#8C7E88
meta.object-literal.key#58C8C6
entity.name.tag, punctuation.definition.tag#E88DA6
entity.other.attribute-name#E0C084
string.regexp#E0A080
entity.name.tag.css, entity.other.attribute-name.class.css, entity.other.attribute-name.id.css, meta.selector.css#E88DA6
support.type.property-name.css#58C8C6
support.constant.property-value.css, keyword.other.unit.css#E0A080
entity.other.attribute-name.html.vue#E88DA6
support.class.component.html.vue#E0C084
meta.decorator punctuation.decorator, meta.decorator entity.name.function, meta.decorator entity.name.type, meta.decorator variable.other.object#E0A080
markup.heading.markdown#7CB0E8
markup.underline.link.markdown, string.other.link.title.markdown#ACD88C
markup.bold.markdownbold
markup.italic.markdownitalic
markup.inline.raw.string.markdown, markup.fenced_code.block.markdown#8C7E88
invalid#FF8692
entity.name.namespace.wildcard.python, meta.statement.import.python entity.name.module.python, support.other.module.python#ACD88C
support.function.builtin.python#7CB0E8italic
support.function.magic.python#7CB0E8italic
support.type.python#E0C084
variable.parameter.function.language.special.self.python, variable.parameter.function.language.special.cls.python#E88DA6italic
entity.name.function.decorator.python, punctuation.definition.decorator.python#E0A080
support.variable.magic.python#58C8C6
support.class.exception.python#E0C084
meta.fstring.python variable, constant.character.format.placeholder.other.python#C8C0CA
Fleex Theme by bluebone - VS Code Theme