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#CF9673
  • activityBar.background#1C1913
  • activityBar.border#2F2E2B
  • activityBar.foreground#CF9673
  • activityBar.inactiveForeground#A69B91
  • activityBarBadge.background#CF9673
  • activityBarBadge.foreground#FFFFFF
  • badge.background#CF9673
  • badge.foreground#FFFFFF
  • breadcrumb.activeSelectionForeground#CF9673
  • breadcrumb.background#100D08
  • breadcrumb.focusForeground#F0E6DE
  • breadcrumb.foreground#A69B91
  • button.background#CF9673
  • button.foreground#FFFFFF
  • button.hoverBackground#DAAC90
  • button.secondaryBackground#15120D
  • button.secondaryForeground#F0E6DE
  • button.secondaryHoverBackground#201F1C
  • chat.avatarBackground#CF9673
  • chat.avatarForeground#FFFFFF
  • chat.linesAddedForeground#7FC184
  • chat.linesRemovedForeground#F97C68
  • chat.requestBackground#15120D
  • chat.requestBorder#2F2E2B
  • chat.slashCommandBackground#CF96731A
  • chat.slashCommandForeground#CF9673
  • commandCenter.activeBackground#201F1C
  • commandCenter.activeBorder#CF9673
  • commandCenter.activeForeground#F0E6DE
  • commandCenter.background#15120D
  • commandCenter.border#2F2E2B
  • commandCenter.foreground#F0E6DE
  • commandCenter.inactiveBorder#2F2E2B
  • commandCenter.inactiveForeground#A69B91
  • debugConsole.background#100D08
  • debugConsole.errorForeground#F97C68
  • debugConsole.foreground#F0E6DE
  • debugConsole.infoForeground#7FC184
  • debugConsole.sourceForeground#A69B91
  • debugConsole.warningForeground#DF9D77
  • debugConsoleInputIcon.foreground#CF9673
  • debugIcon.breakpointCurrentStackframeForeground#D9AE80
  • debugIcon.breakpointDisabledForeground#A69B9180
  • debugIcon.breakpointForeground#F97C68
  • debugIcon.breakpointStackframeForeground#7FC184
  • debugIcon.breakpointUnverifiedForeground#DF9D77
  • debugIcon.continueForeground#7FC184
  • debugIcon.disconnectForeground#F97C68
  • debugIcon.pauseForeground#D9AE80
  • debugIcon.restartForeground#7FC184
  • debugIcon.startForeground#7FC184
  • debugIcon.stepBackForeground#CF9673
  • debugIcon.stepIntoForeground#CF9673
  • debugIcon.stepOutForeground#CF9673
  • debugIcon.stepOverForeground#CF9673
  • debugIcon.stopForeground#F97C68
  • debugTokenExpression.boolean#CD9770
  • debugTokenExpression.error#F97C68
  • debugTokenExpression.name#F7DFCF
  • debugTokenExpression.number#F77A66
  • debugTokenExpression.string#D4946B
  • debugTokenExpression.value#D4946B
  • debugToolBar.background#15120D
  • debugToolBar.border#2F2E2B
  • debugView.stateLabelForeground#CF9673
  • debugView.valueChangedHighlight#1E1A11
  • descriptionForeground#A69B91
  • diffEditor.border#2F2E2B
  • diffEditor.insertedTextBackground#121813CC
  • diffEditor.removedTextBackground#1C1412CC
  • disabledForeground#A69B91AA
  • dropdown.background#100D08
  • dropdown.border#44423F
  • dropdown.foreground#F0E6DE
  • editor.background#100D08
  • editor.findMatchBackground#1E1A11
  • editor.findMatchBorder#D9AE80
  • editor.findMatchHighlightBackground#1E1A11CC
  • editor.foreground#F0E6DE
  • editor.hoverHighlightBackground#15120D
  • editor.inactiveSelectionBackground#4D1E0080
  • editor.lineHighlightBackground#15120D77
  • editor.lineHighlightBorder#00000000
  • editor.selectionBackground#4D1E00B3
  • editor.selectionHighlightBackground#4D1E0066
  • editor.selectionHighlightBorder#CF96734D
  • editor.wordHighlightBackground#CF96731A
  • editor.wordHighlightStrongBackground#CF96732E
  • editorActionList.background#100D08
  • editorActionList.focusBackground#201F1C
  • editorActionList.focusForeground#F0E6DE
  • editorActionList.foreground#F0E6DE
  • editorAI.background#CF967315
  • editorAI.border#CF96734D
  • editorAI.foreground#CF9673
  • editorBracketHighlight.foreground1#CF9673
  • editorBracketHighlight.foreground2#7FC184
  • editorBracketHighlight.foreground3#D9AE80
  • editorBracketHighlight.foreground4#CA987C
  • editorBracketHighlight.foreground5#BB9F83
  • editorBracketHighlight.foreground6#DF9D77
  • editorBracketMatch.background#201F1C
  • editorBracketMatch.border#CF9673
  • editorCursor.foreground#CF9673
  • editorError.foreground#F97C68
  • editorGhostText.background#00000000
  • editorGhostText.border#00000000
  • editorGhostText.foreground#A69B91CC
  • editorGroup.border#2F2E2B
  • editorGroupHeader.noTabsBackground#100D08
  • editorGroupHeader.tabsBackground#15120D
  • editorGroupHeader.tabsBorder#2F2E2B
  • editorHint.foreground#7FC184
  • editorHoverWidget.background#100D08
  • editorHoverWidget.border#44423F
  • editorHoverWidget.foreground#F0E6DE
  • editorHoverWidget.statusBarBackground#15120D
  • editorIndentGuide.activeBackground#CF9673
  • editorIndentGuide.activeBackground1#CF9673
  • editorIndentGuide.activeBackground2#7FC184
  • editorIndentGuide.activeBackground3#D9AE80
  • editorIndentGuide.activeBackground4#CA987C
  • editorIndentGuide.activeBackground5#BB9F83
  • editorIndentGuide.activeBackground6#DF9D77
  • editorIndentGuide.background#2F2E2B
  • editorIndentGuide.background1#CF967325
  • editorIndentGuide.background2#7FC18425
  • editorIndentGuide.background3#D9AE8025
  • editorIndentGuide.background4#CA987C25
  • editorIndentGuide.background5#BB9F8325
  • editorIndentGuide.background6#DF9D7725
  • editorInfo.foreground#CF9673
  • editorInlayHint.background#201F1C99
  • editorInlayHint.foreground#A69B91
  • editorInlayHint.parameterForeground#C79A73
  • editorInlayHint.typeForeground#BB9F83
  • editorLineNumber.activeForeground#CF9673
  • editorLineNumber.foreground#A69B9199
  • editorLink.activeForeground#CF9673
  • editorStickyScroll.background#15120D
  • editorStickyScroll.border#2F2E2B
  • editorStickyScroll.shadow#00000044
  • editorStickyScrollHover.background#201F1C
  • editorSuggestWidget.background#100D08
  • editorSuggestWidget.border#44423F
  • editorSuggestWidget.focusHighlightForeground#CF9673
  • editorSuggestWidget.foreground#F0E6DE
  • editorSuggestWidget.highlightForeground#CF9673
  • editorSuggestWidget.selectedBackground#201F1C
  • editorSuggestWidget.selectedForeground#F0E6DE
  • editorSuggestWidget.selectedIconForeground#CF9673
  • editorWarning.foreground#DF9D77
  • editorWidget.background#100D08
  • editorWidget.border#44423F
  • editorWidget.foreground#F0E6DE
  • editorWidget.resizeBorder#CF9673
  • errorForeground#F97C68
  • focusBorder#CF9673
  • foreground#F0E6DE
  • gitDecoration.addedResourceForeground#7FC184
  • gitDecoration.conflictingResourceForeground#DF9D77
  • gitDecoration.deletedResourceForeground#F97C68
  • gitDecoration.ignoredResourceForeground#A69B9188
  • gitDecoration.modifiedResourceForeground#D9AE80
  • gitDecoration.untrackedResourceForeground#7FC184
  • icon.foreground#F0E6DE
  • inlineChat.background#100D08
  • inlineChat.border#44423F
  • inlineChat.regionHighlight#CF96731A
  • inlineChat.shadow#00000055
  • inlineChatDiff.inserted#121813CC
  • inlineChatDiff.removed#1C1412CC
  • inlineChatInput.background#15120D
  • inlineChatInput.border#2F2E2B
  • inlineChatInput.focusBorder#CF9673
  • inlineChatInput.placeholderForeground#A69B91
  • inlineEdit.border#44423F
  • inlineEdit.indicator.background#CF9673
  • inlineEdit.indicator.border#DAAC90
  • inlineEdit.indicator.foreground#FFFFFF
  • inlineEdit.modifiedBackground#12181380
  • inlineEdit.originalBackground#1C141280
  • input.background#100D08
  • input.border#44423F
  • input.foreground#F0E6DE
  • input.placeholderForeground#A69B91
  • inputOption.activeBorder#CF9673
  • inputValidation.errorBackground#1C1412
  • inputValidation.errorBorder#F97C68
  • inputValidation.infoBackground#121813
  • inputValidation.infoBorder#7FC184
  • inputValidation.warningBackground#1B150E
  • inputValidation.warningBorder#DF9D77
  • interactive.activeCodeBorder#CF9673
  • interactive.inactiveCodeBorder#2F2E2B
  • interactive.requestBorder#2F2E2B
  • keybindingLabel.background#15120D
  • keybindingLabel.border#44423F
  • keybindingLabel.bottomBorder#44423F
  • keybindingLabel.foreground#F0E6DE
  • list.activeSelectionBackground#201F1C
  • list.activeSelectionForeground#F0E6DE
  • list.activeSelectionIconForeground#CF9673
  • list.errorForeground#F97C68
  • list.focusBackground#201F1C
  • list.focusForeground#F0E6DE
  • list.focusHighlightForeground#CF9673
  • list.highlightForeground#CF9673
  • list.hoverBackground#201F1C66
  • list.hoverForeground#F0E6DE
  • list.inactiveFocusBackground#4D1E0055
  • list.inactiveSelectionBackground#4D1E0077
  • list.inactiveSelectionForeground#F0E6DE
  • list.inactiveSelectionIconForeground#CF9673
  • list.warningForeground#DF9D77
  • menu.background#100D08
  • menu.border#44423F
  • menu.foreground#F0E6DE
  • menu.selectionBackground#201F1C
  • menu.selectionBorder#CF9673
  • menu.selectionForeground#F0E6DE
  • menu.separatorBackground#2F2E2B
  • menubar.selectionBackground#201F1C
  • menubar.selectionForeground#F0E6DE
  • multiDiffEditor.background#100D08
  • multiDiffEditor.border#2F2E2B
  • multiDiffEditor.headerBackground#15120D
  • notificationCenter.border#44423F
  • notifications.background#100D08
  • notifications.border#2F2E2B
  • notifications.foreground#F0E6DE
  • notificationToast.border#44423F
  • outputView.background#100D08
  • outputViewStickyScroll.background#15120D
  • panel.background#191610
  • panel.border#2F2E2B
  • panelSection.border#2F2E2B
  • panelSection.dropBackground#201F1C
  • panelSectionHeader.background#15120D
  • panelSectionHeader.border#2F2E2B
  • panelSectionHeader.foreground#F0E6DE
  • panelTitle.activeBorder#CF9673
  • panelTitle.activeForeground#F0E6DE
  • panelTitle.inactiveForeground#A69B91
  • peekView.border#CF9673
  • peekViewEditor.background#15120D
  • peekViewEditor.matchHighlightBackground#1E1A11
  • peekViewResult.background#191610
  • peekViewResult.matchHighlightBackground#1E1A11
  • peekViewResult.selectionBackground#201F1C
  • peekViewTitle.background#15120D
  • problemsErrorIcon.foreground#F97C68
  • problemsInfoIcon.foreground#CF9673
  • problemsWarningIcon.foreground#DF9D77
  • quickInput.background#100D08
  • quickInput.foreground#F0E6DE
  • quickInputList.focusBackground#201F1C
  • searchEditor.findMatchBackground#1E1A11
  • searchEditor.findMatchBorder#D9AE80
  • selection.background#201F1C
  • settings.focusedRowBackground#201F1C50
  • settings.headerForeground#CF9673
  • settings.modifiedItemIndicator#CF9673
  • settings.rowHoverBackground#201F1C25
  • sideBar.background#191610
  • sideBar.border#2F2E2B
  • sideBar.foreground#F0E6DE
  • sideBarSectionHeader.background#15120D
  • sideBarSectionHeader.border#2F2E2B
  • sideBarSectionHeader.foreground#F0E6DE
  • sideBarTitle.foreground#CF9673
  • statusBar.background#431C00
  • statusBar.border#431C00
  • statusBar.debuggingBackground#1B150E
  • statusBar.debuggingForeground#DF9D77
  • statusBar.foreground#FFFFFF
  • statusBar.noFolderBackground#431C00
  • statusBar.noFolderForeground#FFFFFF
  • statusBarItem.hoverBackground#FFFFFF25
  • statusBarItem.remoteBackground#00000030
  • statusBarItem.remoteForeground#FFFFFF
  • symbolIcon.arrayForeground#F7DFCF
  • symbolIcon.booleanForeground#F77A66
  • symbolIcon.classForeground#BB9F83
  • symbolIcon.colorForeground#F77A66
  • symbolIcon.constantForeground#CD9770
  • symbolIcon.eventForeground#CA987C
  • symbolIcon.fieldForeground#F7DFCF
  • symbolIcon.fileForeground#F0E6DE
  • symbolIcon.folderForeground#CF9673
  • symbolIcon.functionForeground#CA987C
  • symbolIcon.interfaceForeground#BB9F83
  • symbolIcon.keyForeground#CF9673
  • symbolIcon.keywordForeground#CF9673
  • symbolIcon.methodForeground#CA987C
  • symbolIcon.moduleForeground#CF9673
  • symbolIcon.nullForeground#CD9770
  • symbolIcon.numberForeground#F77A66
  • symbolIcon.objectForeground#BB9F83
  • symbolIcon.operatorForeground#F7DFCF
  • symbolIcon.packageForeground#CF9673
  • symbolIcon.propertyForeground#F7DFCF
  • symbolIcon.snippetForeground#CF9673
  • symbolIcon.stringForeground#D4946B
  • symbolIcon.structForeground#BB9F83
  • symbolIcon.textForeground#F0E6DE
  • symbolIcon.typeParameterForeground#BB9F83
  • symbolIcon.unitForeground#CD9770
  • symbolIcon.variableForeground#F7DFCF
  • tab.activeBackground#100D08
  • tab.activeBorder#CF9673
  • tab.activeBorderTop#CF9673
  • tab.activeForeground#F0E6DE
  • tab.border#2F2E2B
  • tab.hoverBackground#100D08
  • tab.hoverForeground#F0E6DE
  • tab.inactiveBackground#15120D
  • tab.inactiveForeground#A69B91
  • tab.unfocusedActiveBackground#100D08
  • tab.unfocusedActiveForeground#F0E6DE
  • tab.unfocusedInactiveForeground#A69B91
  • terminal.ansiBlack#15120D
  • terminal.ansiBlue#CF9673
  • terminal.ansiBrightBlack#191610
  • terminal.ansiBrightBlue#DAAC90
  • terminal.ansiBrightCyan#BB9F83
  • terminal.ansiBrightGreen#7FC184
  • terminal.ansiBrightMagenta#CA987C
  • terminal.ansiBrightRed#F97C68
  • terminal.ansiBrightWhite#FFFFFF
  • terminal.ansiBrightYellow#D9AE80
  • terminal.ansiCyan#BB9F83
  • terminal.ansiGreen#7FC184
  • terminal.ansiMagenta#CA987C
  • terminal.ansiRed#F97C68
  • terminal.ansiWhite#F0E6DE
  • terminal.ansiYellow#D9AE80
  • terminal.background#100D08
  • terminal.border#2F2E2B
  • terminal.findMatchBackground#1E1A11
  • terminal.findMatchBorder#D9AE80
  • terminal.findMatchHighlightBackground#1E1A11CC
  • terminal.foreground#F0E6DE
  • terminal.hoverHighlightBackground#15120D
  • terminal.inactiveSelectionBackground#4D1E0055
  • terminal.selectionBackground#4D1E00B3
  • terminal.tab.activeBorder#CF9673
  • terminalCommandDecoration.defaultBackground#CF967380
  • terminalCommandDecoration.errorBackground#F97C68
  • terminalCommandDecoration.successBackground#7FC184
  • terminalCursor.background#100D08
  • terminalCursor.foreground#CF9673
  • terminalOverviewRuler.cursorForeground#CF9673
  • terminalOverviewRuler.findMatchForeground#D9AE80
  • titleBar.activeBackground#191610
  • titleBar.activeForeground#F0E6DE
  • titleBar.border#2F2E2B
  • titleBar.inactiveBackground#15120D
  • titleBar.inactiveForeground#A69B91
  • walkThrough.embeddedEditorBackground#15120D
  • welcomePage.background#100D08
  • welcomePage.buttonBackground#15120D
  • welcomePage.buttonHoverBackground#201F1C
  • widget.shadow#00000066

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#B6A08Bitalic
keyword, keyword.control, keyword.operator.new, keyword.operator.expression, keyword.operator.logical, keyword.operator.delete, storage, storage.type, storage.modifier#CF9673bold
entity.name.function, support.function, meta.function-call, variable.function#CA987C—
entity.name.type, entity.name.class, entity.name.struct, entity.name.enum, entity.name.interface, support.class, support.type, entity.other.inherited-class#BB9F83bold
constant, constant.language, constant.numeric, support.constant#CD9770—
variable, variable.other, variable.other.readwrite, variable.other.property#F7DFCF—
keyword.operator, punctuation, punctuation.accessor, punctuation.separator#F7DFCF—
invalid, invalid.illegal, invalid.deprecated#F97C68bold 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#F97C68—
string.regexp, string.regexp constant.character.escape, constant.other.character-class.regexp#F97C68—
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#DF9D77—
source.js string.template, source.ts string.template, source.tsx string.template, source.python string.interpolated#DF9D77—
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#D9AE80—
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#7FC184bold
source.python entity.name.function.decorator, source.python variable.language.special.self, source.python variable.language.special.cls#DAAC90italic
source.python support.function.magic#CA987Cbold
source.jsx entity.name.tag, source.tsx entity.name.tag, source.jsx support.class.component, source.tsx support.class.component#7FC184bold
source.jsx entity.other.attribute-name, source.tsx entity.other.attribute-name#D9AE80—
source.sql keyword.other.DML, source.sql keyword.other.DDL, source.sql keyword.other.order, source.sql keyword.other.create#CF9673bold
source.sql constant.other.database-name, source.sql constant.other.table-name#BB9F83—
source.rust storage.modifier.lifetime, source.rust entity.name.function.macro#CA987Cbold
source.go entity.name.package, source.go keyword.channel#CF9673bold
source.kotlin storage.type.annotation, source.swift storage.type.annotation, source.swift keyword.other.declaration-specifier#CA987C—
source.dart storage.type.annotation, source.dart support.class.flutter#7FC184bold
source.json support.type.property-name#7FC184bold
source.yaml entity.name.tag#7FC184bold
source.toml entity.other.attribute-name.table, source.toml keyword.key#7FC184bold
source.ini entity.name.section, source.ini keyword.other.definition#7FC184bold
source.env variable.other.key, source.dotenv variable.other.key, source.env keyword.other#F97C68bold
text.html.markdown, text.plain, meta.paragraph.markdown#F0E6DE—
text.html.markdown markup.heading, text.html.markdown entity.name.section, text.html.markdown punctuation.definition.heading#CF9673bold
text.html.markdown markup.inline.raw, text.html.markdown markup.fenced_code#7FC184—
text.html.markdown markup.underline.link, text.html.markdown string.other.link#CF9673underline
text.html.markdown markup.quote#B6A08Bitalic
text.html entity.name.tag, text.xml entity.name.tag#CF9673bold
text.html entity.other.attribute-name, text.xml entity.other.attribute-name#CA987C—
log.error, log.fatal, log.critical, log.exception#F97C68bold
log.warning, log.warn#DF9D77bold
log.info, log.notice#7FC184bold
log.debug, log.trace#D9AE80—
log.date, log.timestamp#A69B91—