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.

  • actionBar.toggledBackground#DAB0A1
  • activityBar.activeBackground#FFFFFF
  • activityBar.activeBorder#795548
  • activityBar.activeFocusBorder#795548
  • activityBar.background#FFFFFF
  • activityBar.border#795548
  • activityBar.dropBorder#FF79C6
  • activityBar.foreground#795548
  • activityBar.inactiveForeground#795548
  • activityBarBadge.background#FFFFFF
  • activityBarBadge.foreground#795548
  • activityBarTop.activeBackground#FFFFFF
  • activityBarTop.activeBorder#795548
  • activityBarTop.background#FFFFFF
  • activityBarTop.dropBorder#FF79C6
  • activityBarTop.foreground#795548
  • activityBarTop.inactiveForeground#795548
  • badge.background#FFFFFF
  • badge.foreground#795548
  • breadcrumb.activeSelectionForeground#795548
  • breadcrumb.focusForeground#795548
  • breadcrumb.foreground#795548
  • button.background#FFFFFF
  • button.border#795548
  • button.foreground#795548
  • button.hoverBackground#DAB0A1
  • button.separator#795548
  • checkbox.background#FFFFFF
  • checkbox.border#795548
  • checkbox.foreground#795548
  • checkbox.selectBackground#795548
  • checkbox.selectBorder#795548
  • contrastActiveBorder#795548
  • contrastBorder#795548
  • debugTokenExpression.name#795548
  • debugToolBar.background#FFFFFF
  • debugToolBar.border#795548
  • debugView.stateLabelBackground#DAB0A1
  • debugView.stateLabelForeground#795548
  • debugView.valueChangedHighlight#DAB0A1
  • descriptionForeground#795548
  • diffEditor.border#795548
  • diffEditor.insertedTextBackground#1CB01C50
  • diffEditor.insertedTextBorder#1CB01C50
  • diffEditor.removedTextBackground#FF555550
  • diffEditor.removedTextBorder#FF555550
  • diffEditor.unchangedRegionBackground#DAB0A1
  • diffEditor.unchangedRegionForeground#795548
  • diffEditorGutter.insertedLineBackground#1CB01C50
  • diffEditorGutter.removedLineBackground#FF555550
  • disabledForeground#DAB0A1
  • dropdown.background#FFFFFF
  • dropdown.border#795548
  • dropdown.foreground#795548
  • dropdown.listBackground#FFFFFF
  • editor.background#FFFFFF
  • editor.findMatchBorder#795548
  • editor.findRangeHighlightBackground#FFFFFF
  • editor.findRangeHighlightBorder#795548
  • editor.focusedStackFrameHighlightBackground#DAB0A1
  • editor.foldPlaceholderForeground#795548
  • editor.foreground#795548
  • editor.inactiveSelectionBackground#DAB0A1
  • editor.inlineValuesBackground#DAB0A1
  • editor.inlineValuesForeground#795548
  • editor.lineHighlightBorder#795548
  • editor.linkedEditingBackground#F8F8F200
  • editor.selectionBackground#DAB0A1
  • editor.selectionForeground#F8F8F200
  • editor.snippetTabstopHighlightBackground#DAB0A1
  • editor.snippetTabstopHighlightBorder#795548
  • editor.stackFrameHighlightBackground#DAB0A1
  • editor.symbolHighlightBackground#DAB0A1
  • editor.symbolHighlightBorder#795548
  • editor.wordHighlightBorder#795548
  • editor.wordHighlightStrongBorder#795548
  • editor.wordHighlightTextBorder#795548
  • editorBracketHighlight.foreground1#3F51B5
  • editorBracketHighlight.foreground2#44475A
  • editorBracketHighlight.foreground3#FF79C6
  • editorBracketHighlight.foreground4#CCA300
  • editorBracketHighlight.foreground5#795548
  • editorBracketHighlight.foreground6#1CB01C
  • editorBracketHighlight.unexpectedBracket.foreground#FF5555
  • editorBracketMatch.background#FFFFFF
  • editorBracketMatch.border#795548
  • editorCodeLens.foreground#3F51B5
  • editorCursor.background#FFFFFF
  • editorCursor.foreground#795548
  • editorGroup.border#795548
  • editorGroup.dropBackground#DAB0A1
  • editorGroup.dropIntoPromptBackground#FFFFFF
  • editorGroup.dropIntoPromptBorder#795548
  • editorGroup.dropIntoPromptForeground#795548
  • editorGroup.emptyBackground#FFFFFF
  • editorGroup.focusedEmptyBorder#795548
  • editorGroupHeader.border#795548
  • editorGroupHeader.noTabsBackground#FFFFFF
  • editorGroupHeader.tabsBackground#FFFFFF
  • editorGroupHeader.tabsBorder#795548
  • editorGutter.background#FFFFFF
  • editorGutter.modifiedBackground#795548
  • editorIndentGuide.activeBackground#795548
  • editorIndentGuide.background#FFFFFF
  • editorLightBulb.foreground#795548
  • editorLightBulbAutoFix.foreground#795548
  • editorLineNumber.activeForeground#FF79C6
  • editorLineNumber.dimmedForeground#795548
  • editorLineNumber.foreground#795548
  • editorLink.activeForeground#3F51B5
  • editorOverviewRuler.background#FFFFFF
  • editorOverviewRuler.border#795548
  • editorOverviewRuler.findMatchForeground#795548
  • editorPane.background#FFFFFF
  • editorRuler.foreground#795548
  • editorWhitespace.foreground#795548
  • errorForeground#FF5555
  • extensionButton.foreground#795548
  • extensionButton.hoverBackground#FFFFFF
  • extensionButton.prominentForeground#795548
  • extensionButton.prominentHoverBackground#FFFFFF
  • extensionButton.separator#795548
  • focusBorder#795548
  • foreground#795548
  • icon.foreground#795548
  • input.background#FFFFFF
  • input.border#795548
  • input.foreground#795548
  • input.placeholderForeground#795548
  • inputOption.activeBackground#FFFFFF
  • inputOption.activeBorder#795548
  • inputOption.activeForeground#795548
  • inputOption.hoverBackground#FFFFFF
  • keybindingLabel.background#FFFFFF
  • keybindingLabel.border#795548
  • keybindingLabel.bottomBorder#795548
  • keybindingLabel.foreground#795548
  • keybindingTable.headerBackground#FFFFFF
  • keybindingTable.rowsBackground#FFFFFF
  • list.activeSelectionBackground#DAB0A1
  • list.activeSelectionForeground#795548
  • list.activeSelectionIconForeground#795548
  • list.deemphasizedForeground#795548
  • list.dropBackground#DAB0A1
  • list.errorForeground#FF5555
  • list.filterMatchBackground#DAB0A1
  • list.filterMatchBorder#795548
  • list.focusAndSelectionOutline#795548
  • list.focusBackground#FFFFFF
  • list.focusForeground#795548
  • list.focusHighlightForeground#795548
  • list.focusOutline#795548
  • list.highlightForeground#795548
  • list.hoverBackground#DAB0A1
  • list.hoverForeground#795548
  • list.inactiveFocusBackground#FFFFFF
  • list.inactiveFocusOutline#795548
  • list.inactiveSelectionBackground#DAB0A1
  • list.inactiveSelectionForeground#795548
  • list.inactiveSelectionIconForeground#795548
  • list.invalidItemForeground#FF5555
  • list.warningForeground#CCA300
  • listFilterWidget.background#FFFFFF
  • listFilterWidget.noMatchesOutline#795548
  • listFilterWidget.outline#795548
  • listFilterWidget.shadow#FFFFFF
  • notificationCenter.border#795548
  • notificationCenterHeader.background#FFFFFF
  • notificationCenterHeader.foreground#795548
  • notifications.background#FFFFFF
  • notifications.border#795548
  • notifications.foreground#795548
  • notificationToast.border#795548
  • panel.background#FFFFFF
  • panel.border#795548
  • panel.dropBorder#FF79C6
  • panelInput.border#795548
  • panelTitle.activeBorder#795548
  • panelTitle.activeForeground#795548
  • panelTitle.inactiveForeground#795548
  • profileBadge.background#FFFFFF
  • profileBadge.foreground#795548
  • progressBar.background#795548
  • sash.hoverBorder#795548
  • scrollbar.shadow#FFFFFF
  • scrollbarSlider.activeBackground#795548
  • scrollbarSlider.background#DAB0A1
  • scrollbarSlider.hoverBackground#795548
  • search.resultsInfoForeground#795548
  • selection.background#DAB0A1
  • sideBar.background#FFFFFF
  • sideBar.border#795548
  • sideBar.dropBackground#DAB0A1
  • sideBar.foreground#795548
  • sideBarSectionHeader.background#FFFFFF
  • sideBarSectionHeader.border#795548
  • sideBarSectionHeader.foreground#795548
  • sideBarTitle.foreground#795548
  • sideBySideEditor.horizontalBorder#795548
  • sideBySideEditor.verticalBorder#795548
  • statusBar.background#FFFFFF
  • statusBar.border#795548
  • statusBar.debuggingBackground#FFFFFF
  • statusBar.debuggingBorder#795548
  • statusBar.debuggingForeground#795548
  • statusBar.foreground#795548
  • statusBar.noFolderBackground#FFFFFF
  • statusBar.noFolderBorder#795548
  • statusBar.noFolderForeground#795548
  • tab.activeBackground#FFFFFF
  • tab.activeBorder#795548
  • tab.activeBorderTop#795548
  • tab.activeForeground#795548
  • tab.activeModifiedBorder#795548
  • tab.border#795548
  • tab.hoverBackground#FFFFFF
  • tab.hoverBorder#795548
  • tab.hoverForeground#795548
  • tab.inactiveBackground#FFFFFF
  • tab.inactiveForeground#795548
  • tab.inactiveModifiedBorder#795548
  • tab.lastPinnedBorder#795548
  • tab.unfocusedActiveBackground#FFFFFF
  • tab.unfocusedActiveBorder#795548
  • tab.unfocusedActiveBorderTop#795548
  • tab.unfocusedActiveForeground#795548
  • tab.unfocusedActiveModifiedBorder#795548
  • tab.unfocusedHoverBackground#FFFFFF
  • tab.unfocusedHoverBorder#795548
  • tab.unfocusedHoverForeground#795548
  • tab.unfocusedInactiveBackground#FFFFFF
  • tab.unfocusedInactiveForeground#795548
  • tab.unfocusedInactiveModifiedBorder#795548
  • terminal.background#FFFFFF
  • terminal.border#795548
  • terminal.findMatchBackground#FFFFFF
  • terminal.findMatchBorder#795548
  • terminal.findMatchHighlightBackground#FFFFFF
  • terminal.findMatchHighlightBorder#795548
  • terminal.foreground#795548
  • terminal.tab.activeBorder#795548
  • terminalCursor.background#FFFFFF
  • terminalCursor.foreground#795548
  • textBlockQuote.background#FFFFFF
  • textBlockQuote.border#795548
  • textCodeBlock.background#FFFFFF
  • textLink.activeForeground#795548
  • textLink.foreground#3F51B5
  • textPreformat.background#DAB0A1
  • textPreformat.foreground#795548
  • textSeparator.foreground#795548
  • toolbar.activeBackground#795548
  • toolbar.hoverBackground#FFFFFF
  • toolbar.hoverOutline#795548
  • tree.inactiveIndentGuidesStroke#795548
  • tree.indentGuidesStroke#795548
  • tree.tableColumnsBorder#795548
  • tree.tableOddRowsBackground#FFFFFF
  • widget.border#795548
  • widget.shadow#FFFFFF
  • window.activeBorder#795548
  • window.inactiveBorder#795548

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, comment.line, comment.line.double-slash, comment.line.double-dash, comment.line.number-sign, comment.line.percentage, comment.line.character, comment.block, comment.block.documentation#2AA198
constant, constant.numeric, constant.character, constant.character.escape, constant.language, constant.other, markup.underline, markup.underline.link, markup.heading, markup.list, markup.list.numbered, markup.list.unnumbered, markup.quote, markup.raw, string, string.quoted, string.quoted.single, string.quoted.double, string.quoted.triple, string.quoted.other, string.unquoted, string.interpolated, string.regexp, string.other, text.html.derivative, entity.other.attribute-name.class.css#1CB01C
entity, entity.name, entity.name.function, entity.name.type, entity.name.tag, entity.name.section, entity.other, entity.other.inherited-class, entity.other.attribute-name, markup.bold, markup.inline.raw.string.markdown, markup.bold.markdown, markup.italic.markdown, markup.strikethrough.markdown, string.other.link.title.markdown, string.other.link.description.markdown, fenced_code.block.language.markdown#FF79C6
invalid, invalid.illegal, invalid.deprecated#FF5555
keyword, keyword.control, keyword.operator, keyword.other, markup.italic, storage, storage.type, storage.modifier, support, support.function, support.class, support.type, support.constant, support.variable, support.other, variable.language, entity.name.tag.html, punctuation.separator.key-value.html, support.type.property-name.json, entity.name.tag.yaml, punctuation.definition.link.title.begin.markdown, punctuation.definition.link.title.end.markdown, punctuation.definition.metadata.markdown, punctuation.definition.bold.markdown, punctuation.definition.link.description.begin.markdown, punctuation.definition.link.description.end.markdown, punctuation.definition.raw.markdown, punctuation.definition.markdown, punctuation.definition.heading.markdown, punctuation.definition.strikethrough.markdown, punctuation.definition.italic.markdown, punctuation.definition.quote.begin.markdown, punctuation.definition.list.begin.markdown, punctuation.definition.table.markdown, punctuation.separator.table.markdown, entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css, entity.name.tag.css, entity.name.tag.wildcard.css, entity.name.tag.script.html.vue, entity.name.tag.template.html.vue, entity.name.tag.style.html.vue, punctuation.attribute-shorthand.bind.html.vue, punctuation.attribute-shorthand.event.html.vue, punctuation.definition.string.begin.html.vue, punctuation.definition.string.end.html.vue, punctuation.separator.key-value.ts, punctuation.definition.template-expression.begin.ts, punctuation.definition.template-expression.end.ts, punctuation.separator.key-value.js, punctuation.definition.template-expression.begin.js, punctuation.definition.template-expression.end.js#3F51B5
markup, markup.other, meta, variable, variable.parameter, variable.other#795548
entity.other.attribute-name.html, support.type.property-name.css, support.type.property-name.media.css, support.type.builtin.ts, support.type.primitive.ts#CCA300
E-Ink Theme by 慧 - VS Code Theme