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#A00028
  • activityBar.background#E3EFF1
  • activityBar.border#C0D9DE
  • activityBar.foreground#A00028
  • activityBar.inactiveForeground#405B60
  • activityBarBadge.background#A00028
  • activityBarBadge.foreground#FFFFFF
  • badge.background#A00028
  • badge.foreground#FFFFFF
  • breadcrumb.activeSelectionForeground#A00028
  • breadcrumb.background#FAFCFC
  • breadcrumb.focusForeground#0F1E21
  • breadcrumb.foreground#405B60
  • button.background#A00028
  • button.foreground#FFFFFF
  • button.hoverBackground#7A001E
  • button.secondaryBackground#F1F7F8
  • button.secondaryForeground#0F1E21
  • button.secondaryHoverBackground#D6E7EA
  • chat.avatarBackground#A00028
  • chat.avatarForeground#FFFFFF
  • chat.linesAddedForeground#005D6B
  • chat.linesRemovedForeground#A00028
  • chat.requestBackground#F1F7F8
  • chat.requestBorder#C0D9DE
  • chat.slashCommandBackground#A000281A
  • chat.slashCommandForeground#A00028
  • commandCenter.activeBackground#D6E7EA
  • commandCenter.activeBorder#A00028
  • commandCenter.activeForeground#0F1E21
  • commandCenter.background#F1F7F8
  • commandCenter.border#C0D9DE
  • commandCenter.foreground#0F1E21
  • commandCenter.inactiveBorder#C0D9DE
  • commandCenter.inactiveForeground#405B60
  • debugConsole.background#FAFCFC
  • debugConsole.errorForeground#A00028
  • debugConsole.foreground#0F1E21
  • debugConsole.infoForeground#005D6B
  • debugConsole.sourceForeground#405B60
  • debugConsole.warningForeground#941800
  • debugConsoleInputIcon.foreground#A00028
  • debugIcon.breakpointCurrentStackframeForeground#543D00
  • debugIcon.breakpointDisabledForeground#405B6080
  • debugIcon.breakpointForeground#A00028
  • debugIcon.breakpointStackframeForeground#005D6B
  • debugIcon.breakpointUnverifiedForeground#941800
  • debugIcon.continueForeground#005D6B
  • debugIcon.disconnectForeground#A00028
  • debugIcon.pauseForeground#543D00
  • debugIcon.restartForeground#005D6B
  • debugIcon.startForeground#005D6B
  • debugIcon.stepBackForeground#A00028
  • debugIcon.stepIntoForeground#A00028
  • debugIcon.stepOutForeground#A00028
  • debugIcon.stepOverForeground#A00028
  • debugIcon.stopForeground#A00028
  • debugTokenExpression.boolean#543D00
  • debugTokenExpression.error#A00028
  • debugTokenExpression.name#0F1E21
  • debugTokenExpression.number#A00028
  • debugTokenExpression.string#941800
  • debugTokenExpression.value#941800
  • debugToolBar.background#F1F7F8
  • debugToolBar.border#C0D9DE
  • debugView.stateLabelForeground#A00028
  • debugView.valueChangedHighlight#FEF9EC
  • descriptionForeground#405B60
  • diffEditor.border#C0D9DE
  • diffEditor.insertedTextBackground#F1FAF9CC
  • diffEditor.removedTextBackground#FEF1F3CC
  • disabledForeground#405B60AA
  • dropdown.background#FAFCFC
  • dropdown.border#90B8C0
  • dropdown.foreground#0F1E21
  • editor.background#FAFCFC
  • editor.findMatchBackground#FEF9EC
  • editor.findMatchBorder#FCE6A8
  • editor.findMatchHighlightBackground#FEF9ECCC
  • editor.foreground#0F1E21
  • editor.hoverHighlightBackground#F1F7F8
  • editor.inactiveSelectionBackground#B4E2EA80
  • editor.lineHighlightBackground#F1F7F877
  • editor.lineHighlightBorder#00000000
  • editor.selectionBackground#B4E2EAB3
  • editor.selectionHighlightBackground#B4E2EA66
  • editor.selectionHighlightBorder#A000284D
  • editor.wordHighlightBackground#A000281A
  • editor.wordHighlightStrongBackground#A000282E
  • editorActionList.background#FAFCFC
  • editorActionList.focusBackground#D6E7EA
  • editorActionList.focusForeground#0F1E21
  • editorActionList.foreground#0F1E21
  • editorAI.background#A0002815
  • editorAI.border#A000284D
  • editorAI.foreground#A00028
  • editorBracketHighlight.foreground1#A00028
  • editorBracketHighlight.foreground2#005D6B
  • editorBracketHighlight.foreground3#543D00
  • editorBracketHighlight.foreground4#800030
  • editorBracketHighlight.foreground5#005D6B
  • editorBracketHighlight.foreground6#941800
  • editorBracketMatch.background#D6E7EA
  • editorBracketMatch.border#A00028
  • editorCursor.foreground#A00028
  • editorError.foreground#A00028
  • editorGhostText.background#00000000
  • editorGhostText.border#00000000
  • editorGhostText.foreground#405B60CC
  • editorGroup.border#C0D9DE
  • editorGroupHeader.noTabsBackground#FAFCFC
  • editorGroupHeader.tabsBackground#F1F7F8
  • editorGroupHeader.tabsBorder#C0D9DE
  • editorHint.foreground#005D6B
  • editorHoverWidget.background#FAFCFC
  • editorHoverWidget.border#90B8C0
  • editorHoverWidget.foreground#0F1E21
  • editorHoverWidget.statusBarBackground#F1F7F8
  • editorIndentGuide.activeBackground#A00028
  • editorIndentGuide.activeBackground1#A00028
  • editorIndentGuide.activeBackground2#005D6B
  • editorIndentGuide.activeBackground3#543D00
  • editorIndentGuide.activeBackground4#800030
  • editorIndentGuide.activeBackground5#005D6B
  • editorIndentGuide.activeBackground6#941800
  • editorIndentGuide.background#C0D9DE
  • editorIndentGuide.background1#A0002825
  • editorIndentGuide.background2#005D6B25
  • editorIndentGuide.background3#543D0025
  • editorIndentGuide.background4#80003025
  • editorIndentGuide.background5#005D6B25
  • editorIndentGuide.background6#94180025
  • editorInfo.foreground#A00028
  • editorInlayHint.background#D6E7EA99
  • editorInlayHint.foreground#405B60
  • editorInlayHint.parameterForeground#543D00
  • editorInlayHint.typeForeground#005D6B
  • editorLineNumber.activeForeground#A00028
  • editorLineNumber.foreground#405B6099
  • editorLink.activeForeground#A00028
  • editorStickyScroll.background#F1F7F8
  • editorStickyScroll.border#C0D9DE
  • editorStickyScroll.shadow#00000014
  • editorStickyScrollHover.background#D6E7EA
  • editorSuggestWidget.background#FAFCFC
  • editorSuggestWidget.border#90B8C0
  • editorSuggestWidget.focusHighlightForeground#A00028
  • editorSuggestWidget.foreground#0F1E21
  • editorSuggestWidget.highlightForeground#A00028
  • editorSuggestWidget.selectedBackground#D6E7EA
  • editorSuggestWidget.selectedForeground#0F1E21
  • editorSuggestWidget.selectedIconForeground#A00028
  • editorWarning.foreground#941800
  • editorWidget.background#FAFCFC
  • editorWidget.border#90B8C0
  • editorWidget.foreground#0F1E21
  • editorWidget.resizeBorder#A00028
  • errorForeground#A00028
  • focusBorder#A00028
  • foreground#0F1E21
  • gitDecoration.addedResourceForeground#005D6B
  • gitDecoration.conflictingResourceForeground#941800
  • gitDecoration.deletedResourceForeground#A00028
  • gitDecoration.ignoredResourceForeground#405B6088
  • gitDecoration.modifiedResourceForeground#543D00
  • gitDecoration.untrackedResourceForeground#005D6B
  • icon.foreground#0F1E21
  • inlineChat.background#FAFCFC
  • inlineChat.border#90B8C0
  • inlineChat.regionHighlight#A000281A
  • inlineChat.shadow#00000022
  • inlineChatDiff.inserted#F1FAF9CC
  • inlineChatDiff.removed#FEF1F3CC
  • inlineChatInput.background#F1F7F8
  • inlineChatInput.border#C0D9DE
  • inlineChatInput.focusBorder#A00028
  • inlineChatInput.placeholderForeground#405B60
  • inlineEdit.border#90B8C0
  • inlineEdit.indicator.background#A00028
  • inlineEdit.indicator.border#7A001E
  • inlineEdit.indicator.foreground#FFFFFF
  • inlineEdit.modifiedBackground#F1FAF980
  • inlineEdit.originalBackground#FEF1F380
  • input.background#FAFCFC
  • input.border#90B8C0
  • input.foreground#0F1E21
  • input.placeholderForeground#405B60
  • inputOption.activeBorder#A00028
  • inputValidation.errorBackground#FEF1F3
  • inputValidation.errorBorder#A00028
  • inputValidation.infoBackground#F1FAF9
  • inputValidation.infoBorder#005D6B
  • inputValidation.warningBackground#FFF3EE
  • inputValidation.warningBorder#941800
  • interactive.activeCodeBorder#A00028
  • interactive.inactiveCodeBorder#C0D9DE
  • interactive.requestBorder#C0D9DE
  • keybindingLabel.background#F1F7F8
  • keybindingLabel.border#90B8C0
  • keybindingLabel.bottomBorder#90B8C0
  • keybindingLabel.foreground#0F1E21
  • list.activeSelectionBackground#D6E7EA
  • list.activeSelectionForeground#0F1E21
  • list.activeSelectionIconForeground#A00028
  • list.errorForeground#A00028
  • list.focusBackground#D6E7EA
  • list.focusForeground#0F1E21
  • list.focusHighlightForeground#A00028
  • list.highlightForeground#A00028
  • list.hoverBackground#D6E7EA66
  • list.hoverForeground#0F1E21
  • list.inactiveFocusBackground#B4E2EA55
  • list.inactiveSelectionBackground#B4E2EA77
  • list.inactiveSelectionForeground#0F1E21
  • list.inactiveSelectionIconForeground#A00028
  • list.warningForeground#941800
  • menu.background#FAFCFC
  • menu.border#90B8C0
  • menu.foreground#0F1E21
  • menu.selectionBackground#D6E7EA
  • menu.selectionBorder#A00028
  • menu.selectionForeground#0F1E21
  • menu.separatorBackground#C0D9DE
  • menubar.selectionBackground#D6E7EA
  • menubar.selectionForeground#0F1E21
  • multiDiffEditor.background#FAFCFC
  • multiDiffEditor.border#C0D9DE
  • multiDiffEditor.headerBackground#F1F7F8
  • notificationCenter.border#90B8C0
  • notifications.background#FAFCFC
  • notifications.border#C0D9DE
  • notifications.foreground#0F1E21
  • notificationToast.border#90B8C0
  • outputView.background#FAFCFC
  • outputViewStickyScroll.background#F1F7F8
  • panel.background#EDF5F6
  • panel.border#C0D9DE
  • panelSection.border#C0D9DE
  • panelSection.dropBackground#D6E7EA
  • panelSectionHeader.background#F1F7F8
  • panelSectionHeader.border#C0D9DE
  • panelSectionHeader.foreground#0F1E21
  • panelTitle.activeBorder#A00028
  • panelTitle.activeForeground#0F1E21
  • panelTitle.inactiveForeground#405B60
  • peekView.border#A00028
  • peekViewEditor.background#F1F7F8
  • peekViewEditor.matchHighlightBackground#FEF9EC
  • peekViewResult.background#EDF5F6
  • peekViewResult.matchHighlightBackground#FEF9EC
  • peekViewResult.selectionBackground#D6E7EA
  • peekViewTitle.background#F1F7F8
  • problemsErrorIcon.foreground#A00028
  • problemsInfoIcon.foreground#A00028
  • problemsWarningIcon.foreground#941800
  • quickInput.background#FAFCFC
  • quickInput.foreground#0F1E21
  • quickInputList.focusBackground#D6E7EA
  • searchEditor.findMatchBackground#FEF9EC
  • searchEditor.findMatchBorder#FCE6A8
  • selection.background#D6E7EA
  • settings.focusedRowBackground#D6E7EA50
  • settings.headerForeground#A00028
  • settings.modifiedItemIndicator#A00028
  • settings.rowHoverBackground#D6E7EA25
  • sideBar.background#EDF5F6
  • sideBar.border#C0D9DE
  • sideBar.foreground#0F1E21
  • sideBarSectionHeader.background#F1F7F8
  • sideBarSectionHeader.border#C0D9DE
  • sideBarSectionHeader.foreground#0F1E21
  • sideBarTitle.foreground#A00028
  • statusBar.background#A00028
  • statusBar.border#A00028
  • statusBar.debuggingBackground#FFF3EE
  • statusBar.debuggingForeground#941800
  • statusBar.foreground#FFFFFF
  • statusBar.noFolderBackground#A00028
  • statusBar.noFolderForeground#FFFFFF
  • statusBarItem.hoverBackground#FFFFFF25
  • statusBarItem.remoteBackground#00000030
  • statusBarItem.remoteForeground#FFFFFF
  • symbolIcon.arrayForeground#0F1E21
  • symbolIcon.booleanForeground#A00028
  • symbolIcon.classForeground#005D6B
  • symbolIcon.colorForeground#A00028
  • symbolIcon.constantForeground#543D00
  • symbolIcon.eventForeground#800030
  • symbolIcon.fieldForeground#0F1E21
  • symbolIcon.fileForeground#0F1E21
  • symbolIcon.folderForeground#A00028
  • symbolIcon.functionForeground#800030
  • symbolIcon.interfaceForeground#005D6B
  • symbolIcon.keyForeground#A00028
  • symbolIcon.keywordForeground#A00028
  • symbolIcon.methodForeground#800030
  • symbolIcon.moduleForeground#A00028
  • symbolIcon.nullForeground#543D00
  • symbolIcon.numberForeground#A00028
  • symbolIcon.objectForeground#005D6B
  • symbolIcon.operatorForeground#0F1E21
  • symbolIcon.packageForeground#A00028
  • symbolIcon.propertyForeground#0F1E21
  • symbolIcon.snippetForeground#A00028
  • symbolIcon.stringForeground#941800
  • symbolIcon.structForeground#005D6B
  • symbolIcon.textForeground#0F1E21
  • symbolIcon.typeParameterForeground#005D6B
  • symbolIcon.unitForeground#543D00
  • symbolIcon.variableForeground#0F1E21
  • tab.activeBackground#FAFCFC
  • tab.activeBorder#A00028
  • tab.activeBorderTop#A00028
  • tab.activeForeground#0F1E21
  • tab.border#C0D9DE
  • tab.hoverBackground#FAFCFC
  • tab.hoverForeground#0F1E21
  • tab.inactiveBackground#F1F7F8
  • tab.inactiveForeground#405B60
  • tab.unfocusedActiveBackground#FAFCFC
  • tab.unfocusedActiveForeground#0F1E21
  • tab.unfocusedInactiveForeground#405B60
  • terminal.ansiBlack#0F1E21
  • terminal.ansiBlue#A00028
  • terminal.ansiBrightBlack#405B60
  • terminal.ansiBrightBlue#7A001E
  • terminal.ansiBrightCyan#005D6B
  • terminal.ansiBrightGreen#005D6B
  • terminal.ansiBrightMagenta#800030
  • terminal.ansiBrightRed#A00028
  • terminal.ansiBrightWhite#0F1E21
  • terminal.ansiBrightYellow#543D00
  • terminal.ansiCyan#005D6B
  • terminal.ansiGreen#005D6B
  • terminal.ansiMagenta#800030
  • terminal.ansiRed#A00028
  • terminal.ansiWhite#F1F7F8
  • terminal.ansiYellow#543D00
  • terminal.background#FAFCFC
  • terminal.border#C0D9DE
  • terminal.findMatchBackground#FEF9EC
  • terminal.findMatchBorder#FCE6A8
  • terminal.findMatchHighlightBackground#FEF9ECCC
  • terminal.foreground#0F1E21
  • terminal.hoverHighlightBackground#F1F7F8
  • terminal.inactiveSelectionBackground#B4E2EA55
  • terminal.selectionBackground#B4E2EAB3
  • terminal.tab.activeBorder#A00028
  • terminalCommandDecoration.defaultBackground#A0002880
  • terminalCommandDecoration.errorBackground#A00028
  • terminalCommandDecoration.successBackground#005D6B
  • terminalCursor.background#FAFCFC
  • terminalCursor.foreground#A00028
  • terminalOverviewRuler.cursorForeground#A00028
  • terminalOverviewRuler.findMatchForeground#543D00
  • titleBar.activeBackground#EDF5F6
  • titleBar.activeForeground#0F1E21
  • titleBar.border#C0D9DE
  • titleBar.inactiveBackground#F1F7F8
  • titleBar.inactiveForeground#405B60
  • walkThrough.embeddedEditorBackground#F1F7F8
  • welcomePage.background#FAFCFC
  • welcomePage.buttonBackground#F1F7F8
  • welcomePage.buttonHoverBackground#D6E7EA
  • 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#405B60italic
keyword, keyword.control, keyword.operator.new, keyword.operator.expression, keyword.operator.logical, keyword.operator.delete, storage, storage.type, storage.modifier#A00028bold
entity.name.function, support.function, meta.function-call, variable.function#800030—
entity.name.type, entity.name.class, entity.name.struct, entity.name.enum, entity.name.interface, support.class, support.type, entity.other.inherited-class#005D6Bbold
constant, constant.language, constant.numeric, support.constant#543D00—
variable, variable.other, variable.other.readwrite, variable.other.property#0F1E21—
keyword.operator, punctuation, punctuation.accessor, punctuation.separator#0F1E21—
invalid, invalid.illegal, invalid.deprecated#A00028bold 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#A00028—
string.regexp, string.regexp constant.character.escape, constant.other.character-class.regexp#A00028—
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#941800—
source.js string.template, source.ts string.template, source.tsx string.template, source.python string.interpolated#941800—
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#543D00—
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#005D6Bbold
source.python entity.name.function.decorator, source.python variable.language.special.self, source.python variable.language.special.cls#7A001Eitalic
source.python support.function.magic#800030bold
source.jsx entity.name.tag, source.tsx entity.name.tag, source.jsx support.class.component, source.tsx support.class.component#005D6Bbold
source.jsx entity.other.attribute-name, source.tsx entity.other.attribute-name#543D00—
source.sql keyword.other.DML, source.sql keyword.other.DDL, source.sql keyword.other.order, source.sql keyword.other.create#A00028bold
source.sql constant.other.database-name, source.sql constant.other.table-name#005D6B—
source.rust storage.modifier.lifetime, source.rust entity.name.function.macro#800030bold
source.go entity.name.package, source.go keyword.channel#A00028bold
source.kotlin storage.type.annotation, source.swift storage.type.annotation, source.swift keyword.other.declaration-specifier#800030—
source.dart storage.type.annotation, source.dart support.class.flutter#005D6Bbold
source.json support.type.property-name#005D6Bbold
source.yaml entity.name.tag#005D6Bbold
source.toml entity.other.attribute-name.table, source.toml keyword.key#005D6Bbold
source.ini entity.name.section, source.ini keyword.other.definition#005D6Bbold
source.env variable.other.key, source.dotenv variable.other.key, source.env keyword.other#A00028bold
text.html.markdown, text.plain, meta.paragraph.markdown#0F1E21—
text.html.markdown markup.heading, text.html.markdown entity.name.section, text.html.markdown punctuation.definition.heading#A00028bold
text.html.markdown markup.inline.raw, text.html.markdown markup.fenced_code#005D6B—
text.html.markdown markup.underline.link, text.html.markdown string.other.link#A00028underline
text.html.markdown markup.quote#405B60italic
text.html entity.name.tag, text.xml entity.name.tag#A00028bold
text.html entity.other.attribute-name, text.xml entity.other.attribute-name#800030—
log.error, log.fatal, log.critical, log.exception#A00028bold
log.warning, log.warn#941800bold
log.info, log.notice#005D6Bbold
log.debug, log.trace#543D00—
log.date, log.timestamp#405B60—