Skip to main content
CodingTheme

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#d1ad54
  • activityBar.background#282828
  • activityBar.dropBackground#d1ad54
  • activityBar.foreground#f8f8f8
  • activityBar.inactiveForeground#989898
  • activityBarBadge.background#d1ad54
  • activityBarBadge.foreground#282828
  • badge.background#d1ad54
  • badge.foreground#282828
  • button.background#d1ad54ee
  • button.foreground#282828
  • button.hoverBackground#d1ad54
  • button.secondaryBackground#d1ad54
  • button.secondaryForeground#f8f8f8
  • button.secondaryHoverBackground#d1ad54
  • charts.blue#989898
  • charts.foreground#f8f8f8
  • charts.green#f8f8f8
  • charts.lines#d1ad54
  • charts.orange#d08770
  • charts.purple#b48ead
  • charts.red#bf616a
  • charts.yellow#ebcb8b
  • debugConsole.errorForeground#bf616a
  • debugConsole.infoForeground#d1ad54
  • debugConsole.sourceForeground#616e88
  • debugConsole.warningForeground#ebcb8b
  • debugConsoleInputIcon.foreground#989898
  • debugExceptionWidget.background#4c566a
  • debugExceptionWidget.border#282828
  • debugToolBar.background#d1ad54
  • descriptionForeground#f8f8f8e6
  • diffEditor.insertedLineBackground#d1ad5433
  • diffEditor.insertedTextBackground#d1ad5433
  • diffEditor.removedLineBackground#9898984d
  • diffEditor.removedTextBackground#9898984d
  • dropdown.background#282828
  • dropdown.border#d1ad54
  • dropdown.foreground#f8f8f8
  • editor.background#282828
  • editor.findMatchBackground#d1ad5466
  • editor.findMatchHighlightBackground#d1ad5433
  • editor.findRangeHighlightBackground#d1ad5433
  • editor.focusedStackFrameHighlightBackground#5e81ac
  • editor.foreground#f8f8f8
  • editor.hoverBackground#282828
  • editor.hoverHighlightBackground#282828
  • editor.inactiveSelectionBackground#d1ad5433
  • editor.inlineValuesBackground#4c566a
  • editor.inlineValuesForeground#f8f8f8
  • editor.lineHighlightBackground#98989833
  • editor.rangeHighlightBackground#d1ad5452
  • editor.selectionBackground#d1ad5433
  • editor.selectionHighlightBackground#d1ad5433
  • editor.stackFrameHighlightBackground#5e81ac
  • editor.wordHighlightBackground#98989866
  • editor.wordHighlightStrongBackground#98989899
  • editorActiveLineNumber.foreground#f8f8f8cc
  • editorBracketHighlight.foreground1#989898
  • editorBracketHighlight.foreground2#989898
  • editorBracketHighlight.foreground3#989898
  • editorBracketHighlight.foreground4#989898
  • editorBracketHighlight.foreground5#989898
  • editorBracketHighlight.foreground6#989898
  • editorBracketHighlight.unexpectedBracket.foreground#bf616a
  • editorBracketMatch.background#28282800
  • editorBracketMatch.border#d1ad54
  • editorCodeLens.foreground#4c566a
  • editorCursor.foreground#f8f8f8
  • editorError.border#bf616a00
  • editorError.foreground#bf616a
  • editorGroup.background#282828
  • editorGroup.border#d1ad5401
  • editorGroup.dropBackground#d1ad5499
  • editorGroupHeader.border#d1ad5400
  • editorGroupHeader.noTabsBackground#282828
  • editorGroupHeader.tabsBackground#282828
  • editorGroupHeader.tabsBorder#d1ad5400
  • editorGutter.addedBackground#f8f8f8
  • editorGutter.background#282828
  • editorGutter.deletedBackground#bf616a
  • editorGutter.modifiedBackground#ebcb8b
  • editorHint.border#ebcb8b00
  • editorHint.foreground#ebcb8b
  • editorHoverWidget.background#282828
  • editorIndentGuide.activeBackground#d1ad54
  • editorIndentGuide.background#989898b3
  • editorInlayHint.background#d1ad54
  • editorInlayHint.foreground#f8f8f8
  • editorLineNumber.activeForeground#f8f8f8
  • editorLineNumber.foreground#989898
  • editorLink.activeForeground#d1ad54
  • editorMarkerNavigation.background#5e81acc0
  • editorMarkerNavigationError.background#bf616ac0
  • editorMarkerNavigationWarning.background#ebcb8bc0
  • editorOverviewRuler.addedForeground#f8f8f8
  • editorOverviewRuler.border#d1ad5400
  • editorOverviewRuler.currentContentForeground#d1ad54
  • editorOverviewRuler.deletedForeground#bf616a
  • editorOverviewRuler.errorForeground#bf616a
  • editorOverviewRuler.findMatchForeground#d1ad5466
  • editorOverviewRuler.incomingContentForeground#d1ad54
  • editorOverviewRuler.infoForeground#989898
  • editorOverviewRuler.modifiedForeground#ebcb8b
  • editorOverviewRuler.rangeHighlightForeground#d1ad5466
  • editorOverviewRuler.selectionHighlightForeground#282828
  • editorOverviewRuler.warningForeground#ebcb8b
  • editorOverviewRuler.wordHighlightForeground#d1ad5466
  • editorOverviewRuler.wordHighlightStrongForeground#d1ad5466
  • editorRuler.foreground#d1ad54
  • editorSuggestWidget.background#282828
  • editorSuggestWidget.border#d1ad54
  • editorSuggestWidget.focusHighlightForeground#f8f8f8
  • editorSuggestWidget.foreground#f8f8f8
  • editorSuggestWidget.highlightForeground#d1ad54
  • editorSuggestWidget.selectedBackground#d1ad54
  • editorSuggestWidget.selectedForeground#282828
  • editorWarning.border#ebcb8b00
  • editorWarning.foreground#ebcb8b
  • editorWhitespace.foreground#4c566ab3
  • editorWidget.background#282828
  • editorWidget.border#d1ad54
  • errorForeground#bf616a
  • extensionButton.prominentBackground#d1ad54
  • extensionButton.prominentForeground#f8f8f8
  • extensionButton.prominentHoverBackground#4c566a
  • focusBorder#d1ad54
  • foreground#f8f8f8
  • gitDecoration.conflictingResourceForeground#5e81ac
  • gitDecoration.deletedResourceForeground#bf616a
  • gitDecoration.ignoredResourceForeground#f8f8f866
  • gitDecoration.modifiedResourceForeground#ebcb8b
  • gitDecoration.stageDeletedResourceForeground#bf616a
  • gitDecoration.stageModifiedResourceForeground#ebcb8b
  • gitDecoration.submoduleResourceForeground#d1ad54
  • gitDecoration.untrackedResourceForeground#f8f8f8
  • icon.foreground#f8f8f8
  • input.background#282828
  • input.border#d1ad54
  • input.foreground#f8f8f8
  • input.placeholderForeground#f8f8f899
  • inputOption.activeBackground#5e81ac
  • inputOption.activeBorder#5e81ac
  • inputOption.activeForeground#f8f8f8
  • inputValidation.errorBackground#bf616a
  • inputValidation.errorBorder#bf616a
  • inputValidation.infoBackground#989898
  • inputValidation.infoBorder#989898
  • inputValidation.warningBackground#d08770
  • inputValidation.warningBorder#d08770
  • keybindingLabel.background#d1ad54
  • keybindingLabel.foreground#282828
  • list.activeSelectionBackground#d1ad54
  • list.activeSelectionForeground#282828
  • list.activeSelectionIconForeground#282828
  • list.dropBackground#d1ad5499
  • list.errorForeground#bf616a
  • list.focusBackground#d1ad5499
  • list.focusForeground#f8f8f8
  • list.focusHighlightForeground#f8f8f8
  • list.highlightForeground#d1ad54
  • list.hoverBackground#d1ad54
  • list.hoverForeground#282828
  • list.inactiveFocusBackground#d1ad54cc
  • list.inactiveSelectionBackground#d1ad54
  • list.inactiveSelectionForeground#282828
  • list.inactiveSelectionIconForeground#282828
  • list.warningForeground#ebcb8b
  • merge.border#d1ad5400
  • merge.currentContentBackground#9898984d
  • merge.currentHeaderBackground#98989866
  • merge.incomingContentBackground#d1ad544d
  • merge.incomingHeaderBackground#d1ad5466
  • minimap.background#282828
  • minimap.errorHighlight#bf616acc
  • minimap.findMatchHighlight#d1ad54
  • minimap.selectionHighlight#d1ad5433
  • minimap.warningHighlight#ebcb8bcc
  • minimapGutter.addedBackground#f8f8f8
  • minimapGutter.deletedBackground#bf616a
  • minimapGutter.modifiedBackground#ebcb8b
  • minimapSlider.activeBackground#d1ad54aa
  • minimapSlider.background#d1ad5499
  • minimapSlider.hoverBackground#d1ad54aa
  • notification.background#282828
  • notification.buttonBackground#d1ad54
  • notification.buttonForeground#282828
  • notification.buttonHoverBackground#f8f8f8
  • notification.errorBackground#282828
  • notification.errorForeground#f8f8f8
  • notification.foreground#f8f8f8
  • notification.infoBackground#282828
  • notification.infoForeground#f8f8f8
  • notification.warningBackground#282828
  • notification.warningForeground#f8f8f8
  • notificationCenter.border#d1ad5400
  • notificationCenterHeader.background#282828
  • notificationCenterHeader.foreground#d1ad54
  • notificationLink.foreground#d1ad54
  • notifications.background#282828
  • notifications.foreground#f8f8f8
  • notificationToast.border#d1ad5400
  • panel.background#282828
  • panel.border#d1ad54
  • panelTitle.activeBorder#d1ad5400
  • panelTitle.activeForeground#d1ad54
  • panelTitle.inactiveForeground#f8f8f8
  • peekView.border#4c566a
  • peekViewEditor.background#282828
  • peekViewEditor.matchHighlightBackground#d1ad544d
  • peekViewEditorGutter.background#282828
  • peekViewResult.background#282828
  • peekViewResult.fileForeground#d1ad54
  • peekViewResult.lineForeground#f8f8f866
  • peekViewResult.matchHighlightBackground#d1ad54cc
  • peekViewResult.selectionBackground#d1ad54
  • peekViewResult.selectionForeground#282828
  • peekViewTitle.background#d1ad54
  • peekViewTitleDescription.foreground#f8f8f8
  • peekViewTitleLabel.foreground#d1ad54
  • pickerGroup.border#d1ad54
  • pickerGroup.foreground#d1ad54
  • progressBar.background#d1ad54
  • quickInputList.focusBackground#d1ad54
  • quickInputList.focusForeground#282828
  • sash.hoverBorder#d1ad54
  • scrollbar.shadow#00000066
  • scrollbarSlider.activeBackground#d1ad5433
  • scrollbarSlider.background#d1ad5433
  • scrollbarSlider.hoverBackground#d1ad5433
  • selection.background#d1ad5433
  • sideBar.background#282828
  • sideBar.foreground#f8f8f8
  • sideBarSectionHeader.background#282828
  • sideBarSectionHeader.foreground#f8f8f8
  • sideBarTitle.foreground#f8f8f8
  • statusBar.background#d1ad54
  • statusBar.border#d1ad5400
  • statusBar.debuggingBackground#5e81ac
  • statusBar.debuggingForeground#f8f8f8
  • statusBar.foreground#282828
  • statusBar.noFolderBackground#d1ad54
  • statusBar.noFolderForeground#f8f8f8
  • statusBarItem.activeBackground#4c566a
  • statusBarItem.errorBackground#d1ad54
  • statusBarItem.errorForeground#bf616a
  • statusBarItem.hoverBackground#d1ad54
  • statusBarItem.prominentBackground#d1ad54
  • statusBarItem.prominentHoverBackground#d1ad54
  • statusBarItem.warningBackground#ebcb8b
  • statusBarItem.warningForeground#282828
  • tab.activeBorder#d1ad5400
  • tab.activeBorderTop#d1ad5400
  • tab.activeForeground#f8f8f8
  • tab.border#d1ad5400
  • tab.hoverBorder#d1ad5400
  • tab.inactiveBackground#282828
  • tab.inactiveForeground#f8f8f866
  • tab.lastPinnedBorder#4c566a
  • tab.unfocusedActiveBorder#d1ad5400
  • tab.unfocusedActiveBorderTop#d1ad5400
  • tab.unfocusedActiveForeground#f8f8f899
  • tab.unfocusedHoverBorder#d1ad5400
  • tab.unfocusedInactiveForeground#f8f8f866
  • terminal.ansiBlack#d1ad54
  • terminal.ansiBlue#989898
  • terminal.ansiBrightBlack#4c566a
  • terminal.ansiBrightBlue#989898
  • terminal.ansiBrightCyan#d1ad54
  • terminal.ansiBrightGreen#f8f8f8
  • terminal.ansiBrightMagenta#b48ead
  • terminal.ansiBrightRed#bf616a
  • terminal.ansiBrightWhite#f8f8f8
  • terminal.ansiBrightYellow#ebcb8b
  • terminal.ansiCyan#d1ad54
  • terminal.ansiGreen#f8f8f8
  • terminal.ansiMagenta#b48ead
  • terminal.ansiRed#bf616a
  • terminal.ansiWhite#e5e9f0
  • terminal.ansiYellow#ebcb8b
  • terminal.background#282828
  • terminal.foreground#f8f8f8
  • terminal.tab.activeBorder#d1ad54
  • textBlockQuote.background#d1ad54
  • textBlockQuote.border#989898
  • textCodeBlock.background#4c566a
  • textLink.activeForeground#d1ad54
  • textLink.foreground#d1ad54
  • textPreformat.foreground#d1ad54
  • textSeparator.foreground#f8f8f8
  • titleBar.activeBackground#282828
  • titleBar.activeForeground#f8f8f8
  • titleBar.border#28282800
  • titleBar.inactiveBackground#282828
  • titleBar.inactiveForeground#f8f8f866
  • tree.indentGuidesStroke#616e88
  • walkThrough.embeddedEditorBackground#282828
  • welcomePage.buttonBackground#d1ad54
  • welcomePage.buttonHoverBackground#4c566a
  • widget.shadow#00000066

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#f8f8f8ff
emphasisitalic
strongbold
comment#989898
constant.character#EBCB8B
constant.character.escape#EBCB8B
constant.language#989898
constant.numeric#f8f8f8
constant.regexp#f8f8f8
entity.name.class, entity.name.type.class#d1ad54
entity.name.function#d1ad54
entity.name.tag#989898
entity.other.attribute-name#d1ad54
entity.other.inherited-class#d1ad54bold
invalid.deprecated#f8f8f8
invalid.illegal#f8f8f8
keyword#989898
keyword.operator#989898
keyword.other.new#989898
markup.boldbold
markup.changed#EBCB8B
markup.deleted#BF616A
markup.inserted#f8f8f8
meta.preprocessor#5E81AC
punctuation#f8f8f8
punctuation.definition.method-parameters, punctuation.definition.function-parameters, punctuation.definition.parameters#f8f8f8
punctuation.definition.tag#989898
punctuation.definition.comment, punctuation.end.definition.comment, punctuation.start.definition.comment#989898
punctuation.section#f8f8f8
punctuation.section.embedded.begin, punctuation.section.embedded.end#989898
punctuation.terminator#989898
punctuation.definition.variable#989898
storage#989898
string#f8f8f8
string.regexp#EBCB8B
support.class#d1ad54
support.constant#989898
support.function#d1ad54
support.function.construct#989898
support.type#d1ad54
support.type.exception#d1ad54
token.debug-token#b48ead
token.error-token#bf616a
token.info-token#d1ad54
token.warn-token#ebcb8b
variable.other#f8f8f8
variable.language#989898
variable.parameter#f8f8f8
punctuation.separator.pointer-access.c#989898
source.c meta.preprocessor.include, source.c string.quoted.other.lt-gt.include#d1ad54
source.cpp keyword.control.directive.conditional, source.cpp punctuation.definition.directive, source.c keyword.control.directive.conditional, source.c punctuation.definition.directive#5E81ACbold
source.css constant.other.color.rgb-value#B48EAD
source.css meta.property-value#d1ad54
source.css keyword.control.at-rule.media, source.css keyword.control.at-rule.media punctuation.definition.keyword#D08770
source.css punctuation.definition.keyword#989898
source.css support.type.property-name#f8f8f8
source.diff meta.diff.range.context#d1ad54
source.diff meta.diff.header.from-file#d1ad54
source.diff punctuation.definition.from-file#d1ad54
source.diff punctuation.definition.range#d1ad54
source.diff punctuation.definition.separator#989898
entity.name.type.module.elixir#d1ad54
variable.other.readwrite.module.elixir#f8f8f8bold
constant.other.symbol.elixir#f8f8f8bold
variable.other.constant.elixir#d1ad54
source.go constant.other.placeholder.go#EBCB8B
source.java comment.block.documentation.javadoc punctuation.definition.entity.html#989898
source.java constant.other#f8f8f8
source.java keyword.other.documentation#d1ad54
source.java keyword.other.documentation.author.javadoc#d1ad54
source.java keyword.other.documentation.directive, source.java keyword.other.documentation.custom#d1ad54
source.java keyword.other.documentation.see.javadoc#d1ad54
source.java meta.method-call meta.method#d1ad54
source.java meta.tag.template.link.javadoc, source.java string.other.link.title.javadoc#d1ad54
source.java meta.tag.template.value.javadoc#d1ad54
source.java punctuation.definition.keyword.javadoc#d1ad54
source.java punctuation.definition.tag.begin.javadoc, source.java punctuation.definition.tag.end.javadoc#616E88
source.java storage.modifier.import#d1ad54
source.java storage.modifier.package#d1ad54
source.java storage.type#d1ad54
source.java storage.type.annotation#D08770
source.java storage.type.generic#d1ad54
source.java storage.type.primitive#989898
source.js punctuation.decorator, source.js meta.decorator variable.other.readwrite, source.js meta.decorator entity.name.function#D08770
source.js meta.object-literal.key#d1ad54
source.js storage.type.class.jsdoc#d1ad54
source.js string.quoted.template punctuation.quasi.element.begin, source.js string.quoted.template punctuation.quasi.element.end, source.js string.template punctuation.definition.template-expression#989898
source.js string.quoted.template meta.method-call.with-arguments#f8f8f8
source.js string.template meta.template.expression support.variable.property, source.js string.template meta.template.expression variable.other.object#f8f8f8
source.js support.type.primitive#989898
source.js variable.other.object#f8f8f8
source.js variable.other.readwrite.alias#d1ad54
source.js meta.embedded.line meta.brace.square, source.js meta.embedded.line meta.brace.round, source.js string.quoted.template meta.brace.square, source.js string.quoted.template meta.brace.round#f8f8f8
text.html.basic constant.character.entity.html#EBCB8B
text.html.basic constant.other.inline-data#D08770italic
text.html.basic meta.tag.sgml.doctype#5E81AC
text.html.basic punctuation.definition.entity#989898
source.properties entity.name.section.group-title.ini#d1ad54
source.properties punctuation.separator.key-value.ini#989898
text.html.markdown markup.fenced_code.block, text.html.markdown markup.fenced_code.block punctuation.definition#d1ad54
markup.heading#d1ad54
text.html.markdown markup.inline.raw, text.html.markdown markup.inline.raw punctuation.definition.raw#d1ad54
text.html.markdown markup.italicitalic
text.html.markdown markup.underline.linkunderline
text.html.markdown beginning.punctuation.definition.list#989898
text.html.markdown beginning.punctuation.definition.quote#d1ad54
text.html.markdown markup.quote#616E88
text.html.markdown constant.character.math.tex#989898
text.html.markdown punctuation.definition.math.begin, text.html.markdown punctuation.definition.math.end#5E81AC
text.html.markdown punctuation.definition.function.math.tex#d1ad54
text.html.markdown punctuation.math.operator.latex#989898
text.html.markdown punctuation.definition.heading#989898
text.html.markdown punctuation.definition.constant, text.html.markdown punctuation.definition.string#989898
text.html.markdown constant.other.reference.link, text.html.markdown string.other.link.description, text.html.markdown string.other.link.title#d1ad54
source.perl punctuation.definition.variable#f8f8f8
source.php meta.function-call, source.php meta.function-call.object#d1ad54
source.python entity.name.function.decorator, source.python meta.function.decorator support.type#989898
source.python meta.function-call.generic#d1ad54
source.python support.type#d1ad54
source.python variable.parameter.function.language#f8f8f8
source.python meta.function.parameters variable.parameter.function.language.special.self#989898
source.rust entity.name.type#d1ad54
source.rust meta.macro entity.name.function#d1ad54bold
source.rust meta.attribute, source.rust meta.attribute punctuation, source.rust meta.attribute keyword.operator#5E81AC
source.rust entity.name.type.traitbold
source.rust punctuation.definition.interpolation#EBCB8B
source.css.scss punctuation.definition.interpolation.begin.bracket.curly, source.css.scss punctuation.definition.interpolation.end.bracket.curly#989898
source.css.scss variable.interpolation#f8f8f8italic
source.ts punctuation.decorator, source.ts meta.decorator variable.other.readwrite, source.ts meta.decorator entity.name.function, source.tsx punctuation.decorator, source.tsx meta.decorator variable.other.readwrite, source.tsx meta.decorator entity.name.function#989898
source.ts meta.object-literal.key, source.tsx meta.object-literal.key#f8f8f8
source.ts meta.object-literal.key entity.name.function, source.tsx meta.object-literal.key entity.name.function#d1ad54
source.ts support.class, source.ts support.type, source.ts entity.name.type, source.ts entity.name.class, source.tsx support.class, source.tsx support.type, source.tsx entity.name.type, source.tsx entity.name.class#d1ad54
source.ts support.constant.math, source.ts support.constant.dom, source.ts support.constant.json, source.tsx support.constant.math, source.tsx support.constant.dom, source.tsx support.constant.json#d1ad54
source.ts support.variable, source.tsx support.variable#f8f8f8
source.ts meta.embedded.line meta.brace.square, source.ts meta.embedded.line meta.brace.round, source.tsx meta.embedded.line meta.brace.square, source.tsx meta.embedded.line meta.brace.round#f8f8f8
text.xml entity.name.tag.namespace#d1ad54
text.xml keyword.other.doctype#5E81AC
text.xml meta.tag.preprocessor entity.name.tag#5E81AC
text.xml string.unquoted.cdata, text.xml string.unquoted.cdata punctuation.definition.string#D08770italic
source.yaml entity.name.tag#d1ad54

Shiki preview

TypeScript sample highlighted with this variant's colors and tokenColors.

Loading...

Gold Standard by Nate Wolfe - VS Code Theme