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#096032
  • activityBar.background#DEECE2
  • activityBar.border#B6DCC1
  • activityBar.foreground#096032
  • activityBar.inactiveForeground#2B583C
  • activityBarBadge.background#096032
  • activityBarBadge.foreground#FFFFFF
  • badge.background#096032
  • badge.foreground#FFFFFF
  • breadcrumb.activeSelectionForeground#096032
  • breadcrumb.background#F8FCF9
  • breadcrumb.focusForeground#0A2014
  • breadcrumb.foreground#2B583C
  • button.background#096032
  • button.foreground#FFFFFF
  • button.hoverBackground#054523
  • button.secondaryBackground#EDF6F0
  • button.secondaryForeground#0A2014
  • button.secondaryHoverBackground#CCE4D3
  • chat.avatarBackground#096032
  • chat.avatarForeground#FFFFFF
  • chat.linesAddedForeground#095E31
  • chat.linesRemovedForeground#960C1B
  • chat.requestBackground#EDF6F0
  • chat.requestBorder#B6DCC1
  • chat.slashCommandBackground#0960321A
  • chat.slashCommandForeground#096032
  • commandCenter.activeBackground#CCE4D3
  • commandCenter.activeBorder#096032
  • commandCenter.activeForeground#0A2014
  • commandCenter.background#EDF6F0
  • commandCenter.border#B6DCC1
  • commandCenter.foreground#0A2014
  • commandCenter.inactiveBorder#B6DCC1
  • commandCenter.inactiveForeground#2B583C
  • debugConsole.background#F8FCF9
  • debugConsole.errorForeground#960C1B
  • debugConsole.foreground#0A2014
  • debugConsole.infoForeground#095E31
  • debugConsole.sourceForeground#2B583C
  • debugConsole.warningForeground#6A4100
  • debugConsoleInputIcon.foreground#096032
  • debugIcon.breakpointCurrentStackframeForeground#4B4D00
  • debugIcon.breakpointDisabledForeground#2B583C80
  • debugIcon.breakpointForeground#960C1B
  • debugIcon.breakpointStackframeForeground#095E31
  • debugIcon.breakpointUnverifiedForeground#6A4100
  • debugIcon.continueForeground#095E31
  • debugIcon.disconnectForeground#960C1B
  • debugIcon.pauseForeground#4B4D00
  • debugIcon.restartForeground#095E31
  • debugIcon.startForeground#095E31
  • debugIcon.stepBackForeground#096032
  • debugIcon.stepIntoForeground#096032
  • debugIcon.stepOutForeground#096032
  • debugIcon.stepOverForeground#096032
  • debugIcon.stopForeground#960C1B
  • debugTokenExpression.boolean#145524
  • debugTokenExpression.error#960C1B
  • debugTokenExpression.name#0A2014
  • debugTokenExpression.number#8C1224
  • debugTokenExpression.string#1F5A14
  • debugTokenExpression.value#1F5A14
  • debugToolBar.background#EDF6F0
  • debugToolBar.border#B6DCC1
  • debugView.stateLabelForeground#096032
  • debugView.valueChangedHighlight#FEFAEB
  • descriptionForeground#2B583C
  • diffEditor.border#B6DCC1
  • diffEditor.insertedTextBackground#EAF8EECC
  • diffEditor.removedTextBackground#FEF1F2CC
  • disabledForeground#2B583CAA
  • dropdown.background#F8FCF9
  • dropdown.border#7FBA93
  • dropdown.foreground#0A2014
  • editor.background#F8FCF9
  • editor.findMatchBackground#FEFAEB
  • editor.findMatchBorder#FCE7A6
  • editor.findMatchHighlightBackground#FEFAEBCC
  • editor.foreground#0A2014
  • editor.hoverHighlightBackground#EDF6F0
  • editor.inactiveSelectionBackground#A8DFBF80
  • editor.lineHighlightBackground#EDF6F077
  • editor.lineHighlightBorder#00000000
  • editor.selectionBackground#A8DFBFB3
  • editor.selectionHighlightBackground#A8DFBF66
  • editor.selectionHighlightBorder#0960324D
  • editor.wordHighlightBackground#0960321A
  • editor.wordHighlightStrongBackground#0960322E
  • editorActionList.background#F8FCF9
  • editorActionList.focusBackground#CCE4D3
  • editorActionList.focusForeground#0A2014
  • editorActionList.foreground#0A2014
  • editorAI.background#09603215
  • editorAI.border#0960324D
  • editorAI.foreground#096032
  • editorBracketHighlight.foreground1#096032
  • editorBracketHighlight.foreground2#095E31
  • editorBracketHighlight.foreground3#4B4D00
  • editorBracketHighlight.foreground4#0A5C4A
  • editorBracketHighlight.foreground5#06522B
  • editorBracketHighlight.foreground6#6A4100
  • editorBracketMatch.background#CCE4D3
  • editorBracketMatch.border#096032
  • editorCursor.foreground#096032
  • editorError.foreground#960C1B
  • editorGhostText.background#00000000
  • editorGhostText.border#00000000
  • editorGhostText.foreground#2B583CCC
  • editorGroup.border#B6DCC1
  • editorGroupHeader.noTabsBackground#F8FCF9
  • editorGroupHeader.tabsBackground#EDF6F0
  • editorGroupHeader.tabsBorder#B6DCC1
  • editorHint.foreground#095E31
  • editorHoverWidget.background#F8FCF9
  • editorHoverWidget.border#7FBA93
  • editorHoverWidget.foreground#0A2014
  • editorHoverWidget.statusBarBackground#EDF6F0
  • editorIndentGuide.activeBackground#096032
  • editorIndentGuide.activeBackground1#096032
  • editorIndentGuide.activeBackground2#095E31
  • editorIndentGuide.activeBackground3#4B4D00
  • editorIndentGuide.activeBackground4#0A5C4A
  • editorIndentGuide.activeBackground5#06522B
  • editorIndentGuide.activeBackground6#6A4100
  • editorIndentGuide.background#B6DCC1
  • editorIndentGuide.background1#09603225
  • editorIndentGuide.background2#095E3125
  • editorIndentGuide.background3#4B4D0025
  • editorIndentGuide.background4#0A5C4A25
  • editorIndentGuide.background5#06522B25
  • editorIndentGuide.background6#6A410025
  • editorInfo.foreground#096032
  • editorInlayHint.background#CCE4D399
  • editorInlayHint.foreground#2B583C
  • editorInlayHint.parameterForeground#2E5918
  • editorInlayHint.typeForeground#06522B
  • editorLineNumber.activeForeground#096032
  • editorLineNumber.foreground#2B583C99
  • editorLink.activeForeground#096032
  • editorStickyScroll.background#EDF6F0
  • editorStickyScroll.border#B6DCC1
  • editorStickyScroll.shadow#00000014
  • editorStickyScrollHover.background#CCE4D3
  • editorSuggestWidget.background#F8FCF9
  • editorSuggestWidget.border#7FBA93
  • editorSuggestWidget.focusHighlightForeground#096032
  • editorSuggestWidget.foreground#0A2014
  • editorSuggestWidget.highlightForeground#096032
  • editorSuggestWidget.selectedBackground#CCE4D3
  • editorSuggestWidget.selectedForeground#0A2014
  • editorSuggestWidget.selectedIconForeground#096032
  • editorWarning.foreground#6A4100
  • editorWidget.background#F8FCF9
  • editorWidget.border#7FBA93
  • editorWidget.foreground#0A2014
  • editorWidget.resizeBorder#096032
  • errorForeground#960C1B
  • focusBorder#096032
  • foreground#0A2014
  • gitDecoration.addedResourceForeground#095E31
  • gitDecoration.conflictingResourceForeground#6A4100
  • gitDecoration.deletedResourceForeground#960C1B
  • gitDecoration.ignoredResourceForeground#2B583C88
  • gitDecoration.modifiedResourceForeground#4B4D00
  • gitDecoration.untrackedResourceForeground#095E31
  • icon.foreground#0A2014
  • inlineChat.background#F8FCF9
  • inlineChat.border#7FBA93
  • inlineChat.regionHighlight#0960321A
  • inlineChat.shadow#00000022
  • inlineChatDiff.inserted#EAF8EECC
  • inlineChatDiff.removed#FEF1F2CC
  • inlineChatInput.background#EDF6F0
  • inlineChatInput.border#B6DCC1
  • inlineChatInput.focusBorder#096032
  • inlineChatInput.placeholderForeground#2B583C
  • inlineEdit.border#7FBA93
  • inlineEdit.indicator.background#096032
  • inlineEdit.indicator.border#054523
  • inlineEdit.indicator.foreground#FFFFFF
  • inlineEdit.modifiedBackground#EAF8EE80
  • inlineEdit.originalBackground#FEF1F280
  • input.background#F8FCF9
  • input.border#7FBA93
  • input.foreground#0A2014
  • input.placeholderForeground#2B583C
  • inputOption.activeBorder#096032
  • inputValidation.errorBackground#FEF1F2
  • inputValidation.errorBorder#960C1B
  • inputValidation.infoBackground#EAF8EE
  • inputValidation.infoBorder#095E31
  • inputValidation.warningBackground#FFF6EB
  • inputValidation.warningBorder#6A4100
  • interactive.activeCodeBorder#096032
  • interactive.inactiveCodeBorder#B6DCC1
  • interactive.requestBorder#B6DCC1
  • keybindingLabel.background#EDF6F0
  • keybindingLabel.border#7FBA93
  • keybindingLabel.bottomBorder#7FBA93
  • keybindingLabel.foreground#0A2014
  • list.activeSelectionBackground#CCE4D3
  • list.activeSelectionForeground#0A2014
  • list.activeSelectionIconForeground#096032
  • list.errorForeground#960C1B
  • list.focusBackground#CCE4D3
  • list.focusForeground#0A2014
  • list.focusHighlightForeground#096032
  • list.highlightForeground#096032
  • list.hoverBackground#CCE4D366
  • list.hoverForeground#0A2014
  • list.inactiveFocusBackground#A8DFBF55
  • list.inactiveSelectionBackground#A8DFBF77
  • list.inactiveSelectionForeground#0A2014
  • list.inactiveSelectionIconForeground#096032
  • list.warningForeground#6A4100
  • menu.background#F8FCF9
  • menu.border#7FBA93
  • menu.foreground#0A2014
  • menu.selectionBackground#CCE4D3
  • menu.selectionBorder#096032
  • menu.selectionForeground#0A2014
  • menu.separatorBackground#B6DCC1
  • menubar.selectionBackground#CCE4D3
  • menubar.selectionForeground#0A2014
  • multiDiffEditor.background#F8FCF9
  • multiDiffEditor.border#B6DCC1
  • multiDiffEditor.headerBackground#EDF6F0
  • notificationCenter.border#7FBA93
  • notifications.background#F8FCF9
  • notifications.border#B6DCC1
  • notifications.foreground#0A2014
  • notificationToast.border#7FBA93
  • outputView.background#F8FCF9
  • outputViewStickyScroll.background#EDF6F0
  • panel.background#E8F2EB
  • panel.border#B6DCC1
  • panelSection.border#B6DCC1
  • panelSection.dropBackground#CCE4D3
  • panelSectionHeader.background#EDF6F0
  • panelSectionHeader.border#B6DCC1
  • panelSectionHeader.foreground#0A2014
  • panelTitle.activeBorder#096032
  • panelTitle.activeForeground#0A2014
  • panelTitle.inactiveForeground#2B583C
  • peekView.border#096032
  • peekViewEditor.background#EDF6F0
  • peekViewEditor.matchHighlightBackground#FEFAEB
  • peekViewResult.background#E8F2EB
  • peekViewResult.matchHighlightBackground#FEFAEB
  • peekViewResult.selectionBackground#CCE4D3
  • peekViewTitle.background#EDF6F0
  • problemsErrorIcon.foreground#960C1B
  • problemsInfoIcon.foreground#096032
  • problemsWarningIcon.foreground#6A4100
  • quickInput.background#F8FCF9
  • quickInput.foreground#0A2014
  • quickInputList.focusBackground#CCE4D3
  • searchEditor.findMatchBackground#FEFAEB
  • searchEditor.findMatchBorder#FCE7A6
  • selection.background#CCE4D3
  • settings.focusedRowBackground#CCE4D350
  • settings.headerForeground#096032
  • settings.modifiedItemIndicator#096032
  • settings.rowHoverBackground#CCE4D325
  • sideBar.background#E8F2EB
  • sideBar.border#B6DCC1
  • sideBar.foreground#0A2014
  • sideBarSectionHeader.background#EDF6F0
  • sideBarSectionHeader.border#B6DCC1
  • sideBarSectionHeader.foreground#0A2014
  • sideBarTitle.foreground#096032
  • statusBar.background#084E29
  • statusBar.border#084E29
  • statusBar.debuggingBackground#FFF6EB
  • statusBar.debuggingForeground#6A4100
  • statusBar.foreground#FFFFFF
  • statusBar.noFolderBackground#084E29
  • statusBar.noFolderForeground#FFFFFF
  • statusBarItem.hoverBackground#FFFFFF25
  • statusBarItem.remoteBackground#00000030
  • statusBarItem.remoteForeground#FFFFFF
  • symbolIcon.arrayForeground#0A2014
  • symbolIcon.booleanForeground#8C1224
  • symbolIcon.classForeground#06522B
  • symbolIcon.colorForeground#8C1224
  • symbolIcon.constantForeground#145524
  • symbolIcon.eventForeground#0A5C4A
  • symbolIcon.fieldForeground#0A2014
  • symbolIcon.fileForeground#0A2014
  • symbolIcon.folderForeground#096032
  • symbolIcon.functionForeground#0A5C4A
  • symbolIcon.interfaceForeground#06522B
  • symbolIcon.keyForeground#0A6233
  • symbolIcon.keywordForeground#0A6233
  • symbolIcon.methodForeground#0A5C4A
  • symbolIcon.moduleForeground#096032
  • symbolIcon.nullForeground#145524
  • symbolIcon.numberForeground#8C1224
  • symbolIcon.objectForeground#06522B
  • symbolIcon.operatorForeground#0A2014
  • symbolIcon.packageForeground#096032
  • symbolIcon.propertyForeground#0A2014
  • symbolIcon.snippetForeground#096032
  • symbolIcon.stringForeground#1F5A14
  • symbolIcon.structForeground#06522B
  • symbolIcon.textForeground#0A2014
  • symbolIcon.typeParameterForeground#06522B
  • symbolIcon.unitForeground#145524
  • symbolIcon.variableForeground#0A2014
  • tab.activeBackground#F8FCF9
  • tab.activeBorder#096032
  • tab.activeBorderTop#096032
  • tab.activeForeground#0A2014
  • tab.border#B6DCC1
  • tab.hoverBackground#F8FCF9
  • tab.hoverForeground#0A2014
  • tab.inactiveBackground#EDF6F0
  • tab.inactiveForeground#2B583C
  • tab.unfocusedActiveBackground#F8FCF9
  • tab.unfocusedActiveForeground#0A2014
  • tab.unfocusedInactiveForeground#2B583C
  • terminal.ansiBlack#0A2014
  • terminal.ansiBlue#096032
  • terminal.ansiBrightBlack#2B583C
  • terminal.ansiBrightBlue#054523
  • terminal.ansiBrightCyan#06522B
  • terminal.ansiBrightGreen#095E31
  • terminal.ansiBrightMagenta#0A5C4A
  • terminal.ansiBrightRed#960C1B
  • terminal.ansiBrightWhite#0A2014
  • terminal.ansiBrightYellow#4B4D00
  • terminal.ansiCyan#06522B
  • terminal.ansiGreen#095E31
  • terminal.ansiMagenta#0A5C4A
  • terminal.ansiRed#960C1B
  • terminal.ansiWhite#EDF6F0
  • terminal.ansiYellow#4B4D00
  • terminal.background#F8FCF9
  • terminal.border#B6DCC1
  • terminal.findMatchBackground#FEFAEB
  • terminal.findMatchBorder#FCE7A6
  • terminal.findMatchHighlightBackground#FEFAEBCC
  • terminal.foreground#0A2014
  • terminal.hoverHighlightBackground#EDF6F0
  • terminal.inactiveSelectionBackground#A8DFBF55
  • terminal.selectionBackground#A8DFBFB3
  • terminal.tab.activeBorder#096032
  • terminalCommandDecoration.defaultBackground#09603280
  • terminalCommandDecoration.errorBackground#960C1B
  • terminalCommandDecoration.successBackground#095E31
  • terminalCursor.background#F8FCF9
  • terminalCursor.foreground#096032
  • terminalOverviewRuler.cursorForeground#096032
  • terminalOverviewRuler.findMatchForeground#4B4D00
  • titleBar.activeBackground#E8F2EB
  • titleBar.activeForeground#0A2014
  • titleBar.border#B6DCC1
  • titleBar.inactiveBackground#EDF6F0
  • titleBar.inactiveForeground#2B583C
  • walkThrough.embeddedEditorBackground#EDF6F0
  • welcomePage.background#F8FCF9
  • welcomePage.buttonBackground#EDF6F0
  • welcomePage.buttonHoverBackground#CCE4D3
  • 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#32583Eitalic
keyword, keyword.control, keyword.operator.new, keyword.operator.expression, keyword.operator.logical, keyword.operator.delete, storage, storage.type, storage.modifier#0A6233bold
entity.name.function, support.function, meta.function-call, variable.function#0A5C4A—
entity.name.type, entity.name.class, entity.name.struct, entity.name.enum, entity.name.interface, support.class, support.type, entity.other.inherited-class#06522Bbold
constant, constant.language, constant.numeric, support.constant#145524—
variable, variable.other, variable.other.readwrite, variable.other.property#0A2014—
keyword.operator, punctuation, punctuation.accessor, punctuation.separator#0A2014—
invalid, invalid.illegal, invalid.deprecated#960C1Bbold 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#960C1B—
string.regexp, string.regexp constant.character.escape, constant.other.character-class.regexp#960C1B—
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#6A4100—
source.js string.template, source.ts string.template, source.tsx string.template, source.python string.interpolated#6A4100—
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#4B4D00—
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#095E31bold
source.python entity.name.function.decorator, source.python variable.language.special.self, source.python variable.language.special.cls#054523italic
source.python support.function.magic#0A5C4Abold
source.jsx entity.name.tag, source.tsx entity.name.tag, source.jsx support.class.component, source.tsx support.class.component#095E31bold
source.jsx entity.other.attribute-name, source.tsx entity.other.attribute-name#4B4D00—
source.sql keyword.other.DML, source.sql keyword.other.DDL, source.sql keyword.other.order, source.sql keyword.other.create#0A6233bold
source.sql constant.other.database-name, source.sql constant.other.table-name#06522B—
source.rust storage.modifier.lifetime, source.rust entity.name.function.macro#0A5C4Abold
source.go entity.name.package, source.go keyword.channel#0A6233bold
source.kotlin storage.type.annotation, source.swift storage.type.annotation, source.swift keyword.other.declaration-specifier#0A5C4A—
source.dart storage.type.annotation, source.dart support.class.flutter#095E31bold
source.json support.type.property-name#095E31bold
source.yaml entity.name.tag#095E31bold
source.toml entity.other.attribute-name.table, source.toml keyword.key#095E31bold
source.ini entity.name.section, source.ini keyword.other.definition#095E31bold
source.env variable.other.key, source.dotenv variable.other.key, source.env keyword.other#960C1Bbold
text.html.markdown, text.plain, meta.paragraph.markdown#0A2014—
text.html.markdown markup.heading, text.html.markdown entity.name.section, text.html.markdown punctuation.definition.heading#0A6233bold
text.html.markdown markup.inline.raw, text.html.markdown markup.fenced_code#095E31—
text.html.markdown markup.underline.link, text.html.markdown string.other.link#096032underline
text.html.markdown markup.quote#32583Eitalic
text.html entity.name.tag, text.xml entity.name.tag#0A6233bold
text.html entity.other.attribute-name, text.xml entity.other.attribute-name#0A5C4A—
log.error, log.fatal, log.critical, log.exception#960C1Bbold
log.warning, log.warn#6A4100bold
log.info, log.notice#095E31bold
log.debug, log.trace#4B4D00—
log.date, log.timestamp#2B583C—