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.activeBackground#1A1408
  • activityBar.activeBorder#BC9018
  • activityBar.background#0E0C08
  • activityBar.border#2A2010
  • activityBar.foreground#B8860B
  • activityBar.inactiveForeground#5A4820
  • activityBarBadge.background#EFC92E
  • activityBarBadge.foreground#0E0C08
  • badge.background#EFC92E
  • badge.foreground#0E0C08
  • breadcrumb.activeSelectionForeground#BC9018
  • breadcrumb.background#0E0C08
  • breadcrumb.focusForeground#B8860B
  • breadcrumb.foreground#6A502099
  • button.background#BC9018
  • button.foreground#0E0C08
  • button.hoverBackground#EFC92E
  • button.secondaryBackground#1A1408
  • button.secondaryForeground#CDA44C
  • button.secondaryHoverBackground#241C0C
  • checkbox.background#141008
  • checkbox.border#2A2010
  • checkbox.foreground#CDA44C
  • diffEditor.diagonalFill#2A201040
  • diffEditor.insertedLineBackground#8DB87A10
  • diffEditor.insertedTextBackground#8DB87A20
  • diffEditor.removedLineBackground#FF6B2B10
  • diffEditor.removedTextBackground#FF6B2B20
  • dropdown.background#141008
  • dropdown.border#2A2010
  • dropdown.foreground#CDA44C
  • dropdown.listBackground#141008
  • editor.background#0E0C08
  • editor.findMatchBackground#BC901840
  • editor.findMatchHighlightBackground#BC901820
  • editor.findRangeHighlightBackground#BC901810
  • editor.foreground#CDA44C
  • editor.inactiveSelectionBackground#B8860B20
  • editor.lineHighlightBackground#14100870
  • editor.lineHighlightBorder#00000000
  • editor.rangeHighlightBackground#BC901808
  • editor.selectionBackground#B8860B35
  • editor.selectionHighlightBackground#B8860B1A
  • editor.wordHighlightBackground#BC901818
  • editor.wordHighlightStrongBackground#BC901828
  • editorBracketHighlight.foreground1#EFC92E
  • editorBracketHighlight.foreground2#BC9018
  • editorBracketHighlight.foreground3#B8860B
  • editorBracketHighlight.foreground4#9A7524
  • editorBracketHighlight.foreground5#EFC92E
  • editorBracketHighlight.foreground6#BC9018
  • editorBracketHighlight.unexpectedBracket.foreground#FF6B2B
  • editorBracketMatch.background#BC901818
  • editorBracketMatch.border#BC9018
  • editorCursor.background#0E0C08
  • editorCursor.foreground#EFC92E
  • editorError.foreground#FF6B2B
  • editorGhostText.foreground#CDA44C50
  • editorGroup.border#2A2010
  • editorGroupHeader.noTabsBackground#0E0C08
  • editorGroupHeader.tabsBackground#0E0C08
  • editorGutter.addedBackground#8DB87A
  • editorGutter.deletedBackground#FF6B2B
  • editorGutter.modifiedBackground#BC9018
  • editorHint.foreground#7A6030
  • editorHoverWidget.background#141008
  • editorHoverWidget.border#2A2010
  • editorHoverWidget.foreground#CDA44C
  • editorIndentGuide.activeBackground1#7A603080
  • editorIndentGuide.background1#2A201050
  • editorInfo.foreground#5B8DA8
  • editorInlayHint.background#1A140890
  • editorInlayHint.foreground#8A6D35
  • editorInlayHint.parameterBackground#1A140890
  • editorInlayHint.parameterForeground#9A7838
  • editorInlayHint.typeBackground#1A140890
  • editorInlayHint.typeForeground#8A6D35
  • editorLineNumber.activeForeground#B8860B
  • editorLineNumber.foreground#4A3C1C
  • editorOverviewRuler.addedForeground#8DB87A
  • editorOverviewRuler.border#0E0C08
  • editorOverviewRuler.deletedForeground#FF6B2B
  • editorOverviewRuler.errorForeground#FF6B2B
  • editorOverviewRuler.infoForeground#5B8DA8
  • editorOverviewRuler.modifiedForeground#BC9018
  • editorOverviewRuler.selectionHighlightForeground#B8860B50
  • editorOverviewRuler.warningForeground#BC9018
  • editorRuler.foreground#2A2010
  • editorSuggestWidget.background#0E0C08
  • editorSuggestWidget.border#2A2010
  • editorSuggestWidget.focusHighlightForeground#EFC92E
  • editorSuggestWidget.foreground#CDA44C
  • editorSuggestWidget.highlightForeground#EFC92E
  • editorSuggestWidget.selectedBackground#1E1808
  • editorSuggestWidget.selectedForeground#EFC92E
  • editorSuggestWidget.selectedIconForeground#BC9018
  • editorWarning.foreground#BC9018
  • editorWhitespace.foreground#3A2E1050
  • editorWidget.background#0E0C08
  • editorWidget.border#2A2010
  • editorWidget.foreground#CDA44C
  • focusBorder#BC9018
  • gitDecoration.addedResourceForeground#8DB87A
  • gitDecoration.conflictingResourceForeground#FF8050
  • gitDecoration.deletedResourceForeground#C84830
  • gitDecoration.ignoredResourceForeground#3A2E10
  • gitDecoration.modifiedResourceForeground#BC9018
  • gitDecoration.untrackedResourceForeground#7A6030
  • icon.foreground#7A6030
  • input.background#1A1408
  • input.border#2A2010
  • input.foreground#CDA44C
  • input.placeholderForeground#7A603070
  • inputOption.activeBackground#1E1808
  • inputOption.activeBorder#BC9018
  • inputOption.activeForeground#EFC92E
  • keybindingLabel.background#1A1408
  • keybindingLabel.border#2A2010
  • keybindingLabel.bottomBorder#3A2E10
  • keybindingLabel.foreground#CDA44C
  • list.activeSelectionBackground#1E1808
  • list.activeSelectionForeground#EFC92E
  • list.errorForeground#FF6B2B
  • list.focusBackground#1E1808
  • list.focusForeground#EFC92E
  • list.highlightForeground#EFC92E
  • list.hoverBackground#241C0C
  • list.inactiveSelectionBackground#1A1408
  • list.inactiveSelectionForeground#CDA44C
  • list.warningForeground#BC9018
  • menu.background#141008
  • menu.border#2A2010
  • menu.foreground#CDA44C
  • menu.selectionBackground#1E1808
  • menu.selectionForeground#EFC92E
  • menu.separatorBackground#2A2010
  • menubar.selectionBackground#1E180850
  • menubar.selectionForeground#EFC92E
  • merge.currentContentBackground#BC901810
  • merge.currentHeaderBackground#BC901825
  • merge.incomingContentBackground#5B8DA810
  • merge.incomingHeaderBackground#5B8DA825
  • minimap.errorHighlight#FF6B2BB0
  • minimap.findMatchHighlight#BC901850
  • minimap.selectionHighlight#B8860B50
  • minimap.warningHighlight#BC9018
  • notificationLink.foreground#BC9018
  • notifications.background#141008
  • notifications.border#2A2010
  • notifications.foreground#CDA44C
  • notificationsErrorIcon.foreground#FF6B2B
  • notificationsInfoIcon.foreground#5B8DA8
  • notificationsWarningIcon.foreground#BC9018
  • panel.background#0E0C08
  • panel.border#2A2010
  • panelTitle.activeBorder#BC9018
  • panelTitle.activeForeground#CDA44C
  • panelTitle.inactiveForeground#7A603090
  • peekView.border#BC9018
  • peekViewEditor.background#141008
  • peekViewEditor.matchHighlightBackground#BC901825
  • peekViewEditorGutter.background#141008
  • peekViewResult.background#0E0C08
  • peekViewResult.fileForeground#BC9018
  • peekViewResult.lineForeground#CDA44C
  • peekViewResult.matchHighlightBackground#BC901830
  • peekViewResult.selectionBackground#1E1808
  • peekViewResult.selectionForeground#EFC92E
  • peekViewTitle.background#1A1408
  • peekViewTitleDescription.foreground#B8860B
  • peekViewTitleLabel.foreground#EFC92E
  • problemsErrorIcon.foreground#FF6B2B
  • problemsWarningIcon.foreground#BC9018
  • progressBar.background#BC9018
  • quickInput.background#0E0C08
  • quickInput.foreground#CDA44C
  • quickInputList.focusBackground#1E1808
  • quickInputList.focusForeground#EFC92E
  • quickInputList.focusIconForeground#BC9018
  • scrollbar.shadow#0E0C0890
  • scrollbarSlider.activeBackground#4A3818
  • scrollbarSlider.background#2A200870
  • scrollbarSlider.hoverBackground#3A2E10
  • selection.background#B8860B50
  • settings.focusedRowBackground#1A140840
  • settings.modifiedItemIndicator#BC9018
  • settings.rowHoverBackground#1A140830
  • sideBar.background#0E0C08
  • sideBar.border#2A2010
  • sideBar.foreground#B8860B
  • sideBarSectionHeader.background#0E0C08
  • sideBarSectionHeader.border#2A2010
  • sideBarSectionHeader.foreground#7A6030
  • sideBarTitle.foreground#7A6030
  • statusBar.background#0E0C08
  • statusBar.border#2A2010
  • statusBar.debuggingBackground#C8500A
  • statusBar.debuggingForeground#EFC92E
  • statusBar.foreground#7A6030
  • statusBar.noFolderBackground#0E0C08
  • statusBarItem.hoverBackground#1E180840
  • statusBarItem.remoteBackground#BC9018
  • statusBarItem.remoteForeground#0E0C08
  • tab.activeBackground#141008
  • tab.activeBorder#BC9018
  • tab.activeForeground#E0A838
  • tab.border#0E0C08
  • tab.hoverBackground#1A1408
  • tab.hoverForeground#BC9018
  • tab.inactiveBackground#0E0C08
  • tab.inactiveForeground#4A3818
  • tab.unfocusedActiveBorder#7A6030
  • tab.unfocusedActiveForeground#B8860B
  • tab.unfocusedInactiveForeground#6A5228
  • terminal.ansiBlack#0E0C08
  • terminal.ansiBlue#5B8DA8
  • terminal.ansiBrightBlack#4A3818
  • terminal.ansiBrightBlue#7AAEC8
  • terminal.ansiBrightCyan#7ACAB0
  • terminal.ansiBrightGreen#8DB87A
  • terminal.ansiBrightMagenta#C89860
  • terminal.ansiBrightRed#FF8050
  • terminal.ansiBrightWhite#CDA44C
  • terminal.ansiBrightYellow#EFC92E
  • terminal.ansiCyan#5AADA8
  • terminal.ansiGreen#6D9860
  • terminal.ansiMagenta#92709A
  • terminal.ansiRed#C84830
  • terminal.ansiWhite#B89050
  • terminal.ansiYellow#BC9018
  • terminal.foreground#BC9018
  • terminal.selectionBackground#B8860B30
  • terminalCursor.background#0E0C08
  • terminalCursor.foreground#EFC92E
  • textLink.activeForeground#EFC92E
  • textLink.foreground#BC9018
  • titleBar.activeBackground#0E0C08
  • titleBar.activeForeground#6A5020
  • titleBar.border#2A2010
  • titleBar.inactiveBackground#0E0C08
  • titleBar.inactiveForeground#7A6030
  • widget.shadow#0E0C0880

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#5A4418
variable, string constant.other.placeholder#CDA44C
variable.language#8A7040
variable.parameter#CAAA70italic
variable.other.property, variable.other.object.property, variable.other.readwrite.property#B89050
entity.name.tag#BC9018
punctuation.definition.tag, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, punctuation.separator.inheritance.php#8A7040
constant.other.color#EFC92E
invalid, invalid.illegal#FF6B2B
keyword, storage.type, storage.modifier#7A6030
keyword.control, punctuation.section.embedded, keyword.other.template, keyword.other.substitution#8A7040
keyword.operator, punctuation.accessor#9A7524
storage#7A6030
entity.name.function, variable.function, support.function, keyword.other.special-method#EFC92E
entity.name.method.js, entity.name.method#E0A838italic
meta.method.js#CDA44C
constant.numeric, support.constant, constant.character, constant.escape, keyword.other.unit, constant.language.boolean, constant.language#E0A838
string, constant.other.symbol, constant.other.key, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js#8AAE98
entity.name, support.type, support.class, support.other.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types#BC9018
entity.name.class, entity.name.type.class, meta.class, entity.name.type#E0A838
entity.name.type.interface, entity.name.type.struct#CAAA70
entity.name.namespace, entity.name.type.namespace, entity.name.module#9A7524
meta.decorator, entity.name.function.decorator, punctuation.decorator, meta.decorator punctuation.decorator#92709A
source.css support.type.property-name, source.sass support.type.property-name, source.scss support.type.property-name, source.less support.type.property-name, meta.property-name.css, meta.property-value.scss, meta.property-value.css#B89050
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#BC9018
support.other.variable, string.other.link#CAAA70
support.type.property-name.json#BC9018
meta.block variable.other#CDA44C
punctuation#7A6030
punctuation.definition.string, punctuation.support.type.property-name, punctuation.support.type.property-name.begin.json, punctuation.support.type.property-name.end.json#6A5020
markup.heading, markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown, markup.inserted.git_gutter#EFC92E
markup.italic#CAAA70italic
markup.bold, markup.bold string#EFC92Ebold
markup.underline#BC9018underline
markup.raw.block, markup.inline.raw.markdown, markup.fenced_code.block.markdown#8AAE98
markup.quote#8A7040italic
markup.list.unnumbered.markdown, markup.list.numbered.markdown#BC9018
meta.math.inline.latex, meta.math.display.latex, meta.math.block.environment.latex, string.other.math.latex, string.other.math.tex, markup.math.inline, markup.math.block, markup.math.inline.markdown, markup.math.block.markdown#74BCAA
punctuation.definition.math.begin.latex, punctuation.definition.math.end.latex, punctuation.definition.math.latex#EFC92E
markup.deleted.git_gutter#FF6B2B
token.info-token#5B8DA8
token.warn-token#BC9018
token.error-token#FF6B2B
token.debug-token#92709A