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#DFE2ED
  • activityBar.activeBorder#9F94EC
  • activityBar.background#DFE2ED
  • activityBar.foreground#36464E
  • activityBar.inactiveForeground#404F56
  • activityBarBadge.background#4D4984
  • activityBarBadge.foreground#DFE2ED
  • badge.background#9F94EC
  • badge.foreground#36464E
  • breadcrumb.activeSelectionForeground#CACED8
  • breadcrumb.focusForeground#CACED8
  • breadcrumb.foreground#78828A
  • button.background#9F94EC
  • button.foreground#36464E
  • button.hoverBackground#9693C2
  • button.secondaryBackground#78828A
  • button.secondaryForeground#36464E
  • button.secondaryHoverBackground#CACED8
  • checkbox.background#263941
  • checkbox.border#78828A
  • checkbox.foreground#CACED8
  • debugExceptionWidget.background#263941
  • debugExceptionWidget.border#78828A
  • debugIcon.breakpointCurrentStackframeForeground#CACED8
  • debugIcon.breakpointDisabledForeground#CACED8
  • debugIcon.breakpointForeground#CACED8
  • debugIcon.breakpointStackframeForeground#CACED8
  • debugIcon.breakpointUnverifiedForeground#CACED8
  • debugIcon.continueForeground#CACED8
  • debugIcon.disconnectForeground#CACED8
  • debugIcon.pauseForeground#CACED8
  • debugIcon.restartForeground#CACED8
  • debugIcon.startForeground#CACED8
  • debugIcon.stepBackForeground#CACED8
  • debugIcon.stepIntoForeground#CACED8
  • debugIcon.stepOutForeground#CACED8
  • debugIcon.stepOverForeground#CACED8
  • debugIcon.stopForeground#CACED8
  • debugTokenExpression.boolean#9F94EC
  • debugTokenExpression.error#FF9A7B
  • debugTokenExpression.name#DF8CC7
  • debugTokenExpression.number#8ACC86
  • debugTokenExpression.string#BE8A7E
  • debugTokenExpression.value#CACED8
  • debugToolBar.background#263941
  • debugView.exceptionLabelBackground#FF9A7B
  • debugView.exceptionLabelForeground#263941
  • debugView.stateLabelBackground#78828A40
  • debugView.valueChangedHighlight#53A1DE
  • descriptionForeground#CACED8
  • diffEditor.diagonalFill#78828A80
  • diffEditor.insertedTextBackground#41927840
  • diffEditor.removedTextBackground#B3686D40
  • dropdown.background#263941
  • dropdown.border#78828A
  • dropdown.foreground#CACED8
  • dropdown.listBackground#263941
  • editor.background#36464E
  • editor.findMatchBackground#005376
  • editor.findMatchHighlightBackground#00537680
  • editor.findRangeHighlightBackground#00537640
  • editor.focusedStackFrameHighlightBackground#41927840
  • editor.foldBackground#78828A40
  • editor.foreground#CACED8
  • editor.hoverHighlightBackground#9693C240
  • editor.inactiveSelectionBackground#EDCB6720
  • editor.inlineValuesBackground#26394160
  • editor.inlineValuesForeground#9693C2
  • editor.lineHighlightBorder#00000000
  • editor.rangeHighlightBackground#00537640
  • editor.selectionBackground#EDCB6740
  • editor.selectionHighlightBackground#EDCB6720
  • editor.snippetFinalTabstopHighlightBorder#799DC0
  • editor.snippetTabstopHighlightBackground#799DC080
  • editor.stackFrameHighlightBackground#00537680
  • editor.symbolHighlightBackground#799DC040
  • editor.wordHighlightBackground#EDCB6720
  • editor.wordHighlightBorder#78828A
  • editor.wordHighlightStrongBackground#EDCB6720
  • editor.wordHighlightStrongBorder#CACED8
  • editorBracketHighlight.foreground1#BE8A7E
  • editorBracketHighlight.foreground2#A89769
  • editorBracketHighlight.foreground3#82A284
  • editorBracketHighlight.foreground4#799DC0
  • editorBracketHighlight.foreground5#9693C2
  • editorBracketHighlight.foreground6#B38AAA
  • editorBracketHighlight.unexpectedBracket.foreground#FF9A7B
  • editorBracketMatch.background#26394180
  • editorBracketMatch.border#CACED8
  • editorCodeLens.foreground#78828A
  • editorCursor.foreground#DFE2ED
  • editorError.foreground#FF9A7B
  • editorGhostText.border#78828A40
  • editorGhostText.foreground#78828A
  • editorGroup.border#78828A
  • editorGroup.dropBackground#EDCB6740
  • editorGroupHeader.noTabsBackground#263941
  • editorGroupHeader.tabsBackground#263941
  • editorGutter.addedBackground#41927880
  • editorGutter.commentRangeForeground#78828A
  • editorGutter.deletedBackground#B3686D80
  • editorGutter.foldingControlForeground#78828A
  • editorGutter.modifiedBackground#4189B680
  • editorHint.foreground#CACED8
  • editorHoverWidget.background#263941
  • editorHoverWidget.border#78828A
  • editorHoverWidget.foreground#CACED8
  • editorHoverWidget.statusBarBackground#263941
  • editorIndentGuide.activeBackground1#CACED8
  • editorIndentGuide.background1#78828A
  • editorInfo.foreground#8ACC86
  • editorLightBulb.foreground#F1CA59
  • editorLightBulbAutoFix.foreground#F1CA59
  • editorLineNumber.activeForeground#53A1DE
  • editorLineNumber.foreground#799DC0
  • editorLink.activeForeground#9693C2
  • editorMarkerNavigation.background#263941
  • editorMarkerNavigationError.background#FF9A7B
  • editorMarkerNavigationInfo.background#8ACC86
  • editorMarkerNavigationWarning.background#F1CA59
  • editorOverviewRuler.addedForeground#41927880
  • editorOverviewRuler.background#00000000
  • editorOverviewRuler.border#78828A
  • editorOverviewRuler.bracketMatchForeground#26394180
  • editorOverviewRuler.commonContentForeground#78828A80
  • editorOverviewRuler.currentContentForeground#B3686D80
  • editorOverviewRuler.deletedForeground#B3686D80
  • editorOverviewRuler.errorForeground#FF9A7B80
  • editorOverviewRuler.findMatchForeground#00537680
  • editorOverviewRuler.incomingContentForeground#41927880
  • editorOverviewRuler.infoForeground#8ACC8680
  • editorOverviewRuler.modifiedForeground#4189B680
  • editorOverviewRuler.rangeHighlightForeground#00537640
  • editorOverviewRuler.selectionHighlightForeground#EDCB6780
  • editorOverviewRuler.warningForeground#F1CA5980
  • editorOverviewRuler.wordHighlightForeground#799DC080
  • editorOverviewRuler.wordHighlightStrongForeground#53A1DE80
  • editorPane.background#263941
  • editorRuler.foreground#78828A80
  • editorStickyScroll.background#36464E
  • editorStickyScroll.border#78828A60
  • editorStickyScrollHover.background#404F5640
  • editorSuggestWidget.background#263941
  • editorSuggestWidget.border#78828A
  • editorSuggestWidget.foreground#CACED8
  • editorUnnecessaryCode.opacity#00000055
  • editorWarning.foreground#F1CA59
  • editorWhitespace.foreground#78828A
  • editorWidget.background#263941
  • editorWidget.border#78828A
  • editorWidget.foreground#CACED8
  • errorForeground#BE8A7E
  • extensionBadge.remoteBackground#DF8CC7
  • extensionBadge.remoteForeground#263941
  • extensionButton.prominentBackground#53A1DE
  • extensionButton.prominentForeground#263941
  • extensionButton.prominentHoverBackground#799DC0
  • focusBorder#78828A
  • foreground#CACED8
  • gitDecoration.addedResourceForeground#8ACC86
  • gitDecoration.conflictingResourceForeground#FF9A7B
  • gitDecoration.deletedResourceForeground#FF9A7B
  • gitDecoration.ignoredResourceForeground#78828A
  • gitDecoration.modifiedResourceForeground#F1CA59
  • gitDecoration.submoduleResourceForeground#53A1DE
  • gitDecoration.untrackedResourceForeground#8ACC86
  • gitlens.gutterBackgroundColor#78828A80
  • gitlens.gutterForegroundColor#CACED8
  • gitlens.gutterUncommittedForegroundColor#53A1DE
  • gitlens.lineHighlightBackgroundColor#799DC080
  • gitlens.lineHighlightOverviewRulerColor#41927880
  • gitlens.trailingLineBackgroundColor#00000000
  • gitlens.trailingLineForegroundColor#78828A80
  • icon.foreground#CACED8
  • imagePreview.border#78828A
  • input.background#263941
  • input.foreground#CACED8
  • input.placeholderForeground#78828A
  • inputOption.activeBackground#9693C2
  • inputOption.activeBorder#00000000
  • inputOption.activeForeground#36464E
  • inputValidation.errorBackground#263941
  • inputValidation.errorBorder#FF9A7B
  • inputValidation.errorForeground#CACED8
  • inputValidation.infoBackground#263941
  • inputValidation.infoBorder#78828A
  • inputValidation.infoForeground#CACED8
  • inputValidation.warningBackground#263941
  • inputValidation.warningBorder#F1CA59
  • inputValidation.warningForeground#CACED8
  • list.activeSelectionBackground#404F56
  • list.activeSelectionForeground#DFE2ED
  • list.deemphasizedForeground#78828A
  • list.errorForeground#CACED8
  • list.filterMatchBackground#263941
  • list.focusBackground#799DC080
  • list.focusForeground#263941
  • list.highlightForeground#DFE2ED
  • list.hoverBackground#404F5680
  • list.hoverForeground#CACED8
  • list.inactiveFocusBackground#799DC0
  • list.inactiveSelectionBackground#404F56
  • list.inactiveSelectionForeground#CACED8
  • list.invalidItemForeground#CACED8
  • list.warningForeground#CACED8
  • listFilterWidget.background#263941
  • listFilterWidget.noMatchesOutline#FF9A7B
  • listFilterWidget.outline#78828A
  • menu.background#263941
  • menu.border#78828A
  • menu.foreground#CACED8
  • menu.selectionBackground#36464E
  • menu.selectionForeground#CACED8
  • menu.separatorBackground#78828A
  • menubar.selectionBackground#CACED8
  • menubar.selectionForeground#263941
  • merge.commonContentBackground#78828A40
  • merge.commonHeaderBackground#78828A80
  • merge.currentContentBackground#B3686D40
  • merge.currentHeaderBackground#B3686D80
  • merge.incomingContentBackground#41927840
  • merge.incomingHeaderBackground#41927880
  • minimap.errorHighlight#FF9A7B80
  • minimap.findMatchHighlight#00537680
  • minimap.selectionHighlight#EDCB6740
  • minimap.warningHighlight#F1CA5980
  • minimapGutter.addedBackground#419278
  • minimapGutter.deletedBackground#B3686D
  • minimapGutter.modifiedBackground#4189B6
  • minimapSlider.activeBackground#78828A80
  • minimapSlider.background#78828A80
  • minimapSlider.hoverBackground#78828A80
  • notificationCenter.border#DFE2ED
  • notificationCenterHeader.background#263941
  • notificationCenterHeader.foreground#CACED8
  • notificationLink.foreground#9693C2
  • notifications.background#263941
  • notifications.border#78828A
  • notifications.foreground#CACED8
  • notificationsErrorIcon.foreground#BE8A7E
  • notificationsInfoIcon.foreground#CACED8
  • notificationsWarningIcon.foreground#F1CA59
  • notificationToast.border#78828A
  • panel.background#36464E
  • panel.border#DFE2ED
  • panel.dropBorder#00000000
  • panelInput.border#78828A
  • panelSection.dropBackground#00000000
  • panelSectionHeader.background#00000000
  • panelSectionHeader.border#78828A
  • panelTitle.activeBorder#DFE2ED
  • panelTitle.activeForeground#DFE2ED
  • panelTitle.inactiveForeground#CACED8
  • peekView.border#78828A
  • peekViewEditor.background#263941
  • peekViewEditor.matchHighlightBackground#B38AAA40
  • peekViewEditorGutter.background#263941
  • peekViewResult.background#263941
  • peekViewResult.fileForeground#DFE2ED
  • peekViewResult.lineForeground#CACED8
  • peekViewResult.matchHighlightBackground#B38AAA40
  • peekViewResult.selectionBackground#78828A
  • peekViewResult.selectionForeground#CACED8
  • peekViewTitle.background#263941
  • peekViewTitleDescription.foreground#CACED8
  • peekViewTitleLabel.foreground#DFE2ED
  • pickerGroup.border#78828A
  • pickerGroup.foreground#CACED8
  • progressBar.background#263941
  • quickInput.background#263941
  • quickInputTitle.background#263941
  • rust_analyzer.inlayHints.background#36464E80
  • rust_analyzer.inlayHints.background.chainingHints#36464E80
  • rust_analyzer.inlayHints.background.parameterHints#36464E80
  • rust_analyzer.inlayHints.background.typeHints#36464E80
  • rust_analyzer.inlayHints.foreground#78828A
  • rust_analyzer.inlayHints.foreground.chainingHints#78828A
  • rust_analyzer.inlayHints.foreground.parameterHints#78828A
  • rust_analyzer.inlayHints.foreground.typeHints#78828A
  • rust_analyzer.syntaxTreeBorder#DF8CC7
  • scm.providerBorder#78828A
  • scrollbar.shadow#78828A
  • searchEditor.findMatchBackground#977E3380
  • searchEditor.textInputBorder#78828A
  • selection.background#EDCB6740
  • settings.headerForeground#DFE2ED
  • settings.modifiedItemIndicator#4189B6
  • settings.numberInputBorder#78828A
  • settings.textInputBorder#78828A
  • sideBar.background#36464E
  • sideBar.border#DFE2ED
  • sideBar.dropBackground#36464E
  • sideBar.foreground#CACED8
  • sideBarSectionHeader.background#00000000
  • sideBarSectionHeader.border#78828A
  • sideBarTitle.foreground#CACED8
  • statusBar.background#9F94EC
  • statusBar.debuggingBackground#8ACC86
  • statusBar.debuggingForeground#36464E
  • statusBar.foreground#36464E
  • statusBar.noFolderBackground#F1CA59
  • statusBar.noFolderForeground#36464E
  • statusBarItem.activeBackground#78828A
  • statusBarItem.hoverBackground#9693C2
  • statusBarItem.prominentBackground#53A1DE
  • statusBarItem.prominentForeground#36464E
  • statusBarItem.prominentHoverBackground#799DC0
  • statusBarItem.remoteBackground#DF8CC7
  • statusBarItem.remoteForeground#36464E
  • symbolIcon.classForeground#CACED8
  • symbolIcon.constructorForeground#CACED8
  • symbolIcon.enumeratorForeground#CACED8
  • symbolIcon.enumeratorMemberForeground#CACED8
  • symbolIcon.eventForeground#CACED8
  • symbolIcon.fieldForeground#CACED8
  • symbolIcon.functionForeground#CACED8
  • symbolIcon.interfaceForeground#CACED8
  • symbolIcon.methodForeground#CACED8
  • symbolIcon.variableForeground#CACED8
  • tab.activeBackground#36464E
  • tab.activeForeground#CACED8
  • tab.activeModifiedBorder#4189B6
  • tab.border#36464E
  • tab.hoverForeground#CACED8
  • tab.inactiveBackground#263941
  • tab.inactiveForeground#78828A
  • tab.inactiveModifiedBorder#4189B680
  • tab.unfocusedActiveBackground#36464E
  • tab.unfocusedActiveForeground#CACED8
  • tab.unfocusedActiveModifiedBorder#4189B6c0
  • tab.unfocusedHoverForeground#CACED8
  • tab.unfocusedInactiveForeground#78828A
  • tab.unfocusedInactiveModifiedBorder#4189B640
  • terminal.ansiBlack#36464E
  • terminal.ansiBlue#555673
  • terminal.ansiBrightBlack#404F56
  • terminal.ansiBrightBlue#777798
  • terminal.ansiBrightCyan#BDDCFF
  • terminal.ansiBrightGreen#BFDCC2
  • terminal.ansiBrightMagenta#BF9DB9
  • terminal.ansiBrightRed#BB928B
  • terminal.ansiBrightWhite#F1F3FE
  • terminal.ansiBrightYellow#F1DFB6
  • terminal.ansiCyan#7E98B4
  • terminal.ansiGreen#809984
  • terminal.ansiMagenta#866C83
  • terminal.ansiRed#846560
  • terminal.ansiWhite#CACED8
  • terminal.ansiYellow#A79A79
  • terminal.background#36464E
  • terminal.border#78828A
  • terminal.foreground#CACED8
  • terminal.selectionBackground#EDCB6740
  • textBlockQuote.background#263941
  • textBlockQuote.border#00000000
  • textCodeBlock.background#263941
  • textLink.activeForeground#799DC0
  • textLink.foreground#53A1DE
  • textPreformat.background#404F56
  • textPreformat.foreground#CACED8
  • textSeparator.foreground#78828A
  • titleBar.activeBackground#DFE2ED
  • titleBar.activeForeground#36464E
  • titleBar.border#78828A
  • titleBar.inactiveBackground#DFE2ED
  • titleBar.inactiveForeground#404F56
  • tree.indentGuidesStroke#78828A
  • widget.shadow#78828A

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
emphasisitalic
strongbold
meta.diff.header#4189B6
markup.inserted#419278
markup.deleted#B3686D
markup.changed#4189B6
invalid#FF9A7Bbold underline
invalid.deprecated#F1CA59bold underline
markup.underlineunderline
markup.bold#BE8A7Ebold
markup.heading#9693C2bold
markup.italic#A89769italic
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#799DC0
markup.inline.raw, markup.raw.restructuredtext#82A284
markup.underline.link, markup.underline.link.image#799DC0
meta.link.reference.def.restructuredtext, punctuation.definition.directive.restructuredtext, string.other.link.description, string.other.link.title#B38AAA
entity.name.directive.restructuredtext, markup.quote#A89769italic
meta.separator.markdown#78828A
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#82A284
punctuation.definition.constant.restructuredtext#9693C2
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#9693C2
meta.paragraph.markdown punctuation.definition.string.begin, meta.paragraph.markdown punctuation.definition.string.end#CACED8
markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.begin, markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.end#A89769
comment, punctuation.definition.comment#78828A
keywordbold
storage.modifier, storage.type.modifier#799DC0bold
storage.type.namespace#DFE2EDbold
storage.type.class, storage.type.struct, storage.type.union, storage.type.enum#BE8A7Ebold
storage.type.modifier.access.control#799DC0bold
storage.type.templatebold
storage.type.function#DFE2EDbold
variable.language.this, variable.parameter.function.language.special.selfbold
keyword.control#799DC0
keyword.control.return, keyword.control.throw#BE8A7E
keyword.operator, entity.name.operator#799DC0
storage.modifier.reference
constant.language#799DC0bold
constant.numeric#799DC0
string#82A284
string.regexp#BE8A7E
string support.type.property-name#9693C2
entity.name.namespace#A89769
storage.type.primitive, storage.type.built-in#9693C2bold
entity.name.type#9693C2
storage.type.return-type.lambda#9693C2
entity.name.function.member, variable.other.property, variable.other.enummemberitalic
variable.parameter#B38AAA
variable.parameter.function-call#78828Abold
meta.function.definition.parameters variable.parameterunderline
entity.name.function.preprocessor, entity.name.function.macro#78828A
entity.name.other.preprocessor.macro.predefinedbold
support.function.builtinbold
token.info-token#8ACC86
token.warn-token#F1CA59
token.error-token#FF9A7B
token.debug-token#DF8CC7
keyword.operator.new, keyword.operator.delete#BE8A7Ebold
keyword.other.using, keyword.other.typedef#BE8A7E
keyword.other.default.constructor.cpp, keyword.other.delete.constructor.cpp#799DC0
keyword.other.operator.overload.cpp#799DC0
variable.parameter.preprocessor.cppunderline
keyword.operator.logical.pythonbold
punctuation.definition.decorator.python#78828A
entity.name.function.decorator.python#78828Abold
keyword.control.new.java#BE8A7E
keyword.operator.instanceof.javabold
variable.language.javabold
storage.modifier.import.java
punctuation.definition.annotation.java#78828A
storage.type.annotation.java#78828Abold
key.function.go#DFE2EDbold
storage.type.boolean.go#799DC0bold
entity.name.import.go#A89769
entity.name.tag#9693C2
entity.other.attribute-name#B38AAAitalic
entity.other.attribute-name.parent-selector#9693C2
storage.type.js#799DC0bold
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#799DC0
entity.name.function.target.makefile, entity.name.tag.yaml, support.type.property-name.json#799DC0