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#bbdb8d
  • activityBar.background#121a10
  • activityBar.border#526344
  • activityBar.foreground#bbdb8d
  • activityBar.inactiveForeground#adba95
  • activityBarBadge.background#bbdb8d
  • activityBarBadge.foreground#192015
  • badge.background#bbdb8d
  • badge.foreground#192015
  • breadcrumb.background#263020
  • breadcrumb.foreground#cad6b4
  • button.background#bbdb8d
  • button.foreground#192015
  • button.hoverBackground#c3df9a
  • button.secondaryBackground#394930
  • button.secondaryForeground#ecf4df
  • button.secondaryHoverBackground#303e28
  • charts.blue#9fcfd6
  • charts.green#a9ddb4
  • charts.orange#e9c18f
  • charts.purple#d2b3e7
  • charts.red#ff9faa
  • charts.yellow#efd18e
  • contrastActiveBorder#bbdb8d
  • debugConsole.errorForeground#ff9faa
  • debugConsole.infoForeground#9fcfd6
  • debugConsole.sourceForeground#cad6b4
  • debugConsole.warningForeground#efd18e
  • debugExceptionWidget.background#263020
  • debugExceptionWidget.border#ff9faa
  • debugIcon.breakpointForeground#ff9faa
  • debugIcon.disconnectForeground#ff9faa
  • debugIcon.pauseForeground#e9c18f
  • debugIcon.startForeground#a9ddb4
  • debugIcon.stepIntoForeground#e9c18f
  • debugIcon.stepOutForeground#e9c18f
  • debugIcon.stepOverForeground#e9c18f
  • debugIcon.stopForeground#ff9faa
  • debugToolBar.background#263020
  • descriptionForeground#adba95
  • diffEditor.insertedLineBackground#a9ddb40c
  • diffEditor.insertedTextBackground#a9ddb41c
  • diffEditor.removedLineBackground#ff9faa0c
  • diffEditor.removedTextBackground#ff9faa1c
  • disabledForeground#adba95
  • dropdown.background#263020
  • dropdown.border#526344
  • dropdown.foreground#ecf4df
  • editor.background#192015
  • editor.findMatchBackground#363726
  • editor.findMatchBorder#e9c18f
  • editor.findMatchHighlightBackground#363726
  • editor.findMatchHighlightBorder#e9c18f
  • editor.findRangeHighlightBorder#e9c18f
  • editor.focusedStackFrameHighlightBackground#a9ddb418
  • editor.foreground#ecf4df
  • editor.inactiveSelectionBackground#394930
  • editor.lineHighlightBackground#303e28
  • editor.selectionBackground#394930
  • editor.selectionForeground#ecf4df
  • editor.selectionHighlightBackground#bbdb8d16
  • editor.stackFrameHighlightBackground#e9c18f18
  • editor.wordHighlightBackground#bbdb8d16
  • editor.wordHighlightStrongBackground#bbdb8d16
  • editorBracketHighlight.foreground1#bbdb8d
  • editorBracketHighlight.foreground2#e9c18f
  • editorBracketHighlight.foreground3#9fcfd6
  • editorBracketHighlight.foreground4#d2b3e7
  • editorBracketHighlight.foreground5#f0b5be
  • editorBracketHighlight.foreground6#cad8d2
  • editorBracketHighlight.unexpectedBracket.foreground#ff9faa
  • editorBracketMatch.background#303e28
  • editorBracketMatch.border#adba95
  • editorCursor.foreground#bbdb8d
  • editorError.foreground#ff9faa
  • editorGroup.border#526344
  • editorGroupHeader.tabsBackground#263020
  • editorGroupHeader.tabsBorder#526344
  • editorGutter.addedBackground#a9ddb4
  • editorGutter.deletedBackground#ff9faa
  • editorGutter.modifiedBackground#e9c18f
  • editorHint.foreground#a9ddb4
  • editorHoverWidget.background#263020
  • editorHoverWidget.border#526344
  • editorHoverWidget.foreground#ecf4df
  • editorIndentGuide.activeBackground1#adba95
  • editorIndentGuide.background1#4d5642
  • editorInfo.foreground#9fcfd6
  • editorLineNumber.activeForeground#bbdb8d
  • editorLineNumber.foreground#adba95
  • editorOverviewRuler.addedForeground#a9ddb4
  • editorOverviewRuler.deletedForeground#ff9faa
  • editorOverviewRuler.errorForeground#ff9faa
  • editorOverviewRuler.modifiedForeground#e9c18f
  • editorOverviewRuler.warningForeground#efd18e
  • editorRuler.foreground#4d5642
  • editorWarning.foreground#efd18e
  • editorWhitespace.foreground#4d5642
  • editorWidget.background#263020
  • editorWidget.border#526344
  • editorWidget.foreground#ecf4df
  • errorForeground#ff9faa
  • focusBorder#bbdb8d
  • foreground#ecf4df
  • gitDecoration.addedResourceForeground#a9ddb4
  • gitDecoration.conflictingResourceForeground#ff9faa
  • gitDecoration.deletedResourceForeground#ff9faa
  • gitDecoration.ignoredResourceForeground#adba95
  • gitDecoration.modifiedResourceForeground#e9c18f
  • gitDecoration.renamedResourceForeground#9fcfd6
  • gitDecoration.untrackedResourceForeground#a9ddb4
  • input.background#263020
  • input.border#526344
  • input.foreground#ecf4df
  • input.placeholderForeground#adba95
  • inputOption.activeBackground#394930
  • inputOption.activeBorder#bbdb8d
  • inputOption.activeForeground#ecf4df
  • inputOption.hoverBackground#303e28
  • inputValidation.errorBackground#302d24
  • inputValidation.errorBorder#ff9faa
  • inputValidation.errorForeground#ecf4df
  • inputValidation.infoBackground#263228
  • inputValidation.infoBorder#9fcfd6
  • inputValidation.infoForeground#ecf4df
  • inputValidation.warningBackground#2e3221
  • inputValidation.warningBorder#efd18e
  • inputValidation.warningForeground#ecf4df
  • list.activeSelectionBackground#394930
  • list.activeSelectionForeground#ecf4df
  • list.errorForeground#ff9faa
  • list.filterMatchBackground#394930
  • list.focusBackground#394930
  • list.focusForeground#ecf4df
  • list.focusHighlightForeground#bbdb8d
  • list.focusOutline#bbdb8d
  • list.highlightForeground#ecf4df
  • list.hoverBackground#303e28
  • list.hoverForeground#ecf4df
  • list.inactiveSelectionBackground#394930
  • list.inactiveSelectionForeground#ecf4df
  • list.warningForeground#efd18e
  • menu.background#263020
  • menu.border#526344
  • menu.foreground#ecf4df
  • menu.selectionBackground#394930
  • menu.selectionForeground#ecf4df
  • menu.separatorBackground#526344
  • minimap.errorHighlight#ff9faa
  • minimap.warningHighlight#efd18e
  • notebook.cellEditorBackground#192015
  • notificationCenterHeader.background#121a10
  • notificationCenterHeader.foreground#cad6b4
  • notifications.background#263020
  • notifications.border#526344
  • notifications.foreground#ecf4df
  • notificationsErrorIcon.foreground#ff9faa
  • notificationsInfoIcon.foreground#9fcfd6
  • notificationsWarningIcon.foreground#efd18e
  • panel.background#263020
  • panel.border#526344
  • panelTitle.activeBorder#bbdb8d
  • panelTitle.activeForeground#ecf4df
  • panelTitle.inactiveForeground#cad6b4
  • peekView.border#bbdb8d
  • peekViewEditor.background#263020
  • peekViewEditor.matchHighlightBackground#394930
  • peekViewResult.background#263020
  • peekViewResult.fileForeground#ecf4df
  • peekViewResult.lineForeground#ecf4df
  • peekViewResult.matchHighlightBackground#394930
  • peekViewResult.selectionBackground#394930
  • peekViewResult.selectionForeground#ecf4df
  • peekViewTitle.background#263020
  • peekViewTitleDescription.foreground#cad6b4
  • peekViewTitleLabel.foreground#ecf4df
  • pickerGroup.border#526344
  • pickerGroup.foreground#bbdb8d
  • problemsErrorIcon.foreground#ff9faa
  • problemsInfoIcon.foreground#9fcfd6
  • problemsWarningIcon.foreground#efd18e
  • progressBar.background#bbdb8d
  • quickInput.background#263020
  • quickInput.foreground#ecf4df
  • quickInputList.focusBackground#394930
  • quickInputList.focusForeground#ecf4df
  • scrollbar.shadow#19201599
  • scrollbarSlider.activeBackground#adba9580
  • scrollbarSlider.background#adba9540
  • scrollbarSlider.hoverBackground#adba9560
  • selection.background#394930
  • sideBar.background#121a10
  • sideBar.border#526344
  • sideBar.foreground#cad6b4
  • sideBarSectionHeader.background#121a10
  • sideBarSectionHeader.foreground#ecf4df
  • sideBarTitle.foreground#ecf4df
  • statusBar.background#121a10
  • statusBar.border#526344
  • statusBar.debuggingBackground#394930
  • statusBar.debuggingForeground#ecf4df
  • statusBar.foreground#ecf4df
  • statusBar.noFolderBackground#121a10
  • statusBar.noFolderForeground#ecf4df
  • statusBarItem.hoverBackground#303e28
  • statusBarItem.remoteBackground#bbdb8d
  • statusBarItem.remoteForeground#192015
  • tab.activeBackground#192015
  • tab.activeBorderTop#bbdb8d
  • tab.activeForeground#ecf4df
  • tab.border#526344
  • tab.hoverBackground#303e28
  • tab.inactiveBackground#263020
  • tab.inactiveForeground#adba95
  • tab.unfocusedActiveForeground#cad6b4
  • tab.unfocusedInactiveForeground#adba95
  • terminal.ansiBlack#adba95
  • terminal.ansiBlue#9fcfd6
  • terminal.ansiBrightBlack#b5c19e
  • terminal.ansiBrightBlue#acdce3
  • terminal.ansiBrightCyan#c8e89a
  • terminal.ansiBrightGreen#b6eac1
  • terminal.ansiBrightMagenta#dfc0f4
  • terminal.ansiBrightRed#ffacb7
  • terminal.ansiBrightWhite#d7e3c1
  • terminal.ansiBrightYellow#fcde9b
  • terminal.ansiCyan#bbdb8d
  • terminal.ansiGreen#a9ddb4
  • terminal.ansiMagenta#d2b3e7
  • terminal.ansiRed#ff9faa
  • terminal.ansiWhite#cad6b4
  • terminal.ansiYellow#efd18e
  • terminal.background#192015
  • terminal.border#526344
  • terminal.findMatchBackground#394930
  • terminal.findMatchBorder#e9c18f
  • terminal.findMatchHighlightBackground#303e28
  • terminal.findMatchHighlightBorder#bbdb8d
  • terminal.foreground#ecf4df
  • terminal.selectionBackground#394930
  • terminalCursor.background#192015
  • terminalCursor.foreground#bbdb8d
  • testing.iconFailed#ff9faa
  • testing.iconPassed#a9ddb4
  • testing.iconQueued#adba95
  • testing.iconSkipped#adba95
  • testing.iconUnset#adba95
  • testing.runAction#a9ddb4
  • textBlockQuote.background#303e28
  • textBlockQuote.border#bbdb8d
  • textCodeBlock.background#303e28
  • textLink.activeForeground#bbdb8d
  • textLink.foreground#bbdb8d
  • textPreformat.foreground#e9c18f
  • titleBar.activeBackground#121a10
  • titleBar.activeForeground#ecf4df
  • titleBar.border#526344
  • titleBar.inactiveBackground#121a10
  • titleBar.inactiveForeground#adba95
  • toolbar.hoverBackground#303e28
  • widget.border#526344
  • widget.shadow#19201599

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#adba95italic
keyword, storage.type, storage.modifier#bbdb8d
string, markup.inline.raw, markup.fenced_code#e9c18f
entity.name.function, support.function, variable.function, meta.function-call#9fcfd6
entity.name.type, entity.name.class, support.type, support.class, entity.name.namespace#d2b3e7
constant.numeric#f0b5be
constant.language, variable.other.constant, constant.other#f0b5be
keyword.operator#cad8d2
variable, variable.other.readwrite#ecf4df
variable.parameter#cad6b4
variable.other.property, support.variable.property, support.type.property-name#9fcfd6
punctuation, meta.brace#cad6b4
entity.name.tag#bbdb8d
entity.other.attribute-name#e9c18f
string.regexp#d2b3e7
constant.character.escape#cad8d2
markup.heading, entity.name.section#bbdb8dbold
markup.italicitalic
markup.boldbold
invalid#ff9faaunderline
markup.inserted#a9ddb4
markup.deleted#ff9faa