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#756858
  • 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#756858
  • descriptionForeground#756858
  • diffEditor.insertedLineBackground#6B9E5A15
  • diffEditor.insertedTextBackground#6B9E5A22
  • diffEditor.removedLineBackground#C5413115
  • diffEditor.removedTextBackground#C5413122
  • diffEditorGutter.insertedLineBackground#6B9E5A15
  • diffEditorGutter.removedLineBackground#C5413115
  • dropdown.background#F3EAD8
  • dropdown.border#D3C5A6
  • dropdown.foreground#423729
  • editor.background#F3EAD8
  • editor.findMatchBackground#EAA58F
  • editor.findMatchBorder#D96C4A
  • editor.findMatchForeground#FFFFFF
  • editor.findMatchHighlightBackground#F4D1C4
  • editor.findMatchHighlightBorder#D96C4A
  • editor.findRangeHighlightBackground#D3C5A666
  • editor.findRangeHighlightBorder#D3C5A666
  • editor.focusedStackFrameHighlightBackground#1F987C55
  • editor.foreground#423729
  • editor.hoverHighlightBackground#1F987C1A
  • editor.inactiveSelectionBackground#D3C5A666
  • editor.inlineSuggest.background#F3EAD8
  • editor.inlineSuggest.border#D3C5A6
  • editor.inlineSuggest.foreground#256F5E
  • editor.lineHighlightBackground#EDE3CD
  • editor.lineHighlightBorder#D3C5A644
  • editor.selectionBackground#E6C8BC
  • editor.selectionForeground#FFFFFF
  • editor.selectionHighlightBackground#F0D9D0
  • editor.stackFrameHighlightBackground#1F987C33
  • editor.wordHighlightBackground#F0D9D0
  • editor.wordHighlightBorder#F0D9D044
  • editor.wordHighlightStrongBackground#E6C8BC
  • editor.wordHighlightStrongBorder#E6C8BC44
  • editorBracketHighlight.foreground1#756050
  • editorBracketHighlight.foreground2#1F987C
  • editorBracketHighlight.foreground3#C54131
  • editorBracketHighlight.foreground4#924D78
  • editorBracketHighlight.foreground5#423729
  • editorBracketHighlight.foreground6#756858
  • editorBracketHighlight.unexpectedBracket.foreground#C54131
  • editorBracketMatch.background#D96C4A33
  • editorBracketMatch.border#D96C4A
  • editorBracketPairGuide.activeBackground1#8B7D6899
  • editorBracketPairGuide.activeBackground2#75605099
  • editorBracketPairGuide.activeBackground3#1F987C99
  • editorBracketPairGuide.activeBackground4#C5413199
  • editorBracketPairGuide.activeBackground5#924D7899
  • editorBracketPairGuide.activeBackground6#75685899
  • editorBracketPairGuide.background1#A2958344
  • editorBracketPairGuide.background2#75605044
  • editorBracketPairGuide.background3#1F987C3D
  • editorBracketPairGuide.background4#C5413138
  • editorBracketPairGuide.background5#924D7838
  • editorBracketPairGuide.background6#75685840
  • editorCursor.foreground#1F987C
  • editorError.foreground#C54131
  • editorGroupHeader.tabsBackground#E6DCC4
  • editorGutter.addedBackground#6B9E5A
  • editorGutter.background#F3EAD8
  • editorGutter.commentRangeForeground#E6C8BC
  • editorGutter.deletedBackground#C54131
  • editorGutter.foldingControlForeground#A29583
  • editorGutter.modifiedBackground#756050
  • editorHint.foreground#A29583
  • editorHoverWidget.background#F3EAD8
  • editorHoverWidget.border#D3C5A6
  • editorIndentGuide.activeBackground#8B7D68
  • editorIndentGuide.activeBackground1#8B7D68
  • editorIndentGuide.activeBackground2#756858
  • editorIndentGuide.activeBackground3#1F987C
  • editorIndentGuide.activeBackground4#8B7D68
  • editorIndentGuide.activeBackground5#756858
  • 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
  • editorMarkerNavigation.background#F3EAD8
  • editorMarkerNavigationError.background#C54131
  • editorMarkerNavigationInfo.background#1F987C
  • editorMarkerNavigationWarning.background#D96C4A
  • editorOverviewRuler.addedForeground#6B9E5A
  • editorOverviewRuler.border#D3C5A6
  • editorOverviewRuler.deletedForeground#C54131
  • editorOverviewRuler.errorForeground#C54131
  • editorOverviewRuler.findMatchForeground#D96C4A
  • editorOverviewRuler.infoForeground#1F987C
  • editorOverviewRuler.modifiedForeground#D96C4A
  • editorOverviewRuler.warningForeground#D96C4A
  • editorRuler.foreground#D3C5A6
  • editorStickyScroll.background#F3EAD8
  • editorStickyScroll.border#D3C5A6
  • editorStickyScroll.shadow#0000001A
  • 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.modifiedResourceForeground#D96C4A
  • gitDecoration.renamedResourceForeground#1F987C
  • gitDecoration.stageDeletedResourceForeground#C54131
  • gitDecoration.stageModifiedResourceForeground#C54131
  • 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.errorBackground#C54131
  • statusBarItem.hoverBackground#FFFFFF44
  • statusBarItem.prominentBackground#C54131
  • statusBarItem.prominentHoverBackground#D96C4A
  • statusBarItem.warningBackground#D96C4A
  • tab.activeBackground#F3EAD8
  • tab.activeBorderTop#C54131
  • tab.activeForeground#423729
  • tab.border#D3C5A6
  • tab.inactiveBackground#E6DCC4
  • tab.inactiveForeground#756858
  • terminal.ansiBlack#423729
  • terminal.ansiBlue#1F987C
  • terminal.ansiBrightBlack#756858
  • terminal.ansiBrightBlue#439D88
  • terminal.ansiBrightCyan#71C6B3
  • terminal.ansiBrightGreen#89B877
  • terminal.ansiBrightRed#D96C4A
  • terminal.ansiBrightWhite#423729
  • terminal.ansiBrightYellow#9A8876
  • terminal.ansiCyan#439D88
  • terminal.ansiGreen#6B9E5A
  • terminal.ansiRed#C54131
  • terminal.ansiWhite#5F5548
  • terminal.ansiYellow#756050
  • terminal.background#F3EAD8
  • terminal.foreground#423729
  • testing.coveredBackground#EDE3CD
  • testing.coveredBorder#D3C5A6
  • testing.iconErrored#D96C4A
  • testing.iconFailed#C54131
  • testing.iconPassed#6B9E5A
  • testing.iconQueued#A29583
  • testing.iconSkipped#A29583
  • 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#756858
  • tree.indentGuidesStroke#A29583

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, comment.line, comment.block, comment.line.double-slash, comment.line.number-sign, comment.block.documentation#73575citalic
comment.block.documentation#826b48italic
keyword, keyword.control, keyword.operator.expression, keyword.other, storage.type, storage.modifier#c02c38—
keyword.control.import, keyword.control.include, keyword.control.package, keyword.control.namespace#c02c38—
keyword.operator, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.arithmetic, keyword.operator.logical#73575c—
string, string.quoted, string.quoted.single, string.quoted.double, string.quoted.triple, string.quoted.other, string.unquoted#b14b28—
string.template, string.template variable, string.interpolation, string.interpolated#b14b28—
constant.character.escape, constant.character.code#b14b28—
constant.numeric, constant.numeric.integer, constant.numeric.float, constant.numeric.hex, constant.numeric.octal, constant.numeric.binary#c02c38—
constant.language, constant.other, constant.other.color#c02c38—
constant.language.boolean, constant.language.null, constant.language.undefined#c02c38—
entity.name.type, entity.name.type.class, entity.name.type.enum, entity.name.type.interface, entity.name.type.struct, entity.name.type.type-alias, entity.other.inherited-class#248067—
entity.name.function, entity.name.function.constructor, meta.function-call, support.function, support.function.builtin, support.function.console#207f4c—
entity.name.function.member, entity.name.method#207f4c—
variable, variable.other.readwrite, variable.other.property, variable.other.constant#483332—
variable.parameter, variable.parameter.function#685e48—
variable.other.object.property, support.type.property-name, meta.object-literal.key, meta.structure.dictionary.key#826b48—
support.class, support.type, support.constant, support.variable#248067—
punctuation, punctuation.definition, punctuation.section, punctuation.terminator, punctuation.separator, punctuation.accessor, meta.brace#73575c—
markup.heading, entity.name.section, markup.heading.setext#c02c38bold
markup.bold, markup.italic—bold
markup.list, markup.list.unnumbered, markup.list.numbered#c02c38—
markup.underline.link, string.other.link#207f4cunderline
markup.inline.raw, markup.fenced_code.block#b14b28—
markup.quote#73575citalic
markup.inserted, markup.deleted#b14b28—
entity.other.attribute-name.class, entity.other.attribute-name.id#826b48—
support.type.property-name.css, support.type.property-name.media#826b48—
entity.name.tag#248067—
entity.other.attribute-name#cf7543—
support.type.property-name.json#826b48—
meta.diff.header, meta.diff.range, meta.diff.index#894276—
invalid.deprecated#a49c93underline
invalid.illegal#c02c38—
comment, comment.line, comment.block, comment.line.double-slash, comment.line.number-sign, comment.block.documentation#73575citalic
comment.block.documentation#826b48italic
keyword, keyword.control, keyword.operator.expression, keyword.other, storage.type, storage.modifier#c02c38—
keyword.control.import, keyword.control.include, keyword.control.package, keyword.control.namespace#c02c38—
keyword.operator, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.arithmetic, keyword.operator.logical#73575c—
string, string.quoted, string.quoted.single, string.quoted.double, string.quoted.triple, string.quoted.other, string.unquoted#b14b28—
string.template, string.template variable, string.interpolation, string.interpolated#b14b28—
constant.character.escape, constant.character.code#b14b28—
constant.numeric, constant.numeric.integer, constant.numeric.float, constant.numeric.hex, constant.numeric.octal, constant.numeric.binary#c02c38—
constant.language, constant.other, constant.other.color#c02c38—
constant.language.boolean, constant.language.null, constant.language.undefined#c02c38—
entity.name.type, entity.name.type.class, entity.name.type.enum, entity.name.type.interface, entity.name.type.struct, entity.name.type.type-alias, entity.other.inherited-class#248067—
entity.name.function, entity.name.function.constructor, meta.function-call, support.function, support.function.builtin, support.function.console#207f4c—
entity.name.function.member, entity.name.method#207f4c—
variable, variable.other.readwrite, variable.other.property, variable.other.constant#483332—
variable.parameter, variable.parameter.function#685e48—
variable.other.object.property, support.type.property-name, meta.object-literal.key, meta.structure.dictionary.key#826b48—
support.class, support.type, support.constant, support.variable#248067—
punctuation, punctuation.definition, punctuation.section, punctuation.terminator, punctuation.separator, punctuation.accessor, meta.brace#73575c—
markup.heading, entity.name.section, markup.heading.setext#c02c38bold
markup.bold, markup.italic—bold
markup.list, markup.list.unnumbered, markup.list.numbered#c02c38—
markup.underline.link, string.other.link#207f4cunderline
markup.inline.raw, markup.fenced_code.block#b14b28—
markup.quote#73575citalic
markup.inserted, markup.deleted#b14b28—
entity.other.attribute-name.class, entity.other.attribute-name.id#826b48—
support.type.property-name.css, support.type.property-name.media#826b48—
entity.name.tag#248067—
entity.other.attribute-name#cf7543—
support.type.property-name.json#826b48—
meta.diff.header, meta.diff.range, meta.diff.index#894276—
invalid.deprecated#a49c93underline
invalid.illegal#c02c38—
source——
comment, punctuation.definition.comment—normal
keyword, storage.type, storage.modifier—bold
string, punctuation.definition.string—italic
constant.numeric, constant.language, support.constant——
entity.name.function, support.function——
entity.name.type, entity.name.class, entity.name.tag, support.type, support.class—bold
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.heading—bold
markup.inline.raw, markup.underline.link, string.other.link——
markup.italic—italic
markup.bold—bold
invalid—underline
素缃 · Su Xiang by Mosaulse - VS Code Theme