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#080810
  • activityBar.border#00000000
  • activityBar.foreground#70A0A0
  • activityBar.inactiveForeground#1E2028
  • activityBarBadge.background#20A8A8
  • activityBarBadge.foreground#E8E8F0
  • badge.background#20A8A8
  • badge.foreground#E8E8F0
  • breadcrumb.activeSelectionForeground#D0D0D8
  • breadcrumb.focusForeground#505860
  • breadcrumb.foreground#1E2028
  • breadcrumbPicker.background#080810
  • button.background#184848
  • button.foreground#D8E8E8
  • button.hoverBackground#20A8A8
  • dropdown.background#0B0B12
  • dropdown.border#181820
  • dropdown.foreground#D0D0D8
  • editor.background#0E0E14
  • editor.foreground#D0D0D8
  • editor.inactiveSelectionBackground#141C1C
  • editor.lineHighlightBackground#14141C
  • editor.lineHighlightBorder#00000000
  • editor.selectionBackground#1C2828
  • editorBracketMatch.background#1C282880
  • editorBracketMatch.border#20A8A8
  • editorCursor.background#0E0E14
  • editorCursor.foreground#20A8A8
  • editorError.foreground#5858A8
  • editorGroupHeader.tabsBackground#080810
  • editorGroupHeader.tabsBorder#181820
  • editorGutter.addedBackground#20A8A880
  • editorGutter.background#0E0E14
  • editorGutter.deletedBackground#303040C0
  • editorGutter.modifiedBackground#3A787880
  • editorHoverWidget.background#0A0A10
  • editorHoverWidget.border#181820
  • editorIndentGuide.activeBackground1#253A3A
  • editorIndentGuide.background1#181820
  • editorInfo.foreground#20A8A8
  • editorLineNumber.activeForeground#3A8888
  • editorLineNumber.foreground#1E2028
  • editorOverviewRuler.border#00000000
  • editorOverviewRuler.errorForeground#5858A8
  • editorOverviewRuler.selectionHighlightForeground#20A8A8
  • editorOverviewRuler.warningForeground#4A7878
  • editorSuggestWidget.background#0A0A10
  • editorSuggestWidget.border#181820
  • editorSuggestWidget.foreground#D0D0D8
  • editorSuggestWidget.highlightForeground#28C0C0
  • editorSuggestWidget.selectedBackground#1C2828
  • editorWarning.foreground#4A7878
  • editorWhitespace.foreground#14141C
  • editorWidget.background#0A0A10
  • editorWidget.border#181820
  • focusBorder#3A7878
  • gitDecoration.addedResourceForeground#20A8A8
  • gitDecoration.conflictingResourceForeground#3A7878
  • gitDecoration.deletedResourceForeground#505888
  • gitDecoration.ignoredResourceForeground#1E2028
  • gitDecoration.modifiedResourceForeground#506870
  • gitDecoration.untrackedResourceForeground#70A0A0
  • input.background#0B0B12
  • input.border#181820
  • input.foreground#D0D0D8
  • input.placeholderForeground#1E2028
  • inputOption.activeBorder#20A8A8
  • list.activeSelectionBackground#1C2828
  • list.activeSelectionForeground#D8D8E0
  • list.focusBackground#1C2828
  • list.focusForeground#D8D8E0
  • list.highlightForeground#28C0C0
  • list.hoverBackground#141C1C
  • list.hoverForeground#D0D0D8
  • list.inactiveSelectionBackground#141C1C
  • list.inactiveSelectionForeground#505860
  • merge.currentContentBackground#20A8A815
  • merge.currentHeaderBackground#20A8A840
  • merge.incomingContentBackground#3A787815
  • merge.incomingHeaderBackground#3A787840
  • notificationCenterHeader.background#080810
  • notifications.background#080810
  • notifications.border#181820
  • notifications.foreground#D0D0D8
  • notificationsErrorIcon.foreground#5858A8
  • notificationsInfoIcon.foreground#20A8A8
  • notificationsWarningIcon.foreground#4A7878
  • panel.background#080810
  • panel.border#181820
  • panelTitle.activeBorder#20A8A8
  • panelTitle.activeForeground#70A0A0
  • panelTitle.inactiveForeground#1E2028
  • peekView.border#3A7878
  • peekViewEditor.background#080810
  • peekViewEditor.matchHighlightBackground#1C282880
  • peekViewResult.background#0B0B12
  • peekViewResult.fileForeground#70A0A0
  • peekViewResult.lineForeground#505860
  • peekViewResult.matchHighlightBackground#1C2828
  • peekViewResult.selectionBackground#1C2828
  • peekViewResult.selectionForeground#D8D8E0
  • peekViewTitle.background#080810
  • peekViewTitleDescription.foreground#505860
  • peekViewTitleLabel.foreground#D0D0D8
  • progressBar.background#20A8A8
  • scrollbarSlider.activeBackground#20A8A880
  • scrollbarSlider.background#18182080
  • scrollbarSlider.hoverBackground#253A3A80
  • selection.background#1C2828
  • settings.headerForeground#70A0A0
  • settings.modifiedItemIndicator#20A8A8
  • sideBar.background#0B0B12
  • sideBar.border#181820
  • sideBar.foreground#505860
  • sideBarSectionHeader.background#080810
  • sideBarSectionHeader.border#181820
  • sideBarSectionHeader.foreground#70A0A0
  • sideBarTitle.foreground#70A0A0
  • statusBar.background#080810
  • statusBar.border#00000000
  • statusBar.debuggingBackground#20A8A8
  • statusBar.debuggingForeground#E8E8F0
  • statusBar.foreground#505860
  • statusBar.noFolderBackground#080810
  • statusBarItem.hoverBackground#1C2828
  • statusBarItem.remoteBackground#1C2828
  • statusBarItem.remoteForeground#D0D0D8
  • tab.activeBackground#0E0E14
  • tab.activeBorder#00000000
  • tab.activeBorderTop#20A8A8
  • tab.activeForeground#D8D8E0
  • tab.border#181820
  • tab.inactiveBackground#080810
  • tab.inactiveForeground#1E2028
  • tab.unfocusedActiveBackground#0E0E14
  • tab.unfocusedActiveForeground#505860
  • terminal.ansiBlack#080810
  • terminal.ansiBlue#303870
  • terminal.ansiBrightBlack#252530
  • terminal.ansiBrightBlue#506090
  • terminal.ansiBrightCyan#30C8C8
  • terminal.ansiBrightGreen#28C0C0
  • terminal.ansiBrightMagenta#606080
  • terminal.ansiBrightRed#6868A8
  • terminal.ansiBrightWhite#E0E0E8
  • terminal.ansiBrightYellow#509898
  • terminal.ansiCyan#20A0A0
  • terminal.ansiGreen#20A8A8
  • terminal.ansiMagenta#404068
  • terminal.ansiRed#484888
  • terminal.ansiWhite#D0D0D8
  • terminal.ansiYellow#3A7878
  • terminal.background#080810
  • terminal.foreground#D0D0D8
  • terminalCursor.foreground#20A8A8
  • titleBar.activeBackground#080810
  • titleBar.activeForeground#505860
  • titleBar.border#00000000
  • titleBar.inactiveBackground#080810
  • titleBar.inactiveForeground#1E2028
  • widget.shadow#00000080

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#202030italic
string, string.quoted, string.template#506870
constant.character.escape, string.regexp#608888
constant.numeric#28C0C0
constant.language.boolean, constant.language.null, constant.language.undefined#28C0C0
keyword, keyword.control, keyword.operator.new, keyword.operator.expression, storage, storage.type, storage.modifier#20A8A8
entity.name.function, meta.function-call, support.function, variable.function#28C0C0
entity.name.type, entity.name.class, support.class, support.type#35C8C8
variable, variable.other, variable.other.readwrite#D0D0D8
variable.parameter#A8A8B4
variable.other.constant, constant.other#506870bold
variable.other.property, support.variable.property, meta.object-literal.key#B8B8C4
keyword.operator, punctuation.separator, punctuation.accessor#303840
punctuation, meta.brace, meta.delimiter#222830
entity.name.tag.decorator, meta.decorator, punctuation.decorator#3A7878italic
entity.name.module, string.quoted.import#506870
entity.name.tag, meta.tag.sgml#20A8A8
entity.other.attribute-name#28C0C0
support.type.property-name.css#28C0C0
support.constant.property-value.css#506870
entity.name.tag.css, entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#35C8C8
markup.heading, entity.name.section.markdown, punctuation.definition.heading.markdown#20A8A8bold
markup.bold#E0E0E8bold
markup.italic#A8A8B4italic
string.other.link.title.markdown, meta.link.inline.markdown#B8B8C4
markup.underline.link, meta.link.reference.markdown, string.other.link.description.markdown, punctuation.definition.link.markdown, markup.underline.link.markdown#303840
punctuation.definition.list.begin.markdown, beginning.punctuation.definition.list.markdown#20A8A8
markup.inline.raw, markup.fenced_code.block, fenced_code.block.language#28C0C0
support.type.property-name.json#28C0C0
invalid, invalid.deprecated#5858A8underline