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#ffa186
  • button.foreground#06060C
  • debugToolBar.background#FDF0ED
  • diffEditor.insertedTextBackground#07DA8C1A
  • diffEditor.removedTextBackground#F43E5C1A
  • dropdown.background#FADAD1
  • dropdown.listBackground#ffa186
  • 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#ffa186
  • 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
  • progres sBar.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#f32b2bnormal
entity.name.type, storage.type.cs#F77D26
entity.other.attribute-name#109becitalic
entity.other.inherited-class#F6661E
entity.other.attribute-name.id#01eaff
entity.other.attribute-name.pseudo-element, entity.other.attribute-name.pseudo-class#fb500d
entity.name.variable, variable#DA103F
keyword#ea00ffitalic
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#f700ffitalic
string.quoted, string.template#ff9d00
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#09db25
variable.language#F77D26italic
variable.parameteritalic
string.template meta.embedded#333333
punctuation.definition.tag#DA103FB3normal
punctuation.separator#333333
punctuation.definition.template-expression#8A31B9
punctuation.section.embedded#8A31B9
punctuation.definition.list#DC3318