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#E6DCC4
  • activityBar.border#256F5E
  • activityBar.foreground#256F5E
  • activityBar.inactiveForeground#A29583
  • activityBarBadge.background#C54131
  • agentSessionReadIndicator.foreground#1F987C
  • agentSessionSelectedBadge.border#D3C5A6
  • badge.background#1F987C
  • badge.foreground#F3EAD8
  • breadcrumb.activeSelectionForeground#1F987C
  • breadcrumb.background#F3EAD8
  • breadcrumb.focusForeground#423729
  • breadcrumb.foreground#7A6D5E
  • button.background#1F987C
  • button.foreground#F3EAD8
  • button.hoverBackground#439D88
  • button.secondaryBackground#E6DCC4
  • button.secondaryForeground#423729
  • button.secondaryHoverBackground#D3C5A6
  • chat.avatarBackground#1F987C
  • chat.avatarForeground#F3EAD8
  • chat.checkpointSeparator#D3C5A6
  • chat.requestBackground#EDE3CD
  • chat.requestBorder#D3C5A6
  • chat.requestBubbleBackground#F3EAD8
  • chat.requestCodeBorder#D3C5A6
  • chat.thinkingShimmer#EDE3CD
  • commandCenter.background#EDE3CD
  • commandCenter.border#D3C5A6
  • commandCenter.foreground#423729
  • commandCenter.inactiveForeground#7A6D5E
  • descriptionForeground#7A6D5E
  • diffEditor.insertedTextBackground#6B9E5A22
  • diffEditor.removedTextBackground#C5413122
  • dropdown.background#F3EAD8
  • dropdown.border#D3C5A6
  • dropdown.foreground#423729
  • editor.background#F3EAD8
  • editor.findMatchBackground#EAA58F
  • editor.findMatchHighlightBackground#F4D1C4
  • editor.findRangeHighlightBackground#D3C5A666
  • editor.foreground#423729
  • editor.hoverHighlightBackground#1F987C1A
  • editor.inactiveSelectionBackground#D3C5A666
  • editor.lineHighlightBackground#EDE3CD
  • editor.selectionBackground#E6C8BC
  • editor.selectionHighlightBackground#F0D9D0
  • editor.wordHighlightBackground#F0D9D0
  • editor.wordHighlightStrongBackground#E6C8BC
  • editorBracketHighlight.foreground1#C6923A
  • editorBracketHighlight.foreground2#1F987C
  • editorBracketHighlight.foreground3#C54131
  • editorBracketHighlight.foreground5#423729
  • editorBracketHighlight.foreground6#7A6D5E
  • editorBracketHighlight.unexpectedBracket.foreground#C54131
  • editorBracketMatch.background#D96C4A33
  • editorBracketMatch.border#D96C4A
  • editorBracketPairGuide.activeBackground1#8B7D6899
  • editorBracketPairGuide.activeBackground2#C6923A99
  • editorBracketPairGuide.activeBackground3#1F987C99
  • editorBracketPairGuide.activeBackground4#C5413199
  • editorBracketPairGuide.activeBackground5#A45F8B99
  • editorBracketPairGuide.activeBackground6#7A6D5E99
  • editorBracketPairGuide.background1#A2958344
  • editorBracketPairGuide.background2#D9A85F44
  • editorBracketPairGuide.background3#1F987C3D
  • editorBracketPairGuide.background4#C5413138
  • editorBracketPairGuide.background5#A45F8B38
  • editorBracketPairGuide.background6#7A6D5E40
  • editorCursor.foreground#1F987C
  • editorError.foreground#C54131
  • editorGroupHeader.tabsBackground#E6DCC4
  • editorGutter.addedBackground#6B9E5A
  • editorGutter.background#F3EAD8
  • editorGutter.deletedBackground#C54131
  • editorHint.foreground#A29583
  • editorHoverWidget.background#F3EAD8
  • editorHoverWidget.border#D3C5A6
  • editorIndentGuide.activeBackground#8B7D68
  • editorIndentGuide.activeBackground1#8B7D68
  • editorIndentGuide.activeBackground2#7A6D5E
  • editorIndentGuide.activeBackground3#1F987C
  • editorIndentGuide.activeBackground4#8B7D68
  • editorIndentGuide.activeBackground5#7A6D5E
  • editorIndentGuide.activeBackground6#1F987C
  • editorIndentGuide.background#D3C5A6
  • editorIndentGuide.background1#D3C5A655
  • editorIndentGuide.background2#C8B89655
  • editorIndentGuide.background3#E6C8BC55
  • editorIndentGuide.background4#D3C5A655
  • editorIndentGuide.background5#C8B89655
  • editorIndentGuide.background6#E6C8BC55
  • editorInfo.foreground#1F987C
  • editorLineNumber.activeForeground#423729
  • editorLineNumber.foreground#A29583
  • editorOverviewRuler.border#D3C5A6
  • editorOverviewRuler.findMatchForeground#D96C4A
  • editorRuler.foreground#D3C5A6
  • editorSuggestWidget.background#F3EAD8
  • editorSuggestWidget.border#D3C5A6
  • editorSuggestWidget.selectedBackground#EDE3CD
  • editorWarning.foreground#D96C4A
  • editorWhitespace.foreground#A29583
  • editorWidget.background#F3EAD8
  • editorWidget.border#D3C5A6
  • errorForeground#C54131
  • focusBorder#1F987C66
  • foreground#423729
  • git.blame.editorDecorationForeground#D96C4A57
  • gitDecoration.addedResourceForeground#6B9E5A
  • gitDecoration.conflictingResourceForeground#C54131
  • gitDecoration.deletedResourceForeground#C54131
  • gitDecoration.ignoredResourceForeground#A29583
  • gitDecoration.untrackedResourceForeground#6B9E5A
  • input.background#FFFFFF
  • input.border#D3C5A6
  • input.foreground#423729
  • input.placeholderForeground#A29583
  • inputOption.activeBorder#1F987C
  • inputValidation.errorBackground#F3EAD8
  • inputValidation.errorBorder#C54131
  • inputValidation.infoBackground#F3EAD8
  • inputValidation.infoBorder#1F987C
  • inputValidation.warningBackground#F3EAD8
  • inputValidation.warningBorder#D96C4A
  • list.activeSelectionBackground#D3C5A6
  • list.activeSelectionForeground#423729
  • list.focusBackground#EDE3CD
  • list.focusForeground#423729
  • list.highlightForeground#1F987C
  • list.hoverBackground#EDE3CD
  • list.inactiveSelectionBackground#E6DCC4
  • menu.background#F3EAD8
  • menu.foreground#423729
  • menu.selectionBackground#EDE3CD
  • menu.selectionForeground#423729
  • menu.separatorBackground#D3C5A6
  • minimap.background#E6DCC4
  • minimap.selectionHighlight#D3C5A6
  • notebook.cellBorderColor#D3C5A6
  • notebook.cellHoverBackground#EDE3CD
  • notebook.cellInsertionIndicator#1F987C
  • notebook.cellStatusBarItemHoverBackground#D3C5A6
  • notebook.editorBackground#F3EAD8
  • notificationCenterHeader.background#E6DCC4
  • notificationCenterHeader.foreground#423729
  • notifications.background#F3EAD8
  • notifications.border#D3C5A6
  • notifications.foreground#423729
  • panel.background#E6DCC4
  • panel.border#D3C5A6
  • panelTitle.activeBorder#1F987C
  • panelTitle.activeForeground#423729
  • panelTitle.inactiveForeground#A29583
  • peekView.border#D3C5A6
  • peekViewEditor.background#EDE3CD
  • peekViewEditor.matchHighlightBackground#D96C4A44
  • peekViewResult.background#F3EAD8
  • peekViewResult.matchHighlightBackground#D96C4A44
  • peekViewResult.selectionBackground#D3C5A6
  • peekViewTitle.background#E6DCC4
  • pickerGroup.border#D3C5A6
  • pickerGroup.foreground#1F987C
  • progressBar.background#1F987C
  • quickInput.background#F3EAD8
  • quickInput.foreground#423729
  • quickInputTitle.background#E6DCC4
  • scrollbar.shadow#0000001A
  • scrollbarSlider.activeBackground#A29583
  • scrollbarSlider.background#D3C5A666
  • scrollbarSlider.hoverBackground#D3C5A6
  • settings.dropdownBackground#F3EAD8
  • settings.dropdownBorder#D3C5A6
  • settings.headerForeground#1F987C
  • settings.textInputBackground#FFFFFF
  • settings.textInputBorder#D3C5A6
  • sideBar.background#E6DCC4
  • sideBar.border#D3C5A6
  • sideBar.foreground#423729
  • sideBarSectionHeader.background#E6DCC4
  • sideBarSectionHeader.border#D3C5A6
  • sideBarSectionHeader.foreground#423729
  • sideBarTitle.foreground#423729
  • statusBar.background#A93428
  • statusBar.debuggingBackground#D96C4A
  • statusBar.debuggingForeground#F3EAD8
  • statusBar.noFolderBackground#A29583
  • statusBar.noFolderForeground#F3EAD8
  • statusBarItem.activeBackground#FFFFFF44
  • statusBarItem.prominentBackground#C54131
  • statusBarItem.prominentHoverBackground#D96C4A
  • tab.activeBackground#F3EAD8
  • tab.activeBorderTop#C54131
  • tab.activeForeground#423729
  • tab.border#D3C5A6
  • tab.inactiveBackground#E6DCC4
  • tab.inactiveForeground#7A6D5E
  • terminal.ansiBlack#423729
  • terminal.ansiBlue#1F987C
  • terminal.ansiBrightBlack#7A6D5E
  • terminal.ansiBrightBlue#439D88
  • terminal.ansiBrightCyan#71C6B3
  • terminal.ansiBrightGreen#89B877
  • terminal.ansiBrightRed#D96C4A
  • terminal.ansiBrightWhite#423729
  • terminal.ansiCyan#439D88
  • terminal.ansiGreen#6B9E5A
  • terminal.ansiRed#C54131
  • terminal.ansiWhite#5F5548
  • terminal.background#F3EAD8
  • terminal.foreground#423729
  • testing.coveredBackground#EDE3CD
  • testing.coveredBorder#D3C5A6
  • testing.iconErrored#D96C4A
  • testing.iconFailed#C54131
  • testing.iconPassed#6B9E5A
  • testing.runAction#1F987C
  • textBlockQuote.background#EDE3CD
  • textBlockQuote.border#D3C5A6
  • textCodeBlock.background#EDE3CD
  • textLink.activeForeground#439D88
  • textLink.foreground#1F987C
  • textPreformat.foreground#423729
  • textSeparator.foreground#D3C5A6
  • titleBar.activeBackground#E6DCC4
  • titleBar.activeForeground#1F987C
  • titleBar.border#C8B896
  • titleBar.inactiveBackground#EDE3CD
  • titleBar.inactiveForeground#7A6D5E
  • tree.indentGuidesStroke#A29583

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
source#423729
comment, punctuation.definition.comment#A29583
keyword, storage.type, storage.modifier#C54131
string, punctuation.definition.string#D96C4A
constant.numeric, constant.language, support.constant#C54131
entity.name.function, support.function#1F987C
entity.name.type, entity.name.class, entity.name.tag, support.type, support.class#1F987C
variable, variable.parameter, variable.other#423729
punctuation, meta.brace, punctuation.definition#7A6D5E
entity.name.tag#1F987C
entity.other.attribute-name#C54131
variable.other.property, variable.other.object.property, variable.other.member, meta.object-literal.key, support.variable.property#9A6A22
variable.parameter, meta.function.parameters#5F5548
entity.name.namespace, entity.name.module, support.module#1F987C
meta.decorator, entity.name.function.decorator, punctuation.decorator#C54131
string.regexp, constant.character.escape#D96C4A
support.type.property-name.json, meta.structure.dictionary.json string.quoted.double.json#1F987C
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css, support.type.property-name.css#1F987C
markup.heading, punctuation.definition.heading#C54131
markup.inline.raw, markup.underline.link, string.other.link#1F987C
invalid#C54131
source#423729
comment, punctuation.definition.comment#A29583
keyword, storage.type, storage.modifier#C54131
string, punctuation.definition.string#D96C4A
constant.numeric, constant.language, support.constant#C54131
entity.name.function, support.function#1F987C
entity.name.type, entity.name.class, entity.name.tag, support.type, support.class#1F987C
variable, variable.parameter, variable.other#423729
punctuation, meta.brace, punctuation.definition#7A6D5E
entity.name.tag#1F987C
entity.other.attribute-name#C54131
variable.other.property, variable.other.object.property, variable.other.member, meta.object-literal.key, support.variable.property#9A6A22
variable.parameter, meta.function.parameters#5F5548
entity.name.namespace, entity.name.module, support.module#1F987C
meta.decorator, entity.name.function.decorator, punctuation.decorator#C54131
string.regexp, constant.character.escape#D96C4A
support.type.property-name.json, meta.structure.dictionary.json string.quoted.double.json#1F987C
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css, support.type.property-name.css#1F987C
markup.heading, punctuation.definition.heading#C54131
markup.inline.raw, markup.underline.link, string.other.link#1F987C
invalid#C54131
source
comment, punctuation.definition.commentnormal
keyword, storage.type, storage.modifierbold
string, punctuation.definition.stringitalic
constant.numeric, constant.language, support.constant
entity.name.function, support.function
entity.name.type, entity.name.class, entity.name.tag, support.type, support.classbold
variable, variable.parameter, variable.other
punctuation, meta.brace, punctuation.definition
entity.name.tag
entity.other.attribute-name
variable.other.property, variable.other.object.property, variable.other.member, meta.object-literal.key, support.variable.property
variable.parameter, meta.function.parameters
entity.name.namespace, entity.name.module, support.module
meta.decorator, entity.name.function.decorator, punctuation.decorator
string.regexp, constant.character.escape
support.type.property-name.json, meta.structure.dictionary.json string.quoted.double.json
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css, support.type.property-name.css
markup.heading, punctuation.definition.headingbold
markup.inline.raw, markup.underline.link, string.other.link
markup.italicitalic
markup.boldbold
invalidunderline
素缃 · Su Xiang by Mosaulse - VS Code Theme