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#B1AEAB
  • activityBar.activeBorder#595386
  • activityBar.background#E8E2DA
  • activityBar.border#5C7A9A
  • activityBar.foreground#47423E
  • activityBar.inactiveForeground#6F6C6A
  • activityBarBadge.background#595386
  • activityBarBadge.foreground#E8E2DA
  • badge.background#595386
  • badge.foreground#E8E2DA
  • breadcrumb.activeSelectionForeground#47423E
  • breadcrumb.focusForeground#47423E
  • breadcrumb.foreground#6F6C6A
  • button.background#595386
  • button.foreground#E8E2DA
  • button.hoverBackground#756F9B
  • button.secondaryBackground#6F6C6A
  • button.secondaryForeground#E8E2DA
  • button.secondaryHoverBackground#47423E
  • checkbox.background#FCF9F4
  • checkbox.border#6F6C6A
  • checkbox.foreground#47423E
  • contrastActiveBorder#5C7A9A
  • contrastBorder#5C7A9A
  • debugExceptionWidget.background#FCF9F4
  • debugExceptionWidget.border#6F6C6A
  • debugIcon.breakpointCurrentStackframeForeground#47423E
  • debugIcon.breakpointDisabledForeground#47423E
  • debugIcon.breakpointForeground#47423E
  • debugIcon.breakpointStackframeForeground#47423E
  • debugIcon.breakpointUnverifiedForeground#47423E
  • debugIcon.continueForeground#47423E
  • debugIcon.disconnectForeground#47423E
  • debugIcon.pauseForeground#47423E
  • debugIcon.restartForeground#47423E
  • debugIcon.startForeground#47423E
  • debugIcon.stepBackForeground#47423E
  • debugIcon.stepIntoForeground#47423E
  • debugIcon.stepOutForeground#47423E
  • debugIcon.stepOverForeground#47423E
  • debugIcon.stopForeground#47423E
  • debugTokenExpression.boolean#595386
  • debugTokenExpression.error#945542
  • debugTokenExpression.name#804A6B
  • debugTokenExpression.number#456946
  • debugTokenExpression.string#996953
  • debugTokenExpression.value#47423E
  • debugToolBar.background#FCF9F4
  • debugView.exceptionLabelBackground#945542
  • debugView.exceptionLabelForeground#FCF9F4
  • debugView.stateLabelBackground#6F6C6A40
  • debugView.valueChangedHighlight#345E7B
  • descriptionForeground#47423E
  • diffEditor.border#6F6C6A60
  • diffEditor.diagonalFill#6F6C6A80
  • diffEditor.insertedTextBackground#85B88540
  • diffEditor.insertedTextBorder#85B88560
  • diffEditor.removedTextBackground#CC9A9340
  • diffEditor.removedTextBorder#CC9A9360
  • dropdown.background#FCF9F4
  • dropdown.border#6F6C6A
  • dropdown.foreground#47423E
  • dropdown.listBackground#FCF9F4
  • editor.background#E8E2DA
  • editor.findMatchBackground#C3AD63
  • editor.findMatchBorder#594A06
  • editor.findMatchHighlightBackground#C3AD6360
  • editor.findMatchHighlightBorder#594A0680
  • editor.findRangeHighlightBackground#7CB2CE20
  • editor.findRangeHighlightBorder#244C6A80
  • editor.focusedStackFrameHighlightBackground#85B88540
  • editor.foldBackground#6F6C6A40
  • editor.foreground#47423E
  • editor.hoverHighlightBackground#756F9B40
  • editor.inactiveSelectionBackground#244C6A30
  • editor.inlineValuesBackground#FCF9F460
  • editor.inlineValuesForeground#756F9B
  • editor.lineHighlightBackground#B1AEAB40
  • editor.lineHighlightBorder#00000000
  • editor.rangeHighlightBackground#F2EDE740
  • editor.selectionBackground#244C6A60
  • editor.selectionHighlightBackground#244C6A30
  • editor.selectionHighlightBorder#244C6A
  • editor.snippetFinalTabstopHighlightBorder#5C7A9A
  • editor.snippetTabstopHighlightBackground#5C7A9A80
  • editor.stackFrameHighlightBackground#F2EDE780
  • editor.symbolHighlightBackground#5C7A9A40
  • editor.wordHighlightBackground#D0CAC220
  • editor.wordHighlightBorder#484643
  • editor.wordHighlightStrongBackground#D0CAC220
  • editor.wordHighlightStrongBorder#47423E
  • editorBracketHighlight.foreground1#996953
  • editorBracketHighlight.foreground2#867639
  • editorBracketHighlight.foreground3#638461
  • editorBracketHighlight.foreground4#5C7A9A
  • editorBracketHighlight.foreground5#756F9B
  • editorBracketHighlight.foreground6#8E6981
  • editorBracketHighlight.unexpectedBracket.foreground#945542
  • editorBracketMatch.background#FCF9F480
  • editorBracketMatch.border#47423E
  • editorCodeLens.foreground#6F6C6A
  • editorCursor.foreground#2B2623
  • editorError.background#CC9A9340
  • editorError.foreground#945542
  • editorGhostText.border#6F6C6A40
  • editorGhostText.foreground#6F6C6A
  • editorGroup.border#5C7A9A
  • editorGroup.dropBackground#7CB2CE40
  • editorGroup.emptyBackground#E8E2DA
  • editorGroupHeader.border#5C7A9A
  • editorGroupHeader.noTabsBackground#E8E2DA
  • editorGroupHeader.tabsBackground#E8E2DA
  • editorGroupHeader.tabsBorder#5C7A9A
  • editorGutter.addedBackground#85B88580
  • editorGutter.commentRangeForeground#6F6C6A
  • editorGutter.deletedBackground#CC9A9380
  • editorGutter.foldingControlForeground#6F6C6A
  • editorGutter.modifiedBackground#7CB2CE80
  • editorHint.foreground#47423E
  • editorHoverWidget.background#FCF9F4
  • editorHoverWidget.border#6F6C6A
  • editorHoverWidget.foreground#47423E
  • editorHoverWidget.statusBarBackground#FCF9F4
  • editorIndentGuide.activeBackground1#47423E
  • editorIndentGuide.background1#6F6C6A
  • editorInfo.background#7CB2CE20
  • editorInfo.foreground#5C7A9A
  • editorLightBulb.foreground#856C3A
  • editorLightBulbAutoFix.foreground#856C3A
  • editorLineNumber.activeForeground#345E7B
  • editorLineNumber.foreground#244C6A
  • editorLink.activeForeground#756F9B
  • editorMarkerNavigation.background#FCF9F4
  • editorMarkerNavigationError.background#945542
  • editorMarkerNavigationInfo.background#456946
  • editorMarkerNavigationWarning.background#856C3A
  • editorOverviewRuler.addedForeground#85B88580
  • editorOverviewRuler.background#00000000
  • editorOverviewRuler.border#6F6C6A
  • editorOverviewRuler.bracketMatchForeground#FCF9F480
  • editorOverviewRuler.commonContentForeground#6F6C6A80
  • editorOverviewRuler.currentContentForeground#CC9A9380
  • editorOverviewRuler.deletedForeground#CC9A9380
  • editorOverviewRuler.errorForeground#94554280
  • editorOverviewRuler.findMatchForeground#C3AD6380
  • editorOverviewRuler.incomingContentForeground#85B88580
  • editorOverviewRuler.infoForeground#45694680
  • editorOverviewRuler.modifiedForeground#7CB2CE80
  • editorOverviewRuler.rangeHighlightForeground#C3AD6340
  • editorOverviewRuler.selectionHighlightForeground#244C6A80
  • editorOverviewRuler.warningForeground#856C3A80
  • editorOverviewRuler.wordHighlightForeground#5C7A9A80
  • editorOverviewRuler.wordHighlightStrongForeground#345E7B80
  • editorPane.background#FCF9F4
  • editorRuler.foreground#6F6C6A80
  • editorStickyScroll.background#E8E2DA
  • editorStickyScroll.border#6F6C6A60
  • editorStickyScrollHover.background#B1AEAB40
  • editorSuggestWidget.background#FCF9F4
  • editorSuggestWidget.border#6F6C6A
  • editorSuggestWidget.foreground#47423E
  • editorUnnecessaryCode.opacity#00000055
  • editorWarning.background#C3AD6340
  • editorWarning.foreground#856C3A
  • editorWhitespace.foreground#6F6C6A
  • editorWidget.background#FCF9F4
  • editorWidget.border#6F6C6A
  • editorWidget.foreground#47423E
  • errorForeground#996953
  • focusBorder#6F6C6A
  • foreground#47423E
  • gitDecoration.addedResourceForeground#456946
  • gitDecoration.conflictingResourceForeground#945542
  • gitDecoration.deletedResourceForeground#945542
  • gitDecoration.ignoredResourceForeground#6F6C6A
  • gitDecoration.modifiedResourceForeground#856C3A
  • gitDecoration.submoduleResourceForeground#345E7B
  • gitDecoration.untrackedResourceForeground#456946
  • icon.foreground#47423E
  • input.background#FCF9F4
  • input.border#6F6C6A
  • input.foreground#47423E
  • input.placeholderForeground#6F6C6A
  • inputOption.activeBackground#756F9B
  • inputOption.activeBorder#00000000
  • inputOption.activeForeground#E8E2DA
  • inputValidation.errorBackground#FCF9F4
  • inputValidation.errorBorder#945542
  • inputValidation.errorForeground#47423E
  • inputValidation.infoBackground#FCF9F4
  • inputValidation.infoBorder#6F6C6A
  • inputValidation.infoForeground#47423E
  • inputValidation.warningBackground#FCF9F4
  • inputValidation.warningBorder#856C3A
  • inputValidation.warningForeground#47423E
  • list.activeSelectionBackground#B1AEAB60
  • list.activeSelectionForeground#2B2623
  • list.deemphasizedForeground#6F6C6A
  • list.errorForeground#47423E
  • list.filterMatchBackground#FCF9F4
  • list.focusBackground#5C7A9A80
  • list.focusForeground#FCF9F4
  • list.highlightForeground#2B2623
  • list.hoverBackground#B1AEAB80
  • list.hoverForeground#47423E
  • list.inactiveFocusBackground#5C7A9A
  • list.inactiveSelectionBackground#B1AEAB40
  • list.inactiveSelectionForeground#47423E
  • list.invalidItemForeground#47423E
  • list.warningForeground#47423E
  • listFilterWidget.background#FCF9F4
  • listFilterWidget.noMatchesOutline#945542
  • listFilterWidget.outline#6F6C6A
  • menu.background#FCF9F4
  • menu.border#6F6C6A
  • menu.foreground#47423E
  • menu.selectionBackground#E8E2DA
  • menu.selectionForeground#47423E
  • menu.separatorBackground#6F6C6A
  • menubar.selectionBackground#47423E
  • menubar.selectionForeground#FCF9F4
  • merge.border#5C7A9A40
  • merge.commonContentBackground#6F6C6A40
  • merge.commonHeaderBackground#6F6C6A80
  • merge.currentContentBackground#CC9A9340
  • merge.currentHeaderBackground#CC9A9380
  • merge.incomingContentBackground#85B88540
  • merge.incomingHeaderBackground#85B88580
  • minimap.background#E8E2DA
  • minimap.errorHighlight#94554280
  • minimap.findMatchHighlight#C3AD6340
  • minimap.infoHighlight#5C7A9A80
  • minimap.selectionHighlight#244C6A80
  • minimap.warningHighlight#856C3A80
  • minimapGutter.addedBackground#85B885
  • minimapGutter.deletedBackground#CC9A93
  • minimapGutter.modifiedBackground#7CB2CE
  • minimapSlider.activeBackground#6F6C6A80
  • minimapSlider.background#48464380
  • minimapSlider.hoverBackground#6F6C6A80
  • notificationCenter.border#2B2623
  • notificationCenterHeader.background#FCF9F4
  • notificationCenterHeader.foreground#47423E
  • notificationLink.foreground#756F9B
  • notifications.background#FCF9F4
  • notifications.border#6F6C6A
  • notifications.foreground#47423E
  • notificationsErrorIcon.foreground#996953
  • notificationsInfoIcon.foreground#47423E
  • notificationsWarningIcon.foreground#856C3A
  • notificationToast.border#6F6C6A
  • panel.background#E8E2DA
  • panel.border#5C7A9A
  • panel.dropBorder#5C7A9A40
  • panelInput.border#6F6C6A
  • panelSection.border#6F6C6A60
  • panelSection.dropBackground#00000000
  • panelSectionHeader.background#00000000
  • panelSectionHeader.border#6F6C6A
  • panelTitle.activeBorder#2B2623
  • panelTitle.activeForeground#2B2623
  • panelTitle.inactiveForeground#47423E
  • peekView.border#5C7A9A
  • peekViewEditor.background#FCF9F4
  • peekViewEditor.matchHighlightBackground#8E698140
  • peekViewEditorGutter.background#FCF9F4
  • peekViewResult.background#FCF9F4
  • peekViewResult.fileForeground#2B2623
  • peekViewResult.lineForeground#47423E
  • peekViewResult.matchHighlightBackground#8E698140
  • peekViewResult.selectionBackground#484643
  • peekViewResult.selectionForeground#47423E
  • peekViewTitle.background#FCF9F4
  • peekViewTitleDescription.foreground#47423E
  • peekViewTitleLabel.foreground#2B2623
  • pickerGroup.border#6F6C6A
  • pickerGroup.foreground#47423E
  • progressBar.background#FCF9F4
  • quickInput.background#FCF9F4
  • quickInputTitle.background#FCF9F4
  • sash.hoverBorder#5C7A9A
  • scm.providerBorder#6F6C6A
  • scrollbar.shadow#6F6C6A
  • searchEditor.findMatchBackground#C3AD6380
  • searchEditor.textInputBorder#6F6C6A
  • selection.background#244C6A60
  • settings.headerForeground#2B2623
  • settings.modifiedItemIndicator#7CB2CE
  • settings.numberInputBorder#6F6C6A
  • settings.textInputBorder#6F6C6A
  • sideBar.background#E8E2DA
  • sideBar.border#5C7A9A
  • sideBar.foreground#47423E
  • sideBarSectionHeader.background#00000000
  • sideBarSectionHeader.border#6F6C6A
  • sideBarTitle.foreground#47423E
  • statusBar.background#595386
  • statusBar.border#5C7A9A
  • statusBar.debuggingBackground#456946
  • statusBar.debuggingForeground#E8E2DA
  • statusBar.foreground#E8E2DA
  • statusBar.noFolderBackground#856C3A
  • statusBar.noFolderForeground#E8E2DA
  • statusBarItem.activeBackground#6F6C6A
  • statusBarItem.errorForeground#945542
  • statusBarItem.hoverBackground#756F9B
  • statusBarItem.prominentBackground#345E7B
  • statusBarItem.prominentForeground#E8E2DA
  • statusBarItem.prominentHoverBackground#5C7A9A
  • statusBarItem.remoteBackground#804A6B
  • statusBarItem.remoteForeground#E8E2DA
  • statusBarItem.warningForeground#856C3A
  • tab.activeBackground#E8E2DA
  • tab.activeBorder#5C7A9A
  • tab.activeBorderTop#945542
  • tab.activeForeground#47423E
  • tab.activeModifiedBorder#7CB2CE
  • tab.border#5C7A9A
  • tab.hoverBackground#B1AEAB40
  • tab.hoverForeground#47423E
  • tab.inactiveBackground#E8E2DA
  • tab.inactiveForeground#6F6C6A
  • tab.inactiveModifiedBorder#7CB2CE80
  • tab.unfocusedActiveBackground#E8E2DA
  • tab.unfocusedActiveBorder#6F6C6A
  • tab.unfocusedActiveBorderTop#6F6C6A
  • tab.unfocusedActiveForeground#47423E
  • tab.unfocusedActiveModifiedBorder#7CB2CEc0
  • tab.unfocusedHoverForeground#47423E
  • tab.unfocusedInactiveForeground#6F6C6A
  • tab.unfocusedInactiveModifiedBorder#7CB2CE40
  • terminal.ansiBlack#2B2623
  • terminal.ansiBlue#4D4672
  • terminal.ansiBrightBlack#47423E
  • terminal.ansiBrightBlue#71699A
  • terminal.ansiBrightCyan#507B9D
  • terminal.ansiBrightGreen#578757
  • terminal.ansiBrightMagenta#905E7C
  • terminal.ansiBrightRed#965F47
  • terminal.ansiBrightWhite#FCF9F4
  • terminal.ansiBrightYellow#948038
  • terminal.ansiCyan#2B5171
  • terminal.ansiGreen#385D38
  • terminal.ansiMagenta#643550
  • terminal.ansiRed#6B3A26
  • terminal.ansiWhite#6F6C6A
  • terminal.ansiYellow#604E0F
  • terminal.background#E8E2DA
  • terminal.border#5C7A9A
  • terminal.findMatchBackground#D0CAC240
  • terminal.findMatchBorder#594A06
  • terminal.findMatchHighlightBackground#D0CAC220
  • terminal.findMatchHighlightBorder#594A0680
  • terminal.foreground#47423E
  • terminal.selectionBackground#D0CAC240
  • terminal.tab.activeBorder#5C7A9A
  • terminalCursor.foreground#2B2623
  • textBlockQuote.background#FCF9F4
  • textBlockQuote.border#00000000
  • textCodeBlock.background#FCF9F4
  • textLink.activeForeground#345E7B
  • textLink.foreground#244C6A
  • textPreformat.background#B1AEAB
  • textPreformat.foreground#47423E
  • textSeparator.foreground#6F6C6A
  • titleBar.activeBackground#E8E2DA
  • titleBar.activeForeground#47423E
  • titleBar.border#5C7A9A
  • titleBar.inactiveBackground#E8E2DA
  • titleBar.inactiveForeground#6F6C6A
  • tree.indentGuidesStroke#6F6C6A
  • widget.shadow#6F6C6A

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
emphasis—italic
strong—bold
meta.diff.header#7CB2CE—
markup.inserted#85B885—
markup.deleted#CC9A93—
markup.changed#7CB2CE—
invalid#945542bold underline
invalid.deprecated#856C3Abold underline
markup.underline—underline
markup.bold#996953bold
markup.heading#756F9Bbold
markup.italic#867639italic
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#5C7A9A—
markup.inline.raw, markup.raw.restructuredtext#638461—
markup.underline.link, markup.underline.link.image#5C7A9A—
meta.link.reference.def.restructuredtext, punctuation.definition.directive.restructuredtext, string.other.link.description, string.other.link.title#8E6981—
entity.name.directive.restructuredtext, markup.quote#867639italic
meta.separator.markdown#484643—
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#638461—
punctuation.definition.constant.restructuredtext#756F9B—
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#756F9B—
meta.paragraph.markdown punctuation.definition.string.begin, meta.paragraph.markdown punctuation.definition.string.end#47423E—
markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.begin, markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.end#867639—
comment, punctuation.definition.comment#484643—
keyword—bold
storage.modifier, storage.type.modifier#5C7A9Abold
storage.type.namespace#2B2623bold
storage.type.class, storage.type.struct, storage.type.union, storage.type.enum#996953bold
storage.type.modifier.access.control#244C6Abold
storage.type.template—bold
storage.type.function#2B2623bold
variable.language.this, variable.parameter.function.language.special.self—bold
keyword.control#5C7A9A—
keyword.control.return, keyword.control.throw#6D3C28—
keyword.operator, entity.name.operator#5C7A9A
storage.modifier.reference—
constant.language#5C7A9Abold
constant.numeric#5C7A9A—
string#638461—
string.regexp#6D3C28—
string support.type.property-name#4B436C—
entity.name.namespace#867639—
storage.type.primitive, storage.type.built-in#756F9Bbold
entity.name.type#756F9B—
storage.type.return-type.lambda#756F9B—
entity.name.function.member, variable.other.property, variable.other.enummember—italic
variable.parameter#8E6981—
variable.parameter.function-call#484643bold
meta.function.definition.parameters variable.parameter—underline
entity.name.function.preprocessor, entity.name.function.macro#484643—
entity.name.other.preprocessor.macro.predefined—bold
support.function.builtin—bold
token.info-token#456946—
token.warn-token#856C3A—
token.error-token#945542—
token.debug-token#804A6B—
keyword.operator.new, keyword.operator.delete#996953bold
keyword.other.using, keyword.other.typedef#996953—
keyword.other.default.constructor.cpp, keyword.other.delete.constructor.cpp#5C7A9A—
keyword.other.operator.overload.cpp#5C7A9A
variable.parameter.preprocessor.cpp—underline
keyword.operator.logical.python—bold
punctuation.definition.decorator.python#484643—
entity.name.function.decorator.python#484643bold
keyword.control.new.java#996953—
keyword.operator.instanceof.java—bold
variable.language.java—bold
storage.modifier.import.java—
punctuation.definition.annotation.java#484643—
storage.type.annotation.java#484643bold
key.function.go#2B2623bold
storage.type.boolean.go#5C7A9Abold
entity.name.import.go#867639—
entity.name.tag#756F9B—
entity.other.attribute-name#8E6981italic
entity.other.attribute-name.parent-selector#756F9B—
storage.type.js#5C7A9Abold
keyword.operator.expression—bold
support.function.js—bold
meta.directive.vue entity.other.attribute-name—bold italic
expression.embedded punctuation.definition.generic.begin, expression.embedded punctuation.definition.generic.end#5C7A9A—
entity.name.function.target.makefile, entity.name.tag.yaml, support.type.property-name.json#5C7A9A—