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#46954A
  • activityBar.background#353535
  • activityBar.foreground#E7E9E8
  • activityBarBadge.background#347d39
  • activityBarBadge.foreground#E7E9E8
  • badge.background#347d39
  • badge.foreground#E7E9E8
  • button.background#347D39
  • button.foreground#E7E9E8
  • button.hoverBackground#46954A
  • button.secondaryForeground#E7E9E8
  • diffEditor.insertedLineBackground#487e0246
  • diffEditor.insertedTextBackground#7bd88f22
  • diffEditor.removedTextBackground#e5534b26
  • diffEditorOverview.insertedForeground#487e02
  • diffEditorOverview.removedForeground#f47067bd
  • dropdown.foreground#C5C8C6
  • dropdown.listBackground#2a2a2a
  • editor.background#1E1E1E
  • editor.findMatchBackground#64b84d5e
  • editor.findMatchBorder#c8ddc237
  • editor.findMatchHighlightBackground#64b84d47
  • editor.foreground#C5C8C6
  • editor.hoverHighlightBackground#575b6180
  • editor.lineHighlightBackground#303030
  • editor.selectionBackground#404040
  • editor.selectionHighlightBackground#404040
  • editor.wordHighlightBackground#575b6180
  • editor.wordHighlightStrongBackground#575b6180
  • editorBracketHighlight.foreground1#C5C8C6
  • editorBracketHighlight.foreground2#E4A05C
  • editorBracketHighlight.foreground3#DE535F
  • editorBracketHighlight.foreground4#99B2D8
  • editorBracketMatch.background#c5c8c64b
  • editorCodeLens.foreground#f6f6f666
  • editorCursor.foreground#E5534B
  • editorError.foreground#c24038
  • editorGroupHeader.noTabsBackground#282828
  • editorGroupHeader.tabsBackground#282828
  • editorGutter.addedBackground#487e02
  • editorGutter.deletedBackground#f47067bd
  • editorGutter.modifiedBackground#578fbe
  • editorIndentGuide.activeBackground#f6f6f65d
  • editorIndentGuide.background#505037
  • editorInfo.foreground#00809b
  • editorInlayHint.background#00000000
  • editorInlayHint.foreground#9A9B99
  • editorLightBulb.foreground#cca700
  • editorLightBulbAutoFix.foreground#00809b
  • editorLineNumber.activeForeground#C5C8C6
  • editorLineNumber.foreground#6a6a6a
  • editorLink.activeForeground#65b84d
  • editorMarkerNavigationError.background#c24038
  • editorMarkerNavigationInfo.background#00809b
  • editorMarkerNavigationWarning.background#cca700
  • editorOverviewRuler.addedForeground#487e02
  • editorOverviewRuler.border#f6f6f622
  • editorOverviewRuler.deletedForeground#f47067bd
  • editorOverviewRuler.errorForeground#c24038
  • editorOverviewRuler.findMatchForeground#46954A
  • editorOverviewRuler.infoForeground#00809b
  • editorOverviewRuler.modifiedForeground#578fbe
  • editorOverviewRuler.warningForeground#cca700
  • editorRuler.foreground#f6f6f622
  • editorSuggestWidget.focusHighlightForeground#E5534B
  • editorSuggestWidget.highlightForeground#E5534B
  • editorSuggestWidget.selectedBackground#45903133
  • editorSuggestWidget.selectedForeground#C5C8C6
  • editorSuggestWidget.selectedIconForeground#C5C8C6
  • editorWarning.foreground#cca700
  • editorWhitespace.foreground#505037
  • editorWidget.resizeBorder#459031
  • errorForeground#c24038
  • focusBorder#6dd1745a
  • foreground#C5C8C6
  • gitDecoration.addedResourceForeground#57ab5a
  • gitDecoration.conflictingResourceForeground#cc6b2c
  • gitDecoration.deletedResourceForeground#e5534b
  • gitDecoration.ignoredResourceForeground#545d68
  • gitDecoration.modifiedResourceForeground#c69026
  • gitDecoration.submoduleResourceForeground#768390
  • gitDecoration.untrackedResourceForeground#57ab5a
  • icon.foreground#C5C8C6
  • input.background#1f1f1f
  • input.border#444444
  • inputOption.activeBorder#6dd1745a
  • inputOption.activeForeground#E7E9E8
  • list.activeSelectionBackground#347d398a
  • list.activeSelectionForeground#E7E9E8
  • list.dropBackground#f6f6f622
  • list.focusBackground#45903133
  • list.focusHighlightForeground#E5534B
  • list.focusOutline#45903133
  • list.highlightForeground#E5534B
  • list.hoverBackground#45903133
  • list.inactiveSelectionBackground#4e4e4e
  • menu.background#2a2a2a
  • menu.border#444444
  • menu.foreground#C5C8C6
  • menubar.selectionBackground#45903133
  • minimap.errorHighlight#c24038
  • minimap.findMatchHighlight#46954A
  • minimap.selectionHighlight#46954A
  • minimap.warningHighlight#cca700
  • minimapGutter.addedBackground#487e02
  • minimapGutter.deletedBackground#f47067bd
  • minimapGutter.modifiedBackground#578fbe
  • notificationsErrorIcon.foreground#c24038
  • notificationsInfoIcon.foreground#00809b
  • notificationsWarningIcon.foreground#cca700
  • panelTitle.activeBorder#46954A
  • panelTitle.activeForeground#E7E9E8
  • peekView.border#459031dd
  • peekViewEditor.background#2a2a2a
  • peekViewEditor.matchHighlightBackground#64b84d47
  • peekViewEditorGutter.background#2a2a2a
  • peekViewResult.background#1E1E1E
  • peekViewResult.matchHighlightBackground#64b84d47
  • peekViewResult.selectionBackground#347d398a
  • peekViewResult.selectionForeground#E7E9E8
  • peekViewTitle.background#1E1E1E
  • peekViewTitleLabel.foreground#C5C8C6
  • pickerGroup.border#444444
  • pickerGroup.foreground#65b84d
  • problemsErrorIcon.foreground#c24038
  • problemsInfoIcon.foreground#00809b
  • problemsWarningIcon.foreground#cca700
  • progressBar.background#347d39
  • selection.background#404040
  • sideBar.background#272727
  • sideBarTitle.foreground#E7E9E8
  • statusBar.background#505050
  • statusBar.debuggingBackground#a22821
  • statusBar.debuggingForeground#E7E9E8
  • statusBar.focusBorder#6dd1745a
  • statusBar.foreground#E7E9E8
  • statusBar.noFolderBackground#505050
  • statusBar.noFolderForeground#E7E9E8
  • statusBarItem.activeBackground#347d398a
  • statusBarItem.hoverBackground#45903133
  • statusBarItem.remoteBackground#347d39
  • statusBarItem.remoteForeground#E7E9E8
  • tab.activeBackground#1f1f1f
  • tab.activeBorder#46954A
  • tab.activeForeground#E7E9E8
  • tab.border#303030
  • tab.hoverBackground#45903133
  • tab.inactiveBackground#2a2a2a
  • tab.inactiveForeground#C5C8C6
  • terminal.ansiBlack#545d68
  • terminal.ansiBlue#539bf5
  • terminal.ansiBrightBlack#636e7b
  • terminal.ansiBrightBlue#6cb6ff
  • terminal.ansiBrightCyan#56d4dd
  • terminal.ansiBrightGreen#6bc46d
  • terminal.ansiBrightMagenta#dcbdfb
  • terminal.ansiBrightRed#ff938a
  • terminal.ansiBrightWhite#cdd9e5
  • terminal.ansiBrightYellow#daaa3f
  • terminal.ansiCyan#39c5cf
  • terminal.ansiGreen#57ab5a
  • terminal.ansiMagenta#b083f0
  • terminal.ansiRed#f47067
  • terminal.ansiWhite#909dab
  • terminal.ansiYellow#c69026
  • textLink.activeForeground#65B84D
  • textLink.foreground#46954A
  • titleBar.activeForeground#C5C8C6
  • tree.indentGuidesStroke#f6f6f644

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#C5C8C6
comment, punctuation.definition.comment#9A9B99italic
variable, entity.name.variable, text.html.derivative entity.name.type, string meta.interpolation#C5C8C6
string, punctuation.definition.string#9AA83A
string.regexp, string.regexp punctuation.definition.string, string.regexp constant.character, string.regexp keyword, string.regexp keyword.operator, string.regexp punctuation.definition#A5C261
constant.numeric, constant.other.color, constant.other.color punctuation.definition#6089B4
constant.numeric keyword.other.unit#9A9B99
constant.language, constant.other.boolean, source.php support.constant.core#E4A05C
keyword, keyword.operator.new, keyword.operator.logical, text.html.derivative keyword.operator.expression.of, storage, punctuation.definition.template-expression, punctuation.section.embedded, meta.interpolation punctuation.definition.interpolation, text.html.derivative punctuation.definition.block, text.html.derivative punctuation.definition.interpolation, constant.character, constant.other.placeholder, source.python storage.type.string, source.php string.quoted punctuation.definition.variable, source.go keyword.type#CE6700
keyword.operator, punctuation, constant.language.import-export-all, keyword.control.ternary, source.r keyword.other#C5C8C6
support.type, keyword.type, entity.name.type.numeric, entity.name.type.primitive, storage.type.numeric, storage.type.string, storage.type.boolean, storage.type.primitive, storage.type.built-in, source.r storage.type#B2A3BD
meta.decorator punctuation.decorator, meta.decorator variable, meta.decorator meta.function-call entity.name.function, meta.function.decorator punctuation.definition.decorator, meta.function.decorator entity.name.function.decorator, meta.function.decorator support.type, meta.declaration.annotation storage.type.annotation, meta.declaration.annotation punctuation.definition.annotation, source.rust meta.attribute, source.rust meta.attribute punctuation.definition.attribute, source.rust meta.attribute punctuation.brackets.attribute#DE535F
variable.other.enummember, entity.name.variable.enum-member, constant.other.enum#E4A05C
constant.language.symbol, constant.other.symbol#A8C2B0
variable.language.self, variable.language.this, variable.language.special.self, variable.language.special.cls, variable.parameter.function.language.special.self, variable.parameter.function.language.special.cls, variable.language.super, keyword.other.this, keyword.other.base, source.python meta.function-call support.type, source.java variable.language#DE535F
variable.parameter, comment.block.documentation variable, meta.function.parameters variable, meta.function.definition variable, entity.name.variable.parameter#A8C2B0
comment.block.documentation, comment.block.documentation punctuation.definition.comment, string.quoted.docstring, string.quoted.docstring punctuation.definition.string, comment.block.javadoc, comment.block.javadoc punctuation.definition.comment, source.julia string.quoted.triple.double#A5C261italic
comment.block.documentation storage, comment.block.documentation punctuation.definition, comment.block.javadoc keyword.other.documentation.javadoc#E4A05Citalic
comment.block.documentation variable, comment.block.javadoc variable.parameterunderline italic
comment.block.documentation entity.name.type#C5C8C6italic
entity.name.type.class, entity.name.type.interface, entity.name.type.enum, entity.name.type.module, entity.name.type.trait, entity.name.type.struct, entity.name.type.namespace, entity.name.function, meta.function support.function.magic, meta.type.declaration entity.name.type, source.rust meta.macro.rules entity.name.function.macro#FFC66D
entity.name.function, variable.function, support.function, variable.language.super, source.python meta.function-call.generic, source.python meta.function-call support.typeitalic
meta.function-call entity.name.function, meta.function-call support.function, meta.function-call variable.parameter.function-call, meta.function.call entity.name.function, meta.method-call entity.name.function, entity.name.function.call, entity.name.function.member, text.html.derivative entity.name.function, source.rust meta.macro entity.name.function.macro#C5C8C6
entity.name.namespace, entity.name.module, entity.name.scope-resolution, entity.name.package, source.php support.other.namespace#D0B344
entity.name.type, entity.other.inherited-class, support.type.exception, support.class, source.java storage.type#99B2D8
support.type.property-name.json#A8C2B0
punctuation.support.type.property-name.begin.json, punctuation.support.type.property-name.end.json#9A9B99
entity.name.tag, meta.tag.sgml.doctype keyword#A8C2B0
entity.other.attribute-name, source.vue meta.attribute keyword.control#FFC66D
punctuation.definition.tag#9A9B99
entity.other.attribute-name punctuation.definition, text.html.derivative punctuation.attribute-shorthand#CE6700
source.css entity.other.attribute-name, source.css entity.name.tag#E4A05C
source.css support.type.property-name, source.css support.type.vendored.property-name#A8C2B0
source.css meta.property-value#C5C8C6italic
source.css entity.other.attribute-name punctuation.definition, source.css entity.name.tag.reference, source.css punctuation.definition.keyword#CE6700
source.css variable#B2A3BD
source.toml keyword.key#A8C2B0
source.toml punctuation.definition.table#9A9B99
source.powershell keyword.operator.comparison, source.shell keyword.operator.logical#DE535F
keyword.other.DML.sql#99B2D8
source.rust meta.macro.rules entity.name.function.macro.rules#B2A3BD
source.rust entity.name.type.option, source.rust entity.name.type.result#E4A05C
source.rust entity.name.type.lifetime, source.rust punctuation.definition.lifetime#D0B344
source.java storage.modifier.import#C5C8C6
source.php string.quoted variable punctuation.definition.variable#C5C8C6
source.go string entity.name.import#9AA83A
source.cs entity.name.function#C5C8C6
source.cpp meta.body.function.definition variable#C5C8C6
source.cpp string.quoted.other.lt-gt.include, source.c string.quoted.other.lt-gt.include#D0B344
source.cpp string.quoted.other.lt-gt.include punctuation.definition.string, source.c string.quoted.other.lt-gt.include punctuation.definition.string#9A9B99
markdown.heading, markup.heading, markup.heading.markdown punctuation.definition.heading.markdown#CE6700
markup.heading entity.name#FFC66D
markup punctuation.definition.italic, markup punctuation.definition.bold, markup punctuation.definition.underline, markup punctuation.definition.strikethrough#9A9B99
markup.italicitalic
markup.boldbold
markup.bold markup.italic, markup.italic markup.boldbold italic
markup.underlineunderline
markup.strikethroughstrikethrough
markup.quote#A5C261
markup.list#A8C2B0
markup.list punctuation.definition.list#E4A05C
markup.underline.link#9A9B99italic underline
string.other.link.title, meta.image string.other.link.description, meta.link.reference#99B2D8
meta.link punctuation.definition, meta.image punctuation.definition#CE6700
string.other.link.description.title#9AA83A
markup.inline.raw, markup.inline.raw punctuation.definition#DE535F
markup.raw.block, markup.fenced_code.block#B2A3BD
markup.fenced_code.block meta.embedded.block#C5C8C6
fenced_code.block.language#D0B344italic
markup.quote punctuation.definition, markup.fenced_code.block punctuation.definition.markdown#CE6700
meta.separator#E4A05C