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.activeBorder#a7c080
  • activityBar.background#1e2326
  • activityBar.border#00000000
  • activityBar.foreground#d3c6aa
  • activityBar.inactiveForeground#495156
  • activityBarBadge.background#a7c080
  • activityBarBadge.foreground#1b2024
  • badge.background#a7c080
  • badge.foreground#1b2024
  • breadcrumb.activeSelectionForeground#a7c080
  • breadcrumb.background#272e33
  • breadcrumb.focusForeground#d3c6aa
  • breadcrumb.foreground#7f897d
  • breadcrumbPicker.background#21272b
  • button.background#a7c080
  • button.foreground#1b2024
  • button.hoverBackground#83c092
  • button.secondaryBackground#374145
  • button.secondaryForeground#d3c6aa
  • button.secondaryHoverBackground#414b50
  • checkbox.background#2e383c
  • checkbox.border#414b50
  • descriptionForeground#859289
  • diffEditor.insertedLineBackground#a7c08015
  • diffEditor.insertedTextBackground#a7c08025
  • diffEditor.removedLineBackground#e67e8015
  • diffEditor.removedTextBackground#e67e8025
  • diffEditorGutter.insertedLineBackground#a7c08040
  • diffEditorGutter.removedLineBackground#e67e8040
  • disabledForeground#7f897d
  • dropdown.background#272e33
  • dropdown.border#414b50
  • dropdown.foreground#d3c6aa
  • dropdown.listBackground#272e33
  • editor.background#272e33
  • editor.findMatchBackground#dbbc7f50
  • editor.findMatchHighlightBackground#dbbc7f25
  • editor.findRangeHighlightBackground#2e383c
  • editor.foreground#d3c6aa
  • editor.inactiveSelectionBackground#374145
  • editor.lineHighlightBackground#2e383c
  • editor.lineHighlightBorder#00000000
  • editor.rangeHighlightBackground#2e383c80
  • editor.selectionBackground#83c09255
  • editor.selectionHighlightBackground#83c09230
  • editor.wordHighlightBackground#374145
  • editor.wordHighlightStrongBackground#414b50
  • editorBracketMatch.background#374145
  • editorBracketMatch.border#83c092
  • editorCodeLens.foreground#7f897d
  • editorCursor.background#1b2024
  • editorCursor.foreground#d3c6aa
  • editorError.foreground#e67e80
  • editorGroup.border#1e2326
  • editorGroup.dropBackground#2e383c80
  • editorGroupHeader.noTabsBackground#272e33
  • editorGroupHeader.tabsBackground#1e2326
  • editorGutter.addedBackground#a7c080
  • editorGutter.background#272e33
  • editorGutter.deletedBackground#e67e80
  • editorGutter.modifiedBackground#7fbbb3
  • editorHint.foreground#83c092
  • editorIndentGuide.activeBackground1#495156
  • editorIndentGuide.background1#2e383c
  • editorInfo.foreground#7fbbb3
  • editorLightBulb.foreground#dbbc7f
  • editorLineNumber.activeForeground#9aa79d
  • editorLineNumber.foreground#495156
  • editorLink.activeForeground#83c092
  • editorOverviewRuler.border#1b2024
  • editorOverviewRuler.errorForeground#e67e80
  • editorOverviewRuler.findMatchForeground#dbbc7f
  • editorOverviewRuler.infoForeground#7fbbb3
  • editorOverviewRuler.rangeHighlightForeground#83c092
  • editorOverviewRuler.selectionHighlightForeground#414b50
  • editorOverviewRuler.warningForeground#dbbc7f
  • editorOverviewRuler.wordHighlightForeground#7fbbb3
  • editorOverviewRuler.wordHighlightStrongForeground#a7c080
  • editorRuler.foreground#2e383c
  • editorSuggestWidget.background#21272b
  • editorSuggestWidget.border#374145
  • editorSuggestWidget.focusHighlightForeground#83c092
  • editorSuggestWidget.foreground#d3c6aa
  • editorSuggestWidget.highlightForeground#a7c080
  • editorSuggestWidget.selectedBackground#374145
  • editorSuggestWidget.selectedForeground#d3c6aa
  • editorSuggestWidget.selectedIconForeground#83c092
  • editorSuggestWidgetStatus.foreground#859289
  • editorWarning.foreground#dbbc7f
  • editorWhitespace.foreground#374145
  • errorForeground#e67e80
  • extensionBadge.remoteBackground#7fbbb3
  • extensionBadge.remoteForeground#1b2024
  • extensionButton.prominentBackground#a7c080
  • extensionButton.prominentForeground#1b2024
  • extensionButton.prominentHoverBackground#83c092
  • focusBorder#a7c08080
  • foreground#d3c6aa
  • gitDecoration.addedResourceForeground#a7c080
  • gitDecoration.conflictingResourceForeground#e69875
  • gitDecoration.deletedResourceForeground#e67e80
  • gitDecoration.ignoredResourceForeground#495156
  • gitDecoration.modifiedResourceForeground#7fbbb3
  • gitDecoration.submoduleResourceForeground#d699b6
  • gitDecoration.untrackedResourceForeground#83c092
  • icon.foreground#859289
  • input.background#2e383c
  • input.border#414b50
  • input.foreground#d3c6aa
  • input.placeholderForeground#7f897d
  • inputOption.activeBackground#374145
  • inputOption.activeBorder#a7c080
  • inputOption.activeForeground#d3c6aa
  • inputValidation.errorBackground#2e383c
  • inputValidation.errorBorder#e67e80
  • inputValidation.infoBackground#2e383c
  • inputValidation.infoBorder#7fbbb3
  • inputValidation.warningBackground#2e383c
  • inputValidation.warningBorder#dbbc7f
  • list.activeSelectionBackground#374145
  • list.activeSelectionForeground#d3c6aa
  • list.dropBackground#374145
  • list.errorForeground#e67e80
  • list.focusBackground#374145
  • list.focusForeground#d3c6aa
  • list.highlightForeground#a7c080
  • list.hoverBackground#2e383c
  • list.hoverForeground#d3c6aa
  • list.inactiveSelectionBackground#2e383c
  • list.inactiveSelectionForeground#d3c6aa
  • list.warningForeground#dbbc7f
  • listFilterWidget.background#2e383c
  • listFilterWidget.noMatchesOutline#e67e80
  • listFilterWidget.outline#a7c080
  • menu.background#272e33
  • menu.foreground#d3c6aa
  • menu.selectionBackground#374145
  • menu.selectionForeground#d3c6aa
  • menu.separatorBackground#414b50
  • menubar.selectionBackground#2e383c
  • menubar.selectionForeground#d3c6aa
  • notificationCenter.border#374145
  • notificationCenterHeader.background#1b2024
  • notificationCenterHeader.foreground#859289
  • notifications.background#272e33
  • notifications.border#374145
  • notifications.foreground#d3c6aa
  • notificationsErrorIcon.foreground#e67e80
  • notificationsInfoIcon.foreground#7fbbb3
  • notificationsWarningIcon.foreground#dbbc7f
  • notificationToast.border#374145
  • panel.background#1e2326
  • panel.border#374145
  • panelTitle.activeBorder#a7c080
  • panelTitle.activeForeground#d3c6aa
  • panelTitle.inactiveForeground#7f897d
  • peekView.border#83c092
  • peekViewEditor.background#21272b
  • peekViewEditor.matchHighlightBackground#dbbc7f40
  • peekViewResult.background#1b2024
  • peekViewResult.fileForeground#d3c6aa
  • peekViewResult.lineForeground#859289
  • peekViewResult.matchHighlightBackground#dbbc7f40
  • peekViewResult.selectionBackground#374145
  • peekViewResult.selectionForeground#d3c6aa
  • peekViewTitle.background#1b2024
  • peekViewTitleDescription.foreground#859289
  • peekViewTitleLabel.foreground#d3c6aa
  • pickerGroup.border#374145
  • pickerGroup.foreground#7f897d
  • progressBar.background#a7c080
  • quickInput.background#272e33
  • quickInput.foreground#d3c6aa
  • quickInputHighlightForeground#a7c080
  • sash.hoverBorder#a7c080
  • scrollbar.shadow#00000070
  • scrollbarSlider.activeBackground#495156cc
  • scrollbarSlider.background#41505066
  • scrollbarSlider.hoverBackground#49515699
  • selection.background#83c09266
  • settings.checkboxBackground#2e383c
  • settings.checkboxBorder#414b50
  • settings.dropdownBackground#2e383c
  • settings.dropdownBorder#414b50
  • settings.headerForeground#d3c6aa
  • settings.modifiedItemIndicator#a7c080
  • settings.numberInputBackground#2e383c
  • settings.numberInputBorder#414b50
  • settings.textInputBackground#2e383c
  • settings.textInputBorder#414b50
  • sideBar.background#1e2326
  • sideBar.border#1b2024
  • sideBar.foreground#d3c6aa
  • sideBarSectionHeader.background#1b2024
  • sideBarSectionHeader.border#1b2024
  • sideBarSectionHeader.foreground#9aa79d
  • sideBarTitle.foreground#859289
  • statusBar.background#1e2326
  • statusBar.border#00000000
  • statusBar.debuggingBackground#e69875
  • statusBar.debuggingForeground#1b2024
  • statusBar.foreground#859289
  • statusBar.noFolderBackground#1e2326
  • statusBarItem.activeBackground#374145
  • statusBarItem.errorBackground#e67e80
  • statusBarItem.errorForeground#1b2024
  • statusBarItem.hoverBackground#2e383c
  • statusBarItem.remoteBackground#a7c080
  • statusBarItem.remoteForeground#1b2024
  • tab.activeBackground#272e33
  • tab.activeBorder#a7c080
  • tab.activeForeground#d3c6aa
  • tab.border#1e2326
  • tab.hoverBackground#2e383c
  • tab.inactiveBackground#1e2326
  • tab.inactiveForeground#7f897d
  • tab.unfocusedActiveForeground#9aa79d
  • tab.unfocusedInactiveForeground#7f897d
  • terminal.ansiBlack#1b2024
  • terminal.ansiBlue#7fbbb3
  • terminal.ansiBrightBlack#495156
  • terminal.ansiBrightBlue#7fbbb3
  • terminal.ansiBrightCyan#83c092
  • terminal.ansiBrightGreen#a7c080
  • terminal.ansiBrightMagenta#d699b6
  • terminal.ansiBrightRed#e67e80
  • terminal.ansiBrightWhite#d3c6aa
  • terminal.ansiBrightYellow#dbbc7f
  • terminal.ansiCyan#83c092
  • terminal.ansiGreen#a7c080
  • terminal.ansiMagenta#d699b6
  • terminal.ansiRed#e67e80
  • terminal.ansiWhite#d3c6aa
  • terminal.ansiYellow#dbbc7f
  • terminal.background#1e2326
  • terminal.border#374145
  • terminal.foreground#d3c6aa
  • terminal.selectionBackground#374145
  • terminalCursor.background#1b2024
  • terminalCursor.foreground#d3c6aa
  • textBlockQuote.background#21272b
  • textBlockQuote.border#a7c080
  • textCodeBlock.background#21272b
  • textLink.activeForeground#a7c080
  • textLink.foreground#83c092
  • textPreformat.foreground#dbbc7f
  • textSeparator.foreground#374145
  • titleBar.activeBackground#1e2326
  • titleBar.activeForeground#d3c6aa
  • titleBar.border#00000000
  • titleBar.inactiveBackground#1e2326
  • titleBar.inactiveForeground#7f897d
  • widget.shadow#00000070
  • window.activeBorder#1b2024
  • window.inactiveBorder#1b2024

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#7f897ditalic
meta.preprocessor.cs, meta.preprocessor, keyword.control.directive.region.cs, keyword.control.directive.endregion.cs, keyword.control.directive.region, keyword.control.directive.endregion, keyword.control.directive.cs, punctuation.definition.directive.cs, entity.name.function.preprocessor#6f7a70
meta.preprocessor.string.cs, meta.preprocessor.string, entity.name.section.region.cs, meta.preprocessor.region.cs#859289
string, string.quoted, string.template, string.regexp#a7c080
constant.character.escape, string.regexp.character-class#83c092
constant.numeric#d699b6
constant.language, constant.language.null, constant.language.undefined, constant.language.null.php, constant.language.boolean#d699b6
variable.other.constant, constant.other#d699b6
keyword, keyword.control, keyword.other#d78789
keyword.operator, keyword.operator.logical, keyword.operator.arithmetic, keyword.operator.comparison, keyword.operator.assignment#e69875
keyword.operator.access, keyword.operator.member, keyword.operator.object-access, keyword.operator.scope-resolution, keyword.operator.key-value, keyword.operator.object-access.php, keyword.operator.scope-resolution.php, keyword.operator.class.php, keyword.operator.array.php, punctuation.accessor, punctuation.separator.accessor, punctuation.separator.coloncolon, punctuation.separator.object-access, punctuation.separator.key-value, punctuation.separator.dictionary.key-value, punctuation.separator.object-access.php, punctuation.separator.coloncolon.php, punctuation.separator.key-value.php#e69875
keyword.control.import, keyword.control.export, keyword.control.from, keyword.control.as#7fbbb3
keyword.control.return, keyword.control.flow, storage.modifier.async#d78789
storage.type, storage.modifier#d78789
storage.type.function.php#e69875
entity.name.type, entity.name.class, entity.name.interface, entity.name.enum, support.type, support.class#dbbc7f
variable.parameter.type, entity.name.type.parameter#e69875
entity.other.inherited-class#a7c080
entity.name.function, meta.function-call entity.name.function, support.function#83c092
meta.function-call#d3c6aa
variable, variable.other, variable.other.readwrite#d3c6aa
punctuation.definition.variable.php#e69875
variable.parameter#e69875
variable.language.this, variable.language.self, variable.language.this.php#D27E99
variable.other.property, variable.other.object.property, meta.object-literal.key, support.type.property-name#7fbbb3
variable.other.member, variable.other.readwrite.member#d3c6aa
punctuation, punctuation.separator, punctuation.terminator#7f897d
punctuation.definition.block, punctuation.definition.parameters, meta.brace#9aa79d
entity.name.tag, meta.tag.sgml#e67e80
entity.other.attribute-name#dbbc7f
string.quoted.double.html, string.quoted.single.html#a7c080
support.class.component, entity.name.tag.tsx, entity.name.tag.jsx#dbbc7f
punctuation.section.embedded, punctuation.definition.template-expression#83c092
entity.name.tag.css, entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#dbbc7f
support.type.property-name.css, meta.property-name#7fbbb3
support.constant.property-value.css, meta.property-value#a7c080
keyword.other.unit.css#e69875
constant.other.color.rgb-value.css, support.constant.color#d699b6
entity.other.attribute-name.pseudo-class, entity.other.attribute-name.pseudo-element#83c092
markup.heading, entity.name.section.markdown#e67e80
markup.bold#dbbc7f
markup.italic#d699b6
markup.fenced_code, markup.inline.raw#a7c080
markup.underline.link, string.other.link#83c092
punctuation.definition.list.begin.markdown#e69875
markup.quote#7f897d
support.type.property-name.json, source.yaml entity.name.tag#7fbbb3
source.yaml string.unquoted#a7c080
entity.name.lifetime.rust, storage.modifier.lifetime.rust#e69875
support.macro.rust, entity.name.function.macro.rust#83c092
meta.attribute.rust#7f897d
source.go entity.name.package#dbbc7f
entity.name.function.decorator, meta.decorator, punctuation.decorator#d699b6
invalid#e67e80
invalid.deprecated#e69875

Shiki preview

TypeScript sample highlighted with this variant's colors and tokenColors.

Loading...

Dark Ever - Coding Theme