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#221f1d
  • activityBar.border#cccccc1f
  • activityBar.foreground#c1a08d
  • activityBar.inactiveForeground#c1a08d5a
  • activityBarBadge.background#d77e3c
  • activityBarBadge.foreground#221f1d
  • activityWarningBadge.background#cf1e33
  • badge.background#3b3835
  • badge.foreground#f5d7c2
  • breadcrumb.focusForeground#ffe1cb
  • button.background#c77332
  • button.foreground#221f1d
  • button.hoverBackground#e9893f
  • button.secondaryBackground#343638
  • button.secondaryForeground#f5d7c2
  • button.secondaryHoverBackground#3c3e41
  • checkbox.background#3c3c3c
  • checkbox.border#00000000
  • checkbox.foreground#f5d7c2
  • debugExceptionWidget.background#333333
  • debugExceptionWidget.border#474747
  • debugToolBar.background#333333
  • debugToolBar.border#474747
  • diffEditor.border#444444
  • diffEditor.insertedTextBackground#9bb95533
  • diffEditor.removedTextBackground#ff000033
  • dropdown.background#3c3c3c
  • dropdown.border#00000000
  • dropdown.foreground#f5d7c2
  • editor.background#221f1d
  • editor.findMatchBackground#ea5c004d
  • editor.findMatchBorder#98621a
  • editor.findMatchHighlightBackground#6e573d89
  • editor.findMatchHighlightBorder#f5d7c200
  • editor.findRangeHighlightBackground#413a3a66
  • editor.findRangeHighlightBorder#f5d7c200
  • editor.foldBackground#8f4c2a90
  • editor.foreground#f5d7c2
  • editor.hoverHighlightBackground#c45b2739
  • editor.inactiveSelectionBackground#9d775823
  • editor.lineHighlightBackground#f5d7c20b
  • editor.lineHighlightBorder#f5d7c211
  • editor.rangeHighlightBackground#f5d7c20b
  • editor.rangeHighlightBorder#f5d7c200
  • editor.selectionBackground#9d77584a
  • editor.selectionHighlightBackground#6e573d89
  • editor.selectionHighlightBorder#98621a
  • editor.wordHighlightBackground#c45b275c
  • editorBracketHighlight.foreground1#ffbb54
  • editorBracketHighlight.foreground2#c3529d
  • editorBracketHighlight.foreground3#4497bb
  • editorBracketMatch.background#2d2d2d
  • editorBracketMatch.border#888888
  • editorCodeLens.foreground#888888
  • editorCursor.background#000000
  • editorCursor.foreground#d6bfaf
  • editorError.background#B73A3400
  • editorError.border#f5d7c200
  • editorError.foreground#f48771
  • editorGroup.border#444444
  • editorGroup.emptyBackground#221f1d
  • editorGroupHeader.border#fb6e0700
  • editorGroupHeader.tabsBackground#221f1d
  • editorGroupHeader.tabsBorder#cccccc1f
  • editorGutter.addedBackground#566e21
  • editorGutter.background#221f1d
  • editorGutter.commentGlyphForeground#865151
  • editorGutter.commentRangeForeground#e9893f
  • editorGutter.deletedBackground#94151b
  • editorGutter.foldingControlForeground#c5c5c5
  • editorGutter.modifiedBackground#0c7d9d
  • editorHoverWidget.background#221f1d
  • editorHoverWidget.border#454545
  • editorHoverWidget.foreground#f5d7c2
  • editorIndentGuide.activeBackground1#707070
  • editorIndentGuide.background1#404040
  • editorInfo.background#4490BF00
  • editorInfo.border#4490BF00
  • editorInfo.foreground#75beff
  • editorLineNumber.activeForeground#f5d7c2f0
  • editorLineNumber.foreground#685b52
  • editorLink.activeForeground#db6e14
  • editorMarkerNavigation.background#221f1d
  • editorMarkerNavigationError.background#f48771
  • editorMarkerNavigationInfo.background#75beff
  • editorMarkerNavigationWarning.background#ffbb54
  • editorOverviewRuler.background#25252500
  • editorOverviewRuler.border#7f7f7f4d
  • editorRuler.foreground#5a5a5a
  • editorStickyScroll.shadow#121212
  • editorSuggestWidget.background#221f1d
  • editorSuggestWidget.border#454545
  • editorSuggestWidget.foreground#f5d7c2
  • editorSuggestWidget.highlightForeground#fb6e07
  • editorSuggestWidget.selectedBackground#dc732875
  • editorSuggestWidget.selectedForeground#f5d7c2
  • editorWarning.background#A9904000
  • editorWarning.border#f5d7c200
  • editorWarning.foreground#ffbb54
  • editorWhitespace.foreground#e3e4e229
  • editorWidget.background#221f1d
  • editorWidget.foreground#f5d7c2
  • editorWidget.resizeBorder#5F5F5F
  • focusBorder#b2611e8b
  • foreground#f5d7c2
  • gitDecoration.addedResourceForeground#81b88b
  • gitDecoration.conflictingResourceForeground#6c6cc4
  • gitDecoration.deletedResourceForeground#c74e39
  • gitDecoration.ignoredResourceForeground#8c8c8c
  • gitDecoration.modifiedResourceForeground#e2c08d
  • gitDecoration.stageDeletedResourceForeground#c74e39
  • gitDecoration.stageModifiedResourceForeground#e2c08d
  • gitDecoration.submoduleResourceForeground#8db9e2
  • gitDecoration.untrackedResourceForeground#73c991
  • icon.foreground#f5d7c2
  • input.background#292725
  • input.border#5f4e44
  • input.foreground#f5d7c2
  • input.placeholderForeground#a18c7f
  • inputOption.activeBackground#be5305
  • inputOption.activeBorder#007acc00
  • inputOption.activeForeground#f5d7c2
  • list.activeSelectionBackground#a9571d81
  • list.activeSelectionForeground#f5d7c2
  • list.dropBackground#3d3a38
  • list.focusBackground#fb6e073e
  • list.focusForeground#f5d7c2
  • list.highlightForeground#d86614
  • list.hoverBackground#2f2b27
  • list.hoverForeground#c97a40
  • list.inactiveSelectionBackground#ba61224d
  • list.inactiveSelectionForeground#f5d7c2e8
  • list.warningForeground#dcb13a
  • listFilterWidget.background#fb6e073a
  • listFilterWidget.noMatchesOutline#fb6e07a9
  • listFilterWidget.outline#fb6e073e
  • menu.background#221f1d
  • menu.border#00000032
  • menu.foreground#f5d7c2
  • menu.selectionBackground#2f2b27
  • menu.selectionForeground#eb7d2ee0
  • menu.separatorBackground#2e2e2e
  • menubar.selectionBackground#2f2b27
  • menubar.selectionForeground#f5d7c2
  • minimap.background#221f1d
  • minimap.errorHighlight#f48771
  • minimap.findMatchHighlight#ff73006d
  • minimap.selectionHighlight#fb6e072e
  • minimap.warningHighlight#ffbb54
  • minimapGutter.addedBackground#587c0c
  • minimapGutter.deletedBackground#94151b
  • minimapGutter.modifiedBackground#0c7d9d
  • notificationCenter.border#474747
  • notificationCenterHeader.background#303031
  • notificationCenterHeader.foreground#f5d7c2
  • notifications.background#221f1d
  • notifications.border#303031
  • notifications.foreground#f5d7c2
  • notificationsErrorIcon.foreground#db6060
  • notificationsInfoIcon.foreground#649ed1
  • notificationsWarningIcon.foreground#ffbb54
  • notificationToast.border#474747
  • panel.background#221f1d
  • panel.border#282828
  • panelTitle.activeBorder#ba692e
  • panelTitle.activeForeground#d96d1e
  • panelTitle.inactiveForeground#a18c7f
  • peekView.border#454545
  • peekViewEditor.background#271f1c
  • peekViewEditor.matchHighlightBackground#ea5c004d
  • peekViewEditor.matchHighlightBorder#98621a
  • peekViewEditorGutter.background#1b1513d2
  • peekViewResult.background#181818
  • peekViewResult.fileForeground#f5d7c2
  • peekViewResult.lineForeground#bbbbbb
  • peekViewResult.matchHighlightBackground#ea5c004d
  • peekViewResult.selectionBackground#fb6e0748
  • peekViewResult.selectionForeground#f5d7c2
  • peekViewTitle.background#1e1e1e
  • peekViewTitleDescription.foreground#f5d7c2b3
  • peekViewTitleLabel.foreground#d7d7d7
  • pickerGroup.border#3f3f46
  • pickerGroup.foreground#a14b0d
  • progressBar.background#e9893f
  • scrollbar.shadow#000000
  • scrollbarSlider.activeBackground#bfbfbf66
  • scrollbarSlider.background#94949458
  • scrollbarSlider.hoverBackground#646464b3
  • selection.background#fc690076
  • sideBar.background#221f1d
  • sideBar.border#cccccc1f
  • sideBar.dropBackground#3d3a38
  • sideBar.foreground#c1a08dca
  • sideBarSectionHeader.background#352d27
  • sideBarSectionHeader.border#fb6e0700
  • sideBarSectionHeader.foreground#f5d7c2
  • sideBarTitle.foreground#c1a08dca
  • statusBar.background#282828
  • statusBar.border#3c3836
  • statusBar.debuggingBackground#e9893f
  • statusBar.debuggingBorder#28282800
  • statusBar.debuggingForeground#282828
  • statusBar.foreground#f5d7c2
  • statusBar.noFolderBackground#282828
  • statusBar.noFolderBorder#28282800
  • statusBarItem.remoteBackground#282626
  • statusBarItem.remoteForeground#f5d7c2
  • tab.activeBackground#221f1d
  • tab.activeBorder#221f1d
  • tab.activeBorderTop#d56819
  • tab.activeForeground#f5d7c2
  • tab.hoverBackground#2f2b27
  • tab.inactiveBackground#221f1d
  • tab.inactiveForeground#a18c7f
  • tab.unfocusedActiveForeground#847468
  • tab.unfocusedInactiveForeground#685b52
  • terminal.ansiBlack#3c3836
  • terminal.ansiBlue#458588
  • terminal.ansiBrightBlack#928374
  • terminal.ansiBrightBlue#83a598
  • terminal.ansiBrightCyan#8ec07c
  • terminal.ansiBrightGreen#b8bb26
  • terminal.ansiBrightMagenta#d3869b
  • terminal.ansiBrightRed#fb4934
  • terminal.ansiBrightWhite#ebdbb2
  • terminal.ansiBrightYellow#ffcd57
  • terminal.ansiCyan#689d6a
  • terminal.ansiGreen#98971a
  • terminal.ansiMagenta#b16286
  • terminal.ansiRed#cc241d
  • terminal.ansiWhite#a89984
  • terminal.ansiYellow#d79921
  • terminal.foreground#f5d7c2
  • textLink.activeForeground#a74e0e
  • textLink.foreground#e17c35
  • textPreformat.foreground#ff6a00
  • titleBar.activeBackground#221f1d
  • titleBar.activeForeground#bda595
  • titleBar.border#cccccc1f
  • tree.indentGuidesStroke#585858
  • walkThrough.embeddedEditorBackground#00000050
  • widget.shadow#0000005c

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
text, meta.paragraph#f5d7c2e0—
comment, punctuation.definition.comment#947A83FFitalic
variable, variable.parameter, string constant.other.placeholder, string meta.interpolation, meta.block variable.other, meta.function.call.rust, meta.method-call.java, meta.object.member, support.other.variable, support.variable, string.other.link, string.other.link.title.markdown, entity.other.attribute-name, meta.tag, source.css support.type.property-name, source.sass support.type.property-name, source.scss support.type.property-name, source.less support.type.property-name, source.stylus support.type.property-name, source.postcss support.type.property-name, source.json meta.structure.dictionary.json support.type.property-name.json#E0AA8FFF—
constant.language, support.constant, constant.character, constant.escape, constant.keyword, constant.other.caps, constant.other.php, constant.other.class, constant.other.option, variable.other.constant, source.sass keyword.control, constant.other.reference.link.markdown#E8C391FF—
source.css support.constant, support.constant.property-value, constant.other.color, meta.property-value.css#ACA4B7FF—
invalid, invalid.illegal#EB4747FF—
entity.name.tag, keyword, keyword.operator.new, meta.tag.sgml, markup.deleted.git_gutter, storage.type, storage.modifier, variable.language#de8872—
meta.brace, meta.object.member meta.brace, punctuation, punctuation.separator.inheritance.php, punctuation.definition.tag, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, punctuation variable, punctuation variable.parameter, keyword.other.template, keyword.other.substitution#9F6F63FF—
keyword.operator, punctuation.separator.statement, storage.modifier.reference, meta.separator, punctuation.definition.interpolation, punctuation.definition.template-expression, punctuation.section.embedded#4C928BFF—
entity.name.function, entity.name.method.js, entity.name.module.js, keyword.other.special-method, meta.class-method.js entity.name.function.js, meta.function-call, support.function, variable.function, variable.function.constructor, variable.import.parameter.js, variable.other.class.js, markup.underline.link, meta.global-method#e29c52—
constant.numeric, keyword.other.unit#98B080FF—
string, constant.other.symbol, constant.other.key, markup.inserted.git_gutter, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js#DF8D53FF—
markup.inline.raw.string.markdown, string.regexp, text.html.markdown markup.inline.raw.markdown#E7AA7EFF—
entity.name, entity.other.attribute-name.class, entity.other.inherited-class, markup.changed.git_gutter, meta.use, storage.type.annotation, storage.type.java, storage.modifier.import.java, storage.modifier.package.java, support.class, support.other.namespace.use.php, support.other.namespace.php, support.type, support.type.sys-types, meta.void#c8424d—
*url*, *link*, *uri*, markup.underline—underline
heading.1.markdown punctuation.definition.heading#FF9980FF—
heading.2.markdown punctuation.definition.heading#EA876FFF—
heading.3.markdown punctuation.definition.heading#C76C57FF—
heading.4.markdown punctuation.definition.heading#BA604AFF—
heading.5.markdown punctuation.definition.heading#A85B48FF—
heading.6.markdown punctuation.definition.heading#945747FF—
heading.1.markdown entity.name—bold
heading.2.markdown entity.name#DE658BF2bold
heading.4.markdown entity.name#E36189F2—
heading.5.markdown entity.name#DA6A8CE6—
heading.6.markdown entity.name#D07390D9—
markup.italic, markup.quote—italic
markup.bold, markup.bold string—bold
markup.bold markup.italic, markup.italic markup.bold, markup.quote markup.bold, markup.bold markup.italic string, markup.italic markup.bold string, markup.quote markup.bold string—italic bold
string.other.link.description.title.markdown#CEC1A6FF—