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.background#1A1917
  • activityBar.border#242320
  • activityBar.foreground#D6D3CE
  • activityBar.inactiveForeground#7A7672
  • activityBarBadge.background#5F9EA8
  • activityBarBadge.foreground#FCFCFB
  • badge.background#5F9EA8
  • badge.foreground#FCFCFB
  • banner.background#5F9EA830
  • banner.foreground#D6D3CE
  • banner.iconForeground#8CC3CB
  • breadcrumb.activeSelectionForeground#D6D3CE
  • breadcrumb.focusForeground#D6D3CE
  • breadcrumb.foreground#7A7672
  • breadcrumbPicker.background#242320
  • button.background#5F9EA8
  • button.foreground#FCFCFB
  • button.hoverBackground#4E8C95
  • button.secondaryBackground#3A3835
  • button.secondaryForeground#D6D3CE
  • button.secondaryHoverBackground#504D48
  • checkbox.background#242320
  • checkbox.border#3A3835
  • checkbox.foreground#D6D3CE
  • commandCenter.activeBackground#3A3835
  • commandCenter.activeForeground#D6D3CE
  • commandCenter.background#242320
  • commandCenter.border#3A3835
  • commandCenter.foreground#BAB7B2
  • debugConsole.errorForeground#D4A0A0
  • debugConsole.infoForeground#8CC3CB
  • debugConsole.warningForeground#D4B87A
  • debugConsoleInputIcon.foreground#8CC3CB
  • debugIcon.breakpointForeground#B87070
  • debugIcon.pauseForeground#D4B87A
  • debugIcon.restartForeground#A0C496
  • debugIcon.startForeground#A0C496
  • debugIcon.stopForeground#D4A0A0
  • debugToolBar.background#242320
  • debugToolBar.border#3A3835
  • descriptionForeground#BAB7B2
  • diffEditor.insertedLineBackground#A0C49610
  • diffEditor.insertedTextBackground#A0C49615
  • diffEditor.removedLineBackground#D4A0A010
  • diffEditor.removedTextBackground#D4A0A015
  • dropdown.background#242320
  • dropdown.border#3A3835
  • dropdown.foreground#D6D3CE
  • dropdown.listBackground#242320
  • editor.background#1A1917
  • editor.findMatchBackground#C29E5E40
  • editor.findMatchBorder#C29E5E80
  • editor.findMatchHighlightBackground#C29E5E20
  • editor.foldBackground#5F9EA810
  • editor.foreground#D6D3CE
  • editor.hoverHighlightBackground#5F9EA815
  • editor.inactiveSelectionBackground#5F9EA820
  • editor.lineHighlightBackground#ffffff06
  • editor.linkedEditingBackground#5F9EA820
  • editor.rangeHighlightBackground#5F9EA810
  • editor.selectionBackground#5F9EA830
  • editor.selectionHighlightBackground#5F9EA818
  • editor.wordHighlightBackground#5F9EA818
  • editor.wordHighlightStrongBackground#5F9EA825
  • editorBracketHighlight.foreground1#8CC3CB
  • editorBracketHighlight.foreground2#D4B87A
  • editorBracketHighlight.foreground3#B0A4D0
  • editorBracketHighlight.foreground4#D0A0AA
  • editorBracketHighlight.foreground5#8DC0A8
  • editorBracketHighlight.foreground6#D0B080
  • editorBracketMatch.background#5F9EA815
  • editorBracketMatch.border#5F9EA860
  • editorCodeLens.foreground#7A7672
  • editorCursor.foreground#8CC3CB
  • editorError.foreground#B87070
  • editorGroup.border#242320
  • editorGroup.dropBackground#5F9EA815
  • editorGroupHeader.tabsBackground#1A1917
  • editorGroupHeader.tabsBorder#1A1917
  • editorGutter.addedBackground#A0C496
  • editorGutter.deletedBackground#D4A0A0
  • editorGutter.modifiedBackground#8CC3CB
  • editorHint.foreground#8CC3CB
  • editorHoverWidget.background#242320
  • editorHoverWidget.border#3A3835
  • editorIndentGuide.activeBackground#3A3835
  • editorIndentGuide.background#2A2825
  • editorInfo.foreground#5F9EA8
  • editorInlayHint.background#3A383580
  • editorInlayHint.foreground#7A7672
  • editorLightBulb.foreground#D4B87A
  • editorLightBulbAutoFix.foreground#A0C496
  • editorLineNumber.activeForeground#7A7672
  • editorLineNumber.foreground#504D48
  • editorLink.activeForeground#8CC3CB
  • editorOverviewRuler.addedForeground#A0C49660
  • editorOverviewRuler.border#242320
  • editorOverviewRuler.deletedForeground#D4A0A060
  • editorOverviewRuler.errorForeground#B87070
  • editorOverviewRuler.findMatchForeground#C29E5E80
  • editorOverviewRuler.infoForeground#5F9EA8
  • editorOverviewRuler.modifiedForeground#8CC3CB60
  • editorOverviewRuler.warningForeground#C29E5E
  • editorRuler.foreground#2A2825
  • editorSuggestWidget.background#242320
  • editorSuggestWidget.border#3A3835
  • editorSuggestWidget.foreground#D6D3CE
  • editorSuggestWidget.highlightForeground#8CC3CB
  • editorSuggestWidget.selectedBackground#5F9EA825
  • editorWarning.foreground#C29E5E
  • editorWhitespace.foreground#3A3835
  • editorWidget.background#242320
  • editorWidget.border#3A3835
  • editorWidget.foreground#D6D3CE
  • errorForeground#D4A0A0
  • focusBorder#5F9EA850
  • foreground#D6D3CE
  • gitDecoration.addedResourceForeground#A0C496
  • gitDecoration.conflictingResourceForeground#D4B87A
  • gitDecoration.deletedResourceForeground#D4A0A0
  • gitDecoration.ignoredResourceForeground#504D48
  • gitDecoration.modifiedResourceForeground#8CC3CB
  • gitDecoration.renamedResourceForeground#8DC0A8
  • gitDecoration.stageDeletedResourceForeground#D4A0A0
  • gitDecoration.stageModifiedResourceForeground#8CC3CB
  • gitDecoration.submoduleResourceForeground#D0B080
  • gitDecoration.untrackedResourceForeground#A0C496
  • icon.foreground#BAB7B2
  • input.background#242320
  • input.border#3A3835
  • input.foreground#D6D3CE
  • input.placeholderForeground#7A7672
  • inputOption.activeBackground#5F9EA830
  • inputOption.activeBorder#5F9EA8
  • inputOption.activeForeground#D6D3CE
  • inputValidation.errorBackground#8E505050
  • inputValidation.errorBorder#B87070
  • inputValidation.infoBackground#5F9EA830
  • inputValidation.infoBorder#5F9EA8
  • inputValidation.warningBackground#8E704050
  • inputValidation.warningBorder#C29E5E
  • keybindingLabel.background#3A383540
  • keybindingLabel.border#3A3835
  • keybindingLabel.bottomBorder#3A3835
  • keybindingLabel.foreground#D6D3CE
  • list.activeSelectionBackground#5F9EA825
  • list.activeSelectionForeground#D6D3CE
  • list.dropBackground#5F9EA815
  • list.errorForeground#D4A0A0
  • list.focusBackground#5F9EA820
  • list.focusForeground#D6D3CE
  • list.focusOutline#5F9EA850
  • list.highlightForeground#8CC3CB
  • list.hoverBackground#ffffff08
  • list.hoverForeground#D6D3CE
  • list.inactiveSelectionBackground#5F9EA815
  • list.inactiveSelectionForeground#D6D3CE
  • list.warningForeground#D4B87A
  • menu.background#242320
  • menu.foreground#D6D3CE
  • menu.selectionBackground#5F9EA830
  • menu.selectionForeground#D6D3CE
  • menu.separatorBackground#3A3835
  • menubar.selectionBackground#5F9EA830
  • menubar.selectionForeground#D6D3CE
  • merge.currentContentBackground#A0C49615
  • merge.currentHeaderBackground#A0C49630
  • merge.incomingContentBackground#8CC3CB15
  • merge.incomingHeaderBackground#8CC3CB30
  • minimap.findMatchHighlight#5F9EA860
  • minimap.selectionHighlight#5F9EA840
  • minimap.selectionOccurrenceHighlight#5F9EA830
  • minimapGutter.addedBackground#A0C496
  • minimapGutter.deletedBackground#D4A0A0
  • minimapGutter.modifiedBackground#8CC3CB
  • notification.background#242320
  • notification.foreground#D6D3CE
  • notificationCenterHeader.background#242320
  • notificationCenterHeader.foreground#D6D3CE
  • notificationLink.foreground#8CC3CB
  • notificationsErrorIcon.foreground#D4A0A0
  • notificationsInfoIcon.foreground#8CC3CB
  • notificationsWarningIcon.foreground#D4B87A
  • panel.background#1A1917
  • panel.border#242320
  • panelTitle.activeBorder#5F9EA8
  • panelTitle.activeForeground#D6D3CE
  • panelTitle.inactiveForeground#7A7672
  • peekView.border#5F9EA860
  • peekViewEditor.background#242320
  • peekViewEditor.matchHighlightBackground#C29E5E40
  • peekViewEditorGutter.background#242320
  • peekViewResult.background#1A1917
  • peekViewResult.fileForeground#D6D3CE
  • peekViewResult.lineForeground#BAB7B2
  • peekViewResult.matchHighlightBackground#C29E5E40
  • peekViewResult.selectionBackground#5F9EA830
  • peekViewResult.selectionForeground#D6D3CE
  • peekViewTitle.background#242320
  • peekViewTitleDescription.foreground#BAB7B2
  • peekViewTitleLabel.foreground#D6D3CE
  • progressBar.background#5F9EA8
  • scrollbar.shadow#00000020
  • scrollbarSlider.activeBackground#BAB7B250
  • scrollbarSlider.background#BAB7B220
  • scrollbarSlider.hoverBackground#BAB7B235
  • selection.background#5F9EA840
  • settings.focusedRowBackground#5F9EA810
  • settings.headerForeground#D6D3CE
  • settings.modifiedItemIndicator#5F9EA8
  • sideBar.background#1A1917
  • sideBar.border#242320
  • sideBar.foreground#BAB7B2
  • sideBarSectionHeader.background#1A1917
  • sideBarSectionHeader.foreground#7A7672
  • sideBarTitle.foreground#D6D3CE
  • statusBar.background#242320
  • statusBar.border#1A1917
  • statusBar.debuggingBackground#5F9EA8
  • statusBar.debuggingForeground#FCFCFB
  • statusBar.foreground#BAB7B2
  • statusBar.noFolderBackground#242320
  • statusBar.noFolderForeground#BAB7B2
  • statusBarItem.activeBackground#ffffff15
  • statusBarItem.hoverBackground#ffffff10
  • statusBarItem.prominentBackground#5F9EA830
  • statusBarItem.prominentHoverBackground#5F9EA850
  • statusBarItem.remoteBackground#5F9EA8
  • statusBarItem.remoteForeground#FCFCFB
  • tab.activeBackground#1A1917
  • tab.activeBorderTop#5F9EA8
  • tab.activeForeground#D6D3CE
  • tab.border#1A1917
  • tab.hoverBackground#ffffff08
  • tab.inactiveBackground#1A1917
  • tab.inactiveForeground#7A7672
  • tab.unfocusedActiveForeground#BAB7B2
  • tab.unfocusedInactiveForeground#7A7672
  • terminal.ansiBlack#242320
  • terminal.ansiBlue#6B8BBF
  • terminal.ansiBrightBlack#7A7672
  • terminal.ansiBrightBlue#8DAFD4
  • terminal.ansiBrightCyan#8CC3CB
  • terminal.ansiBrightGreen#A0C496
  • terminal.ansiBrightMagenta#B0A4D0
  • terminal.ansiBrightRed#D4A0A0
  • terminal.ansiBrightWhite#F1F0EE
  • terminal.ansiBrightYellow#D4B87A
  • terminal.ansiCyan#5F9EA8
  • terminal.ansiGreen#7A9E72
  • terminal.ansiMagenta#8A7EB0
  • terminal.ansiRed#B87070
  • terminal.ansiWhite#BAB7B2
  • terminal.ansiYellow#C29E5E
  • terminal.background#1A1917
  • terminal.foreground#D6D3CE
  • terminal.selectionBackground#5F9EA830
  • terminalCursor.foreground#8CC3CB
  • textBlockQuote.background#242320
  • textBlockQuote.border#5F9EA850
  • textCodeBlock.background#242320
  • textLink.activeForeground#5F9EA8
  • textLink.foreground#8CC3CB
  • textPreformat.foreground#D6D3CE
  • textSeparator.foreground#3A3835
  • titleBar.activeBackground#1A1917
  • titleBar.activeForeground#D6D3CE
  • titleBar.border#242320
  • titleBar.inactiveBackground#1A1917
  • titleBar.inactiveForeground#7A7672
  • tree.indentGuidesStroke#3A3835
  • walkThrough.embeddedEditorBackground#242320
  • welcomePage.progress.foreground#5F9EA8
  • welcomePage.tileBackground#242320
  • widget.shadow#00000030

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#B0ADA8italic
keyword, storage.type, storage.modifier#8CC3CB
keyword.control#8CC3CB
keyword.operator, keyword.operator.assignment, keyword.operator.arithmetic, keyword.operator.logical, keyword.operator.comparison#CCC9C4
keyword.operator.expression#8CC3CB
string, string.quoted#A0C496
string.template, punctuation.definition.template-expression, punctuation.section.embedded#8DC0A8
string.template meta.template.expression#D6D3CE
string.regexp, constant.other.character-class.regexp, constant.character.escape.backslash.regexp#8DC0A8
constant.character.escape#D4B87A
constant.numeric, constant.language, constant.character, constant.other#D4B87A
entity.name.function, support.function, meta.function-call entity.name.function#B0A4D0
variable.parameter, meta.parameter#8DAFD4
entity.name.type, entity.name.class, support.class, support.type#D0A0AA
entity.name.type.interface#D0A0AA
variable.other.enummember, constant.other.enum#D4B87A
entity.name.type.parameter#D0A0AA
variable, variable.other, variable.other.readwrite#D6D3CE
variable.other.constant#D4B87A
variable.other.property, variable.other.object.property, support.variable.property, meta.object-literal.key#D0B080
variable.language#8CC3CBitalic
punctuation, punctuation.definition, punctuation.separator, punctuation.terminator, punctuation.accessor, meta.brace#CCC9C4
punctuation.definition.string.begin, punctuation.definition.string.end#A0C496
entity.name.tag, punctuation.definition.tag#8CC3CB
entity.other.attribute-name#D0B080italic
entity.other.attribute-name.class.css#D0A0AA
entity.other.attribute-name.id.css#D4B87A
support.type.property-name.css, meta.property-name.css#D0B080
support.constant.property-value.css, meta.property-value.css#D6D3CE
keyword.other.unit.css#D4B87A
entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css#8CC3CB
meta.decorator, punctuation.decorator, meta.decorator entity.name.function#B0A4D0italic
support.constant#D4B87A
support.variable#D0B080
invalid.illegal#B87070
invalid.deprecated#B87070strikethrough
markup.heading, markup.heading entity.name, entity.name.section#8CC3CBbold
markup.bold, punctuation.definition.boldbold
markup.italic, punctuation.definition.italicitalic
markup.underlineunderline
markup.underline.link, string.other.link#8CC3CB
markup.inline.raw, markup.raw, markup.fenced_code#A0C496
markup.quote#B0ADA8italic
markup.list, punctuation.definition.list#CCC9C4
markup.inserted#A0C496
markup.deleted#D4A0A0
markup.changed#8CC3CB
support.type.property-name.json#D0B080
entity.name.tag.yaml#D0B080
keyword.key.toml#D0B080
entity.name.namespace, entity.name.module#D0A0AA
markup.table#D6D3CE
variable.other.normal.shell, variable.other.special.shell, variable.other.positional.shell#8DAFD4
Winternacht by suin by suin - VS Code Theme