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#9E9B5A
  • activityBar.background#C9C88E
  • activityBar.foreground#2F2B21
  • activityBar.inactiveForeground#65693F
  • activityBarBadge.background#84514A
  • activityBarBadge.foreground#F1EADC
  • breadcrumb.activeSelectionForeground#232624
  • breadcrumb.focusForeground#6A703E
  • breadcrumb.foreground#66655E
  • button.background#6E6756
  • button.foreground#F0EFE5
  • button.hoverBackground#736A59
  • button.secondaryBackground#E0D9B7
  • button.secondaryForeground#232624
  • button.secondaryHoverBackground#D3CEA0
  • commandCenter.activeBorder#9E9B5A
  • commandCenter.background#C2BBA8
  • commandCenter.border#ADA890
  • commandCenter.foreground#191C1A
  • commandCenter.inactiveForeground#3F4238
  • descriptionForeground#66655E
  • diffEditor.diagonalFill#00000000
  • diffEditor.insertedTextBackground#D1DAC788
  • diffEditor.removedTextBackground#E5CFCA88
  • dropdown.background#FCF6E7
  • dropdown.border#CBC6BB
  • dropdown.foreground#232624
  • editor.background#F0EFE5
  • editor.findMatchBackground#9E9B5A88
  • editor.findMatchHighlightBackground#DED8A166
  • editor.foreground#232624
  • editor.hoverHighlightBackground#E8E8CF88
  • editor.inactiveSelectionBackground#E8E4C966
  • editor.lineHighlightBackground#E8E5D9
  • editor.selectionBackground#E2E0BF99
  • editor.selectionHighlightBackground#E9E7D088
  • editor.wordHighlightBackground#E9E7D088
  • editor.wordHighlightStrongBackground#DAD9A688
  • editorBracketHighlight.foreground1#816B3A
  • editorBracketHighlight.foreground2#6E744F
  • editorBracketHighlight.foreground3#596A6F
  • editorBracketHighlight.foreground4#84514A
  • editorBracketHighlight.foreground5#6A703E
  • editorBracketHighlight.foreground6#626662
  • editorBracketHighlight.unexpectedBracket.foreground#84514A
  • editorBracketMatch.background#E4DBB377
  • editorBracketMatch.border#816B3A
  • editorBracketPairGuide.activeBackground1#ADA08B
  • editorBracketPairGuide.activeBackground2#A59986
  • editorBracketPairGuide.activeBackground3#9F9380
  • editorBracketPairGuide.activeBackground4#A4947E
  • editorBracketPairGuide.activeBackground5#9F9380
  • editorBracketPairGuide.activeBackground6#9B907E
  • editorBracketPairGuide.background1#D9D4C6
  • editorBracketPairGuide.background2#D5CEC1
  • editorBracketPairGuide.background3#D0CBBE
  • editorBracketPairGuide.background4#D4CDBD
  • editorBracketPairGuide.background5#D0CABB
  • editorBracketPairGuide.background6#CDC8BA
  • editorCursor.foreground#84514A
  • editorError.foreground#84514A
  • editorGroup.border#C6C2A7
  • editorGroupHeader.tabsBackground#ECE9DF
  • editorGutter.addedBackground#6E744F
  • editorGutter.deletedBackground#84514A
  • editorGutter.modifiedBackground#9E9B5A
  • editorHint.foreground#6E744F
  • editorHoverWidget.background#FCF6E7
  • editorHoverWidget.border#CBC6BB
  • editorIndentGuide.activeBackground1#ACA08C
  • editorIndentGuide.background1#D6D1C6
  • editorInfo.foreground#596A6F
  • editorLineNumber.activeForeground#6B675E
  • editorLineNumber.foreground#ABA79B
  • editorLink.activeForeground#596A6F
  • editorOverviewRuler.addedForeground#6E744FAA
  • editorOverviewRuler.border#00000000
  • editorOverviewRuler.deletedForeground#84514AAA
  • editorOverviewRuler.errorForeground#84514AAA
  • editorOverviewRuler.infoForeground#596A6FAA
  • editorOverviewRuler.modifiedForeground#9E9B5AAA
  • editorOverviewRuler.warningForeground#6A703EAA
  • editorSuggestWidget.background#FCF6E7
  • editorSuggestWidget.border#CBC6BB
  • editorSuggestWidget.foreground#232624
  • editorSuggestWidget.highlightForeground#6A703E
  • editorSuggestWidget.selectedBackground#E8E2C4
  • editorWarning.foreground#6A703E
  • editorWhitespace.foreground#D1CCBE
  • editorWidget.background#FCF6E7
  • editorWidget.border#CBC6BB
  • errorForeground#84514A
  • focusBorder#9E9B5A66
  • foreground#232624
  • gitDecoration.addedResourceForeground#6E744F
  • gitDecoration.deletedResourceForeground#84514A
  • gitDecoration.ignoredResourceForeground#928A7D
  • gitDecoration.modifiedResourceForeground#9E9B5A
  • gitDecoration.untrackedResourceForeground#6A703E
  • icon.foreground#63665F
  • input.background#FCF6E7
  • input.border#CBC6BB
  • input.foreground#232624
  • input.placeholderForeground#7F7D74
  • inputOption.activeBorder#9E9B5A
  • inputValidation.errorBackground#E5CFCA
  • inputValidation.errorBorder#84514A
  • inputValidation.infoBackground#D6DDD8
  • inputValidation.infoBorder#596A6F
  • inputValidation.warningBackground#E7E2C0
  • inputValidation.warningBorder#6A703E
  • list.activeSelectionBackground#EBE4C7
  • list.activeSelectionForeground#232624
  • list.errorForeground#84514A
  • list.highlightForeground#6A703E
  • list.hoverBackground#F1EEDB
  • list.inactiveSelectionBackground#EFE9D0
  • list.warningForeground#6A703E
  • menu.background#FCF6E7
  • menu.foreground#232624
  • menu.selectionBackground#E4D8A2
  • menu.selectionForeground#232624
  • menu.separatorBackground#D0C9BA
  • minimap.background#F0EFE5
  • minimap.errorHighlight#84514A88
  • minimap.findMatchHighlight#9E9B5A88
  • minimap.selectionHighlight#75554844
  • minimap.warningHighlight#6A703E88
  • notificationCenterHeader.background#F0EFE5
  • notifications.background#FCF6E7
  • notifications.border#CBC6BB
  • notifications.foreground#232624
  • panel.background#F3EBDB
  • panel.border#DCD0B5
  • panelTitle.activeBorder#9E9B5A
  • panelTitle.activeForeground#232624
  • panelTitle.inactiveForeground#72654E
  • peekView.border#9E9B5A
  • peekViewEditor.background#F0EFE5
  • peekViewResult.background#F3EBDB
  • peekViewResult.matchHighlightBackground#DED8A166
  • peekViewResult.selectionBackground#E3D49B
  • peekViewTitle.background#EAE4CD
  • scrollbar.shadow#675E520D
  • scrollbarSlider.activeBackground#6E645366
  • scrollbarSlider.background#92867344
  • scrollbarSlider.hoverBackground#7E746455
  • selection.background#E2E0BF
  • sideBar.background#F5F0E1
  • sideBar.border#C6C2A7
  • sideBar.foreground#2B2F2C
  • sideBarSectionHeader.background#EFEBD6
  • sideBarSectionHeader.foreground#232624
  • sideBarTitle.foreground#232624
  • statusBar.background#E0D9B7
  • statusBar.debuggingBackground#9E9B5A
  • statusBar.debuggingForeground#232624
  • statusBar.foreground#2B2721
  • statusBar.noFolderBackground#E0D9B7
  • statusBarItem.hoverBackground#D0C8A6
  • statusBarItem.prominentBackground#E5DFC3
  • statusBarItem.remoteBackground#C2BF8A
  • statusBarItem.remoteForeground#232624
  • tab.activeBackground#F0EFE5
  • tab.activeBorderTop#9E9B5A
  • tab.activeForeground#232624
  • tab.activeModifiedBorder#84514A
  • tab.border#C6C2A7
  • tab.hoverBackground#EFEBD0
  • tab.hoverBorder#C2C07D
  • tab.hoverForeground#232624
  • tab.inactiveBackground#E8E5DA
  • tab.inactiveForeground#5B625D
  • tab.inactiveModifiedBorder#B7B57E
  • tab.unfocusedActiveBorder#DDD8C7
  • tab.unfocusedActiveBorderTop#C2C07D
  • tab.unfocusedActiveForeground#3C433F
  • tab.unfocusedActiveModifiedBorder#6A703E
  • tab.unfocusedInactiveModifiedBorder#D4CCB8
  • terminal.ansiBlack#4C514D
  • terminal.ansiBlue#596A6F
  • terminal.ansiBrightBlack#736E64
  • terminal.ansiBrightBlue#697A7E
  • terminal.ansiBrightCyan#6E9790
  • terminal.ansiBrightGreen#7B8061
  • terminal.ansiBrightMagenta#907C9C
  • terminal.ansiBrightRed#A35C53
  • terminal.ansiBrightWhite#FCF6E7
  • terminal.ansiBrightYellow#9E9B5A
  • terminal.ansiCyan#5C7F79
  • terminal.ansiGreen#6E744F
  • terminal.ansiMagenta#7C6A8A
  • terminal.ansiRed#84514A
  • terminal.ansiWhite#F0EFE5
  • terminal.ansiYellow#6A703E
  • terminal.background#F3EBDB
  • terminal.foreground#232624
  • terminalCursor.background#232624
  • terminalCursor.foreground#84514A
  • titleBar.activeBackground#B9B29D
  • titleBar.activeForeground#191C1A
  • titleBar.inactiveBackground#C0B9A4
  • titleBar.inactiveForeground#252A27
  • widget.border#CBC6BB
  • widget.shadow#675E5214

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#736E64italic
string, markup.inline.raw, markup.fenced_code.block#5E7042—
constant.numeric, constant.language, constant.character, constant.other, constant.escape#706B2B—
keyword, storage, keyword.control, keyword.operator.new, keyword.operator.expression#884D45—
storage.type#9A4B2F—
storage.modifier, storage.modifier.swift#884D45—
keyword.other.use.rust, keyword.other.extern.rust, keyword.other.mod.rust#884D45—
keyword.other.crate.rust, keyword.other.self.rust, keyword.other.super.rust, variable.language.crate.rust, variable.language.self.rust, variable.language.super.rust#5E7042—
entity.name.namespace.rust, meta.path.rust entity.name.namespace, meta.use.rust entity.name.namespace, support.module.rust#2F6278—
entity.name.type.rust, meta.path.rust entity.name.type, meta.use.rust entity.name.type, support.type.rust#9A4B2F—
entity.name.function, support.function, meta.function-call, variable.function, entity.name.method#2F6278—
entity.name.type, entity.name.class, support.type, support.class, entity.name.namespace#9A4B2F—
variable, string constant.other.placeholder, meta.definition.variable.name#232624—
variable.parameter#3F4D48—
variable.other.property, meta.object-literal.key, entity.other.attribute-name#8A3F2F—
entity.name.tag, meta.tag.sgml, punctuation.definition.tag#824F3D—
keyword.operator, punctuation, meta.brace, punctuation.definition.parameters.begin, punctuation.definition.parameters.end, punctuation.section.parens.begin, punctuation.section.parens.end, punctuation.section.group.begin, punctuation.section.group.end, punctuation.section.brackets.begin, punctuation.section.brackets.end, punctuation.section.braces.begin, punctuation.section.braces.end, meta.group, meta.brackets#6D6A60—
punctuation.separator, punctuation.terminator, punctuation.separator.comma, punctuation.separator.parameter, punctuation.separator.arguments, punctuation.separator.key-value, punctuation.separator.colon#78735B—
punctuation.accessor, punctuation.definition.spread, keyword.operator.spread, keyword.operator.optional#725A3B—
keyword.operator.assignment, keyword.operator.comparison, keyword.operator.logical, keyword.operator.ternary, keyword.operator.expression, keyword.operator.arithmetic, keyword.operator.nullish-coalescing, keyword.operator.relational#5B574C—
markup.heading, entity.name.section.markdown#824F3Dbold
markup.bold, markup.italic#884D45italic
entity.name.type.rust, support.type.rust, storage.type.rust, meta.path.rust entity.name.type, meta.use.rust entity.name.type#9A4B2F—
string.quoted.double.json, meta.structure.dictionary.value.json string.quoted.double.json, meta.structure.array.json string.quoted.double.json#2F6278—
constant.language.json#6E744F—
constant.numeric.json, meta.structure.dictionary.value.json constant.numeric.json, meta.structure.array.json constant.numeric.json#7B641F—
punctuation.separator.dictionary.key-value.json, punctuation.separator.dictionary.pair.json, punctuation.separator.key-value.json, punctuation.separator.comma.json#9A8666—
punctuation.support.type.property-name.begin.json, punctuation.support.type.property-name.end.json#B07C62—
support.type.property-name.json, support.type.property-name.json string.quoted.double.json#9A3F2C—
invalid, invalid.illegal#F5EEE2underline
江南烟雨主题 by zhoulaiqing - VS Code Theme