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#55A5F2
  • activityBar.background#1E2831
  • activityBar.border#2D3841
  • activityBar.foreground#55A5F2
  • activityBar.inactiveForeground#91A2BA
  • activityBarBadge.background#55A5F2
  • activityBarBadge.foreground#FFFFFF
  • badge.background#55A5F2
  • badge.foreground#FFFFFF
  • breadcrumb.activeSelectionForeground#55A5F2
  • breadcrumb.background#0A141C
  • breadcrumb.focusForeground#E8EEF4
  • breadcrumb.foreground#91A2BA
  • button.background#55A5F2
  • button.foreground#FFFFFF
  • button.hoverBackground#6BB4F0
  • button.secondaryBackground#131C25
  • button.secondaryForeground#E8EEF4
  • button.secondaryHoverBackground#1E2D3A
  • chat.avatarBackground#55A5F2
  • chat.avatarForeground#FFFFFF
  • chat.linesAddedForeground#5AAAF7
  • chat.linesRemovedForeground#FB825B
  • chat.requestBackground#131C25
  • chat.requestBorder#2D3841
  • chat.slashCommandBackground#55A5F21A
  • chat.slashCommandForeground#55A5F2
  • commandCenter.activeBackground#1E2D3A
  • commandCenter.activeBorder#55A5F2
  • commandCenter.activeForeground#E8EEF4
  • commandCenter.background#131C25
  • commandCenter.border#2D3841
  • commandCenter.foreground#E8EEF4
  • commandCenter.inactiveBorder#2D3841
  • commandCenter.inactiveForeground#91A2BA
  • debugConsole.background#0A141C
  • debugConsole.errorForeground#FB825B
  • debugConsole.foreground#E8EEF4
  • debugConsole.infoForeground#5AAAF7
  • debugConsole.sourceForeground#91A2BA
  • debugConsole.warningForeground#EF9051
  • debugConsoleInputIcon.foreground#55A5F2
  • debugIcon.breakpointCurrentStackframeForeground#E8A05A
  • debugIcon.breakpointDisabledForeground#91A2BA80
  • debugIcon.breakpointForeground#FB825B
  • debugIcon.breakpointStackframeForeground#5AAAF7
  • debugIcon.breakpointUnverifiedForeground#EF9051
  • debugIcon.continueForeground#5AAAF7
  • debugIcon.disconnectForeground#FB825B
  • debugIcon.pauseForeground#E8A05A
  • debugIcon.restartForeground#5AAAF7
  • debugIcon.startForeground#5AAAF7
  • debugIcon.stepBackForeground#55A5F2
  • debugIcon.stepIntoForeground#55A5F2
  • debugIcon.stepOutForeground#55A5F2
  • debugIcon.stepOverForeground#55A5F2
  • debugIcon.stopForeground#FB825B
  • debugTokenExpression.boolean#E8A05A
  • debugTokenExpression.error#FB825B
  • debugTokenExpression.name#E8EEF4
  • debugTokenExpression.number#F67D56
  • debugTokenExpression.string#E88A4A
  • debugTokenExpression.value#E88A4A
  • debugToolBar.background#131C25
  • debugToolBar.border#2D3841
  • debugView.stateLabelForeground#55A5F2
  • debugView.valueChangedHighlight#2A1E10
  • descriptionForeground#91A2BA
  • diffEditor.border#2D3841
  • diffEditor.insertedTextBackground#0E1A2ACC
  • diffEditor.removedTextBackground#2A120ECC
  • disabledForeground#91A2BAAA
  • dropdown.background#0A141C
  • dropdown.border#414C56
  • dropdown.foreground#E8EEF4
  • editor.background#0A141C
  • editor.findMatchBackground#2A1E10
  • editor.findMatchBorder#E8A05A
  • editor.findMatchHighlightBackground#2A1E10CC
  • editor.foreground#E8EEF4
  • editor.hoverHighlightBackground#131C25
  • editor.inactiveSelectionBackground#1A3A6A80
  • editor.lineHighlightBackground#131C2577
  • editor.lineHighlightBorder#00000000
  • editor.selectionBackground#1A3A6AB3
  • editor.selectionHighlightBackground#1A3A6A66
  • editor.selectionHighlightBorder#55A5F24D
  • editor.wordHighlightBackground#55A5F21A
  • editor.wordHighlightStrongBackground#55A5F22E
  • editorActionList.background#0A141C
  • editorActionList.focusBackground#1E2D3A
  • editorActionList.focusForeground#E8EEF4
  • editorActionList.foreground#E8EEF4
  • editorAI.background#55A5F215
  • editorAI.border#55A5F24D
  • editorAI.foreground#55A5F2
  • editorBracketHighlight.foreground1#55A5F2
  • editorBracketHighlight.foreground2#5AAAF7
  • editorBracketHighlight.foreground3#E8A05A
  • editorBracketHighlight.foreground4#7E9FED
  • editorBracketHighlight.foreground5#55A5F2
  • editorBracketHighlight.foreground6#EF9051
  • editorBracketMatch.background#1E2D3A
  • editorBracketMatch.border#55A5F2
  • editorCursor.foreground#55A5F2
  • editorError.foreground#FB825B
  • editorGhostText.background#00000000
  • editorGhostText.border#00000000
  • editorGhostText.foreground#91A2BACC
  • editorGroup.border#2D3841
  • editorGroupHeader.noTabsBackground#0A141C
  • editorGroupHeader.tabsBackground#131C25
  • editorGroupHeader.tabsBorder#2D3841
  • editorHint.foreground#5AAAF7
  • editorHoverWidget.background#0A141C
  • editorHoverWidget.border#414C56
  • editorHoverWidget.foreground#E8EEF4
  • editorHoverWidget.statusBarBackground#131C25
  • editorIndentGuide.activeBackground#55A5F2
  • editorIndentGuide.activeBackground1#55A5F2
  • editorIndentGuide.activeBackground2#5AAAF7
  • editorIndentGuide.activeBackground3#E8A05A
  • editorIndentGuide.activeBackground4#7E9FED
  • editorIndentGuide.activeBackground5#55A5F2
  • editorIndentGuide.activeBackground6#EF9051
  • editorIndentGuide.background#2D3841
  • editorIndentGuide.background1#55A5F225
  • editorIndentGuide.background2#5AAAF725
  • editorIndentGuide.background3#E8A05A25
  • editorIndentGuide.background4#7E9FED25
  • editorIndentGuide.background5#55A5F225
  • editorIndentGuide.background6#EF905125
  • editorInfo.foreground#55A5F2
  • editorInlayHint.background#1E2D3A99
  • editorInlayHint.foreground#91A2BA
  • editorInlayHint.parameterForeground#E8A05A
  • editorInlayHint.typeForeground#55A5F2
  • editorLineNumber.activeForeground#55A5F2
  • editorLineNumber.foreground#91A2BA99
  • editorLink.activeForeground#55A5F2
  • editorStickyScroll.background#131C25
  • editorStickyScroll.border#2D3841
  • editorStickyScroll.shadow#00000044
  • editorStickyScrollHover.background#1E2D3A
  • editorSuggestWidget.background#0A141C
  • editorSuggestWidget.border#414C56
  • editorSuggestWidget.focusHighlightForeground#55A5F2
  • editorSuggestWidget.foreground#E8EEF4
  • editorSuggestWidget.highlightForeground#55A5F2
  • editorSuggestWidget.selectedBackground#1E2D3A
  • editorSuggestWidget.selectedForeground#E8EEF4
  • editorSuggestWidget.selectedIconForeground#55A5F2
  • editorWarning.foreground#EF9051
  • editorWidget.background#0A141C
  • editorWidget.border#414C56
  • editorWidget.foreground#E8EEF4
  • editorWidget.resizeBorder#55A5F2
  • errorForeground#FB825B
  • focusBorder#55A5F2
  • foreground#E8EEF4
  • gitDecoration.addedResourceForeground#5AAAF7
  • gitDecoration.conflictingResourceForeground#EF9051
  • gitDecoration.deletedResourceForeground#FB825B
  • gitDecoration.ignoredResourceForeground#91A2BA88
  • gitDecoration.modifiedResourceForeground#E8A05A
  • gitDecoration.untrackedResourceForeground#5AAAF7
  • icon.foreground#E8EEF4
  • inlineChat.background#0A141C
  • inlineChat.border#414C56
  • inlineChat.regionHighlight#55A5F21A
  • inlineChat.shadow#00000055
  • inlineChatDiff.inserted#0E1A2ACC
  • inlineChatDiff.removed#2A120ECC
  • inlineChatInput.background#131C25
  • inlineChatInput.border#2D3841
  • inlineChatInput.focusBorder#55A5F2
  • inlineChatInput.placeholderForeground#91A2BA
  • inlineEdit.border#414C56
  • inlineEdit.indicator.background#55A5F2
  • inlineEdit.indicator.border#6BB4F0
  • inlineEdit.indicator.foreground#FFFFFF
  • inlineEdit.modifiedBackground#0E1A2A80
  • inlineEdit.originalBackground#2A120E80
  • input.background#0A141C
  • input.border#414C56
  • input.foreground#E8EEF4
  • input.placeholderForeground#91A2BA
  • inputOption.activeBorder#55A5F2
  • inputValidation.errorBackground#2A120E
  • inputValidation.errorBorder#FB825B
  • inputValidation.infoBackground#0E1A2A
  • inputValidation.infoBorder#5AAAF7
  • inputValidation.warningBackground#2A180E
  • inputValidation.warningBorder#EF9051
  • interactive.activeCodeBorder#55A5F2
  • interactive.inactiveCodeBorder#2D3841
  • interactive.requestBorder#2D3841
  • keybindingLabel.background#131C25
  • keybindingLabel.border#414C56
  • keybindingLabel.bottomBorder#414C56
  • keybindingLabel.foreground#E8EEF4
  • list.activeSelectionBackground#1E2D3A
  • list.activeSelectionForeground#E8EEF4
  • list.activeSelectionIconForeground#55A5F2
  • list.errorForeground#FB825B
  • list.focusBackground#1E2D3A
  • list.focusForeground#E8EEF4
  • list.focusHighlightForeground#55A5F2
  • list.highlightForeground#55A5F2
  • list.hoverBackground#1E2D3A66
  • list.hoverForeground#E8EEF4
  • list.inactiveFocusBackground#1A3A6A55
  • list.inactiveSelectionBackground#1A3A6A77
  • list.inactiveSelectionForeground#E8EEF4
  • list.inactiveSelectionIconForeground#55A5F2
  • list.warningForeground#EF9051
  • menu.background#0A141C
  • menu.border#414C56
  • menu.foreground#E8EEF4
  • menu.selectionBackground#1E2D3A
  • menu.selectionBorder#55A5F2
  • menu.selectionForeground#E8EEF4
  • menu.separatorBackground#2D3841
  • menubar.selectionBackground#1E2D3A
  • menubar.selectionForeground#E8EEF4
  • multiDiffEditor.background#0A141C
  • multiDiffEditor.border#2D3841
  • multiDiffEditor.headerBackground#131C25
  • notificationCenter.border#414C56
  • notifications.background#0A141C
  • notifications.border#2D3841
  • notifications.foreground#E8EEF4
  • notificationToast.border#414C56
  • outputView.background#0A141C
  • outputViewStickyScroll.background#131C25
  • panel.background#18222B
  • panel.border#2D3841
  • panelSection.border#2D3841
  • panelSection.dropBackground#1E2D3A
  • panelSectionHeader.background#131C25
  • panelSectionHeader.border#2D3841
  • panelSectionHeader.foreground#E8EEF4
  • panelTitle.activeBorder#55A5F2
  • panelTitle.activeForeground#E8EEF4
  • panelTitle.inactiveForeground#91A2BA
  • peekView.border#55A5F2
  • peekViewEditor.background#131C25
  • peekViewEditor.matchHighlightBackground#2A1E10
  • peekViewResult.background#18222B
  • peekViewResult.matchHighlightBackground#2A1E10
  • peekViewResult.selectionBackground#1E2D3A
  • peekViewTitle.background#131C25
  • problemsErrorIcon.foreground#FB825B
  • problemsInfoIcon.foreground#55A5F2
  • problemsWarningIcon.foreground#EF9051
  • quickInput.background#0A141C
  • quickInput.foreground#E8EEF4
  • quickInputList.focusBackground#1E2D3A
  • searchEditor.findMatchBackground#2A1E10
  • searchEditor.findMatchBorder#E8A05A
  • selection.background#1E2D3A
  • settings.focusedRowBackground#1E2D3A50
  • settings.headerForeground#55A5F2
  • settings.modifiedItemIndicator#55A5F2
  • settings.rowHoverBackground#1E2D3A25
  • sideBar.background#18222B
  • sideBar.border#2D3841
  • sideBar.foreground#E8EEF4
  • sideBarSectionHeader.background#131C25
  • sideBarSectionHeader.border#2D3841
  • sideBarSectionHeader.foreground#E8EEF4
  • sideBarTitle.foreground#55A5F2
  • statusBar.background#0043A4
  • statusBar.border#0043A4
  • statusBar.debuggingBackground#2A180E
  • statusBar.debuggingForeground#EF9051
  • statusBar.foreground#FFFFFF
  • statusBar.noFolderBackground#0043A4
  • statusBar.noFolderForeground#FFFFFF
  • statusBarItem.hoverBackground#FFFFFF25
  • statusBarItem.remoteBackground#00000030
  • statusBarItem.remoteForeground#FFFFFF
  • symbolIcon.arrayForeground#E8EEF4
  • symbolIcon.booleanForeground#F67D56
  • symbolIcon.classForeground#55A5F2
  • symbolIcon.colorForeground#F67D56
  • symbolIcon.constantForeground#E8A05A
  • symbolIcon.eventForeground#7E9FED
  • symbolIcon.fieldForeground#E8EEF4
  • symbolIcon.fileForeground#E8EEF4
  • symbolIcon.folderForeground#55A5F2
  • symbolIcon.functionForeground#7E9FED
  • symbolIcon.interfaceForeground#55A5F2
  • symbolIcon.keyForeground#55A5F2
  • symbolIcon.keywordForeground#55A5F2
  • symbolIcon.methodForeground#7E9FED
  • symbolIcon.moduleForeground#55A5F2
  • symbolIcon.nullForeground#E8A05A
  • symbolIcon.numberForeground#F67D56
  • symbolIcon.objectForeground#55A5F2
  • symbolIcon.operatorForeground#E8EEF4
  • symbolIcon.packageForeground#55A5F2
  • symbolIcon.propertyForeground#E8EEF4
  • symbolIcon.snippetForeground#55A5F2
  • symbolIcon.stringForeground#E88A4A
  • symbolIcon.structForeground#55A5F2
  • symbolIcon.textForeground#E8EEF4
  • symbolIcon.typeParameterForeground#55A5F2
  • symbolIcon.unitForeground#E8A05A
  • symbolIcon.variableForeground#E8EEF4
  • tab.activeBackground#0A141C
  • tab.activeBorder#55A5F2
  • tab.activeBorderTop#55A5F2
  • tab.activeForeground#E8EEF4
  • tab.border#2D3841
  • tab.hoverBackground#0A141C
  • tab.hoverForeground#E8EEF4
  • tab.inactiveBackground#131C25
  • tab.inactiveForeground#91A2BA
  • tab.unfocusedActiveBackground#0A141C
  • tab.unfocusedActiveForeground#E8EEF4
  • tab.unfocusedInactiveForeground#91A2BA
  • terminal.ansiBlack#131C25
  • terminal.ansiBlue#55A5F2
  • terminal.ansiBrightBlack#18222B
  • terminal.ansiBrightBlue#6BB4F0
  • terminal.ansiBrightCyan#55A5F2
  • terminal.ansiBrightGreen#5AAAF7
  • terminal.ansiBrightMagenta#7E9FED
  • terminal.ansiBrightRed#FB825B
  • terminal.ansiBrightWhite#FFFFFF
  • terminal.ansiBrightYellow#E8A05A
  • terminal.ansiCyan#55A5F2
  • terminal.ansiGreen#5AAAF7
  • terminal.ansiMagenta#7E9FED
  • terminal.ansiRed#FB825B
  • terminal.ansiWhite#E8EEF4
  • terminal.ansiYellow#E8A05A
  • terminal.background#0A141C
  • terminal.border#2D3841
  • terminal.findMatchBackground#2A1E10
  • terminal.findMatchBorder#E8A05A
  • terminal.findMatchHighlightBackground#2A1E10CC
  • terminal.foreground#E8EEF4
  • terminal.hoverHighlightBackground#131C25
  • terminal.inactiveSelectionBackground#1A3A6A55
  • terminal.selectionBackground#1A3A6AB3
  • terminal.tab.activeBorder#55A5F2
  • terminalCommandDecoration.defaultBackground#55A5F280
  • terminalCommandDecoration.errorBackground#FB825B
  • terminalCommandDecoration.successBackground#5AAAF7
  • terminalCursor.background#0A141C
  • terminalCursor.foreground#55A5F2
  • terminalOverviewRuler.cursorForeground#55A5F2
  • terminalOverviewRuler.findMatchForeground#E8A05A
  • titleBar.activeBackground#18222B
  • titleBar.activeForeground#E8EEF4
  • titleBar.border#2D3841
  • titleBar.inactiveBackground#131C25
  • titleBar.inactiveForeground#91A2BA
  • walkThrough.embeddedEditorBackground#131C25
  • welcomePage.background#0A141C
  • welcomePage.buttonBackground#131C25
  • welcomePage.buttonHoverBackground#1E2D3A
  • 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#91A2BAitalic
keyword, keyword.control, keyword.operator.new, keyword.operator.expression, keyword.operator.logical, keyword.operator.delete, storage, storage.type, storage.modifier#55A5F2bold
entity.name.function, support.function, meta.function-call, variable.function#7E9FED—
entity.name.type, entity.name.class, entity.name.struct, entity.name.enum, entity.name.interface, support.class, support.type, entity.other.inherited-class#55A5F2bold
constant, constant.language, constant.numeric, support.constant#E8A05A—
variable, variable.other, variable.other.readwrite, variable.other.property#E8EEF4—
keyword.operator, punctuation, punctuation.accessor, punctuation.separator#E8EEF4—
invalid, invalid.illegal, invalid.deprecated#FB825Bbold 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#FB825B—
string.regexp, string.regexp constant.character.escape, constant.other.character-class.regexp#FB825B—
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#EF9051—
source.js string.template, source.ts string.template, source.tsx string.template, source.python string.interpolated#EF9051—
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#E8A05A—
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#5AAAF7bold
source.python entity.name.function.decorator, source.python variable.language.special.self, source.python variable.language.special.cls#6BB4F0italic
source.python support.function.magic#7E9FEDbold
source.jsx entity.name.tag, source.tsx entity.name.tag, source.jsx support.class.component, source.tsx support.class.component#5AAAF7bold
source.jsx entity.other.attribute-name, source.tsx entity.other.attribute-name#E8A05A—
source.sql keyword.other.DML, source.sql keyword.other.DDL, source.sql keyword.other.order, source.sql keyword.other.create#55A5F2bold
source.sql constant.other.database-name, source.sql constant.other.table-name#55A5F2—
source.rust storage.modifier.lifetime, source.rust entity.name.function.macro#7E9FEDbold
source.go entity.name.package, source.go keyword.channel#55A5F2bold
source.kotlin storage.type.annotation, source.swift storage.type.annotation, source.swift keyword.other.declaration-specifier#7E9FED—
source.dart storage.type.annotation, source.dart support.class.flutter#5AAAF7bold
source.json support.type.property-name#5AAAF7bold
source.yaml entity.name.tag#5AAAF7bold
source.toml entity.other.attribute-name.table, source.toml keyword.key#5AAAF7bold
source.ini entity.name.section, source.ini keyword.other.definition#5AAAF7bold
source.env variable.other.key, source.dotenv variable.other.key, source.env keyword.other#FB825Bbold
text.html.markdown, text.plain, meta.paragraph.markdown#E8EEF4—
text.html.markdown markup.heading, text.html.markdown entity.name.section, text.html.markdown punctuation.definition.heading#55A5F2bold
text.html.markdown markup.inline.raw, text.html.markdown markup.fenced_code#5AAAF7—
text.html.markdown markup.underline.link, text.html.markdown string.other.link#55A5F2underline
text.html.markdown markup.quote#91A2BAitalic
text.html entity.name.tag, text.xml entity.name.tag#55A5F2bold
text.html entity.other.attribute-name, text.xml entity.other.attribute-name#7E9FED—
log.error, log.fatal, log.critical, log.exception#FB825Bbold
log.warning, log.warn#EF9051bold
log.info, log.notice#5AAAF7bold
log.debug, log.trace#E8A05A—
log.date, log.timestamp#91A2BA—
ZeroToSaaS Accessibility Theme Suite by ZeroToSaaS.in - VS Code Theme