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#07DA8C1A
  • 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#07DA8CB3
  • editorGutter.deletedBackground#F43E5CB3
  • editorGutter.modifiedBackground#1EAEAEB3
  • editorIndentGuide.activeBackground#F9CBBE
  • editorIndentGuide.background#F9CBBE80
  • editorLineNumber.activeForeground#06060C80
  • editorLineNumber.foreground#06060C1A
  • editorOverviewRuler.addedForeground#07DA8CB3
  • 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.inactiveSelectionBackground#F9CBBE4D
  • list.inactiveSelectionForeground#06060C
  • 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#06060CB3
  • sideBarSectionHeader.background#FDF0ED
  • sideBarSectionHeader.foreground#06060CB3
  • 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#DC3318
constant.character.escape#1D8991
entity.name#F77D26
entity.name.function#1D8991
entity.name.tag#DA103Fbold
entity.name.type, storage.type.cs#F77D26
entity.other.attribute-name#DC3318bold
entity.other.inherited-class#F6661E
entity.other.attribute-name.id#1D8991
entity.other.attribute-name.pseudo-element, entity.other.attribute-name.pseudo-class#F6661E
entity.name.variable, variable#DA103F
keyword#8A31B9bold
keyword.operator#333333
keyword.operator.new, keyword.operator.expression, keyword.operator.logical, keyword.operator.delete#8A31B9
keyword.other.unit#DC3318
markup.quote#F6661EB3italic
markup.heading, entity.name.section#DA103F
markup.bold#8A31B9bold
markup.italic#1D8991italic
markup.inline.raw, markup.fenced_code.block#DC3318
markup.underline.link#F6661E
storage#8A31B9bold
string.quoted, string.template#F6661E
string.regexp#DC3318
string.other.link#DC3318
support#F77D26
support.function#1D8991
support.variable#DA103F
support.type.property-name, meta.object-literal.key#DA103F
support.type.property-name.css#333333
variable.language#F77D26italic
variable.parameteritalic
string.template meta.embedded#333333
punctuation.definition.tag#DA103FB3bold
punctuation.separator#333333
punctuation.definition.template-expression#8A31B9
punctuation.section.embedded#8A31B9
punctuation.definition.list#DC3318

Shiki preview

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

Loading...