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#FDF0ED
  • activityBar.dropBackground#F9CEC380
  • activityBar.foreground#06060CE6
  • activityBarBadge.background#E84A72
  • activityBarBadge.foreground#06060C
  • badge.background#F9CBBE
  • badge.foreground#06060C
  • breadcrumbPicker.background#FADAD1
  • button.background#F9CBBE
  • button.foreground#06060C
  • debugToolBar.background#FDF0ED
  • diffEditor.insertedTextBackground#059E661A
  • diffEditor.removedTextBackground#F43E5C1A
  • dropdown.background#FADAD1
  • dropdown.listBackground#F9CBBE
  • editor.background#FDF0ED
  • editor.findMatchBackground#F9CEC380
  • editor.findMatchHighlightBackground#F9CEC34D
  • editor.findRangeHighlightBackground#F9CEC31A
  • editor.hoverHighlightBackground#F9CEC34D
  • editor.lineHighlightBackground#F9CBBE4D
  • editor.rangeHighlightBackground#F9CBBE80
  • editor.selectionBackground#F9CBBE80
  • editor.selectionHighlightBackground#F9CEC380
  • editor.wordHighlightBackground#F9CEC380
  • editor.wordHighlightStrongBackground#F9CEC380
  • editorBracketMatch.background#F9CEC380
  • editorBracketMatch.border#F9CEC300
  • editorCodeLens.foreground#F9CEC380
  • editorCursor.background#FDF0ED
  • editorCursor.foreground#E84A72
  • editorError.foreground#F43E5C
  • editorGroup.border#1A1C231A
  • editorGroup.dropBackground#F9CEC34D
  • editorGroupHeader.tabsBackground#FDF0ED
  • editorGutter.addedBackground#059E66B3
  • editorGutter.deletedBackground#F43E5CB3
  • editorGutter.modifiedBackground#1EAEAEB3
  • editorIndentGuide.activeBackground#F9CBBE
  • editorIndentGuide.background#F9CBBE80
  • editorLineNumber.activeForeground#06060C99
  • editorLineNumber.foreground#06060C60
  • editorOverviewRuler.addedForeground#059E66B3
  • editorOverviewRuler.border#F9CBBE1A
  • editorOverviewRuler.bracketMatchForeground#06060CB3
  • editorOverviewRuler.deletedForeground#F43E5CB3
  • editorOverviewRuler.errorForeground#F43E5CE6
  • editorOverviewRuler.findMatchForeground#F9CEC3
  • editorOverviewRuler.modifiedForeground#1EAEAEB3
  • editorOverviewRuler.warningForeground#1EB980B3
  • editorRuler.foreground#F9CEC34D
  • editorSuggestWidget.highlightForeground#E84A72
  • editorUnnecessaryCode.opacity#000000B3
  • editorWarning.foreground#1EB980B3
  • editorWidget.background#FADAD1
  • editorWidget.border#FADAD1
  • errorForeground#F43E5C
  • extensionButton.prominentBackground#E84A72
  • extensionButton.prominentHoverBackground#E73665
  • focusBorder#1A1C231A
  • foreground#06060C
  • gitDecoration.addedResourceForeground#1EB980B3
  • gitDecoration.deletedResourceForeground#F43E5C
  • gitDecoration.ignoredResourceForeground#06060C4D
  • gitDecoration.modifiedResourceForeground#AF5427
  • gitDecoration.untrackedResourceForeground#1EB980
  • input.background#F9CBBE
  • inputOption.activeBorder#E7366580
  • inputValidation.errorBackground#F43E5C80
  • inputValidation.errorBorder#F43E5C00
  • list.activeSelectionBackground#F9CBBE80
  • list.activeSelectionForeground#06060C
  • list.dropBackground#F9CEC380
  • list.errorForeground#F43E5CE6
  • list.focusBackground#F9CBBE80
  • list.focusForeground#06060C
  • list.highlightForeground#E84A72
  • list.hoverBackground#F9CBBE80
  • list.hoverForeground#06060C
  • list.inactiveFocusBackground#F9CBBE80
  • list.inactiveFocusForeground#1A1C23
  • list.inactiveSelectionBackground#F9CBBE4D
  • list.inactiveSelectionForeground#1A1C23
  • list.warningForeground#1EB980B3
  • panelTitle.activeBorder#E84A72
  • peekView.border#1A1C231A
  • peekViewEditor.background#FADAD1
  • peekViewEditor.matchHighlightBackground#F9CEC380
  • peekViewResult.background#FADAD1
  • peekViewResult.matchHighlightBackground#F9CEC380
  • peekViewResult.selectionBackground#F9CBBE80
  • peekViewTitle.background#FADAD1
  • pickerGroup.foreground#E84A72E6
  • progressBar.background#E84A72
  • scrollbar.shadow#16161C4D
  • scrollbarSlider.activeBackground#F9CEC3E6
  • scrollbarSlider.background#F9CEC380
  • scrollbarSlider.hoverBackground#F9CEC3B3
  • selection.background#AF542780
  • sideBar.background#FDF0ED
  • sideBar.dropBackground#F9CEC34D
  • sideBar.foreground#1A1C23B3
  • sideBarSectionHeader.background#FDF0ED
  • sideBarSectionHeader.foreground#1A1C23B3
  • statusBar.background#FDF0ED
  • statusBar.debuggingBackground#AF5427
  • statusBar.debuggingForeground#06060C
  • statusBar.foreground#06060CB3
  • statusBar.noFolderBackground#FDF0ED
  • statusBarItem.hoverBackground#F9CBBE
  • statusBarItem.prominentBackground#F9CBBE
  • statusBarItem.prominentHoverBackground#F9CEC3
  • tab.activeBorder#E84A72
  • tab.border#FDF0ED00
  • tab.inactiveBackground#FDF0ED
  • terminal.ansiBlue#26BBD9
  • terminal.ansiBrightBlue#3FC4DE
  • terminal.ansiBrightCyan#6BE4E6
  • terminal.ansiBrightGreen#3FDAA4
  • terminal.ansiBrightMagenta#F075B5
  • terminal.ansiBrightRed#EC6A88
  • terminal.ansiBrightYellow#FBC3A7
  • terminal.ansiCyan#59E1E3
  • terminal.ansiGreen#29D398
  • terminal.ansiMagenta#EE64AC
  • terminal.ansiRed#E95678
  • terminal.ansiYellow#FAB795
  • terminal.foreground#06060C
  • terminal.selectionBackground#F9CEC380
  • terminalCursor.background#06060C
  • terminalCursor.foreground#F9CEC3B3
  • textLink.activeForeground#E73665
  • textLink.foreground#E84A72
  • titleBar.activeBackground#FDF0ED
  • titleBar.inactiveBackground#FDF0ED
  • walkThrough.embeddedEditorBackground#FADAD1
  • widget.shadow#16161C4D

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#33333380italic
constant#F77D26
constant.character.escape#26BBD9
entity.name#F77D26
entity.name.function#DA103F
entity.name.tag#DA103Fbold
entity.name.type, storage.type.cs#F77D26
entity.other.attribute-name#DA103Fbold
entity.other.inherited-class#F77D26
entity.other.attribute-name.id#059E66
entity.other.attribute-name.pseudo-element, entity.other.attribute-name.pseudo-class#DA103F
entity.name.variable, variable#06060C
keyword#8A31B9bold
keyword.operator#06060C
keyword.operator.new, keyword.operator.expression, keyword.operator.logical, keyword.operator.delete#8A31B9
keyword.other.unit#F77D26
markup.quote#F77D26B3italic
markup.heading, entity.name.section#DA103F
markup.bold#8A31B9bold
markup.italic#059E66italic
markup.inline.raw, markup.fenced_code.block#F77D26
markup.underline.link#F77D26
storage#8A31B9bold
string.quoted, string.template#059E66
string.regexp#F77D26
string.other.link#F77D26
support#F77D26
support.function#DA103F
support.variable#06060C
support.type.property-name, meta.object-literal.key#DA103F
support.type.property-name.css#06060C
variable.language#F77D26italic
variable.parameteritalic
string.template meta.embedded#06060C
punctuation.definition.tag#DA103FB3bold
punctuation.separator#06060C
punctuation.definition.template-expression#8A31B9
punctuation.section.embedded#8A31B9
punctuation.definition.list#F77D26

Shiki preview

TypeScript sample highlighted with this variant's colors and tokenColors.

Loading...