Skip to main content
Coding Theme

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#282828
  • activityBar.border#32302f
  • activityBar.dropBorder#7daea3
  • activityBar.foreground#ddc7a1
  • activityBar.inactiveForeground#7c6f64
  • activityBarBadge.background#7daea3
  • activityBarBadge.foreground#282828
  • badge.background#7daea3
  • badge.foreground#282828
  • breadcrumb.activeSelectionForeground#ddc7a1
  • breadcrumb.background#282828
  • breadcrumb.focusForeground#7daea3
  • breadcrumb.foreground#d4be98bf
  • breadcrumbPicker.background#32302f
  • button.background#7daea3
  • button.foreground#282828
  • button.hoverBackground#89b482
  • button.secondaryBackground#45403d
  • button.secondaryForeground#d4be98
  • button.secondaryHoverBackground#45403d
  • checkbox.background#32302f
  • checkbox.border#45403d
  • checkbox.foreground#d4be98
  • checkbox.selectBackground#45403d
  • checkbox.selectBorder#7daea3
  • descriptionForeground#d4be98bf
  • diffEditor.insertedLineBackground#a9b6651a
  • diffEditor.insertedTextBackground#a9b66559
  • diffEditor.removedLineBackground#ea69621a
  • diffEditor.removedTextBackground#ea6962cc
  • diffEditorGutter.insertedLineBackground#a9b6651a
  • diffEditorGutter.removedLineBackground#ea69621a
  • diffEditorOverview.insertedForeground#a9b66599
  • diffEditorOverview.removedForeground#ea696299
  • disabledForeground#7c6f64
  • dropdown.background#32302f
  • dropdown.border#45403d
  • dropdown.foreground#d4be98
  • dropdown.listBackground#32302f
  • editor.background#282828
  • editor.findMatchBackground#d8a65766
  • editor.findMatchBorder#d8a657
  • editor.findMatchHighlightBackground#7daea366
  • editor.findMatchHighlightBorder#7daea3
  • editor.findRangeHighlightBackground#7daea31a
  • editor.foldBackground#32302f99
  • editor.foreground#d4be98
  • editor.hoverHighlightBackground#7daea31a
  • editor.inactiveSelectionBackground#7daea326
  • editor.lineHighlightBackground#32302fbf
  • editor.lineHighlightBorder#00000000
  • editor.rangeHighlightBackground#32302fbf
  • editor.selectionBackground#7daea33d
  • editor.selectionHighlightBackground#7daea31a
  • editor.snippetFinalTabstopHighlightBorder#a9b665
  • editor.snippetTabstopHighlightBackground#d8a65733
  • editor.wordHighlightBackground#7daea31a
  • editor.wordHighlightStrongBackground#45403d66
  • editor.wordHighlightTextBackground#7daea31a
  • editorBracketHighlight.foreground1#7daea3
  • editorBracketHighlight.foreground2#ea6962
  • editorBracketHighlight.foreground3#d8a657
  • editorBracketHighlight.foreground4#d3869b
  • editorBracketHighlight.foreground5#89b482
  • editorBracketHighlight.foreground6#d8a657
  • editorBracketHighlight.unexpectedBracket.foreground#ea6962
  • editorBracketMatch.background#7daea31a
  • editorBracketMatch.border#7daea3
  • editorBracketPairGuide.activeBackground1#7daea3
  • editorBracketPairGuide.activeBackground2#ea6962
  • editorBracketPairGuide.activeBackground3#d8a657
  • editorBracketPairGuide.activeBackground4#d3869b
  • editorBracketPairGuide.activeBackground5#89b482
  • editorBracketPairGuide.activeBackground6#d8a657
  • editorBracketPairGuide.background1#7daea34d
  • editorBracketPairGuide.background2#ea69624d
  • editorBracketPairGuide.background3#d8a6574d
  • editorBracketPairGuide.background4#d3869b4d
  • editorBracketPairGuide.background5#89b4824d
  • editorBracketPairGuide.background6#d8a6574d
  • editorCursor.foreground#7daea3
  • editorError.background#ea69621a
  • editorError.foreground#ea6962
  • editorGhostText.foreground#d4be98bf
  • editorGroup.border#32302f
  • editorGroup.dropBackground#7daea31a
  • editorGroup.emptyBackground#282828
  • editorGroupHeader.border#32302f
  • editorGroupHeader.noTabsBackground#282828
  • editorGroupHeader.tabsBackground#282828
  • editorGroupHeader.tabsBorder#32302f
  • editorGutter.addedBackground#a9b665
  • editorGutter.background#282828
  • editorGutter.commentRangeForeground#7c6f64
  • editorGutter.deletedBackground#ea6962
  • editorGutter.foldingControlForeground#7c6f64
  • editorGutter.modifiedBackground#d8a657
  • editorHint.foreground#a9b665
  • editorHoverWidget.background#32302f
  • editorHoverWidget.border#45403d
  • editorHoverWidget.foreground#d4be98
  • editorIndentGuide.activeBackground1#d4be981a
  • editorIndentGuide.background1#d4be980d
  • editorInfo.foreground#7daea3
  • editorLightBulb.foreground#d8a657
  • editorLightBulbAutoFix.foreground#a9b665
  • editorLineNumber.activeForeground#ddc7a1
  • editorLineNumber.foreground#7c6f64
  • editorLink.activeForeground#7daea3
  • editorMarkerNavigation.background#32302f
  • editorOverviewRuler.addedForeground#a9b66599
  • editorOverviewRuler.border#00000000
  • editorOverviewRuler.bracketMatchForeground#7daea3
  • editorOverviewRuler.deletedForeground#ea696299
  • editorOverviewRuler.errorForeground#ea6962
  • editorOverviewRuler.findMatchForeground#d8a65799
  • editorOverviewRuler.infoForeground#7daea3
  • editorOverviewRuler.modifiedForeground#d8a65799
  • editorOverviewRuler.rangeHighlightForeground#7daea366
  • editorOverviewRuler.selectionHighlightForeground#7daea366
  • editorOverviewRuler.warningForeground#d8a657
  • editorOverviewRuler.wordHighlightForeground#7daea366
  • editorOverviewRuler.wordHighlightStrongForeground#45403d
  • editorRuler.foreground#d4be981a
  • editorSuggestWidget.background#32302f
  • editorSuggestWidget.border#45403d
  • editorSuggestWidget.foreground#d4be98
  • editorSuggestWidget.highlightForeground#7daea3
  • editorSuggestWidget.selectedBackground#45403d
  • editorSuggestWidget.selectedForeground#ddc7a1
  • editorSuggestWidgetStatus.foreground#d4be98bf
  • editorUnnecessaryCode.opacity#00000080
  • editorWarning.foreground#d8a657
  • editorWhitespace.foreground#7c6f64
  • editorWidget.background#32302f
  • editorWidget.border#45403d
  • editorWidget.foreground#d4be98
  • errorForeground#ea6962
  • focusBorder#7daea3
  • foreground#d4be98
  • gitDecoration.addedResourceForeground#a9b665
  • gitDecoration.conflictingResourceForeground#d8a657
  • gitDecoration.deletedResourceForeground#ea6962
  • gitDecoration.ignoredResourceForeground#7c6f64
  • gitDecoration.modifiedResourceForeground#d8a657
  • gitDecoration.renamedResourceForeground#7daea3
  • gitDecoration.stageDeletedResourceForeground#ea6962
  • gitDecoration.stageModifiedResourceForeground#d8a657
  • gitDecoration.submoduleResourceForeground#89b482
  • gitDecoration.untrackedResourceForeground#a9b665
  • icon.foreground#d4be98
  • input.background#32302f
  • input.border#45403d
  • input.foreground#d4be98
  • input.placeholderForeground#7c6f64
  • inputOption.activeBackground#7daea31a
  • inputOption.activeBorder#7daea3
  • inputOption.activeForeground#ddc7a1
  • inputValidation.errorBackground#ea69621a
  • inputValidation.errorBorder#ea6962
  • inputValidation.infoBackground#7daea31a
  • inputValidation.infoBorder#7daea3
  • inputValidation.warningBackground#d8a6571a
  • inputValidation.warningBorder#d8a657
  • list.activeSelectionBackground#45403d
  • list.activeSelectionForeground#ddc7a1
  • list.dropBackground#7daea380
  • list.errorForeground#ea6962
  • list.focusBackground#45403d
  • list.focusForeground#ddc7a1
  • list.highlightForeground#7daea3
  • list.hoverBackground#45403d
  • list.hoverForeground#ddc7a1
  • list.inactiveFocusBackground#45403d
  • list.inactiveSelectionBackground#45403d
  • list.inactiveSelectionForeground#d4be98
  • list.invalidItemForeground#ea6962
  • list.warningForeground#d8a657
  • menu.background#32302f
  • menu.border#45403d
  • menu.foreground#d4be98
  • menu.selectionBackground#45403d
  • menu.selectionForeground#ddc7a1
  • menubar.selectionBackground#45403d
  • menubar.selectionForeground#ddc7a1
  • minimap.background#282828
  • minimap.errorHighlight#ea6962
  • minimap.findMatchHighlight#7daea366
  • minimap.selectionHighlight#7daea33d
  • minimap.warningHighlight#d8a657
  • minimapSlider.activeBackground#d4be9866
  • minimapSlider.background#d4be984c
  • minimapSlider.hoverBackground#45403d
  • notificationCenter.border#45403d
  • notificationCenterHeader.background#32302f
  • notificationCenterHeader.foreground#ddc7a1
  • notificationLink.foreground#7daea3
  • notifications.background#32302f
  • notifications.border#45403d
  • notifications.foreground#d4be98
  • notificationToast.border#45403d
  • panel.background#282828
  • panel.border#32302f
  • panel.dropBorder#7daea3
  • panelInput.border#45403d
  • panelSection.border#32302f
  • panelTitle.activeBorder#7daea3
  • panelTitle.activeForeground#ddc7a1
  • panelTitle.inactiveForeground#d4be98bf
  • peekView.border#7daea3
  • peekViewEditor.background#282828
  • peekViewEditor.matchHighlightBackground#d8a65766
  • peekViewResult.background#32302f
  • peekViewResult.fileForeground#ddc7a1
  • peekViewResult.lineForeground#d4be98
  • peekViewResult.matchHighlightBackground#7daea366
  • peekViewTitle.background#32302f
  • peekViewTitleDescription.foreground#d4be98bf
  • peekViewTitleLabel.foreground#ddc7a1
  • pickerGroup.border#45403d
  • pickerGroup.foreground#7daea3
  • progressBar.background#7daea3
  • quickInput.background#32302f
  • quickInput.foreground#d4be98
  • quickInputList.focusBackground#45403d
  • quickInputList.focusForeground#ddc7a1
  • quickInputTitle.background#45403d
  • sash.hoverBorder#7daea3
  • scrollbar.shadow#00000000
  • scrollbarSlider.activeBackground#d4be9866
  • scrollbarSlider.background#d4be984c
  • scrollbarSlider.hoverBackground#45403d
  • selection.background#7daea366
  • sideBar.background#282828
  • sideBar.border#32302f
  • sideBar.foreground#d4be98
  • sideBarSectionHeader.background#32302f
  • sideBarSectionHeader.border#45403d
  • sideBarSectionHeader.foreground#ddc7a1
  • sideBarTitle.foreground#ddc7a1
  • statusBar.background#32302f
  • statusBar.border#32302f
  • statusBar.debuggingBackground#d8a657
  • statusBar.debuggingForeground#282828
  • statusBar.foreground#d4be98
  • statusBar.noFolderBackground#32302f
  • statusBar.noFolderForeground#d4be98
  • statusBarItem.activeBackground#45403d
  • statusBarItem.hoverBackground#45403d
  • statusBarItem.prominentBackground#45403d
  • statusBarItem.prominentForeground#ddc7a1
  • statusBarItem.prominentHoverBackground#45403d
  • statusBarItem.remoteBackground#7daea3
  • statusBarItem.remoteForeground#282828
  • tab.activeBackground#32302f
  • tab.activeBorder#32302f
  • tab.activeBorderTop#7daea3
  • tab.activeForeground#ddc7a1
  • tab.border#32302f
  • tab.hoverBackground#45403d
  • tab.hoverForeground#ddc7a1
  • tab.inactiveBackground#282828
  • tab.inactiveForeground#d4be98bf
  • tab.unfocusedActiveBackground#32302f
  • tab.unfocusedActiveForeground#d4be98
  • tab.unfocusedInactiveForeground#7c6f64
  • terminal.ansiBlack#282828
  • terminal.ansiBlue#7daea3
  • terminal.ansiBrightBlack#45403d
  • terminal.ansiBrightBlue#7daea3
  • terminal.ansiBrightCyan#89b482
  • terminal.ansiBrightGreen#a9b665
  • terminal.ansiBrightMagenta#d3869b
  • terminal.ansiBrightRed#ea6962
  • terminal.ansiBrightWhite#ddc7a1
  • terminal.ansiBrightYellow#d8a657
  • terminal.ansiCyan#89b482
  • terminal.ansiGreen#a9b665
  • terminal.ansiMagenta#d3869b
  • terminal.ansiRed#ea6962
  • terminal.ansiWhite#d4be98
  • terminal.ansiYellow#d8a657
  • terminal.background#282828
  • terminal.border#32302f
  • terminal.foreground#d4be98
  • terminal.selectionBackground#7daea33d
  • terminalCursor.background#282828
  • terminalCursor.foreground#7daea3
  • textBlockQuote.background#32302f
  • textBlockQuote.border#45403d
  • textCodeBlock.background#32302f
  • textLink.activeForeground#7daea3
  • textLink.foreground#7daea3
  • textPreformat.foreground#d4be98
  • textSeparator.foreground#45403d
  • titleBar.activeBackground#32302f
  • titleBar.activeForeground#ddc7a1
  • titleBar.border#32302f
  • titleBar.inactiveBackground#282828
  • titleBar.inactiveForeground#d4be98bf
  • widget.shadow#00000066
  • window.activeBorder#45403d
  • window.inactiveBorder#32302f

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
meta.embedded.block, meta.separator, meta.diff.header#ddc7a1
text, source, meta.embedded, source.embedded#d4be98
comment, punctuation.definition.comment#7c6f64
comment.block.documentation, comment.documentation, comment.block.documentation.cs, comment.line.documentation.cs, punctuation.definition.comment.documentation#d4be98bf
meta.tag.cs, comment.block.documentation.cs entity.name.tag.cs, comment.block.documentation.cs entity.name.tag.localname.cs, comment.block.documentation.cs entity.name.tag.namespace.cs, comment.block.documentation.cs punctuation.definition.tag.cs, comment.block.documentation.cs punctuation.separator.colon.cs, comment.line.documentation.cs entity.name.tag.cs, comment.line.documentation.cs entity.name.tag.localname.cs, comment.line.documentation.cs entity.name.tag.namespace.cs, comment.line.documentation.cs punctuation.definition.tag.cs, comment.line.documentation.cs punctuation.separator.colon.cs, comment.documentation.attribute.name.cs, comment.documentation.attribute.quotes.cs, comment.documentation.attribute.value.cs, comment.documentation.cdata.cs, comment.documentation.comment.cs, comment.documentation.delimiter.cs, comment.documentation.entityReference.cs, comment.documentation.name.cs, comment.documentation.processingInstruction.cs, comment.documentation.cs#d4be98bf
comment.predictive, markup.ignored, markup.untracked#d4be98bfitalic
keyword, storage.modifier, storage.type, storage.type.namespace.cs, storage.type.class.cs, storage.type.record.cs, storage.type.struct.cs, storage.type.enum.cs, storage.type.interface.cs, storage.type.delegate.cs, keyword.type.bool.cs, keyword.type.sbyte.cs, keyword.type.byte.cs, keyword.type.short.cs, keyword.type.ushort.cs, keyword.type.nint.cs, keyword.type.nuint.cs, keyword.type.int.cs, keyword.type.uint.cs, keyword.type.long.cs, keyword.type.ulong.cs, keyword.type.float.cs, keyword.type.double.cs, keyword.type.decimal.cs, keyword.type.char.cs, keyword.type.string.cs, keyword.type.object.cs, keyword.type.void.cs, keyword.type.dynamic.cs#ea6962
meta.preprocessor, keyword.preprocessor, keyword.control.directive, keyword.control.import, entity.name.function.preprocessor#d3869b
constant.language.boolean#d3869b
constant.numeric#d3869b
constant, constant.language, constant.other, variable.other.constant, support.constant#89b482
entity.name.variable.enum-member, variable.other.enummember, support.constant.enum#89b482
string, punctuation.definition.string.begin, punctuation.definition.string.end#b3f6c0
constant.character.escape, constant.character.format.placeholder, constant.other.placeholder, string.regexp constant.character.escape#e78a4e
string.regexp#d8a657
string.quoted.other, string.other#d8a657
constant.other.symbol, string.other.symbol#d8a657
entity.name.type, entity.name.type.cs, entity.name.type.alias, entity.name.type.alias.cs, entity.name.type.class, entity.name.type.class.cs, entity.name.type.struct, entity.name.type.struct.cs, entity.name.type.interface, entity.name.type.interface.cs, entity.name.type.delegate, entity.name.type.delegate.cs, entity.name.type.type-parameter, entity.name.type.type-parameter.cs, support.type, support.class, entity.other.inherited-class#d8a657
entity.name.function.constructor, entity.name.function.constructor.cs, support.function.constructor, meta.function-call.constructor#d8a657
entity.name.type.enum, entity.name.type.enum.cs#d8a657
entity.name.namespace, entity.name.namespace.cs, entity.name.type.namespace, entity.name.type.namespace.cs, entity.name.scope-resolution, support.namespace, support.type.namespace, meta.namespace entity.name, meta.namespace.cs entity.name, meta.using.cs entity.name, meta.import entity.name, meta.import support.namespace#d4be98
entity.name.function, entity.name.function.member, support.function, meta.function-call, variable.function#a9b665
variable.other.property, entity.name.variable.property, entity.name.variable.field, support.variable.property, meta.property.object#7daea3
variable, variable.other, entity.name.variable#7daea3
variable.language, variable.other.this, variable.other.super, variable.parameter.builtin#d3869b
variable.parameter, variable.parameter.function, entity.name.variable.parameter#7daea3
entity.name.function.decorator, entity.name.type.attribute, entity.name.type.attribute.cs, entity.other.attribute, entity.other.attribute-name, entity.name.class.attribute, meta.annotation, meta.annotation entity.name, meta.attribute, meta.attribute entity.name, punctuation.definition.annotation#7daea3
entity.name.label, variable.other.label, keyword.control.label#e78a4e
keyword.operator, storage.type.function.arrow#e78a4e
keyword.operator.expression, keyword.operator.expression.cs, keyword.operator.expression.typeof.cs, keyword.operator.expression.new.cs, keyword.operator.expression.is.cs, keyword.operator.expression.as.cs#ea6962
punctuation, meta.brace, meta.delimiter#d4be98
punctuation.section, punctuation.definition.arguments, punctuation.parenthesis, punctuation.squarebracket, punctuation.curlybrace#d4be98
punctuation.separator, punctuation.terminator#d4be98
punctuation.special, punctuation.accessor, punctuation.separator.annotation#e78a4e
punctuation.definition.heading, punctuation.definition.bold, punctuation.definition.italic, punctuation.definition.raw, punctuation.definition.link, punctuation.definition.metadata#e78a4e
markup.list, punctuation.definition.list.begin, punctuation.definition.list.begin.markdown#e78a4e
entity.name.tag, support.class.component#e78a4e
meta.tag entity.other.attribute-name, entity.other.attribute-name.html, entity.other.attribute-name.xml#7daea3
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css, entity.name.tag.css, entity.name.tag.scss, entity.name.tag.less#a9b665
entity.other.attribute-name.pseudo-class, entity.other.attribute-name.pseudo-element, entity.name.tag.reference#7daea3
markup.underline.link.description, string.other.link.title.markdown#7daea3
markup.underline.link, markup.underline.link.href, markup.underline.link.image, string.other.link, string.other.link.destination#89b482
markup.italic, markup.quote#7daea3
markup.bold#d8a657bold
markup.heading, entity.name.section, entity.name.section.markdown#e78a4e
markup.raw, markup.inline.raw, markup.fenced_code#a9b665
markup.inserted, punctuation.definition.inserted#a9b665
invalid, invalid.illegal#ea6962
Gruvbox Material Neovim by RiverMatsumoto - VS Code Theme