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#C8960C
  • activityBar.background#0E0C08
  • activityBar.border#2A2010
  • activityBar.foreground#B8860B
  • activityBar.inactiveForeground#7A6838
  • activityBarBadge.background#FFD700
  • activityBarBadge.foreground#0E0C08
  • badge.background#FFD700
  • badge.foreground#0E0C08
  • breadcrumb.activeSelectionForeground#C8960C
  • breadcrumb.background#0E0C08
  • breadcrumb.focusForeground#B8860B
  • breadcrumb.foreground#6A502099
  • button.background#C8960C
  • button.foreground#0E0C08
  • button.hoverBackground#FFD700
  • button.secondaryBackground#1A1408
  • button.secondaryForeground#D4A843
  • button.secondaryHoverBackground#241C0C
  • checkbox.background#141008
  • checkbox.border#2A2010
  • checkbox.foreground#D4A843
  • diffEditor.diagonalFill#2A201040
  • diffEditor.insertedLineBackground#8DB87A10
  • diffEditor.insertedTextBackground#8DB87A20
  • diffEditor.removedLineBackground#FF6B2B10
  • diffEditor.removedTextBackground#FF6B2B20
  • dropdown.background#141008
  • dropdown.border#2A2010
  • dropdown.foreground#D4A843
  • dropdown.listBackground#141008
  • editor.background#0E0C08
  • editor.findMatchBackground#C8960C40
  • editor.findMatchHighlightBackground#C8960C20
  • editor.findRangeHighlightBackground#C8960C10
  • editor.foreground#D4A843
  • editor.inactiveSelectionBackground#B8860B30
  • editor.lineHighlightBackground#14100870
  • editor.lineHighlightBorder#00000000
  • editor.rangeHighlightBackground#C8960C08
  • editor.selectionBackground#B8860B35
  • editor.selectionHighlightBackground#B8860B1A
  • editor.wordHighlightBackground#C8960C18
  • editor.wordHighlightStrongBackground#C8960C28
  • editorBracketHighlight.foreground1#FFD700
  • editorBracketHighlight.foreground2#C8960C
  • editorBracketHighlight.foreground3#B8860B
  • editorBracketHighlight.foreground4#A07820
  • editorBracketHighlight.foreground5#FFD700
  • editorBracketHighlight.foreground6#C8960C
  • editorBracketHighlight.unexpectedBracket.foreground#FF6B2B
  • editorBracketMatch.background#C8960C18
  • editorBracketMatch.border#C8960C
  • editorCursor.background#0E0C08
  • editorCursor.foreground#FFD700
  • editorError.foreground#FF6B2B
  • editorGhostText.foreground#D4A84350
  • editorGroup.border#2A2010
  • editorGroupHeader.noTabsBackground#0E0C08
  • editorGroupHeader.tabsBackground#0E0C08
  • editorGutter.addedBackground#8DB87A
  • editorGutter.deletedBackground#FF6B2B
  • editorGutter.modifiedBackground#C8960C
  • editorHint.foreground#7A6030
  • editorHoverWidget.background#141008
  • editorHoverWidget.border#2A2010
  • editorHoverWidget.foreground#D4A843
  • editorIndentGuide.activeBackground1#7A603080
  • editorIndentGuide.background1#2A201050
  • editorInfo.foreground#5B8DA8
  • editorInlayHint.background#1A140890
  • editorInlayHint.foreground#9A7D40
  • editorInlayHint.parameterBackground#1A140890
  • editorInlayHint.parameterForeground#AA8840
  • editorInlayHint.typeBackground#1A140890
  • editorInlayHint.typeForeground#9A7D40
  • editorLineNumber.activeForeground#B8860B
  • editorLineNumber.foreground#5E4E28
  • editorOverviewRuler.addedForeground#8DB87A
  • editorOverviewRuler.border#0E0C08
  • editorOverviewRuler.deletedForeground#FF6B2B
  • editorOverviewRuler.errorForeground#FF6B2B
  • editorOverviewRuler.infoForeground#5B8DA8
  • editorOverviewRuler.modifiedForeground#C8960C
  • editorOverviewRuler.selectionHighlightForeground#B8860B50
  • editorOverviewRuler.warningForeground#C8960C
  • editorRuler.foreground#2A2010
  • editorSuggestWidget.background#0E0C08
  • editorSuggestWidget.border#2A2010
  • editorSuggestWidget.focusHighlightForeground#FFD700
  • editorSuggestWidget.foreground#D4A843
  • editorSuggestWidget.highlightForeground#FFD700
  • editorSuggestWidget.selectedBackground#1E1808
  • editorSuggestWidget.selectedForeground#FFD700
  • editorSuggestWidget.selectedIconForeground#C8960C
  • editorWarning.foreground#C8960C
  • editorWhitespace.foreground#3A2E1050
  • editorWidget.background#0E0C08
  • editorWidget.border#2A2010
  • editorWidget.foreground#D4A843
  • focusBorder#C8960C
  • gitDecoration.addedResourceForeground#8DB87A
  • gitDecoration.conflictingResourceForeground#FF8050
  • gitDecoration.deletedResourceForeground#C84830
  • gitDecoration.ignoredResourceForeground#3A2E10
  • gitDecoration.modifiedResourceForeground#C8960C
  • gitDecoration.untrackedResourceForeground#7A6030
  • icon.foreground#8A7040
  • input.background#1A1408
  • input.border#2A2010
  • input.foreground#D4A843
  • input.placeholderForeground#7A603070
  • inputOption.activeBackground#1E1808
  • inputOption.activeBorder#C8960C
  • inputOption.activeForeground#FFD700
  • keybindingLabel.background#1A1408
  • keybindingLabel.border#2A2010
  • keybindingLabel.bottomBorder#3A2E10
  • keybindingLabel.foreground#D4A843
  • list.activeSelectionBackground#1E1808
  • list.activeSelectionForeground#FFD700
  • list.errorForeground#FF6B2B
  • list.focusBackground#1E1808
  • list.focusForeground#FFD700
  • list.highlightForeground#FFD700
  • list.hoverBackground#241C0C
  • list.inactiveSelectionBackground#1A1408
  • list.inactiveSelectionForeground#D4A843
  • list.warningForeground#C8960C
  • menu.background#141008
  • menu.border#2A2010
  • menu.foreground#D4A843
  • menu.selectionBackground#1E1808
  • menu.selectionForeground#FFD700
  • menu.separatorBackground#2A2010
  • menubar.selectionBackground#1E180850
  • menubar.selectionForeground#FFD700
  • merge.currentContentBackground#C8960C10
  • merge.currentHeaderBackground#C8960C25
  • merge.incomingContentBackground#5B8DA810
  • merge.incomingHeaderBackground#5B8DA825
  • minimap.errorHighlight#FF6B2BB0
  • minimap.findMatchHighlight#C8960C50
  • minimap.selectionHighlight#B8860B50
  • minimap.warningHighlight#C8960C
  • notificationLink.foreground#C8960C
  • notifications.background#141008
  • notifications.border#2A2010
  • notifications.foreground#D4A843
  • notificationsErrorIcon.foreground#FF6B2B
  • notificationsInfoIcon.foreground#5B8DA8
  • notificationsWarningIcon.foreground#C8960C
  • panel.background#0E0C08
  • panel.border#2A2010
  • panelTitle.activeBorder#C8960C
  • panelTitle.activeForeground#D4A843
  • panelTitle.inactiveForeground#9A804890
  • peekView.border#C8960C
  • peekViewEditor.background#141008
  • peekViewEditor.matchHighlightBackground#C8960C25
  • peekViewEditorGutter.background#141008
  • peekViewResult.background#0E0C08
  • peekViewResult.fileForeground#C8960C
  • peekViewResult.lineForeground#D4A843
  • peekViewResult.matchHighlightBackground#C8960C30
  • peekViewResult.selectionBackground#1E1808
  • peekViewResult.selectionForeground#FFD700
  • peekViewTitle.background#1A1408
  • peekViewTitleDescription.foreground#B8860B
  • peekViewTitleLabel.foreground#FFD700
  • problemsErrorIcon.foreground#FF6B2B
  • problemsWarningIcon.foreground#C8960C
  • progressBar.background#C8960C
  • quickInput.background#0E0C08
  • quickInput.foreground#D4A843
  • quickInputList.focusBackground#1E1808
  • quickInputList.focusForeground#FFD700
  • quickInputList.focusIconForeground#C8960C
  • scrollbar.shadow#0E0C0890
  • scrollbarSlider.activeBackground#4A3818
  • scrollbarSlider.background#2A200870
  • scrollbarSlider.hoverBackground#3A2E10
  • selection.background#B8860B50
  • settings.focusedRowBackground#1A140840
  • settings.modifiedItemIndicator#C8960C
  • settings.rowHoverBackground#1A140830
  • sideBar.background#0E0C08
  • sideBar.border#2A2010
  • sideBar.foreground#B8860B
  • sideBarSectionHeader.background#0E0C08
  • sideBarSectionHeader.border#2A2010
  • sideBarSectionHeader.foreground#8A7040
  • sideBarTitle.foreground#8A7040
  • statusBar.background#0E0C08
  • statusBar.border#2A2010
  • statusBar.debuggingBackground#C8500A
  • statusBar.debuggingForeground#FFD700
  • statusBar.foreground#8A7840
  • statusBar.noFolderBackground#0E0C08
  • statusBarItem.hoverBackground#1E180840
  • statusBarItem.remoteBackground#C8960C
  • statusBarItem.remoteForeground#0E0C08
  • tab.activeBackground#141008
  • tab.activeBorder#C8960C
  • tab.activeForeground#F0B030
  • tab.border#0E0C08
  • tab.hoverBackground#1A1408
  • tab.hoverForeground#C8960C
  • tab.inactiveBackground#0E0C08
  • tab.inactiveForeground#6A5430
  • tab.unfocusedActiveBorder#7A6030
  • tab.unfocusedActiveForeground#B8860B
  • tab.unfocusedInactiveForeground#8A7040
  • 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#D4A843
  • terminal.ansiBrightYellow#FFD700
  • terminal.ansiCyan#5AADA8
  • terminal.ansiGreen#6D9860
  • terminal.ansiMagenta#9870A0
  • terminal.ansiRed#C84830
  • terminal.ansiWhite#B89050
  • terminal.ansiYellow#C8960C
  • terminal.foreground#C8960C
  • terminal.selectionBackground#B8860B30
  • terminalCursor.background#0E0C08
  • terminalCursor.foreground#FFD700
  • textLink.activeForeground#FFD700
  • textLink.foreground#C8960C
  • titleBar.activeBackground#0E0C08
  • titleBar.activeForeground#8A7030
  • titleBar.border#2A2010
  • titleBar.inactiveBackground#0E0C08
  • titleBar.inactiveForeground#8A7040
  • widget.shadow#0E0C0880

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#766035—
variable, string constant.other.placeholder#D4A843—
variable.language#A89050—
variable.parameter#D4B070italic
variable.other.property, variable.other.object.property, variable.other.readwrite.property#B89050—
entity.name.tag#C8960C—
punctuation.definition.tag, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, punctuation.separator.inheritance.php#A89050—
constant.other.color#FFD700—
invalid, invalid.illegal#FF6B2B—
keyword, storage.type, storage.modifier#9A8040—
keyword.control, punctuation.section.embedded, keyword.other.template, keyword.other.substitution#AA9050—
keyword.operator, punctuation.accessor#B09030—
storage#9A8040—
entity.name.function, variable.function, support.function, keyword.other.special-method#FFD700—
entity.name.method.js, entity.name.method#F0B030italic
meta.method.js#D4A843—
constant.numeric, support.constant, constant.character, constant.escape, keyword.other.unit, constant.language.boolean, constant.language#D48840—
string, constant.other.symbol, constant.other.key, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js#8DB8A0—
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#C8960C—
entity.name.class, entity.name.type.class, meta.class, entity.name.type#F0B030—
entity.name.type.interface, entity.name.type.struct#C8A060—
entity.name.namespace, entity.name.type.namespace, entity.name.module#A07820—
meta.decorator, entity.name.function.decorator, punctuation.decorator, meta.decorator punctuation.decorator#9870A0—
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#C8960C—
support.other.variable, string.other.link#C8A060—
support.type.property-name.json#C8960C—
meta.block variable.other#D4A843—
punctuation#9A8040—
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#FFD700—
markup.italic#C8A060italic
markup.bold, markup.bold string#FFD700bold
markup.underline#C8960Cunderline
markup.raw.block, markup.inline.raw.markdown, markup.fenced_code.block.markdown#8DB8A0—
markup.quote#AA9050italic
markup.list.unnumbered.markdown, markup.list.numbered.markdown#C8960C—
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#72C8B4—
punctuation.definition.math.begin.latex, punctuation.definition.math.end.latex, punctuation.definition.math.latex#FFD700—
variable.other.math.latex, variable.parameter.math.latex, support.variable.math.latex, variable.other.math, variable.parameter.function.latex#D4B070italic
markup.deleted.git_gutter#FF6B2B—
token.info-token#5B8DA8—
token.warn-token#C8960C—
token.error-token#FF6B2B—
token.debug-token#9870A0—
Imperator by Sevs Ziegler - VS Code Theme