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#5C2C06
  • activityBar.background#EBE3D6
  • activityBar.border#D2BEA3
  • activityBar.foreground#5C2C06
  • activityBar.inactiveForeground#5E4832
  • activityBarBadge.background#5C2C06
  • activityBarBadge.foreground#FFFFFF
  • badge.background#5C2C06
  • badge.foreground#FFFFFF
  • breadcrumb.activeSelectionForeground#5C2C06
  • breadcrumb.background#FCFAF6
  • breadcrumb.focusForeground#221206
  • breadcrumb.foreground#5E4832
  • button.background#5C2C06
  • button.foreground#FFFFFF
  • button.hoverBackground#3F1C02
  • button.secondaryBackground#F6F0E7
  • button.secondaryForeground#221206
  • button.secondaryHoverBackground#DFD3C0
  • chat.avatarBackground#5C2C06
  • chat.avatarForeground#FFFFFF
  • chat.linesAddedForeground#1E6029
  • chat.linesRemovedForeground#8C1004
  • chat.requestBackground#F6F0E7
  • chat.requestBorder#D2BEA3
  • chat.slashCommandBackground#5C2C061A
  • chat.slashCommandForeground#5C2C06
  • commandCenter.activeBackground#DFD3C0
  • commandCenter.activeBorder#5C2C06
  • commandCenter.activeForeground#221206
  • commandCenter.background#F6F0E7
  • commandCenter.border#D2BEA3
  • commandCenter.foreground#221206
  • commandCenter.inactiveBorder#D2BEA3
  • commandCenter.inactiveForeground#5E4832
  • debugConsole.background#FCFAF6
  • debugConsole.errorForeground#8C1004
  • debugConsole.foreground#221206
  • debugConsole.infoForeground#1E6029
  • debugConsole.sourceForeground#5E4832
  • debugConsole.warningForeground#662E03
  • debugConsoleInputIcon.foreground#5C2C06
  • debugIcon.breakpointCurrentStackframeForeground#5A3602
  • debugIcon.breakpointDisabledForeground#5E483280
  • debugIcon.breakpointForeground#8C1004
  • debugIcon.breakpointStackframeForeground#1E6029
  • debugIcon.breakpointUnverifiedForeground#662E03
  • debugIcon.continueForeground#1E6029
  • debugIcon.disconnectForeground#8C1004
  • debugIcon.pauseForeground#5A3602
  • debugIcon.restartForeground#1E6029
  • debugIcon.startForeground#1E6029
  • debugIcon.stepBackForeground#5C2C06
  • debugIcon.stepIntoForeground#5C2C06
  • debugIcon.stepOutForeground#5C2C06
  • debugIcon.stepOverForeground#5C2C06
  • debugIcon.stopForeground#8C1004
  • debugTokenExpression.boolean#613308
  • debugTokenExpression.error#8C1004
  • debugTokenExpression.name#221206
  • debugTokenExpression.number#8C1004
  • debugTokenExpression.string#6C3406
  • debugTokenExpression.value#6C3406
  • debugToolBar.background#F6F0E7
  • debugToolBar.border#D2BEA3
  • debugView.stateLabelForeground#5C2C06
  • debugView.valueChangedHighlight#FEF8EB
  • descriptionForeground#5E4832
  • diffEditor.border#D2BEA3
  • diffEditor.insertedTextBackground#F2FAF3CC
  • diffEditor.removedTextBackground#FEF1EECC
  • disabledForeground#5E4832AA
  • dropdown.background#FCFAF6
  • dropdown.border#AB9270
  • dropdown.foreground#221206
  • editor.background#FCFAF6
  • editor.findMatchBackground#FEF8EB
  • editor.findMatchBorder#FDE0A8
  • editor.findMatchHighlightBackground#FEF8EBCC
  • editor.foreground#221206
  • editor.hoverHighlightBackground#F6F0E7
  • editor.inactiveSelectionBackground#E2CEAF80
  • editor.lineHighlightBackground#F6F0E777
  • editor.lineHighlightBorder#00000000
  • editor.selectionBackground#E2CEAFB3
  • editor.selectionHighlightBackground#E2CEAF66
  • editor.selectionHighlightBorder#5C2C064D
  • editor.wordHighlightBackground#5C2C061A
  • editor.wordHighlightStrongBackground#5C2C062E
  • editorActionList.background#FCFAF6
  • editorActionList.focusBackground#DFD3C0
  • editorActionList.focusForeground#221206
  • editorActionList.foreground#221206
  • editorAI.background#5C2C0615
  • editorAI.border#5C2C064D
  • editorAI.foreground#5C2C06
  • editorBracketHighlight.foreground1#5C2C06
  • editorBracketHighlight.foreground2#1E6029
  • editorBracketHighlight.foreground3#5A3602
  • editorBracketHighlight.foreground4#4A2207
  • editorBracketHighlight.foreground5#3E270E
  • editorBracketHighlight.foreground6#662E03
  • editorBracketMatch.background#DFD3C0
  • editorBracketMatch.border#5C2C06
  • editorCursor.foreground#5C2C06
  • editorError.foreground#8C1004
  • editorGhostText.background#00000000
  • editorGhostText.border#00000000
  • editorGhostText.foreground#5E4832CC
  • editorGroup.border#D2BEA3
  • editorGroupHeader.noTabsBackground#FCFAF6
  • editorGroupHeader.tabsBackground#F6F0E7
  • editorGroupHeader.tabsBorder#D2BEA3
  • editorHint.foreground#1E6029
  • editorHoverWidget.background#FCFAF6
  • editorHoverWidget.border#AB9270
  • editorHoverWidget.foreground#221206
  • editorHoverWidget.statusBarBackground#F6F0E7
  • editorIndentGuide.activeBackground#5C2C06
  • editorIndentGuide.activeBackground1#5C2C06
  • editorIndentGuide.activeBackground2#1E6029
  • editorIndentGuide.activeBackground3#5A3602
  • editorIndentGuide.activeBackground4#4A2207
  • editorIndentGuide.activeBackground5#3E270E
  • editorIndentGuide.activeBackground6#662E03
  • editorIndentGuide.background#D2BEA3
  • editorIndentGuide.background1#5C2C0625
  • editorIndentGuide.background2#1E602925
  • editorIndentGuide.background3#5A360225
  • editorIndentGuide.background4#4A220725
  • editorIndentGuide.background5#3E270E25
  • editorIndentGuide.background6#662E0325
  • editorInfo.foreground#5C2C06
  • editorInlayHint.background#DFD3C099
  • editorInlayHint.foreground#5E4832
  • editorInlayHint.parameterForeground#5A340A
  • editorInlayHint.typeForeground#3E270E
  • editorLineNumber.activeForeground#5C2C06
  • editorLineNumber.foreground#5E483299
  • editorLink.activeForeground#5C2C06
  • editorStickyScroll.background#F6F0E7
  • editorStickyScroll.border#D2BEA3
  • editorStickyScroll.shadow#00000014
  • editorStickyScrollHover.background#DFD3C0
  • editorSuggestWidget.background#FCFAF6
  • editorSuggestWidget.border#AB9270
  • editorSuggestWidget.focusHighlightForeground#5C2C06
  • editorSuggestWidget.foreground#221206
  • editorSuggestWidget.highlightForeground#5C2C06
  • editorSuggestWidget.selectedBackground#DFD3C0
  • editorSuggestWidget.selectedForeground#221206
  • editorSuggestWidget.selectedIconForeground#5C2C06
  • editorWarning.foreground#662E03
  • editorWidget.background#FCFAF6
  • editorWidget.border#AB9270
  • editorWidget.foreground#221206
  • editorWidget.resizeBorder#5C2C06
  • errorForeground#8C1004
  • focusBorder#5C2C06
  • foreground#221206
  • gitDecoration.addedResourceForeground#1E6029
  • gitDecoration.conflictingResourceForeground#662E03
  • gitDecoration.deletedResourceForeground#8C1004
  • gitDecoration.ignoredResourceForeground#5E483288
  • gitDecoration.modifiedResourceForeground#5A3602
  • gitDecoration.untrackedResourceForeground#1E6029
  • icon.foreground#221206
  • inlineChat.background#FCFAF6
  • inlineChat.border#AB9270
  • inlineChat.regionHighlight#5C2C061A
  • inlineChat.shadow#00000022
  • inlineChatDiff.inserted#F2FAF3CC
  • inlineChatDiff.removed#FEF1EECC
  • inlineChatInput.background#F6F0E7
  • inlineChatInput.border#D2BEA3
  • inlineChatInput.focusBorder#5C2C06
  • inlineChatInput.placeholderForeground#5E4832
  • inlineEdit.border#AB9270
  • inlineEdit.indicator.background#5C2C06
  • inlineEdit.indicator.border#3F1C02
  • inlineEdit.indicator.foreground#FFFFFF
  • inlineEdit.modifiedBackground#F2FAF380
  • inlineEdit.originalBackground#FEF1EE80
  • input.background#FCFAF6
  • input.border#AB9270
  • input.foreground#221206
  • input.placeholderForeground#5E4832
  • inputOption.activeBorder#5C2C06
  • inputValidation.errorBackground#FEF1EE
  • inputValidation.errorBorder#8C1004
  • inputValidation.infoBackground#F2FAF3
  • inputValidation.infoBorder#1E6029
  • inputValidation.warningBackground#FFF5EB
  • inputValidation.warningBorder#662E03
  • interactive.activeCodeBorder#5C2C06
  • interactive.inactiveCodeBorder#D2BEA3
  • interactive.requestBorder#D2BEA3
  • keybindingLabel.background#F6F0E7
  • keybindingLabel.border#AB9270
  • keybindingLabel.bottomBorder#AB9270
  • keybindingLabel.foreground#221206
  • list.activeSelectionBackground#DFD3C0
  • list.activeSelectionForeground#221206
  • list.activeSelectionIconForeground#5C2C06
  • list.errorForeground#8C1004
  • list.focusBackground#DFD3C0
  • list.focusForeground#221206
  • list.focusHighlightForeground#5C2C06
  • list.highlightForeground#5C2C06
  • list.hoverBackground#DFD3C066
  • list.hoverForeground#221206
  • list.inactiveFocusBackground#E2CEAF55
  • list.inactiveSelectionBackground#E2CEAF77
  • list.inactiveSelectionForeground#221206
  • list.inactiveSelectionIconForeground#5C2C06
  • list.warningForeground#662E03
  • menu.background#FCFAF6
  • menu.border#AB9270
  • menu.foreground#221206
  • menu.selectionBackground#DFD3C0
  • menu.selectionBorder#5C2C06
  • menu.selectionForeground#221206
  • menu.separatorBackground#D2BEA3
  • menubar.selectionBackground#DFD3C0
  • menubar.selectionForeground#221206
  • multiDiffEditor.background#FCFAF6
  • multiDiffEditor.border#D2BEA3
  • multiDiffEditor.headerBackground#F6F0E7
  • notificationCenter.border#AB9270
  • notifications.background#FCFAF6
  • notifications.border#D2BEA3
  • notifications.foreground#221206
  • notificationToast.border#AB9270
  • outputView.background#FCFAF6
  • outputViewStickyScroll.background#F6F0E7
  • panel.background#F3EDE2
  • panel.border#D2BEA3
  • panelSection.border#D2BEA3
  • panelSection.dropBackground#DFD3C0
  • panelSectionHeader.background#F6F0E7
  • panelSectionHeader.border#D2BEA3
  • panelSectionHeader.foreground#221206
  • panelTitle.activeBorder#5C2C06
  • panelTitle.activeForeground#221206
  • panelTitle.inactiveForeground#5E4832
  • peekView.border#5C2C06
  • peekViewEditor.background#F6F0E7
  • peekViewEditor.matchHighlightBackground#FEF8EB
  • peekViewResult.background#F3EDE2
  • peekViewResult.matchHighlightBackground#FEF8EB
  • peekViewResult.selectionBackground#DFD3C0
  • peekViewTitle.background#F6F0E7
  • problemsErrorIcon.foreground#8C1004
  • problemsInfoIcon.foreground#5C2C06
  • problemsWarningIcon.foreground#662E03
  • quickInput.background#FCFAF6
  • quickInput.foreground#221206
  • quickInputList.focusBackground#DFD3C0
  • searchEditor.findMatchBackground#FEF8EB
  • searchEditor.findMatchBorder#FDE0A8
  • selection.background#DFD3C0
  • settings.focusedRowBackground#DFD3C050
  • settings.headerForeground#5C2C06
  • settings.modifiedItemIndicator#5C2C06
  • settings.rowHoverBackground#DFD3C025
  • sideBar.background#F3EDE2
  • sideBar.border#D2BEA3
  • sideBar.foreground#221206
  • sideBarSectionHeader.background#F6F0E7
  • sideBarSectionHeader.border#D2BEA3
  • sideBarSectionHeader.foreground#221206
  • sideBarTitle.foreground#5C2C06
  • statusBar.background#4E2606
  • statusBar.border#4E2606
  • statusBar.debuggingBackground#FFF5EB
  • statusBar.debuggingForeground#662E03
  • statusBar.foreground#FFFFFF
  • statusBar.noFolderBackground#4E2606
  • statusBar.noFolderForeground#FFFFFF
  • statusBarItem.hoverBackground#FFFFFF25
  • statusBarItem.remoteBackground#00000030
  • statusBarItem.remoteForeground#FFFFFF
  • symbolIcon.arrayForeground#221206
  • symbolIcon.booleanForeground#8C1004
  • symbolIcon.classForeground#3E270E
  • symbolIcon.colorForeground#8C1004
  • symbolIcon.constantForeground#613308
  • symbolIcon.eventForeground#4A2207
  • symbolIcon.fieldForeground#221206
  • symbolIcon.fileForeground#221206
  • symbolIcon.folderForeground#5C2C06
  • symbolIcon.functionForeground#4A2207
  • symbolIcon.interfaceForeground#3E270E
  • symbolIcon.keyForeground#5C2C06
  • symbolIcon.keywordForeground#5C2C06
  • symbolIcon.methodForeground#4A2207
  • symbolIcon.moduleForeground#5C2C06
  • symbolIcon.nullForeground#613308
  • symbolIcon.numberForeground#8C1004
  • symbolIcon.objectForeground#3E270E
  • symbolIcon.operatorForeground#221206
  • symbolIcon.packageForeground#5C2C06
  • symbolIcon.propertyForeground#221206
  • symbolIcon.snippetForeground#5C2C06
  • symbolIcon.stringForeground#6C3406
  • symbolIcon.structForeground#3E270E
  • symbolIcon.textForeground#221206
  • symbolIcon.typeParameterForeground#3E270E
  • symbolIcon.unitForeground#613308
  • symbolIcon.variableForeground#221206
  • tab.activeBackground#FCFAF6
  • tab.activeBorder#5C2C06
  • tab.activeBorderTop#5C2C06
  • tab.activeForeground#221206
  • tab.border#D2BEA3
  • tab.hoverBackground#FCFAF6
  • tab.hoverForeground#221206
  • tab.inactiveBackground#F6F0E7
  • tab.inactiveForeground#5E4832
  • tab.unfocusedActiveBackground#FCFAF6
  • tab.unfocusedActiveForeground#221206
  • tab.unfocusedInactiveForeground#5E4832
  • terminal.ansiBlack#221206
  • terminal.ansiBlue#5C2C06
  • terminal.ansiBrightBlack#5E4832
  • terminal.ansiBrightBlue#3F1C02
  • terminal.ansiBrightCyan#3E270E
  • terminal.ansiBrightGreen#1E6029
  • terminal.ansiBrightMagenta#4A2207
  • terminal.ansiBrightRed#8C1004
  • terminal.ansiBrightWhite#221206
  • terminal.ansiBrightYellow#5A3602
  • terminal.ansiCyan#3E270E
  • terminal.ansiGreen#1E6029
  • terminal.ansiMagenta#4A2207
  • terminal.ansiRed#8C1004
  • terminal.ansiWhite#F6F0E7
  • terminal.ansiYellow#5A3602
  • terminal.background#FCFAF6
  • terminal.border#D2BEA3
  • terminal.findMatchBackground#FEF8EB
  • terminal.findMatchBorder#FDE0A8
  • terminal.findMatchHighlightBackground#FEF8EBCC
  • terminal.foreground#221206
  • terminal.hoverHighlightBackground#F6F0E7
  • terminal.inactiveSelectionBackground#E2CEAF55
  • terminal.selectionBackground#E2CEAFB3
  • terminal.tab.activeBorder#5C2C06
  • terminalCommandDecoration.defaultBackground#5C2C0680
  • terminalCommandDecoration.errorBackground#8C1004
  • terminalCommandDecoration.successBackground#1E6029
  • terminalCursor.background#FCFAF6
  • terminalCursor.foreground#5C2C06
  • terminalOverviewRuler.cursorForeground#5C2C06
  • terminalOverviewRuler.findMatchForeground#5A3602
  • titleBar.activeBackground#F3EDE2
  • titleBar.activeForeground#221206
  • titleBar.border#D2BEA3
  • titleBar.inactiveBackground#F6F0E7
  • titleBar.inactiveForeground#5E4832
  • walkThrough.embeddedEditorBackground#F6F0E7
  • welcomePage.background#FCFAF6
  • welcomePage.buttonBackground#F6F0E7
  • welcomePage.buttonHoverBackground#DFD3C0
  • widget.shadow#00000018

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, comment.line, comment.line.double-slash, comment.line.triple-slash, comment.line.number-sign, comment.line.dashes, comment.line.character, comment.line.percentage, comment.block, comment.block.documentation, punctuation.definition.comment, string.comment, string.quoted.docstring, string.quoted.docstring.multi, string.quoted.docstring.multi.python, string.quoted.docstring.single.python, string.quoted.double.block.python, string.quoted.single.block.python, source.kotlin comment, source.kotlin comment.line, source.kotlin comment.block, source.kotlin comment.block.documentation, source.swift comment, source.go comment, source.rust comment, source.dart comment, source.java comment, source.ts comment, source.tsx comment, source.js comment, source.jsx comment, source.python comment, source.sql comment, source.shell comment, source.yaml comment#5E4B38italic
keyword, keyword.control, keyword.operator.new, keyword.operator.expression, keyword.operator.logical, keyword.operator.delete, storage, storage.type, storage.modifier#5C2C06bold
entity.name.function, support.function, meta.function-call, variable.function#4A2207—
entity.name.type, entity.name.class, entity.name.struct, entity.name.enum, entity.name.interface, support.class, support.type, entity.other.inherited-class#3E270Ebold
constant, constant.language, constant.numeric, support.constant#613308—
variable, variable.other, variable.other.readwrite, variable.other.property#221206—
keyword.operator, punctuation, punctuation.accessor, punctuation.separator#221206—
invalid, invalid.illegal, invalid.deprecated#8C1004bold underline
constant.other.color, constant.other.color.rgb-value, constant.other.uuid, support.constant.color, keyword.other.dotenv, source.env variable.other.key, source.dotenv variable.other.key#8C1004—
string.regexp, string.regexp constant.character.escape, constant.other.character-class.regexp#8C1004—
source.python string.quoted, source.js string.quoted, source.jsx string.quoted, source.ts string.quoted, source.tsx string.quoted, source.rust string.quoted, source.go string.quoted, source.kotlin string.quoted, source.swift string.quoted, source.dart string.quoted, source.sql string.quoted#662E03—
source.js string.template, source.ts string.template, source.tsx string.template, source.python string.interpolated#662E03—
source.python variable.parameter, source.js variable.parameter, source.jsx variable.parameter, source.ts variable.parameter, source.tsx variable.parameter, source.rust variable.parameter, source.go variable.parameter, source.kotlin variable.parameter, source.swift variable.parameter, source.dart variable.parameter#5A3602—
source.ts entity.name.type, source.tsx entity.name.type, source.rust entity.name.type, source.go entity.name.type, source.kotlin entity.name.type, source.swift entity.name.type, source.dart entity.name.type, source.python entity.name.type.class#1E6029bold
source.python entity.name.function.decorator, source.python variable.language.special.self, source.python variable.language.special.cls#3F1C02italic
source.python support.function.magic#4A2207bold
source.jsx entity.name.tag, source.tsx entity.name.tag, source.jsx support.class.component, source.tsx support.class.component#1E6029bold
source.jsx entity.other.attribute-name, source.tsx entity.other.attribute-name#5A3602—
source.sql keyword.other.DML, source.sql keyword.other.DDL, source.sql keyword.other.order, source.sql keyword.other.create#5C2C06bold
source.sql constant.other.database-name, source.sql constant.other.table-name#3E270E—
source.rust storage.modifier.lifetime, source.rust entity.name.function.macro#4A2207bold
source.go entity.name.package, source.go keyword.channel#5C2C06bold
source.kotlin storage.type.annotation, source.swift storage.type.annotation, source.swift keyword.other.declaration-specifier#4A2207—
source.dart storage.type.annotation, source.dart support.class.flutter#1E6029bold
source.json support.type.property-name#1E6029bold
source.yaml entity.name.tag#1E6029bold
source.toml entity.other.attribute-name.table, source.toml keyword.key#1E6029bold
source.ini entity.name.section, source.ini keyword.other.definition#1E6029bold
source.env variable.other.key, source.dotenv variable.other.key, source.env keyword.other#8C1004bold
text.html.markdown, text.plain, meta.paragraph.markdown#221206—
text.html.markdown markup.heading, text.html.markdown entity.name.section, text.html.markdown punctuation.definition.heading#5C2C06bold
text.html.markdown markup.inline.raw, text.html.markdown markup.fenced_code#1E6029—
text.html.markdown markup.underline.link, text.html.markdown string.other.link#5C2C06underline
text.html.markdown markup.quote#5E4B38italic
text.html entity.name.tag, text.xml entity.name.tag#5C2C06bold
text.html entity.other.attribute-name, text.xml entity.other.attribute-name#4A2207—
log.error, log.fatal, log.critical, log.exception#8C1004bold
log.warning, log.warn#662E03bold
log.info, log.notice#1E6029bold
log.debug, log.trace#5A3602—
log.date, log.timestamp#5E4832—