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#9E92EC
  • activityBar.background#DFE2ED
  • activityBar.foreground#323F46
  • activityBar.inactiveForeground#3D4950
  • activityBarBadge.background#4B4381
  • activityBarBadge.foreground#DFE2ED
  • badge.background#9E92EC
  • badge.foreground#323F46
  • breadcrumb.activeSelectionForeground#C9CDD7
  • breadcrumb.focusForeground#C9CDD7
  • breadcrumb.foreground#778087
  • button.background#9E92EC
  • button.foreground#323F46
  • button.hoverBackground#9590C1
  • button.secondaryBackground#778087
  • button.secondaryForeground#323F46
  • button.secondaryHoverBackground#C9CDD7
  • checkbox.background#213038
  • checkbox.border#778087
  • checkbox.foreground#C9CDD7
  • debugExceptionWidget.background#213038
  • debugExceptionWidget.border#778087
  • debugIcon.breakpointCurrentStackframeForeground#C9CDD7
  • debugIcon.breakpointDisabledForeground#C9CDD7
  • debugIcon.breakpointForeground#C9CDD7
  • debugIcon.breakpointStackframeForeground#C9CDD7
  • debugIcon.breakpointUnverifiedForeground#C9CDD7
  • debugIcon.continueForeground#C9CDD7
  • debugIcon.disconnectForeground#C9CDD7
  • debugIcon.pauseForeground#C9CDD7
  • debugIcon.restartForeground#C9CDD7
  • debugIcon.startForeground#C9CDD7
  • debugIcon.stepBackForeground#C9CDD7
  • debugIcon.stepIntoForeground#C9CDD7
  • debugIcon.stepOutForeground#C9CDD7
  • debugIcon.stepOverForeground#C9CDD7
  • debugIcon.stopForeground#C9CDD7
  • debugTokenExpression.boolean#9E92EC
  • debugTokenExpression.error#FF9978
  • debugTokenExpression.name#DE8AC6
  • debugTokenExpression.number#89CB83
  • debugTokenExpression.string#BD887B
  • debugTokenExpression.value#C9CDD7
  • debugToolBar.background#213038
  • debugView.exceptionLabelBackground#FF9978
  • debugView.exceptionLabelForeground#213038
  • debugView.stateLabelBackground#77808740
  • debugView.valueChangedHighlight#509FDE
  • descriptionForeground#C9CDD7
  • diffEditor.diagonalFill#77808780
  • diffEditor.insertedTextBackground#3D907440
  • diffEditor.removedTextBackground#B2646940
  • dropdown.background#213038
  • dropdown.border#778087
  • dropdown.foreground#C9CDD7
  • dropdown.listBackground#213038
  • editor.background#323F46
  • editor.findMatchBackground#004D6F
  • editor.findMatchHighlightBackground#004D6F80
  • editor.findRangeHighlightBackground#004D6F40
  • editor.focusedStackFrameHighlightBackground#3D907440
  • editor.foldBackground#77808740
  • editor.foreground#C9CDD7
  • editor.hoverHighlightBackground#9590C140
  • editor.inactiveSelectionBackground#EDCA6320
  • editor.inlineValuesBackground#21303860
  • editor.inlineValuesForeground#9590C1
  • editor.lineHighlightBorder#00000000
  • editor.rangeHighlightBackground#004D6F40
  • editor.selectionBackground#EDCA6340
  • editor.selectionHighlightBackground#EDCA6320
  • editor.snippetFinalTabstopHighlightBorder#779BBF
  • editor.snippetTabstopHighlightBackground#779BBF80
  • editor.stackFrameHighlightBackground#004D6F80
  • editor.symbolHighlightBackground#779BBF40
  • editor.wordHighlightBackground#EDCA6320
  • editor.wordHighlightBorder#778087
  • editor.wordHighlightStrongBackground#EDCA6320
  • editor.wordHighlightStrongBorder#C9CDD7
  • editorBracketHighlight.foreground1#BD887B
  • editorBracketHighlight.foreground2#A89565
  • editorBracketHighlight.foreground3#81A181
  • editorBracketHighlight.foreground4#779BBF
  • editorBracketHighlight.foreground5#9590C1
  • editorBracketHighlight.foreground6#B387A8
  • editorBracketHighlight.unexpectedBracket.foreground#FF9978
  • editorBracketMatch.background#21303880
  • editorBracketMatch.border#C9CDD7
  • editorCodeLens.foreground#778087
  • editorCursor.foreground#DFE2ED
  • editorError.foreground#FF9978
  • editorGhostText.border#77808740
  • editorGhostText.foreground#778087
  • editorGroup.border#778087
  • editorGroup.dropBackground#EDCA6340
  • editorGroupHeader.noTabsBackground#213038
  • editorGroupHeader.tabsBackground#213038
  • editorGutter.addedBackground#3D907480
  • editorGutter.commentRangeForeground#778087
  • editorGutter.deletedBackground#B2646980
  • editorGutter.foldingControlForeground#778087
  • editorGutter.modifiedBackground#3E86B480
  • editorHint.foreground#C9CDD7
  • editorHoverWidget.background#213038
  • editorHoverWidget.border#778087
  • editorHoverWidget.foreground#C9CDD7
  • editorHoverWidget.statusBarBackground#213038
  • editorIndentGuide.activeBackground1#C9CDD7
  • editorIndentGuide.background1#778087
  • editorInfo.foreground#89CB83
  • editorLightBulb.foreground#F1C954
  • editorLightBulbAutoFix.foreground#F1C954
  • editorLineNumber.activeForeground#509FDE
  • editorLineNumber.foreground#779BBF
  • editorLink.activeForeground#9590C1
  • editorMarkerNavigation.background#213038
  • editorMarkerNavigationError.background#FF9978
  • editorMarkerNavigationInfo.background#89CB83
  • editorMarkerNavigationWarning.background#F1C954
  • editorOverviewRuler.addedForeground#3D907480
  • editorOverviewRuler.background#00000000
  • editorOverviewRuler.border#778087
  • editorOverviewRuler.bracketMatchForeground#21303880
  • editorOverviewRuler.commonContentForeground#77808780
  • editorOverviewRuler.currentContentForeground#B2646980
  • editorOverviewRuler.deletedForeground#B2646980
  • editorOverviewRuler.errorForeground#FF997880
  • editorOverviewRuler.findMatchForeground#004D6F80
  • editorOverviewRuler.incomingContentForeground#3D907480
  • editorOverviewRuler.infoForeground#89CB8380
  • editorOverviewRuler.modifiedForeground#3E86B480
  • editorOverviewRuler.rangeHighlightForeground#004D6F40
  • editorOverviewRuler.selectionHighlightForeground#EDCA6380
  • editorOverviewRuler.warningForeground#F1C95480
  • editorOverviewRuler.wordHighlightForeground#779BBF80
  • editorOverviewRuler.wordHighlightStrongForeground#509FDE80
  • editorPane.background#213038
  • editorRuler.foreground#77808780
  • editorStickyScroll.background#323F46
  • editorStickyScroll.border#77808760
  • editorStickyScrollHover.background#3D495040
  • editorSuggestWidget.background#213038
  • editorSuggestWidget.border#778087
  • editorSuggestWidget.foreground#C9CDD7
  • editorUnnecessaryCode.opacity#00000055
  • editorWarning.foreground#F1C954
  • editorWhitespace.foreground#778087
  • editorWidget.background#213038
  • editorWidget.border#778087
  • editorWidget.foreground#C9CDD7
  • errorForeground#BD887B
  • extensionBadge.remoteBackground#DE8AC6
  • extensionBadge.remoteForeground#213038
  • extensionButton.prominentBackground#509FDE
  • extensionButton.prominentForeground#213038
  • extensionButton.prominentHoverBackground#779BBF
  • focusBorder#778087
  • foreground#C9CDD7
  • gitDecoration.addedResourceForeground#89CB83
  • gitDecoration.conflictingResourceForeground#FF9978
  • gitDecoration.deletedResourceForeground#FF9978
  • gitDecoration.ignoredResourceForeground#778087
  • gitDecoration.modifiedResourceForeground#F1C954
  • gitDecoration.submoduleResourceForeground#509FDE
  • gitDecoration.untrackedResourceForeground#89CB83
  • gitlens.gutterBackgroundColor#77808780
  • gitlens.gutterForegroundColor#C9CDD7
  • gitlens.gutterUncommittedForegroundColor#509FDE
  • gitlens.lineHighlightBackgroundColor#779BBF80
  • gitlens.lineHighlightOverviewRulerColor#3D907480
  • gitlens.trailingLineBackgroundColor#00000000
  • gitlens.trailingLineForegroundColor#77808780
  • icon.foreground#C9CDD7
  • imagePreview.border#778087
  • input.background#213038
  • input.foreground#C9CDD7
  • input.placeholderForeground#778087
  • inputOption.activeBackground#9590C1
  • inputOption.activeBorder#00000000
  • inputOption.activeForeground#323F46
  • inputValidation.errorBackground#213038
  • inputValidation.errorBorder#FF9978
  • inputValidation.errorForeground#C9CDD7
  • inputValidation.infoBackground#213038
  • inputValidation.infoBorder#778087
  • inputValidation.infoForeground#C9CDD7
  • inputValidation.warningBackground#213038
  • inputValidation.warningBorder#F1C954
  • inputValidation.warningForeground#C9CDD7
  • list.activeSelectionBackground#3D4950
  • list.activeSelectionForeground#DFE2ED
  • list.deemphasizedForeground#778087
  • list.errorForeground#C9CDD7
  • list.filterMatchBackground#213038
  • list.focusBackground#779BBF80
  • list.focusForeground#213038
  • list.highlightForeground#DFE2ED
  • list.hoverBackground#3D495080
  • list.hoverForeground#C9CDD7
  • list.inactiveFocusBackground#779BBF
  • list.inactiveSelectionBackground#3D4950
  • list.inactiveSelectionForeground#C9CDD7
  • list.invalidItemForeground#C9CDD7
  • list.warningForeground#C9CDD7
  • listFilterWidget.background#213038
  • listFilterWidget.noMatchesOutline#FF9978
  • listFilterWidget.outline#778087
  • menu.background#213038
  • menu.border#778087
  • menu.foreground#C9CDD7
  • menu.selectionBackground#323F46
  • menu.selectionForeground#C9CDD7
  • menu.separatorBackground#778087
  • menubar.selectionBackground#C9CDD7
  • menubar.selectionForeground#213038
  • merge.commonContentBackground#77808740
  • merge.commonHeaderBackground#77808780
  • merge.currentContentBackground#B2646940
  • merge.currentHeaderBackground#B2646980
  • merge.incomingContentBackground#3D907440
  • merge.incomingHeaderBackground#3D907480
  • minimap.errorHighlight#FF997880
  • minimap.findMatchHighlight#004D6F80
  • minimap.selectionHighlight#EDCA6340
  • minimap.warningHighlight#F1C95480
  • minimapGutter.addedBackground#3D9074
  • minimapGutter.deletedBackground#B26469
  • minimapGutter.modifiedBackground#3E86B4
  • minimapSlider.activeBackground#77808780
  • minimapSlider.background#77808780
  • minimapSlider.hoverBackground#77808780
  • notificationCenter.border#DFE2ED
  • notificationCenterHeader.background#213038
  • notificationCenterHeader.foreground#C9CDD7
  • notificationLink.foreground#9590C1
  • notifications.background#213038
  • notifications.border#778087
  • notifications.foreground#C9CDD7
  • notificationsErrorIcon.foreground#BD887B
  • notificationsInfoIcon.foreground#C9CDD7
  • notificationsWarningIcon.foreground#F1C954
  • notificationToast.border#778087
  • panel.background#323F46
  • panel.border#DFE2ED
  • panel.dropBorder#00000000
  • panelInput.border#778087
  • panelSection.dropBackground#00000000
  • panelSectionHeader.background#00000000
  • panelSectionHeader.border#778087
  • panelTitle.activeBorder#DFE2ED
  • panelTitle.activeForeground#DFE2ED
  • panelTitle.inactiveForeground#C9CDD7
  • peekView.border#778087
  • peekViewEditor.background#213038
  • peekViewEditor.matchHighlightBackground#B387A840
  • peekViewEditorGutter.background#213038
  • peekViewResult.background#213038
  • peekViewResult.fileForeground#DFE2ED
  • peekViewResult.lineForeground#C9CDD7
  • peekViewResult.matchHighlightBackground#B387A840
  • peekViewResult.selectionBackground#778087
  • peekViewResult.selectionForeground#C9CDD7
  • peekViewTitle.background#213038
  • peekViewTitleDescription.foreground#C9CDD7
  • peekViewTitleLabel.foreground#DFE2ED
  • pickerGroup.border#778087
  • pickerGroup.foreground#C9CDD7
  • progressBar.background#213038
  • quickInput.background#213038
  • quickInputTitle.background#213038
  • rust_analyzer.inlayHints.background#323F4680
  • rust_analyzer.inlayHints.background.chainingHints#323F4680
  • rust_analyzer.inlayHints.background.parameterHints#323F4680
  • rust_analyzer.inlayHints.background.typeHints#323F4680
  • rust_analyzer.inlayHints.foreground#778087
  • rust_analyzer.inlayHints.foreground.chainingHints#778087
  • rust_analyzer.inlayHints.foreground.parameterHints#778087
  • rust_analyzer.inlayHints.foreground.typeHints#778087
  • rust_analyzer.syntaxTreeBorder#DE8AC6
  • scm.providerBorder#778087
  • scrollbar.shadow#778087
  • searchEditor.findMatchBackground#967C2680
  • searchEditor.textInputBorder#778087
  • selection.background#EDCA6340
  • settings.headerForeground#DFE2ED
  • settings.modifiedItemIndicator#3E86B4
  • settings.numberInputBorder#778087
  • settings.textInputBorder#778087
  • sideBar.background#323F46
  • sideBar.border#DFE2ED
  • sideBar.dropBackground#323F46
  • sideBar.foreground#C9CDD7
  • sideBarSectionHeader.background#00000000
  • sideBarSectionHeader.border#778087
  • sideBarTitle.foreground#C9CDD7
  • statusBar.background#9E92EC
  • statusBar.debuggingBackground#89CB83
  • statusBar.debuggingForeground#323F46
  • statusBar.foreground#323F46
  • statusBar.noFolderBackground#F1C954
  • statusBar.noFolderForeground#323F46
  • statusBarItem.activeBackground#778087
  • statusBarItem.hoverBackground#9590C1
  • statusBarItem.prominentBackground#509FDE
  • statusBarItem.prominentForeground#323F46
  • statusBarItem.prominentHoverBackground#779BBF
  • statusBarItem.remoteBackground#DE8AC6
  • statusBarItem.remoteForeground#323F46
  • symbolIcon.classForeground#C9CDD7
  • symbolIcon.constructorForeground#C9CDD7
  • symbolIcon.enumeratorForeground#C9CDD7
  • symbolIcon.enumeratorMemberForeground#C9CDD7
  • symbolIcon.eventForeground#C9CDD7
  • symbolIcon.fieldForeground#C9CDD7
  • symbolIcon.functionForeground#C9CDD7
  • symbolIcon.interfaceForeground#C9CDD7
  • symbolIcon.methodForeground#C9CDD7
  • symbolIcon.variableForeground#C9CDD7
  • tab.activeBackground#323F46
  • tab.activeForeground#C9CDD7
  • tab.activeModifiedBorder#3E86B4
  • tab.border#323F46
  • tab.hoverForeground#C9CDD7
  • tab.inactiveBackground#213038
  • tab.inactiveForeground#778087
  • tab.inactiveModifiedBorder#3E86B480
  • tab.unfocusedActiveBackground#323F46
  • tab.unfocusedActiveForeground#C9CDD7
  • tab.unfocusedActiveModifiedBorder#3E86B4c0
  • tab.unfocusedHoverForeground#C9CDD7
  • tab.unfocusedInactiveForeground#778087
  • tab.unfocusedInactiveModifiedBorder#3E86B440
  • terminal.ansiBlack#323F46
  • terminal.ansiBlue#53516F
  • terminal.ansiBrightBlack#3D4950
  • terminal.ansiBrightBlue#767495
  • terminal.ansiBrightCyan#BCDBFF
  • terminal.ansiBrightGreen#BEDBC1
  • terminal.ansiBrightMagenta#BE9CB8
  • terminal.ansiBrightRed#BA9088
  • terminal.ansiBrightWhite#F1F3FE
  • terminal.ansiBrightYellow#F1DFB4
  • terminal.ansiCyan#7D96B2
  • terminal.ansiGreen#7F9781
  • terminal.ansiMagenta#856880
  • terminal.ansiRed#83615B
  • terminal.ansiWhite#C9CDD7
  • terminal.ansiYellow#A69875
  • terminal.background#323F46
  • terminal.border#778087
  • terminal.foreground#C9CDD7
  • terminal.selectionBackground#EDCA6340
  • textBlockQuote.background#213038
  • textBlockQuote.border#00000000
  • textCodeBlock.background#213038
  • textLink.activeForeground#779BBF
  • textLink.foreground#509FDE
  • textPreformat.background#3D4950
  • textPreformat.foreground#C9CDD7
  • textSeparator.foreground#778087
  • titleBar.activeBackground#DFE2ED
  • titleBar.activeForeground#323F46
  • titleBar.border#778087
  • titleBar.inactiveBackground#DFE2ED
  • titleBar.inactiveForeground#3D4950
  • tree.indentGuidesStroke#778087
  • widget.shadow#778087

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
emphasisitalic
strongbold
meta.diff.header#3E86B4
markup.inserted#3D9074
markup.deleted#B26469
markup.changed#3E86B4
invalid#FF9978bold underline
invalid.deprecated#F1C954bold underline
markup.underlineunderline
markup.bold#BD887Bbold
markup.heading#9590C1bold
markup.italic#A89565italic
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#779BBF
markup.inline.raw, markup.raw.restructuredtext#81A181
markup.underline.link, markup.underline.link.image#779BBF
meta.link.reference.def.restructuredtext, punctuation.definition.directive.restructuredtext, string.other.link.description, string.other.link.title#B387A8
entity.name.directive.restructuredtext, markup.quote#A89565italic
meta.separator.markdown#778087
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#81A181
punctuation.definition.constant.restructuredtext#9590C1
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#9590C1
meta.paragraph.markdown punctuation.definition.string.begin, meta.paragraph.markdown punctuation.definition.string.end#C9CDD7
markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.begin, markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.end#A89565
comment, punctuation.definition.comment#778087
keywordbold
storage.modifier, storage.type.modifier#779BBFbold
storage.type.namespace#DFE2EDbold
storage.type.class, storage.type.struct, storage.type.union, storage.type.enum#BD887Bbold
storage.type.modifier.access.control#779BBFbold
storage.type.templatebold
storage.type.function#DFE2EDbold
variable.language.this, variable.parameter.function.language.special.selfbold
keyword.control#779BBF
keyword.control.return, keyword.control.throw#BD887B
keyword.operator, entity.name.operator#779BBF
storage.modifier.reference
constant.language#779BBFbold
constant.numeric#779BBF
string#81A181
string.regexp#BD887B
string support.type.property-name#9590C1
entity.name.namespace#A89565
storage.type.primitive, storage.type.built-in#9590C1bold
entity.name.type#9590C1
storage.type.return-type.lambda#9590C1
entity.name.function.member, variable.other.property, variable.other.enummemberitalic
variable.parameter#B387A8
variable.parameter.function-call#778087bold
meta.function.definition.parameters variable.parameterunderline
entity.name.function.preprocessor, entity.name.function.macro#778087
entity.name.other.preprocessor.macro.predefinedbold
support.function.builtinbold
token.info-token#89CB83
token.warn-token#F1C954
token.error-token#FF9978
token.debug-token#DE8AC6
keyword.operator.new, keyword.operator.delete#BD887Bbold
keyword.other.using, keyword.other.typedef#BD887B
keyword.other.default.constructor.cpp, keyword.other.delete.constructor.cpp#779BBF
keyword.other.operator.overload.cpp#779BBF
variable.parameter.preprocessor.cppunderline
keyword.operator.logical.pythonbold
punctuation.definition.decorator.python#778087
entity.name.function.decorator.python#778087bold
keyword.control.new.java#BD887B
keyword.operator.instanceof.javabold
variable.language.javabold
storage.modifier.import.java
punctuation.definition.annotation.java#778087
storage.type.annotation.java#778087bold
key.function.go#DFE2EDbold
storage.type.boolean.go#779BBFbold
entity.name.import.go#A89565
entity.name.tag#9590C1
entity.other.attribute-name#B387A8italic
entity.other.attribute-name.parent-selector#9590C1
storage.type.js#779BBFbold
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#779BBF
entity.name.function.target.makefile, entity.name.tag.yaml, support.type.property-name.json#779BBF