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#8EA591
  • activityBar.background#4F765F
  • activityBar.foreground#F6F7F2
  • activityBar.inactiveForeground#C9D8CE
  • activityBarBadge.background#EEF4EF
  • activityBarBadge.foreground#33443D
  • breadcrumb.activeSelectionForeground#33443D
  • breadcrumb.focusForeground#4F765F
  • breadcrumb.foreground#74837A
  • button.background#4F765F
  • button.foreground#F8FAF5
  • button.hoverBackground#5A8868
  • button.secondaryBackground#DDE8DA
  • button.secondaryForeground#33443D
  • button.secondaryHoverBackground#D3E0D2
  • commandCenter.activeBorder#7F9B91
  • commandCenter.background#D3DCD8
  • commandCenter.border#92A79F
  • commandCenter.foreground#293A33
  • commandCenter.inactiveForeground#46564F
  • descriptionForeground#74837A
  • diffEditor.diagonalFill#00000000
  • diffEditor.insertedTextBackground#D7E7DD88
  • diffEditor.removedTextBackground#F0DBDA88
  • dropdown.background#FCFDF9
  • dropdown.border#C9D6CD
  • dropdown.foreground#33443D
  • editor.background#F6F7F2
  • editor.findMatchBackground#D3C88E99
  • editor.findMatchHighlightBackground#E4DDC455
  • editor.foreground#33443D
  • editor.hoverHighlightBackground#E8EFE988
  • editor.inactiveSelectionBackground#E4EDE766
  • editor.lineHighlightBackground#EAF1EA
  • editor.selectionBackground#D7E7DF99
  • editor.selectionHighlightBackground#E1EAE588
  • editor.wordHighlightBackground#E1EAE588
  • editor.wordHighlightStrongBackground#D5E1DA88
  • editorBracketHighlight.foreground1#ADB5B0
  • editorBracketHighlight.foreground2#A4B0AB
  • editorBracketHighlight.foreground3#98A59E
  • editorBracketHighlight.foreground4#87918B
  • editorBracketHighlight.foreground5#7F9187
  • editorBracketHighlight.foreground6#70827C
  • editorBracketHighlight.unexpectedBracket.foreground#A65954
  • editorBracketMatch.background#D8E5DC77
  • editorBracketMatch.border#7F9187
  • editorBracketPairGuide.activeBackground1#A6B2A9
  • editorBracketPairGuide.activeBackground2#9EA9A3
  • editorBracketPairGuide.activeBackground3#98A59E
  • editorBracketPairGuide.activeBackground4#929F98
  • editorBracketPairGuide.activeBackground5#8C9892
  • editorBracketPairGuide.activeBackground6#84918C
  • editorBracketPairGuide.background1#D9DFDA
  • editorBracketPairGuide.background2#D5DBD6
  • editorBracketPairGuide.background3#D1D8D3
  • editorBracketPairGuide.background4#D7DDD8
  • editorBracketPairGuide.background5#D2D9D4
  • editorBracketPairGuide.background6#CED6D1
  • editorCursor.foreground#4F8785
  • editorError.foreground#A65954
  • editorGroup.border#A9B8B2
  • editorGroupHeader.tabsBackground#D8E0DC
  • editorGutter.addedBackground#4F765F
  • editorGutter.deletedBackground#A65954
  • editorGutter.modifiedBackground#4F8785
  • editorHint.foreground#4F765F
  • editorHoverWidget.background#FCFDF9
  • editorHoverWidget.border#C9D6CD
  • editorIndentGuide.activeBackground1#A6B0A8
  • editorIndentGuide.background1#D8DED8
  • editorInfo.foreground#4F8785
  • editorLineNumber.activeForeground#718177
  • editorLineNumber.foreground#B4BDB5
  • editorLink.activeForeground#4F8785
  • editorOverviewRuler.addedForeground#4F765FAA
  • editorOverviewRuler.border#00000000
  • editorOverviewRuler.deletedForeground#A65954AA
  • editorOverviewRuler.errorForeground#A65954AA
  • editorOverviewRuler.infoForeground#4F8785AA
  • editorOverviewRuler.modifiedForeground#4F8785AA
  • editorOverviewRuler.warningForeground#9B8253AA
  • editorSuggestWidget.background#FCFDF9
  • editorSuggestWidget.border#C9D6CD
  • editorSuggestWidget.foreground#33443D
  • editorSuggestWidget.highlightForeground#4F765F
  • editorSuggestWidget.selectedBackground#EAF2EC
  • editorWarning.foreground#9B8253
  • editorWhitespace.foreground#D3DCD3
  • editorWidget.background#FCFDF9
  • editorWidget.border#C9D6CD
  • errorForeground#A65954
  • focusBorder#4F765F66
  • foreground#33443D
  • gitDecoration.addedResourceForeground#4F765F
  • gitDecoration.deletedResourceForeground#A65954
  • gitDecoration.ignoredResourceForeground#A0AAA2
  • gitDecoration.modifiedResourceForeground#4F8785
  • gitDecoration.untrackedResourceForeground#6C8366
  • icon.foreground#63756B
  • input.background#FCFDF9
  • input.border#C9D6CD
  • input.foreground#33443D
  • input.placeholderForeground#8B988F
  • inputOption.activeBorder#4F8785
  • inputValidation.errorBackground#F2E4E3
  • inputValidation.errorBorder#A65954
  • inputValidation.infoBackground#E3EEEC
  • inputValidation.infoBorder#4F8785
  • inputValidation.warningBackground#F1EBDD
  • inputValidation.warningBorder#9B8253
  • list.activeSelectionBackground#DDEBDF
  • list.activeSelectionForeground#2F4038
  • list.errorForeground#A65954
  • list.highlightForeground#4F765F
  • list.hoverBackground#EAF1EA
  • list.inactiveSelectionBackground#E7EEE6
  • list.warningForeground#9B8253
  • menu.background#FCFDF9
  • menu.foreground#33443D
  • menu.selectionBackground#E3ECE5
  • menu.selectionForeground#2F4038
  • menu.separatorBackground#D3DED4
  • minimap.background#F3F5EF
  • minimap.errorHighlight#A6595488
  • minimap.findMatchHighlight#D5C99988
  • minimap.selectionHighlight#4F765F44
  • minimap.warningHighlight#9B825388
  • notificationCenterHeader.background#F1F4EE
  • notifications.background#FCFDF9
  • notifications.border#C9D6CD
  • notifications.foreground#33443D
  • panel.background#F1F4EE
  • panel.border#D3DED4
  • panelTitle.activeBorder#4F765F
  • panelTitle.activeForeground#33443D
  • panelTitle.inactiveForeground#74837A
  • peekView.border#4F765F
  • peekViewEditor.background#F3F5EF
  • peekViewResult.background#F1F4EE
  • peekViewResult.matchHighlightBackground#E7E0C855
  • peekViewResult.selectionBackground#D7E7DF
  • peekViewTitle.background#E7EEE6
  • scrollbar.shadow#7D8B810D
  • scrollbarSlider.activeBackground#77887B66
  • scrollbarSlider.background#9EAA9F44
  • scrollbarSlider.hoverBackground#8C9A8F55
  • selection.background#D7E7DF
  • sideBar.background#EEF7ED
  • sideBar.border#B9CFBF
  • sideBar.foreground#33443D
  • sideBarSectionHeader.background#E2EDE1
  • sideBarSectionHeader.foreground#33443D
  • sideBarTitle.foreground#33443D
  • statusBar.background#4F765F
  • statusBar.debuggingBackground#9B7957
  • statusBar.debuggingForeground#F6F1E8
  • statusBar.foreground#F6F7F2
  • statusBar.noFolderBackground#4F765F
  • statusBarItem.hoverBackground#5A8868
  • statusBarItem.prominentBackground#5A8868
  • statusBarItem.remoteBackground#476B56
  • statusBarItem.remoteForeground#F6F7F2
  • tab.activeBackground#F6F7F2
  • tab.activeBorder#E4E7E5
  • tab.activeBorderTop#9AAEA6
  • tab.activeForeground#2F4038
  • tab.activeModifiedBorder#8FA49C
  • tab.border#A9B8B2
  • tab.hoverBackground#E4E7E5
  • tab.hoverBorder#AABAB3
  • tab.hoverForeground#2F4038
  • tab.inactiveBackground#D8E0DC
  • tab.inactiveForeground#33443D
  • tab.inactiveModifiedBorder#B7BFC4
  • tab.unfocusedActiveBorder#E4E7E5
  • tab.unfocusedActiveBorderTop#C0C7CB
  • tab.unfocusedActiveForeground#465156
  • tab.unfocusedActiveModifiedBorder#B7BFC4
  • tab.unfocusedInactiveModifiedBorder#C9CFD1
  • terminal.ansiBlack#56635C
  • terminal.ansiBlue#4F8785
  • terminal.ansiBrightBlack#8A958D
  • terminal.ansiBrightBlue#78A9A6
  • terminal.ansiBrightCyan#89B8B5
  • terminal.ansiBrightGreen#7BA77F
  • terminal.ansiBrightMagenta#9885A6
  • terminal.ansiBrightRed#B76F69
  • terminal.ansiBrightWhite#FFFDF8
  • terminal.ansiBrightYellow#AD9668
  • terminal.ansiCyan#6DA3A0
  • terminal.ansiGreen#4F765F
  • terminal.ansiMagenta#866F97
  • terminal.ansiRed#A65954
  • terminal.ansiWhite#F6F7F2
  • terminal.ansiYellow#9B8253
  • terminal.background#F3F5EF
  • terminal.foreground#33443D
  • terminalCursor.background#33443D
  • terminalCursor.foreground#4F8785
  • titleBar.activeBackground#92A79F
  • titleBar.activeForeground#293A33
  • titleBar.inactiveBackground#9AAEA6CC
  • titleBar.inactiveForeground#3D4E47
  • widget.border#C9D6CD
  • widget.shadow#7D8B8118

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#8A8A8Aitalic
punctuation.definition.comment, comment.line.double-slash punctuation.definition.comment, comment.block punctuation.definition.comment#A3A8A2—
string, markup.inline.raw, markup.fenced_code.block#2F7E48—
string.quoted.docstring.multi.python, string.quoted.docstring.single.python, string.quoted.docstring.multi.python punctuation.definition.string, string.quoted.docstring.single.python punctuation.definition.string#7E8581italic
constant.numeric, constant.language, constant.character, constant.other, constant.escape#806A22—
keyword, storage, keyword.control, keyword.operator.new, keyword.operator.expression#7950A0—
storage.type#9D4E30—
storage.modifier, storage.modifier.swift#7950A0—
meta.decorator, punctuation.decorator, entity.name.function.decorator, storage.type.annotation, support.type.annotation#9E5A8C—
entity.name.function, support.function, meta.function-call, variable.function, entity.name.method#1F789E—
entity.name.type, entity.name.class, support.type, support.class#9D4E30—
entity.name.namespace, support.module, entity.name.package, support.other.module#6F617D—
variable, string constant.other.placeholder, meta.definition.variable.name#30483F—
variable.parameter#725C63
variable.other.property, meta.object-literal.key, entity.other.attribute-name#A14E62—
entity.name.tag, meta.tag.sgml, punctuation.definition.tag#A24D3C—
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#A8AAA4—
punctuation.separator, punctuation.terminator, 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.brace, meta.group, meta.brackets#B7BAB3—
punctuation.separator.comma, punctuation.separator.parameter, punctuation.separator.arguments, punctuation.terminator.statement, punctuation.separator.key-value, punctuation.separator.colon#969B95—
punctuation.definition.string, punctuation.definition.string.begin, punctuation.definition.string.end, punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.quasi.element#C6C9C1—
punctuation.accessor, punctuation.definition.spread, keyword.operator.spread, keyword.operator.optional#8F9691—
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#68746E—
markup.heading, entity.name.section.markdown#2F7E48bold
markup.bold, markup.italic#1F789Eitalic
entity.name.type.rust, support.type.rust, storage.type.rust, meta.path.rust entity.name.type, meta.use.rust entity.name.type#94472B—
string.quoted.double.json, meta.structure.dictionary.value.json string.quoted.double.json, meta.structure.array.json string.quoted.double.json#1B7C85—
constant.numeric.json, meta.structure.dictionary.value.json constant.numeric.json, meta.structure.array.json constant.numeric.json#74672A—
constant.language.json#7752A0—
punctuation.separator.dictionary.key-value.json, punctuation.separator.dictionary.pair.json, punctuation.separator.key-value.json, punctuation.separator.comma.json#7F8A84—
punctuation.support.type.property-name.begin.json, punctuation.support.type.property-name.end.json#B8818A—
support.type.property-name.json, support.type.property-name.json string.quoted.double.json#A14E62—
invalid, invalid.illegal#A65954underline
江南烟雨主题 by zhoulaiqing - VS Code Theme