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#161c22
  • activityBar.dropBackground#333F4A99
  • activityBar.foreground#8094a7
  • activityBarBadge.background#037f88
  • activityBarBadge.foreground#fff
  • badge.background#037f88
  • badge.foreground#fff
  • breadcrumb.activeSelectionForeground#8094a7
  • breadcrumb.background#161c22
  • breadcrumb.foreground#8094a799
  • breadcrumbPicker.background#161c22
  • button.background#037f88
  • button.foreground#fff
  • button.hoverBackground#008B9499
  • contrastBorder#b7c5d300
  • debugExceptionWidget.background#161c22
  • debugExceptionWidget.border#b7c5d3
  • debugToolBar.background#161c22
  • descriptionForeground#b7c5d3
  • diffEditor.insertedTextBackground#33CED811
  • diffEditor.removedTextBackground#b62d6511
  • dropdown.background#1d252c
  • dropdown.border#1d252c
  • dropdown.foreground#8094a7
  • editor.background#161c22
  • editor.findMatchBackground#161c22
  • editor.findMatchBorder#41505e
  • editor.findMatchHighlightBackground#41505e77
  • editor.findRangeHighlightBackground#243E51
  • editor.foreground#8094a7
  • editor.hoverHighlightBackground#1d252c
  • editor.inactiveSelectionBackground#1d252c99
  • editor.lineHighlightBackground#1d252c77
  • editor.lineHighlightBorder#1d252c99
  • editor.rangeHighlightBackground#1d252c
  • editor.selectionBackground#1d252c
  • editor.selectionHighlightBackground#1d252c
  • editor.wordHighlightBackground#b7c5d30D
  • editor.wordHighlightStrongBackground#41505e88
  • editorBracketMatch.border#4e6e99
  • editorCodeLens.foreground#42628ccc
  • editorCursor.foreground#5ec4ff
  • editorError.border#333F4A
  • editorError.foreground#b62d65
  • editorGroup.border#161c22
  • editorGroup.dropBackground#333F4A99
  • editorGroup.emptyBackground#161c22
  • editorGroupHeader.noTabsBackground#161c22
  • editorGroupHeader.tabsBackground#161c22
  • editorGutter.addedBackground#33CED8
  • editorGutter.background#161c22
  • editorGutter.deletedBackground#b62d65
  • editorGutter.modifiedBackground#26506D
  • editorHoverWidget.background#1d252c
  • editorHoverWidget.border#333F4A
  • editorIndentActive.background#28323a
  • editorIndentGuide.background#28323a99
  • editorInlayHint.background#00000000
  • editorInlayHint.foreground#33CED855
  • editorInlayHint.parameterBackground#00000000
  • editorInlayHint.parameterForeground#33CED855
  • editorInlayHint.typeBackground#00000000
  • editorInlayHint.typeForeground#33CED855
  • editorLineNumber.activeForeground#b7c5d399
  • editorLineNumber.foreground#41505E
  • editorLink.activeForeground#42628c
  • editorMarkerNavigation.background#161c22
  • editorMarkerNavigationError.background#b62d65
  • editorMarkerNavigationWarning.background#d98e48
  • editorOverviewRuler.addedForeground#33CED899
  • editorOverviewRuler.border#00000000
  • editorOverviewRuler.bracketMatchForeground#00000000
  • editorOverviewRuler.commonContentForeground#b62d65
  • editorOverviewRuler.currentContentForeground#b62d65
  • editorOverviewRuler.deletedForeground#b62d6599
  • editorOverviewRuler.errorForeground#b62d65
  • editorOverviewRuler.findMatchForeground#00000000
  • editorOverviewRuler.incomingContentForeground#b62d65
  • editorOverviewRuler.infoForeground#00000000
  • editorOverviewRuler.modifiedForeground#d98e4899
  • editorOverviewRuler.rangeHighlightForeground#00000000
  • editorOverviewRuler.selectionHighlightForeground#00000000
  • editorOverviewRuler.warningForeground#d98e48
  • editorOverviewRuler.wordHighlightForeground#00000000
  • editorOverviewRuler.wordHighlightStrongForeground#00000000
  • editorRuler.foreground#1F4662
  • editorSuggestWidget.background#161c22
  • editorSuggestWidget.border#161c22
  • editorSuggestWidget.foreground#b7c5d3
  • editorSuggestWidget.highlightForeground#ebbf83
  • editorSuggestWidget.selectedBackground#28323a
  • editorWarning.border#b7c5d300
  • editorWarning.foreground#ebbf83
  • editorWhitespace.foreground#b7c5d31a
  • editorWidget.background#161c22
  • editorWidget.resizeBorder#037f88
  • errorForeground#b62d65
  • extensionButton.prominentBackground#008B94
  • extensionButton.prominentForeground#fff
  • extensionButton.prominentHoverBackground#008B94
  • focusBorder#00000000
  • foreground#8094a7
  • gitDecoration.addedResourceForeground#33CED8
  • gitDecoration.deletedResourceForeground#b62d65
  • gitDecoration.ignoredResourceForeground#b7c5d380
  • gitDecoration.modifiedResourceForeground#ebbf83
  • gitDecoration.untrackedResourceForeground#008B94
  • gitlens.trailingLineForegroundColor#42628c
  • input.background#1d252c
  • input.border#1d252c
  • input.foreground#b7c5d3
  • input.placeholderForeground#b7c5d355
  • inputOption.activeBorder#333F4A
  • inputValidation.errorBackground#b62d65
  • inputValidation.errorBorder#b62d6599
  • inputValidation.infoBackground#5ec4ff
  • inputValidation.infoBorder#539afc
  • inputValidation.warningBackground#ebbf83
  • inputValidation.warningBorder#d98e48
  • list.activeSelectionBackground#1d252c99
  • list.activeSelectionForeground#b7c5d3
  • list.dropBackground#1d252c99
  • list.focusBackground#1d252c99
  • list.focusForeground#b7c5d3
  • list.highlightForeground#008b94
  • list.hoverBackground#1d252c99
  • list.hoverForeground#b7c5d3
  • list.inactiveSelectionBackground#161c22
  • list.inactiveSelectionForeground#b7c5d3
  • menu.selectionBackground#b7c5d311
  • menu.separatorBackground#b7c5d380
  • menubar.selectionBackground#1d252c
  • notificationCenterHeader.background#161c22
  • notificationLink.foreground#008b94
  • notifications.background#1d252c
  • notifications.border#008b94
  • panel.background#161c22
  • panel.border#333F4A00
  • panelTitle.activeForeground#008B94
  • panelTitle.inactiveForeground#8094a7
  • peekView.border#333F4A
  • peekViewEditor.background#1d252c
  • peekViewEditor.matchHighlightBackground#1d252c
  • peekViewEditorGutter.background#333F4A
  • peekViewResult.background#1d252c
  • peekViewResult.fileForeground#b7c5d3
  • peekViewResult.lineForeground#fff
  • peekViewResult.matchHighlightBackground#333F4A
  • peekViewResult.selectionBackground#333F4A
  • peekViewResult.selectionForeground#fff
  • peekViewTitle.background#1d252c
  • peekViewTitleDescription.foreground#b7c5d3
  • peekViewTitleLabel.foreground#008b94
  • pickerGroup.border#333F4A
  • pickerGroup.foreground#b7c5d3
  • progressBar.background#008b94
  • scrollbar.shadow#00000000
  • scrollbarSlider.activeBackground#333F4A77
  • scrollbarSlider.background#333F4A77
  • scrollbarSlider.hoverBackground#333F4A77
  • selection.background#037f8833
  • sideBar.background#161c22
  • sideBar.foreground#8094a7
  • sideBarSectionHeader.background#161c22
  • sideBarSectionHeader.foreground#8094a7
  • sideBarTitle.foreground#8094a7
  • statusBar.background#161c22
  • statusBar.debuggingBackground#037f88
  • statusBar.debuggingBorder#037f88
  • statusBar.debuggingForeground#fff
  • statusBar.foreground#8094a7
  • statusBar.noFolderBackground#161c22
  • statusBar.noFolderForeground#8094a7
  • statusBarItem.activeBackground#333F4A
  • statusBarItem.hoverBackground#333F4A
  • statusBarItem.prominentBackground#171d23
  • statusBarItem.prominentHoverBackground#333F4A
  • tab.activeBackground#161c22
  • tab.activeBorderTop#037f88
  • tab.activeForeground#8094a7
  • tab.hoverBorderTop#037f88
  • tab.inactiveBackground#161c22
  • tab.inactiveForeground#8094a799
  • tab.unfocusedActiveForeground#8094a7
  • tab.unfocusedInactiveForeground#8094a7
  • terminal.ansiBlack#41505E
  • terminal.ansiBlue#539afc
  • terminal.ansiBrightBlack#41505E
  • terminal.ansiBrightBlue#5EC4FF
  • terminal.ansiBrightCyan#70e1e8
  • terminal.ansiBrightGreen#33CED8
  • terminal.ansiBrightMagenta#b62d65
  • terminal.ansiBrightRed#b62d65
  • terminal.ansiBrightWhite#b7c5d3
  • terminal.ansiBrightYellow#ebbf83
  • terminal.ansiCyan#70e1e8
  • terminal.ansiGreen#008B94
  • terminal.ansiMagenta#b62d65
  • terminal.ansiRed#b62d65
  • terminal.ansiWhite#b7c5d3
  • terminal.ansiYellow#ebbf83
  • terminal.background#161c22
  • terminal.foreground#b7c5d3
  • terminal.selectionBackground#8094a733
  • terminalCursor.background#008B9422
  • terminalCursor.foreground#008B94
  • textBlockQuote.background#171d23
  • textBlockQuote.border#171d23
  • textCodeBlock.background#171d23
  • textLink.activeForeground#718ca1
  • textLink.foreground#718ca1
  • textPreformat.foreground#718ca1
  • textSeparator.foreground#718ca1
  • titleBar.activeBackground#161c22
  • titleBar.activeForeground#8094a7
  • titleBar.inactiveBackground#161c22
  • titleBar.inactiveForeground#8094a799
  • tree.indentGuidesStroke#6c7d8f55
  • walkThrough.embeddedEditorBackground#161c22
  • welcomePage.buttonBackground#161c22
  • welcomePage.buttonHoverBackground#333F4A
  • widget.shadow#00000066

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#42628citalic
punctuation.accessor#5EC4FF
constant#b62d53
constant.language.null, constant.language.undefined#b62d5399
entity#70e1e8
invalid#d95468
keyword#5ec4ff
storage.type.class.js#008B94
meta#718CA1
meta.brace#718CA1
punctuation#70e1e8
fenced_code.block.language.markdown#70e1e8
punctuation.definition.parameters#718CA1
entity.name.variable.parameter, meta.at-rule.function variable, meta.at-rule.mixin variable, meta.function.arguments, meta.selectionset.graphql meta.arguments.graphql variable.arguments.graphql, variable.parameter#ebbf83
punctuation.definition.template-expression#68A1F0
storage#008B94
storage.type.function.arrow#008B94
string, punctuation.definition.string#68A1F0
string.template, punctuation.definition.string.template#68A1F0
support#718CA1
support.function#70e1e8
support.class.component.js#5ca1f0
meta.jsx.children.js#b7c5d3ee
support.variable.property.dom#b7c5d3
variable#718CA1
source.css, source.stylus, source.scss, entity.other.attribute-name.class.css#68A1F0
punctuation.definition.constant.css#D95468
constant.other.color.rgb-value.hex.css#E27E8Dff
support.type.property-name.css#B7C5D3
keyword.other.important.scss#b62d65
entity.other.attribute-name.pseudo-element.css#5EC4FF
support.function.misc.scss#B7C5D3
entity.other.attribute-name.id.css, punctuation.definition.entity.css#68A1F0
entity.name.tag.css#68A1F0
source.css support, source.stylus support##B7C5D3
source.css constant, source.css support.constant, source.stylus constant, source.stylus support.constant#e27e8d
support.constant.property-value.css#718CA1
keyword.other.unit.px.css, keyword.other.unit.percentage.css, constant.other.color.rgb-value.hex.css, keyword.other.unit.ms.css, keyword.other.unit.s.css, keyword.other.unit.vh.css, keyword.other.unit.vw.css, keyword.other.unit.deg.css#d95468
source.css string, source.css punctuation.definition.string, source.stylus string, source.stylus punctuation.definition.string#68A1F0
source.css variable, source.stylus variable#ebbf83
entity.other#33CED8
text.html.basic#B7C5D3
toc-list.id.html#68A1F0
punctuation.definition.tag.end.html, punctuation.definition.tag.begin.html#718CA1
entity.name.tag.block.any.html, meta.tag.block.any.html, entity.name.tag.inline.any.html, entity.name.tag.structure.any.html, meta.tag.inline.any.html, entity.name.tag.html, entity.name.tag.js, meta.tag.js, meta.jsx.children.tsx, meta.tag.js, meta.jsx.children.tsx, meta.tag.js#008b94
punctuation.definition.string.begin, punctuation.definition.string.end#68A1F0
source.js storage.type.function#008B94
variable.language, entity.name.type.class.js#d98e48
meta.object-literal.key.js, meta.object.member.js#718ca1
entity.other.inherited-class.js, variable.language.this.js, variable.other.readwrite.alias.js, meta.import.js#b62d53
variable.other.constant.js, variable.other.constant.js.jsx#8BD49C
support.type.property-name.json#d98e48
variable.parameter.function.language.special.self.python#fb94ff
storage.type.function.python#b62d65
meta.function-call.arguments.python#8bd49c
meta.function-call.generic.python#008b94
source.json support#718CA1
source.json string, source.json punctuation.definition.string, punctuation.definition.string.end.json, punctuation.definition.string.begin.json#B7C5D3
source.php entity#9effff
variable.other.php, punctuation.definition.variable.php, variable.other.php#ebbf83
meta.paragraph.markdown#b7c5d3ee
meta.paragraph.markdown#b7c5d3ee
markup.bold#718693bold
markup.bold markup.italic, markup.italic markup.bold#718693italic bold
markup.inserted#33CED8
markup.deleted#b62d65
punctuation.definition.template-expression, punctuation.definition.string.template#d98e48
punctuation.definition.inserted#33CED8
punctuation.definition.deleted#b62d65
August Themes by inci-august - VS Code Theme