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.activeBorder#FFC25E
  • activityBar.activeFocusBorder#FFC25E
  • activityBar.background#302110
  • activityBar.foreground#FFFFFF
  • activityBar.inactiveForeground#8F8496
  • activityBarBadge.background#FFC25E
  • activityBarBadge.foreground#302110
  • badge.background#FFC25E
  • badge.foreground#302110
  • breadcrumb.background#493521
  • breadcrumb.focusForeground#FFF5E7
  • breadcrumb.foreground#CDC4D5
  • button.background#C9861F
  • button.foreground#FFFFFF
  • button.hoverBackground#FFC25E
  • button.secondaryBackground#7A582E
  • button.secondaryForeground#FFFFFF
  • checkbox.background#302110
  • checkbox.border#7A582E
  • checkbox.foreground#F4EEF8
  • commandCenter.background#43301B
  • commandCenter.border#7A582E
  • commandCenter.foreground#F4EEF8
  • descriptionForeground#A89EAE
  • dropdown.background#43301B
  • dropdown.border#7A582E
  • dropdown.foreground#F4EEF8
  • editor.background#493521
  • editor.foreground#FFF5E7
  • editor.inactiveSelectionBackground#FFC25E2B
  • editor.lineHighlightBackground#FFC25E0E
  • editor.selectionBackground#FFC25E42
  • editor.selectionHighlightBackground#FFC25E24
  • editor.wordHighlightBackground#8FD7FF20
  • editor.wordHighlightStrongBackground#FFADCF24
  • editorBracketHighlight.foreground1#DAB9FF
  • editorBracketHighlight.foreground2#8FD7FF
  • editorBracketHighlight.foreground3#A9E6C7
  • editorBracketHighlight.foreground4#FFC48F
  • editorBracketHighlight.foreground5#FFADCF
  • editorBracketHighlight.foreground6#FFE08A
  • editorBracketMatch.background#FFC25E25
  • editorBracketMatch.border#FFC25E
  • editorCursor.foreground#FFC25E
  • editorError.foreground#E94362
  • editorGroup.border#7A582E
  • editorGroupHeader.noTabsBackground#302110
  • editorGroupHeader.tabsBackground#302110
  • editorGutter.addedBackground#66D39A
  • editorGutter.deletedBackground#FF7892
  • editorGutter.modifiedBackground#62C7F2
  • editorHint.foreground#76E4AD
  • editorHoverWidget.background#43301B
  • editorHoverWidget.border#7A582E
  • editorHoverWidget.foreground#F4EEF8
  • editorIndentGuide.activeBackground1#FFC25E88
  • editorIndentGuide.background1#FFC25E25
  • editorInfo.foreground#68D5FF
  • editorLineNumber.activeForeground#CDC4D5
  • editorLineNumber.foreground#81758D
  • editorSuggestWidget.background#43301B
  • editorSuggestWidget.foreground#F4EEF8
  • editorSuggestWidget.highlightForeground#FFC25E
  • editorSuggestWidget.selectedBackground#FFC25E35
  • editorWarning.foreground#D78B00
  • editorWhitespace.foreground#FFC25E25
  • editorWidget.background#43301B
  • editorWidget.border#7A582E
  • editorWidget.foreground#F4EEF8
  • errorForeground#FF8FA3
  • focusBorder#FFC25E
  • foreground#F4EEF8
  • gitDecoration.addedResourceForeground#73D99F
  • gitDecoration.deletedResourceForeground#F7768E
  • gitDecoration.ignoredResourceForeground#827889
  • gitDecoration.modifiedResourceForeground#61BEEA
  • gitDecoration.untrackedResourceForeground#93E7B7
  • icon.foreground#D7CEDD
  • input.background#302110
  • input.border#7A582E
  • input.foreground#F4EEF8
  • input.placeholderForeground#958A9D
  • inputOption.activeBackground#FFC25E28
  • inputOption.activeBorder#FFC25E
  • list.activeSelectionBackground#FFC25E32
  • list.activeSelectionForeground#FFFFFF
  • list.focusOutline#FFC25E
  • list.highlightForeground#FFC25E
  • list.hoverBackground#FFC25E15
  • list.inactiveSelectionBackground#FFC25E20
  • list.inactiveSelectionForeground#F4EEF8
  • menu.background#43301B
  • menu.border#7A582E
  • menu.foreground#F4EEF8
  • menu.selectionBackground#FFC25E35
  • menu.selectionForeground#FFFFFF
  • minimap.background#493521
  • notificationCenter.border#7A582E
  • notifications.background#43301B
  • notifications.border#7A582E
  • notifications.foreground#F4EEF8
  • panel.background#43301B
  • panel.border#7A582E
  • panel.foreground#F4EEF8
  • panelTitle.activeBorder#FFC25E
  • panelTitle.activeForeground#FFFFFF
  • panelTitle.inactiveForeground#A89EAE
  • peekView.border#FFC25E
  • peekViewEditor.background#493521
  • peekViewEditor.matchHighlightBackground#FFC25E45
  • peekViewResult.background#3A2917
  • peekViewResult.foreground#F4EEF8
  • peekViewResult.matchHighlightBackground#FFC25E3D
  • progressBar.background#FFC25E
  • quickInput.background#43301B
  • quickInput.foreground#F4EEF8
  • quickInputList.focusBackground#FFC25E35
  • quickInputList.focusForeground#FFFFFF
  • quickInputList.focusIconForeground#FFC25E
  • scrollbarSlider.activeBackground#FFC25E75
  • scrollbarSlider.background#FFC25E30
  • scrollbarSlider.hoverBackground#FFC25E55
  • selection.background#FFC25E45
  • sideBar.background#3A2917
  • sideBar.border#7A582E
  • sideBar.foreground#F4EEF8
  • sideBarSectionHeader.background#43301B
  • sideBarSectionHeader.border#7A582E
  • sideBarSectionHeader.foreground#F7F1FA
  • sideBarTitle.foreground#FFFFFF
  • statusBar.background#C9861F
  • statusBar.border#FFC25E
  • statusBar.debuggingBackground#A4375E
  • statusBar.debuggingForeground#FFFFFF
  • statusBar.foreground#FFFFFF
  • statusBar.noFolderBackground#302110
  • statusBarItem.hoverBackground#FFFFFF18
  • statusBarItem.remoteBackground#FFC25E
  • statusBarItem.remoteForeground#302110
  • tab.activeBackground#493521
  • tab.activeBorderTop#FFC25E
  • tab.activeForeground#FFF5E7
  • tab.border#7A582E
  • tab.hoverBackground#43301B
  • tab.inactiveBackground#302110
  • tab.inactiveForeground#A89EAE
  • tab.unfocusedActiveBorderTop#FFC25E99
  • terminal.ansiBlack#302A36
  • terminal.ansiBlue#79CEFF
  • terminal.ansiBrightBlack#766D7C
  • terminal.ansiBrightBlue#A9DFFF
  • terminal.ansiBrightCyan#A2EEE3
  • terminal.ansiBrightGreen#A5F1C7
  • terminal.ansiBrightMagenta#E5C5FF
  • terminal.ansiBrightRed#FFB0BD
  • terminal.ansiBrightWhite#FFFFFF
  • terminal.ansiBrightYellow#FFE2A0
  • terminal.ansiCyan#72E2D2
  • terminal.ansiGreen#84E6B1
  • terminal.ansiMagenta#D6A6FF
  • terminal.ansiRed#FF8FA3
  • terminal.ansiWhite#EDE6F1
  • terminal.ansiYellow#FFD477
  • terminal.background#43301B
  • terminal.foreground#F4EEF8
  • terminal.selectionBackground#FFC25E42
  • terminalCursor.foreground#FFC25E
  • textLink.activeForeground#FFFFFF
  • textLink.foreground#FFC25E
  • titleBar.activeBackground#302110
  • titleBar.activeForeground#FFFFFF
  • titleBar.inactiveBackground#302110
  • titleBar.inactiveForeground#8F8496
  • tree.indentGuidesStroke#7A582E

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment, string.quoted.docstring#C1B7C9italic
string, string.quoted, constant.other.symbol#A9E6C7—
constant.character.escape, constant.other.placeholder#7FE0D2bold
constant.numeric, constant.language, constant.character#FFC48F—
keyword, keyword.control, storage.type, storage.modifier#DAB9FFbold
entity.name.function, support.function, meta.function-call, variable.function#8FD7FF—
entity.name.type, entity.name.class, entity.name.interface, entity.name.enum, support.type, support.class, support.type.primitive#FFE08A—
variable, variable.other.readwrite, variable.other.constant, variable.language#F5F0FA—
variable.other.property, support.variable.property, meta.object-literal.key, meta.mapping.key, entity.name.tag.yaml#FFADCF—
variable.parameter, meta.function.parameters variable, meta.parameters variable#FFB792italic
entity.name.tag, support.class.component, punctuation.definition.tag#FF91AD—
entity.other.attribute-name, support.type.property-name#F7CC74—
meta.decorator, meta.annotation, punctuation.decorator, entity.name.function.decorator#F3A6C4—
string.regexp, constant.other.character-class, keyword.operator.quantifier.regexp#7FE0D2—
keyword.operator, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.logical, keyword.operator.arithmetic#C7B6FF—
punctuation, punctuation.separator, punctuation.terminator, meta.brace, meta.delimiter#D3CAD8—
support.type.property-name.json, string.json support.type.property-name#FFADCF—
markup.heading, entity.name.section.markdown#DAB9FFbold
markup.underline.link, string.other.link, meta.link.inline.markdown#8FD7FFunderline
markup.inserted, meta.diff.header.to-file#A9E6C7—
markup.deleted, meta.diff.header.from-file#FF91AD—
invalid, invalid.illegal, invalid.deprecated#493521bold
Pastel Dreams by Zoheb Akhtar - VS Code Theme