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.background#a0a0a0
  • activityBar.dropBackground#00000066
  • activityBar.foreground#000000
  • activityBarBadge.background#777777
  • activityBarBadge.foreground#000000
  • badge.background#777777
  • badge.foreground#000000
  • breadcrumb.activeSelectionForeground#000000
  • breadcrumb.background#f3f3f3
  • breadcrumb.focusForeground#000000CC
  • breadcrumb.foreground#000000
  • button.background#77777766
  • button.foreground#000000
  • button.hoverBackground#77777799
  • debugToolBar.background#777777
  • descriptionForeground#000000
  • dropdown.background#f3f3f3
  • dropdown.border#f3f3f3
  • dropdown.foreground#000000
  • editor.background#f3f3f3
  • editor.findMatchBackground#ffe70a66
  • editor.findMatchHighlightBackground#ffe70a44
  • editor.foreground#000000
  • editor.hoverHighlightBackground#a0a0a0
  • editor.inactiveSelectionBackground#00000044
  • editor.lineHighlightBackground#b2b2b2
  • editor.rangeHighlightBackground#a0a0a0
  • editor.selectionBackground#00000066
  • editor.selectionHighlightBackground#00000044
  • editor.wordHighlightBackground#ffe70a44
  • editor.wordHighlightStrongBackground#0aadff44
  • editorBracketMatch.background#0aadff44
  • editorBracketMatch.border#0000
  • editorCodeLens.foreground#000000CC
  • editorCursor.foreground#000000
  • editorError.foreground#cc0000
  • editorGroup.border#00000099
  • editorGroup.dropBackground#00000066
  • editorGroup.emptyBackground#b2b2b2
  • editorGroupHeader.noTabsBackground#f3f3f3
  • editorGroupHeader.tabsBackground#b2b2b2
  • editorGroupHeader.tabsBorder#0000
  • editorGutter.addedBackground#10f95eCC
  • editorGutter.background#f3f3f3
  • editorGutter.deletedBackground#ff0a0aCC
  • editorGutter.modifiedBackground#000000CC
  • editorHint.foreground#000000
  • editorHoverWidget.background#a0a0a0
  • editorHoverWidget.border#00000011
  • editorHoverWidget.statusBarBackground#a0a0a0
  • editorIndentGuide.activeBackground#00000099
  • editorIndentGuide.background#00000011
  • editorInfo.foreground#000000
  • editorLineNumber.activeForeground#000000
  • editorLineNumber.foreground#000000
  • editorLink.activeForeground#000000CC
  • editorOverviewRuler.addedForeground#10f95eCC
  • editorOverviewRuler.border#00000033
  • editorOverviewRuler.bracketMatchForeground#0aadff44
  • editorOverviewRuler.deletedForeground#ff0a0aCC
  • editorOverviewRuler.errorForeground#ff0a0aCC
  • editorOverviewRuler.findMatchForeground#00cc44
  • editorOverviewRuler.infoForeground#000000CC
  • editorOverviewRuler.modifiedForeground#000000CC
  • editorOverviewRuler.selectionHighlightForeground#00000044
  • editorOverviewRuler.warningForeground#ff780aCC
  • editorRuler.foreground#00000033
  • editorSuggestWidget.background#777777
  • editorSuggestWidget.border#00000033
  • editorSuggestWidget.foreground#000000
  • editorSuggestWidget.highlightForeground#000000
  • editorSuggestWidget.selectedBackground#00000066
  • editorUnnecessaryCode.border#00000099
  • editorUnnecessaryCode.opacity#00000088
  • editorWarning.foreground#cc5c00
  • editorWhitespace.foreground#343434
  • editorWidget.background#777777
  • editorWidget.border#00000033
  • editorWidget.foreground#000000
  • editorWidget.resizeBorder#00000099
  • errorForeground#cc0000
  • extensionButton.prominentBackground#77777766
  • extensionButton.prominentForeground#000000
  • extensionButton.prominentHoverBackground#77777799
  • focusBorder#00000033
  • foreground#000000
  • gitDecoration.addedResourceForeground#00cc44
  • gitDecoration.conflictingResourceForeground#000000
  • gitDecoration.deletedResourceForeground#cc0000
  • gitDecoration.ignoredResourceForeground#010101
  • gitDecoration.modifiedResourceForeground#000000
  • gitDecoration.untrackedResourceForeground#cc5c00
  • icon.foreground#000000
  • input.background#a0a0a0
  • input.border#0000
  • input.foreground#000000
  • input.placeholderForeground#000000
  • inputOption.activeBackground#77777766
  • inputOption.activeBorder#0000
  • inputValidation.errorBackground#cc0000
  • inputValidation.errorBorder#ff0a0aCC
  • inputValidation.errorForeground#f3f3f3
  • inputValidation.infoBackground#000000
  • inputValidation.infoBorder#000000CC
  • inputValidation.infoForeground#f3f3f3
  • inputValidation.warningBackground#cc5c00
  • inputValidation.warningBorder#ff780aCC
  • inputValidation.warningForeground#f3f3f3
  • list.activeSelectionBackground#00000066
  • list.activeSelectionForeground#000000
  • list.dropBackground#00000066
  • list.errorForeground#cc0000
  • list.focusBackground#00000066
  • list.focusForeground#000000
  • list.highlightForeground#000000
  • list.hoverBackground#00000044
  • list.hoverForeground#000000
  • list.inactiveSelectionBackground#00000044
  • list.inactiveSelectionForeground#000000
  • list.invalidItemForeground#cc0000
  • list.warningForeground#cc5c00
  • listFilterWidget.background#f3f3f3
  • listFilterWidget.noMatchesOutline#ff0a0aCC
  • listFilterWidget.outline#00000033
  • minimap.findMatchHighlight#ffe70a66
  • minimap.selectionHighlight#00000066
  • panel.background#a0a0a0
  • panel.border#00000011
  • panel.dropBackground#00000066
  • panelTitle.activeBorder#000000CC
  • panelTitle.activeForeground#000000
  • panelTitle.inactiveForeground#000000
  • peekView.border#00000099
  • peekViewEditor.background#f3f3f3
  • peekViewEditor.matchHighlightBackground#777777
  • peekViewResult.background#b2b2b2
  • peekViewResult.fileForeground#000000
  • peekViewResult.lineForeground#000000
  • peekViewResult.matchHighlightBackground#ffe70a44
  • peekViewResult.selectionBackground#ffe70a66
  • peekViewTitle.background#a0a0a0
  • peekViewTitleDescription.foreground#000000
  • peekViewTitleLabel.foreground#000000
  • pickerGroup.border#00000099
  • pickerGroup.foreground#000000
  • progressBar.background#000000
  • quickInput.background#777777
  • quickInput.foreground#000000
  • selection.background#00000066
  • settings.dropdownBackground#a0a0a0
  • settings.dropdownForeground#000000
  • settings.headerForeground#000000
  • settings.modifiedItemIndicator#000000CC
  • settings.textInputBackground#a0a0a0
  • settings.textInputForeground#000000
  • sideBar.background#b2b2b2
  • sideBar.dropBackground#00000066
  • sideBar.foreground#000000
  • sideBarSectionHeader.background#b2b2b2
  • sideBarSectionHeader.border#00000011
  • sideBarSectionHeader.foreground#000000
  • sideBarTitle.foreground#000000
  • statusBar.background#777777
  • statusBar.border#0000
  • statusBar.debuggingBackground#777777
  • statusBar.debuggingBorder#0000
  • statusBar.debuggingForeground#000000
  • statusBar.foreground#000000
  • statusBar.noFolderBackground#f3f3f3
  • statusBar.noFolderBorder#0000
  • statusBar.noFolderForeground#000000
  • statusBarItem.activeBackground#00000066
  • statusBarItem.hoverBackground#00000044
  • statusBarItem.prominentBackground#777777
  • statusBarItem.prominentForeground#000000
  • statusBarItem.remoteBackground#77777766
  • statusBarItem.remoteForeground#000000
  • tab.activeBackground#f3f3f3
  • tab.activeForeground#000000
  • tab.border#0000
  • tab.inactiveBackground#a0a0a0
  • tab.inactiveForeground#000000
  • tab.unfocusedActiveForeground#000000
  • tab.unfocusedHoverBorder#000000CC
  • tab.unfocusedInactiveForeground#000000
  • terminal.ansiBlack#f3f3f3
  • terminal.ansiBlue#0aadff
  • terminal.ansiBrightBlack#f3f3f3
  • terminal.ansiBrightBlue#0088cc
  • terminal.ansiBrightCyan#000000
  • terminal.ansiBrightGreen#00cc44
  • terminal.ansiBrightMagenta#000000
  • terminal.ansiBrightRed#cc0000
  • terminal.ansiBrightWhite#000000
  • terminal.ansiBrightYellow#ccb800
  • terminal.ansiCyan#000000
  • terminal.ansiGreen#10f95e
  • terminal.ansiMagenta#000000
  • terminal.ansiRed#ff0a0a
  • terminal.ansiWhite#000000
  • terminal.ansiYellow#ffe70a
  • terminal.selectionBackground#00000066
  • terminalCursor.background#00000066
  • terminalCursor.foreground#00000066
  • textBlockQuote.background#a0a0a0
  • textBlockQuote.border#000000CC
  • textCodeBlock.background#b2b2b2
  • textLink.activeForeground#000000
  • textLink.foreground#000000CC
  • textPreformat.foreground#000000
  • titleBar.activeBackground#777777
  • titleBar.activeForeground#000000
  • titleBar.border#0000
  • titleBar.inactiveBackground#b2b2b2
  • titleBar.inactiveForeground#000000
  • widget.shadow#0000
  • window.activeBorder#0000
  • window.inactiveBorder#0000

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
variable.other.readwrite.alias#000000
punctuation.separator#000000
punctuation.definition.template-expression#cc0000
punctuation.definition.parameters#000000
markup.underline.link#000000
keyword#000000
markup.italic#0088ccitalic
variable.language.this#ffe70a
constant.numeric#000000
support.constant.color#0088cc
constant.language.dart#000000
string.key#000000
comment#000000
keyword.control#000000
constant.language.import-export-all#0088cc
meta.brace.square#000000
meta.tag.attributes#000000
markup.bold#000000bold
keyword.control.flow#000000
support.function#000000
entity.name.tag.reference#000000
constant.language.symbol#000000
invalid#cc0000bold underline
comment.block.documentation#000000
markup.heading#000000bold
support.class.component#cc5c00
markup.fenced_code#000000
meta.class#cc5c00
meta.brace.round#000000
support.type.vendored#cc5c00
punctuation.definition.typeparameters#000000
constant.language.undefined#cc0000
comment.line#000000italic
variable.other#000000
keyword.control.import#000000italic
entity.name.tag.yaml#cc5c00
entity.name.tag#cc0000
punctuation.accessor#000000
storage#000000
meta.object#000000
punctuation.definition.block#000000
keyword.operator#000000
markup.quote#000000italic
meta.property-value.css#10f95e
support.constant.font-name#0088cc
meta.type.parameters#ccb800
variable.other.constant#000000
support.class#cc5c00
punctuation.definition.heading#cc5c00
keyword.other.unit#000000
meta.jsx.children#000000
constant.language.null#cc0000
constant.language.boolean.true#00cc44underline bold
keyword.operator.logical#000000
entity.other.attribute-name#0088cc
punctuation.definition.dictionary#000000
support.type.property-name#000000
variable#000000
punctuation.section#000000
meta.property-name.css#10f95e
meta.selector#10f95e
comment.single#000000
entity.name.type.module#cc5c00
string#00cc44
support.type.property-name.css#000000
punctuation.definition.tag#000000
punctuation.terminator#000000
meta.var.expr#000000
punctuation.definition.string#00cc44
entity.name.function#0088cc
keyword.control.from#000000italic
variable.language.super#10f95eitalic
punctuation.definition.array#000000
support.constant.property-value#0088cc
punctuation.definition.list#cc0000
entity.other.attribute-name.id#cc5c00
entity.other.attribute-name.class#ccb800
meta.structure.dictionary#000000
constant.language.boolean.false#cc0000underline bold