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#9a7820
  • activityBar.background#f2ede4
  • activityBar.border#ddd4c0
  • activityBar.foreground#3a3828
  • activityBar.inactiveForeground#92907c80
  • activityBarBadge.background#9a7820
  • activityBarBadge.foreground#f8f4ea
  • badge.background#e6dfd4
  • badge.foreground#605e50
  • breadcrumb.activeSelectionForeground#9a7820
  • breadcrumb.background#f8f4ea
  • breadcrumb.focusForeground#3a3828
  • breadcrumb.foreground#8a8878
  • breadcrumbPicker.background#f2ede4
  • button.background#c8c0a0
  • button.border#b8b098
  • button.foreground#2a2818
  • button.hoverBackground#b8b090
  • button.secondaryBackground#d8d4c8
  • button.secondaryForeground#605e50
  • button.secondaryHoverBackground#c8c4b8
  • checkbox.background#ebe4d8
  • checkbox.border#ddd4c0
  • checkbox.foreground#2a2818
  • debugConsole.errorForeground#8a4040
  • debugConsole.infoForeground#5a6870
  • debugConsole.warningForeground#8a7830
  • debugIcon.continueForeground#4a7a30
  • debugIcon.disconnectForeground#8a4040
  • debugIcon.pauseForeground#5a6870
  • debugIcon.restartForeground#4a7a30
  • debugIcon.startForeground#4a7a30
  • debugIcon.stepIntoForeground#5a6870
  • debugIcon.stepOutForeground#5a6870
  • debugIcon.stepOverForeground#5a6870
  • debugIcon.stopForeground#8a4040
  • debugToolBar.background#e6dfd4
  • diffEditor.border#ddd4c0
  • diffEditor.diagonalFill#ddd4c0
  • diffEditor.insertedLineBackground#4a7a3010
  • diffEditor.insertedTextBackground#4a7a3020
  • diffEditor.removedLineBackground#8a404010
  • diffEditor.removedTextBackground#8a404020
  • diffEditor.unchangedCodeBackground#f8f4ea
  • diffEditor.unchangedRegionBackground#ebe4d8
  • diffEditor.unchangedRegionForeground#8a8878
  • diffEditorGutter.insertedLineBackground#4a7a3040
  • diffEditorGutter.removedLineBackground#8a404040
  • disabledForeground#8a887880
  • dropdown.background#ebe4d8
  • dropdown.border#ddd4c0
  • dropdown.listBackground#f3ede4
  • editor.background#f8f4ea
  • editor.findMatchBackground#9a782040
  • editor.findMatchBorder#9a782080
  • editor.findMatchHighlightBackground#9a782020
  • editor.findMatchHighlightBorder#9a7820
  • editor.findRangeHighlightBackground#9a782010
  • editor.foldBackground#ebe4d8
  • editor.foreground#2a2818
  • editor.inactiveSelectionBackground#9a782008
  • editor.lineHighlightBackground#eee6d0
  • editor.rangeHighlightBorder#9a782040
  • editor.selectionBackground#9a782030
  • editor.selectionForeground#2a2818
  • editor.selectionHighlightBackground#9a782015
  • editor.selectionHighlightBorder#9a782050
  • editor.wordHighlightBackground#9a782025
  • editor.wordHighlightBorder#9a782030
  • editor.wordHighlightStrongBackground#9a782040
  • editor.wordHighlightStrongBorder#9a782050
  • editor.wordHighlightTextBackground#9a782015
  • editor.wordHighlightTextBorder#9a782020
  • editorBracketHighlight.foreground1#8a8468E6
  • editorBracketHighlight.foreground2#8a8468B3
  • editorBracketHighlight.foreground3#8a846880
  • editorBracketHighlight.foreground4#8a8468E6
  • editorBracketHighlight.foreground5#8a8468B3
  • editorBracketHighlight.foreground6#8a846880
  • editorBracketHighlight.unexpectedBracket.foreground#8a4040
  • editorBracketMatch.background#9a782050
  • editorBracketMatch.border#ddd4c0
  • editorCodeLens.foreground#8a8878
  • editorCursor.background#f8f4ea
  • editorCursor.foreground#9a7820
  • editorError.border#8a404050
  • editorError.foreground#8a4040
  • editorGroup.border#ddd4c0
  • editorGroup.dropBackground#9a782020
  • editorGroupHeader.border#ddd4c0
  • editorGroupHeader.noTabsBackground#f2ede4
  • editorGroupHeader.tabsBackground#f2ede4
  • editorGroupHeader.tabsBorder#ddd4c0
  • editorGutter.addedBackground#4a7a30
  • editorGutter.addedSecondaryBackground#4a7a3060
  • editorGutter.background#f8f4ea
  • editorGutter.commentRangeForeground#8a8878
  • editorGutter.deletedBackground#8a4040
  • editorGutter.deletedSecondaryBackground#8a404060
  • editorGutter.foldingControlForeground#3a3828
  • editorGutter.itemBackground#d8d4c8
  • editorGutter.itemGlyphForeground#2a2818
  • editorGutter.modifiedBackground#9a7820
  • editorGutter.modifiedSecondaryBackground#9a782060
  • editorHint.foreground#4a7a30
  • editorHoverWidget.background#f3ede4
  • editorHoverWidget.border#c8c6be
  • editorHoverWidget.foreground#3a3828
  • editorHoverWidget.highlightForeground#2a2818
  • editorIndentGuide.activeBackground1#b8b6ae30
  • editorIndentGuide.background1#b8b6ae30
  • editorInfo.border#5a687050
  • editorInfo.foreground#5a6870
  • editorInlayHint.background#ddd4c0
  • editorInlayHint.foreground#9a7820
  • editorInlayHint.typeBackground#ddd4c0
  • editorInlayHint.typeForeground#9a7820
  • editorLineNumber.activeForeground#9a7820
  • editorLineNumber.dimmedForeground#c0beb6
  • editorLineNumber.foreground#b6b4ac
  • editorRuler.foreground#e0deda
  • editorSuggestWidget.background#f3ede4cc
  • editorSuggestWidget.border#d0cec830
  • editorSuggestWidget.foreground#3a3828
  • editorSuggestWidget.selectedForeground#2a2818
  • editorUnnecessaryCode.border#c0a800
  • editorUnnecessaryCode.opacity#00000040
  • editorWarning.border#9a906050
  • editorWarning.foreground#8a7830
  • editorWhitespace.foreground#b0aea650
  • editorWidget.background#f1ece2
  • editorWidget.border#ddd4c0
  • editorWidget.foreground#3a3828
  • editorWidget.resizeBorder#ddd4c0
  • extensionButton.prominentBackground#c8c0a0
  • extensionButton.prominentForeground#2a2818
  • extensionButton.prominentHoverBackground#b8b090
  • focusBorder#9a7820
  • gitDecoration.addedResourceForeground#4a7a30
  • gitDecoration.conflictingResourceForeground#8a4040
  • gitDecoration.deletedResourceForeground#8a4040
  • gitDecoration.ignoredResourceForeground#8a8878
  • gitDecoration.modifiedResourceForeground#9a7820
  • gitDecoration.untrackedResourceForeground#4a7a30
  • icon.foreground#3a3828
  • input.background#eee8dc
  • input.border#d0cec8
  • input.foreground#2a2818
  • input.placeholderForeground#8a887880
  • inputOption.activeBorder#ddd4c0
  • inputValidation.errorBackground#8a404020
  • inputValidation.errorBorder#8a4040
  • inputValidation.infoBackground#5a687020
  • inputValidation.infoBorder#5a6870
  • inputValidation.warningBackground#9a782020
  • inputValidation.warningBorder#9a7820
  • list.activeSelectionBackground#d8d4c4
  • list.activeSelectionForeground#2a2818
  • list.dropBackground#d0ccbc
  • list.dropBetweenBackground#9a7820
  • list.errorForeground#8a4040
  • list.focusBackground#d8d4c4
  • list.focusForeground#2a2818
  • list.focusHighlightForeground#2a2818
  • list.focusOutline#ddd4c0
  • list.highlightForeground#2a2818
  • list.hoverBackground#ddd4c050
  • list.hoverForeground#3a3828
  • list.inactiveSelectionBackground#dedad0
  • list.inactiveSelectionForeground#605e50
  • list.warningForeground#8a7830
  • menu.background#f2ede4
  • menu.border#ddd4c0
  • menu.foreground#2a2818
  • menu.selectionBackground#9a782099
  • menu.selectionForeground#f8f4ea
  • menu.separatorBackground#ddd4c0
  • minimap.background#f2ede4cc
  • minimap.errorHighlight#8a404080
  • minimap.findMatchHighlight#9a782060
  • minimap.foregroundOpacity#3a382880
  • minimap.selectionHighlight#8a887860
  • minimap.selectionOccurrenceHighlight#9a782060
  • minimap.warningHighlight#9a783080
  • notebook.cellBorderColor#d8d4c8
  • notebook.focusedCellBorder#9a7820
  • notebook.focusedEditorBorder#9a7820
  • notebook.selectedCellBackground#d8d4c8
  • notificationCenter.border#ddd4c0
  • notificationCenterHeader.background#f2ede4
  • notificationCenterHeader.foreground#3a3828
  • notificationLink.foreground#9a7820
  • notifications.background#f1ece2
  • notifications.border#ddd4c0
  • notifications.foreground#3a3828
  • notificationsErrorIcon.foreground#8a4040
  • notificationsInfoIcon.foreground#5a6870
  • notificationsWarningIcon.foreground#8a7830
  • notificationToast.border#ddd4c0
  • panel.background#f2ede4
  • panel.border#ddd4c0
  • panelSection.border#e0deda
  • panelSectionHeader.background#e6dfd4
  • panelTitle.activeBorder#9a7820
  • panelTitle.activeForeground#3a3828
  • panelTitle.inactiveForeground#8a8878
  • peekView.border#c8c6be
  • peekViewEditor.background#ebe4d8
  • peekViewEditor.matchHighlightBackground#d8d4bc
  • peekViewResult.background#ebe4d8
  • peekViewResult.fileForeground#3a3828
  • peekViewResult.lineForeground#8a8878
  • peekViewResult.matchHighlightBackground#d8d4bc
  • peekViewResult.selectionBackground#d0ccbc
  • peekViewTitle.background#f1ece2
  • peekViewTitleLabel.foreground#3a3828
  • pickerGroup.foreground#8a8878
  • ports.iconRunningProcessForeground#505050
  • problemsErrorIcon.foreground#8a4040
  • problemsInfoIcon.foreground#5a6870
  • problemsWarningIcon.foreground#8a7830
  • progressBar.background#9a7820
  • quickInput.background#f1ece2
  • quickInputList.focusBackground#9a782099
  • sash.hoverBorder#9a7820
  • scrollbar.shadow#00000000
  • scrollbarSlider.activeBackground#9a782050
  • scrollbarSlider.background#b8b6ae90
  • scrollbarSlider.hoverBackground#8a887880
  • selection.background#9a782080
  • settings.checkboxBackground#ebe4d8
  • settings.focusedRowBackground#ebe4d8
  • settings.focusedRowBorder#9a7820
  • settings.headerForeground#3a3828
  • settings.rowHoverBackground#00000000
  • sideBar.background#f2ede4
  • sideBar.border#ddd4c0
  • sideBarSectionHeader.background#f2ede4
  • sideBarSectionHeader.border#ddd4c0
  • sideBarSectionHeader.foreground#8a8878
  • sideBarTitle.foreground#8a8878
  • statusBar.background#f2ede4
  • statusBar.border#ddd4c0
  • statusBar.debuggingBackground#c8b058
  • statusBar.debuggingForeground#2a2818
  • statusBar.focusBorder#9a7820
  • statusBar.foreground#605e50
  • statusBar.noFolderBackground#e0deda
  • statusBarItem.errorBackground#8a4040
  • statusBarItem.errorForeground#f8f4ea
  • statusBarItem.hoverBackground#ddd4c050
  • statusBarItem.hoverForeground#3a3828
  • statusBarItem.remoteBackground#9a78200f
  • statusBarItem.remoteForeground#9a7820
  • statusBarItem.warningBackground#9a7820
  • statusBarItem.warningForeground#f8f4ea
  • tab.activeBackground#f8f4ea
  • tab.activeBorder#f8f4ea
  • tab.activeBorderTop#ddd4c000
  • tab.activeForeground#2a2818
  • tab.border#ddd4c0
  • tab.hoverBackground#ddd4c080
  • tab.hoverForeground#2a2818
  • tab.inactiveBackground#ebe4d8
  • tab.inactiveForeground#706e60
  • tab.lastPinnedBorder#c8c6be
  • tab.unfocusedActiveBorder#f8f4ea
  • tab.unfocusedActiveForeground#8a8878
  • tab.unfocusedHoverBackground#dfd8cc
  • tab.unfocusedHoverForeground#3a3828
  • tab.unfocusedInactiveForeground#8a8878
  • terminal.ansiBlack#f2ede4
  • terminal.ansiBlue#5a6870
  • terminal.ansiBrightBlack#b0aea6
  • terminal.ansiBrightBlue#3a5868
  • terminal.ansiBrightCyan#2a7898
  • terminal.ansiBrightGreen#3a6820
  • terminal.ansiBrightMagenta#784878
  • terminal.ansiBrightRed#802828
  • terminal.ansiBrightWhite#2a2818
  • terminal.ansiBrightYellow#7a6010
  • terminal.ansiCyan#4a8098
  • terminal.ansiGreen#4a7a30
  • terminal.ansiMagenta#785898
  • terminal.ansiRed#8a4040
  • terminal.ansiWhite#3a3828
  • terminal.ansiYellow#9a7820
  • terminal.background#f2ede4
  • terminal.border#ddd4c0
  • terminal.foreground#3a3828
  • terminal.selectionForeground#2a2818
  • testing.iconErrored#8a4040
  • testing.iconFailed#8a4040
  • testing.iconPassed#4a7a30
  • testing.iconQueued#9a7820
  • testing.iconSkipped#8a8878
  • testing.iconUnset#8a8878
  • testing.runAction#4a7a30
  • textLink.activeForeground#5a6870
  • textLink.foreground#5a6870
  • titleBar.activeBackground#f2ede4
  • titleBar.activeForeground#3a3828
  • titleBar.border#ddd4c0
  • titleBar.inactiveBackground#f2ede4
  • titleBar.inactiveForeground#8a8878
  • tree.inactiveIndentGuidesStroke#c0beb620
  • tree.indentGuidesStroke#c0beb630
  • welcomePage.tileBackground#ebe4d8
  • welcomePage.tileBorder#ddd4c0
  • welcomePage.tileHoverBackground#dfd8cc
  • widget.border#ddd4c0
  • widget.shadow#00000018

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
text, source, variable, meta.macro, keyword.symbol, keyword.operator, meta.property-name, constant.character, entity.name.variable, entity.name.function#2a2818
comment, string.comment#9a8858
string, string.template, punctuation.definition.string#3a6820
constant.numeric#3848a8
keyword, storage.modifier, storage.type, keyword.operator.new, keyword.operator.expression.typeof.js, entity.name.function.macro, keyword.type.go, keyword.operator.sizeof.c, variable.language.self.rust, variable.language.this#9a7820bold
support, entity.name, constant.language, constant.other.placeholder, punctuation.definition.interpolation#5a6060
storage.type.annotation.java#487870
entity.name.function.preprocessor, entity.name.other.preprocessor.macro.predefinedbold
invalid#8a4040bold
string.detected-linkunderline
meta.diff, meta.diff.header#8a8878
markup.deleted#8a4040
markup.inserted#4a7a30
markup.changed#9a7820
entity.name.filename.find-in-files#9a7820
markup.bold, markup.heading.markdownbold
markup.italicitalic
markup.block.raw, markup.inline.raw#5a6060
punctuation, delimiter, bracket, brace, paren, delimiter.tag, punctuation.tag, tag.html, tag.xml, meta.property-value punctuation.separator.key-value, punctuation.definition.metadata.md, string.link.md, meta.brace#8a8468