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.activeBackground#3E3C3D
  • activityBar.activeBorder#4F447A
  • activityBar.background#3E3C3D
  • activityBar.foreground#EBE4E1
  • activityBar.inactiveForeground#D5CFCC
  • activityBarBadge.background#A494DE
  • activityBarBadge.foreground#3E3C3D
  • badge.background#4F447A
  • badge.foreground#EBE4E1
  • breadcrumb.activeSelectionForeground#484646
  • breadcrumb.focusForeground#484646
  • breadcrumb.foreground#827E7D
  • button.background#4F447A
  • button.foreground#EBE4E1
  • button.hoverBackground#6C6686
  • button.secondaryBackground#827E7D
  • button.secondaryForeground#EBE4E1
  • button.secondaryHoverBackground#484646
  • checkbox.background#F5EEEA
  • checkbox.border#827E7D
  • checkbox.foreground#484646
  • debugExceptionWidget.background#F5EEEA
  • debugExceptionWidget.border#827E7D
  • debugIcon.breakpointCurrentStackframeForeground#484646
  • debugIcon.breakpointDisabledForeground#484646
  • debugIcon.breakpointForeground#484646
  • debugIcon.breakpointStackframeForeground#484646
  • debugIcon.breakpointUnverifiedForeground#484646
  • debugIcon.continueForeground#484646
  • debugIcon.disconnectForeground#484646
  • debugIcon.pauseForeground#484646
  • debugIcon.restartForeground#484646
  • debugIcon.startForeground#484646
  • debugIcon.stepBackForeground#484646
  • debugIcon.stepIntoForeground#484646
  • debugIcon.stepOutForeground#484646
  • debugIcon.stepOverForeground#484646
  • debugIcon.stopForeground#484646
  • debugTokenExpression.boolean#4F447A
  • debugTokenExpression.error#8B4A2C
  • debugTokenExpression.name#783F62
  • debugTokenExpression.number#3B6A39
  • debugTokenExpression.string#886051
  • debugTokenExpression.value#484646
  • debugToolBar.background#F5EEEA
  • debugView.exceptionLabelBackground#8B4A2C
  • debugView.exceptionLabelForeground#F5EEEA
  • debugView.stateLabelBackground#827E7D40
  • debugView.valueChangedHighlight#124D71
  • descriptionForeground#484646
  • diffEditor.diagonalFill#827E7D80
  • diffEditor.insertedTextBackground#3A926F40
  • diffEditor.removedTextBackground#B8636440
  • dropdown.background#F5EEEA
  • dropdown.border#827E7D
  • dropdown.foreground#484646
  • dropdown.listBackground#F5EEEA
  • editor.background#EBE4E1
  • editor.findMatchBackground#F7CB46
  • editor.findMatchHighlightBackground#F7CB4680
  • editor.findRangeHighlightBackground#F7CB4640
  • editor.focusedStackFrameHighlightBackground#3A926F40
  • editor.foldBackground#827E7D40
  • editor.foreground#484646
  • editor.hoverHighlightBackground#6C668640
  • editor.inactiveSelectionBackground#004D6C20
  • editor.inlineValuesBackground#F5EEEA60
  • editor.inlineValuesForeground#6C6686
  • editor.lineHighlightBorder#00000000
  • editor.rangeHighlightBackground#F7CB4640
  • editor.selectionBackground#004D6C40
  • editor.selectionHighlightBackground#004D6C20
  • editor.snippetFinalTabstopHighlightBorder#566E85
  • editor.snippetTabstopHighlightBackground#566E8580
  • editor.stackFrameHighlightBackground#F7CB4680
  • editor.symbolHighlightBackground#566E8540
  • editor.wordHighlightBackground#004D6C20
  • editor.wordHighlightBorder#827E7D
  • editor.wordHighlightStrongBackground#004D6C20
  • editor.wordHighlightStrongBorder#484646
  • editorBracketHighlight.foreground1#886051
  • editorBracketHighlight.foreground2#776A43
  • editorBracketHighlight.foreground3#5A7259
  • editorBracketHighlight.foreground4#566E85
  • editorBracketHighlight.foreground5#6C6686
  • editorBracketHighlight.foreground6#815F73
  • editorBracketHighlight.unexpectedBracket.foreground#8B4A2C
  • editorBracketMatch.background#F5EEEA80
  • editorBracketMatch.border#484646
  • editorCodeLens.foreground#827E7D
  • editorCursor.foreground#3E3C3D
  • editorError.foreground#8B4A2C
  • editorGhostText.border#827E7D40
  • editorGhostText.foreground#827E7D
  • editorGroup.border#827E7D
  • editorGroup.dropBackground#004D6C40
  • editorGroupHeader.noTabsBackground#F5EEEA
  • editorGroupHeader.tabsBackground#F5EEEA
  • editorGutter.addedBackground#3A926F80
  • editorGutter.commentRangeForeground#827E7D
  • editorGutter.deletedBackground#B8636480
  • editorGutter.foldingControlForeground#827E7D
  • editorGutter.modifiedBackground#3889B480
  • editorHint.foreground#484646
  • editorHoverWidget.background#F5EEEA
  • editorHoverWidget.border#827E7D
  • editorHoverWidget.foreground#484646
  • editorHoverWidget.statusBarBackground#F5EEEA
  • editorIndentGuide.activeBackground1#484646
  • editorIndentGuide.background1#827E7D
  • editorInfo.foreground#3B6A39
  • editorLightBulb.foreground#7F6800
  • editorLightBulbAutoFix.foreground#7F6800
  • editorLineNumber.activeForeground#124D71
  • editorLineNumber.foreground#566E85
  • editorLink.activeForeground#6C6686
  • editorMarkerNavigation.background#F5EEEA
  • editorMarkerNavigationError.background#8B4A2C
  • editorMarkerNavigationInfo.background#3B6A39
  • editorMarkerNavigationWarning.background#7F6800
  • editorOverviewRuler.addedForeground#3A926F80
  • editorOverviewRuler.background#00000000
  • editorOverviewRuler.border#827E7D
  • editorOverviewRuler.bracketMatchForeground#F5EEEA80
  • editorOverviewRuler.commonContentForeground#827E7D80
  • editorOverviewRuler.currentContentForeground#B8636480
  • editorOverviewRuler.deletedForeground#B8636480
  • editorOverviewRuler.errorForeground#8B4A2C80
  • editorOverviewRuler.findMatchForeground#F7CB4680
  • editorOverviewRuler.incomingContentForeground#3A926F80
  • editorOverviewRuler.infoForeground#3B6A3980
  • editorOverviewRuler.modifiedForeground#3889B480
  • editorOverviewRuler.rangeHighlightForeground#F7CB4640
  • editorOverviewRuler.selectionHighlightForeground#004D6C80
  • editorOverviewRuler.warningForeground#7F680080
  • editorOverviewRuler.wordHighlightForeground#566E8580
  • editorOverviewRuler.wordHighlightStrongForeground#124D7180
  • editorPane.background#F5EEEA
  • editorRuler.foreground#827E7D80
  • editorStickyScroll.background#EBE4E1
  • editorStickyScroll.border#827E7D60
  • editorStickyScrollHover.background#D5CFCC40
  • editorSuggestWidget.background#F5EEEA
  • editorSuggestWidget.border#827E7D
  • editorSuggestWidget.foreground#484646
  • editorUnnecessaryCode.opacity#00000055
  • editorWarning.foreground#7F6800
  • editorWhitespace.foreground#827E7D
  • editorWidget.background#F5EEEA
  • editorWidget.border#827E7D
  • editorWidget.foreground#484646
  • errorForeground#886051
  • extensionBadge.remoteBackground#783F62
  • extensionBadge.remoteForeground#F5EEEA
  • extensionButton.prominentBackground#124D71
  • extensionButton.prominentForeground#F5EEEA
  • extensionButton.prominentHoverBackground#566E85
  • focusBorder#827E7D
  • foreground#484646
  • gitDecoration.addedResourceForeground#3B6A39
  • gitDecoration.conflictingResourceForeground#8B4A2C
  • gitDecoration.deletedResourceForeground#8B4A2C
  • gitDecoration.ignoredResourceForeground#827E7D
  • gitDecoration.modifiedResourceForeground#7F6800
  • gitDecoration.submoduleResourceForeground#124D71
  • gitDecoration.untrackedResourceForeground#3B6A39
  • gitlens.gutterBackgroundColor#827E7D80
  • gitlens.gutterForegroundColor#484646
  • gitlens.gutterUncommittedForegroundColor#124D71
  • gitlens.lineHighlightBackgroundColor#566E8580
  • gitlens.lineHighlightOverviewRulerColor#3A926F80
  • gitlens.trailingLineBackgroundColor#00000000
  • gitlens.trailingLineForegroundColor#827E7D80
  • icon.foreground#484646
  • imagePreview.border#827E7D
  • input.background#F5EEEA
  • input.foreground#484646
  • input.placeholderForeground#827E7D
  • inputOption.activeBackground#6C6686
  • inputOption.activeBorder#00000000
  • inputOption.activeForeground#EBE4E1
  • inputValidation.errorBackground#F5EEEA
  • inputValidation.errorBorder#8B4A2C
  • inputValidation.errorForeground#484646
  • inputValidation.infoBackground#F5EEEA
  • inputValidation.infoBorder#827E7D
  • inputValidation.infoForeground#484646
  • inputValidation.warningBackground#F5EEEA
  • inputValidation.warningBorder#7F6800
  • inputValidation.warningForeground#484646
  • list.activeSelectionBackground#D5CFCC
  • list.activeSelectionForeground#3E3C3D
  • list.deemphasizedForeground#827E7D
  • list.errorForeground#484646
  • list.filterMatchBackground#F5EEEA
  • list.focusBackground#566E8580
  • list.focusForeground#F5EEEA
  • list.highlightForeground#3E3C3D
  • list.hoverBackground#D5CFCC80
  • list.hoverForeground#484646
  • list.inactiveFocusBackground#566E85
  • list.inactiveSelectionBackground#D5CFCC
  • list.inactiveSelectionForeground#484646
  • list.invalidItemForeground#484646
  • list.warningForeground#484646
  • listFilterWidget.background#F5EEEA
  • listFilterWidget.noMatchesOutline#8B4A2C
  • listFilterWidget.outline#827E7D
  • menu.background#F5EEEA
  • menu.border#827E7D
  • menu.foreground#484646
  • menu.selectionBackground#EBE4E1
  • menu.selectionForeground#484646
  • menu.separatorBackground#827E7D
  • menubar.selectionBackground#484646
  • menubar.selectionForeground#F5EEEA
  • merge.commonContentBackground#827E7D40
  • merge.commonHeaderBackground#827E7D80
  • merge.currentContentBackground#B8636440
  • merge.currentHeaderBackground#B8636480
  • merge.incomingContentBackground#3A926F40
  • merge.incomingHeaderBackground#3A926F80
  • minimap.errorHighlight#8B4A2C80
  • minimap.findMatchHighlight#F7CB4680
  • minimap.selectionHighlight#004D6C40
  • minimap.warningHighlight#7F680080
  • minimapGutter.addedBackground#3A926F
  • minimapGutter.deletedBackground#B86364
  • minimapGutter.modifiedBackground#3889B4
  • minimapSlider.activeBackground#827E7D80
  • minimapSlider.background#827E7D80
  • minimapSlider.hoverBackground#827E7D80
  • notificationCenter.border#3E3C3D
  • notificationCenterHeader.background#F5EEEA
  • notificationCenterHeader.foreground#484646
  • notificationLink.foreground#6C6686
  • notifications.background#F5EEEA
  • notifications.border#827E7D
  • notifications.foreground#484646
  • notificationsErrorIcon.foreground#886051
  • notificationsInfoIcon.foreground#484646
  • notificationsWarningIcon.foreground#7F6800
  • notificationToast.border#827E7D
  • panel.background#EBE4E1
  • panel.border#3E3C3D
  • panel.dropBorder#00000000
  • panelInput.border#827E7D
  • panelSection.dropBackground#00000000
  • panelSectionHeader.background#00000000
  • panelSectionHeader.border#827E7D
  • panelTitle.activeBorder#3E3C3D
  • panelTitle.activeForeground#3E3C3D
  • panelTitle.inactiveForeground#484646
  • peekView.border#827E7D
  • peekViewEditor.background#F5EEEA
  • peekViewEditor.matchHighlightBackground#815F7340
  • peekViewEditorGutter.background#F5EEEA
  • peekViewResult.background#F5EEEA
  • peekViewResult.fileForeground#3E3C3D
  • peekViewResult.lineForeground#484646
  • peekViewResult.matchHighlightBackground#815F7340
  • peekViewResult.selectionBackground#827E7D
  • peekViewResult.selectionForeground#484646
  • peekViewTitle.background#F5EEEA
  • peekViewTitleDescription.foreground#484646
  • peekViewTitleLabel.foreground#3E3C3D
  • pickerGroup.border#827E7D
  • pickerGroup.foreground#484646
  • progressBar.background#F5EEEA
  • quickInput.background#F5EEEA
  • quickInputTitle.background#F5EEEA
  • rust_analyzer.inlayHints.background#EBE4E180
  • rust_analyzer.inlayHints.background.chainingHints#EBE4E180
  • rust_analyzer.inlayHints.background.parameterHints#EBE4E180
  • rust_analyzer.inlayHints.background.typeHints#EBE4E180
  • rust_analyzer.inlayHints.foreground#827E7D
  • rust_analyzer.inlayHints.foreground.chainingHints#827E7D
  • rust_analyzer.inlayHints.foreground.parameterHints#827E7D
  • rust_analyzer.inlayHints.foreground.typeHints#827E7D
  • rust_analyzer.syntaxTreeBorder#783F62
  • scm.providerBorder#827E7D
  • scrollbar.shadow#827E7D
  • searchEditor.findMatchBackground#9A7C1880
  • searchEditor.textInputBorder#827E7D
  • selection.background#004D6C40
  • settings.headerForeground#3E3C3D
  • settings.modifiedItemIndicator#3889B4
  • settings.numberInputBorder#827E7D
  • settings.textInputBorder#827E7D
  • sideBar.background#EBE4E1
  • sideBar.border#3E3C3D
  • sideBar.dropBackground#EBE4E1
  • sideBar.foreground#484646
  • sideBarSectionHeader.background#00000000
  • sideBarSectionHeader.border#827E7D
  • sideBarTitle.foreground#484646
  • statusBar.background#4F447A
  • statusBar.debuggingBackground#3B6A39
  • statusBar.debuggingForeground#EBE4E1
  • statusBar.foreground#EBE4E1
  • statusBar.noFolderBackground#7F6800
  • statusBar.noFolderForeground#EBE4E1
  • statusBarItem.activeBackground#827E7D
  • statusBarItem.hoverBackground#6C6686
  • statusBarItem.prominentBackground#124D71
  • statusBarItem.prominentForeground#EBE4E1
  • statusBarItem.prominentHoverBackground#566E85
  • statusBarItem.remoteBackground#783F62
  • statusBarItem.remoteForeground#EBE4E1
  • symbolIcon.classForeground#484646
  • symbolIcon.constructorForeground#484646
  • symbolIcon.enumeratorForeground#484646
  • symbolIcon.enumeratorMemberForeground#484646
  • symbolIcon.eventForeground#484646
  • symbolIcon.fieldForeground#484646
  • symbolIcon.functionForeground#484646
  • symbolIcon.interfaceForeground#484646
  • symbolIcon.methodForeground#484646
  • symbolIcon.variableForeground#484646
  • tab.activeBackground#EBE4E1
  • tab.activeForeground#484646
  • tab.activeModifiedBorder#3889B4
  • tab.border#EBE4E1
  • tab.hoverForeground#484646
  • tab.inactiveBackground#F5EEEA
  • tab.inactiveForeground#827E7D
  • tab.inactiveModifiedBorder#3889B480
  • tab.unfocusedActiveBackground#EBE4E1
  • tab.unfocusedActiveForeground#484646
  • tab.unfocusedActiveModifiedBorder#3889B4c0
  • tab.unfocusedHoverForeground#484646
  • tab.unfocusedInactiveForeground#827E7D
  • tab.unfocusedInactiveModifiedBorder#3889B440
  • terminal.ansiBlack#3E3C3D
  • terminal.ansiBlue#3F3566
  • terminal.ansiBrightBlack#484646
  • terminal.ansiBrightBlue#5C4F89
  • terminal.ansiBrightCyan#64BAFF
  • terminal.ansiBrightGreen#7BC175
  • terminal.ansiBrightMagenta#B56895
  • terminal.ansiBrightRed#B06240
  • terminal.ansiBrightWhite#F5EEEA
  • terminal.ansiBrightYellow#DCB735
  • terminal.ansiCyan#3778A9
  • terminal.ansiGreen#497D46
  • terminal.ansiMagenta#793F62
  • terminal.ansiRed#783C1F
  • terminal.ansiWhite#D5CFCC
  • terminal.ansiYellow#8F750B
  • terminal.background#EBE4E1
  • terminal.border#827E7D
  • terminal.foreground#484646
  • terminal.selectionBackground#004D6C40
  • textBlockQuote.background#F5EEEA
  • textBlockQuote.border#00000000
  • textCodeBlock.background#F5EEEA
  • textLink.activeForeground#566E85
  • textLink.foreground#124D71
  • textPreformat.background#D5CFCC
  • textPreformat.foreground#484646
  • textSeparator.foreground#827E7D
  • titleBar.activeBackground#3E3C3D
  • titleBar.activeForeground#EBE4E1
  • titleBar.border#827E7D
  • titleBar.inactiveBackground#3E3C3D
  • titleBar.inactiveForeground#D5CFCC
  • tree.indentGuidesStroke#827E7D
  • widget.shadow#827E7D

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
emphasisitalic
strongbold
meta.diff.header#3889B4
markup.inserted#3A926F
markup.deleted#B86364
markup.changed#3889B4
invalid#8B4A2Cbold underline
invalid.deprecated#7F6800bold underline
markup.underlineunderline
markup.bold#886051bold
markup.heading#6C6686bold
markup.italic#776A43italic
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#566E85
markup.inline.raw, markup.raw.restructuredtext#5A7259
markup.underline.link, markup.underline.link.image#566E85
meta.link.reference.def.restructuredtext, punctuation.definition.directive.restructuredtext, string.other.link.description, string.other.link.title#815F73
entity.name.directive.restructuredtext, markup.quote#776A43italic
meta.separator.markdown#827E7D
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#5A7259
punctuation.definition.constant.restructuredtext#6C6686
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#6C6686
meta.paragraph.markdown punctuation.definition.string.begin, meta.paragraph.markdown punctuation.definition.string.end#484646
markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.begin, markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.end#776A43
comment, punctuation.definition.comment#827E7D
keywordbold
storage.modifier, storage.type.modifier#566E85bold
storage.type.namespace#3E3C3Dbold
storage.type.class, storage.type.struct, storage.type.union, storage.type.enum#886051bold
storage.type.modifier.access.control#566E85bold
storage.type.templatebold
storage.type.function#3E3C3Dbold
variable.language.this, variable.parameter.function.language.special.selfbold
keyword.control#566E85
keyword.control.return, keyword.control.throw#886051
keyword.operator, entity.name.operator#566E85
storage.modifier.reference
constant.language#566E85bold
constant.numeric#566E85
string#5A7259
string.regexp#886051
string support.type.property-name#6C6686
entity.name.namespace#776A43
storage.type.primitive, storage.type.built-in#6C6686bold
entity.name.type#6C6686
storage.type.return-type.lambda#6C6686
entity.name.function.member, variable.other.property, variable.other.enummemberitalic
variable.parameter#815F73
variable.parameter.function-call#827E7Dbold
meta.function.definition.parameters variable.parameterunderline
entity.name.function.preprocessor, entity.name.function.macro#827E7D
entity.name.other.preprocessor.macro.predefinedbold
support.function.builtinbold
token.info-token#3B6A39
token.warn-token#7F6800
token.error-token#8B4A2C
token.debug-token#783F62
keyword.operator.new, keyword.operator.delete#886051bold
keyword.other.using, keyword.other.typedef#886051
keyword.other.default.constructor.cpp, keyword.other.delete.constructor.cpp#566E85
keyword.other.operator.overload.cpp#566E85
variable.parameter.preprocessor.cppunderline
keyword.operator.logical.pythonbold
punctuation.definition.decorator.python#827E7D
entity.name.function.decorator.python#827E7Dbold
keyword.control.new.java#886051
keyword.operator.instanceof.javabold
variable.language.javabold
storage.modifier.import.java
punctuation.definition.annotation.java#827E7D
storage.type.annotation.java#827E7Dbold
key.function.go#3E3C3Dbold
storage.type.boolean.go#566E85bold
entity.name.import.go#776A43
entity.name.tag#6C6686
entity.other.attribute-name#815F73italic
entity.other.attribute-name.parent-selector#6C6686
storage.type.js#566E85bold
keyword.operator.expressionbold
support.function.jsbold
meta.directive.vue entity.other.attribute-namebold italic
expression.embedded punctuation.definition.generic.begin, expression.embedded punctuation.definition.generic.end#566E85
entity.name.function.target.makefile, entity.name.tag.yaml, support.type.property-name.json#566E85