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#282727
  • activityBar.foreground#c5c9c5
  • activityBarBadge.background#658594
  • activityBarBadge.foreground#c5c9c5
  • badge.background#282727
  • button.background#658594
  • button.secondaryBackground#223249
  • button.secondaryForeground#c5c9c5
  • checkbox.border#223249
  • debugToolBar.background#0d0c0c
  • descriptionForeground#c5c9c5
  • diffEditor.insertedTextBackground#2b3328
  • dropdown.background#0d0c0c
  • dropdown.border#0d0c0c
  • editor.background#181616
  • editor.findMatchBackground#2d4f67
  • editor.findMatchBorder#ff9e3b
  • editor.findMatchHighlightBackground#2d4f67
  • editor.foreground#c5c9c5
  • editor.lineHighlightBackground#282727
  • editor.selectionBackground#223249
  • editor.selectionHighlightBackground#393836
  • editor.selectionHighlightBorder#625e5a
  • editor.wordHighlightBackground#3938364d
  • editor.wordHighlightBorder#625e5a
  • editor.wordHighlightStrongBackground#3938364d
  • editor.wordHighlightStrongBorder#625e5a
  • editorBracketHighlight.foreground1#8992a7
  • editorBracketHighlight.foreground2#b6927b
  • editorBracketHighlight.foreground3#8ba4b0
  • editorBracketHighlight.foreground4#a292a3
  • editorBracketHighlight.foreground5#c4b28a
  • editorBracketHighlight.foreground6#8ea4a2
  • editorBracketHighlight.unexpectedBracket.foreground#c4746e
  • editorBracketMatch.background#0d0c0c
  • editorBracketMatch.border#625e5a
  • editorBracketPairGuide.activeBackground1#8992a7
  • editorBracketPairGuide.activeBackground2#b6927b
  • editorBracketPairGuide.activeBackground3#8ba4b0
  • editorBracketPairGuide.activeBackground4#a292a3
  • editorBracketPairGuide.activeBackground5#c4b28a
  • editorBracketPairGuide.activeBackground6#8ea4a2
  • editorCursor.background#c5c9c5
  • editorCursor.foreground#c5c9c5
  • editorError.foreground#e82424
  • editorGroup.border#0d0c0c
  • editorGroupHeader.tabsBackground#0d0c0c
  • editorGutter.addedBackground#76946a
  • editorGutter.deletedBackground#c34043
  • editorGutter.modifiedBackground#dca561
  • editorHoverWidget.background#282727
  • editorHoverWidget.border#c08a72
  • editorHoverWidget.highlightForeground#8ba4b0
  • editorIndentGuide.activeBackground1#625e5a
  • editorIndentGuide.background1#282727
  • editorInlayHint.background#181616
  • editorInlayHint.foreground#737C73
  • editorLineNumber.activeForeground#c08a72
  • editorLineNumber.foreground#625e5a
  • editorMarkerNavigation.background#393836
  • editorRuler.foreground#393836
  • editorSuggestWidget.background#282727
  • editorSuggestWidget.border#393836
  • editorSuggestWidget.selectedBackground#393836
  • editorWarning.foreground#ff9e3b
  • editorWhitespace.foreground#181616
  • editorWidget.background#181616
  • focusBorder#223249
  • gitDecoration.ignoredResourceForeground#737C73
  • input.background#282727
  • list.activeSelectionBackground#393836
  • list.activeSelectionForeground#c5c9c5
  • list.focusBackground#282727
  • list.focusForeground#c5c9c5
  • list.highlightForeground#7e9cd8
  • list.hoverBackground#393836
  • list.hoverForeground#c5c9c5
  • list.inactiveSelectionBackground#282727
  • list.inactiveSelectionForeground#c5c9c5
  • list.warningForeground#ff9e3b
  • menu.foreground#c5c9c5
  • menu.separatorBackground#0d0c0c
  • minimapGutter.addedBackground#76946a
  • minimapGutter.deletedBackground#c34043
  • minimapGutter.modifiedBackground#dca561
  • panel.border#0d0c0c
  • panelSectionHeader.background#181616
  • peekView.border#625e5a
  • peekViewEditor.background#282727
  • peekViewEditor.matchHighlightBackground#2d4f67
  • peekViewResult.background#393836
  • scrollbar.shadow#393836
  • scrollbarSlider.activeBackground#6f6f9080
  • scrollbarSlider.background#625e5a66
  • scrollbarSlider.hoverBackground#625e5a80
  • settings.focusedRowBackground#393836
  • settings.headerForeground#c5c9c5
  • sideBar.background#12120f
  • sideBar.border#0d0c0c
  • sideBar.foreground#c5c9c5
  • sideBarSectionHeader.background#393836
  • sideBarSectionHeader.foreground#c5c9c5
  • statusBar.background#0d0c0c
  • statusBar.debuggingBackground#e82424
  • statusBar.debuggingBorder#957fb8
  • statusBar.debuggingForeground#c5c9c5
  • statusBar.foreground#c8c093
  • statusBar.noFolderBackground#181616
  • statusBarItem.hoverBackground#393836
  • statusBarItem.remoteBackground#2d4f67
  • statusBarItem.remoteForeground#c5c9c5
  • tab.activeBackground#282727
  • tab.activeBorder#b6927b
  • tab.activeForeground#c5c9c5
  • tab.border#0d0c0c
  • tab.hoverBackground#625e5a
  • tab.inactiveBackground#181616
  • tab.unfocusedHoverBackground#282727
  • terminal.ansiBlack#0d0c0c
  • terminal.ansiBlue#8ba4b0
  • terminal.ansiBrightBlack#a6a69c
  • terminal.ansiBrightBlue#7fb4ca
  • terminal.ansiBrightCyan#a3d4d5
  • terminal.ansiBrightGreen#87a987
  • terminal.ansiBrightMagenta#938aa9
  • terminal.ansiBrightRed#e46876
  • terminal.ansiBrightWhite#c5c9c5
  • terminal.ansiBrightYellow#e6c384
  • terminal.ansiCyan#8ea4a2
  • terminal.ansiGreen#8a9a7b
  • terminal.ansiMagenta#a292a3
  • terminal.ansiRed#c4746e
  • terminal.ansiWhite#c8c093
  • terminal.ansiYellow#c4b28a
  • terminal.background#12120f
  • terminal.border#0d0c0c
  • terminal.foreground#c5c9c5
  • terminal.selectionBackground#223249
  • textBlockQuote.background#181616
  • textBlockQuote.border#0d0c0c
  • textLink.foreground#6a9589
  • textPreformat.foreground#ff9e3b
  • titleBar.activeBackground#181616
  • titleBar.activeForeground#c5c9c5
  • titleBar.inactiveBackground#181616
  • titleBar.inactiveForeground#c5c9c5
  • walkThrough.embeddedEditorBackground#181616

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#8A7664italic
variable, string constant.other.placeholder#C5C9C5
constant.other.color#B6927B
invalid, invalid.illegal#E82424
storage.type#8992A7
storage.modifier#8992A7
keyword.control.flow, keyword.control.conditional, keyword.control.loop#8992A7
keyword.control, constant.other.color, meta.tag, keyword.other.template, keyword.other.substitution, keyword.other#8992A7
keyword.other.definition.ini#B6927B
keyword.control.trycatch#C4746E
keyword.other.unit, keyword.operator#C4746E
punctuation, punctuation.definition.tag, punctuation.separator.inheritance.php, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, punctuation.section.embedded, meta.brace, keyword.operator.type.annotation, keyword.operator.namespace#9E9B93
entity.name.tag, meta.tag.sgml#C4B28A
entity.name.tag.html#8992A7
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method#8BA4B0
entity.name.function.macro#B6927B
meta.block variable.other#C5C9C5
support.other.variable#C5C9C5
string.other.link#B6927B
constant.numeric, constant.language, support.constant, constant.character, constant.escape#949FB5
constant.language.boolean, constant.language.true, constant.language.false, constant.language.php, support.constant.core.php#C08A72
constant.numeric#C08A72
string, punctuation.definition.string, constant.other.symbol, constant.other.key, entity.other.inherited-class, markup.heading, markup.inserted.git_gutter, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js, markup.inline.raw.string#87A987
entity.name, support.type, support.class, support.other.namespace.use.php, meta.use.php, support.other.namespace.php, support.type.sys-types#8EA4A2
entity.name.type.module, entity.name.namespace#C5C9C5
entity.name.import.go#87A987
variable.other.property#C4B28A
keyword.control.import, keyword.import, meta.import#B6927B
source.css support.type.property-name, source.sass support.type.property-name, source.scss support.type.property-name, source.less support.type.property-name, source.stylus support.type.property-name, source.postcss support.type.property-name#8EA4A2
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#C4746E
variable.language#C4746E
variable.language.this, variable.language.self, variable.language.this.php#A292A3
entity.name.method.js#8BA4B0
meta.class-method.js entity.name.function.js, variable.function.constructor#8BA4B0
entity.other.attribute-name#8992A7
entity.other.attribute-name.html, entity.other.attribute-name, invalid.deprecated.entity.other.attribute-name.html#C4B28A
entity.other.attribute-name.class#C4B28A
source.sass keyword.control#949FB5
markup.inserted#76946A
markup.deleted#C34043
markup.changed#DCA561
string.regexp#949FB5
constant.character.escape#949FB5
*url*, *link*, *uri*
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#8992A7
source.js constant.other.object.key.js string.unquoted.label.js#C4746E
source.json meta.structure.dictionary.json support.type.property-name.json#A292A3
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#C4B28A
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#B6927B
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#C4746E
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#B6927B
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#8BA4B0
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#A292A3
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#8992A7
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#87A987
text.html.markdown, punctuation.definition.list_item.markdown#C5C9C5
text.html.markdown markup.inline.raw.markdown#8992A7
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown#8992A7
markdown.heading, entity.name.section.markdown, markup.heading.markdown#8BA4B0
markup.italic#C4746E
markup.bold, markup.bold string
markup.bold markup.italic, markup.italic markup.bold, markup.quote markup.bold, markup.bold markup.italic string, markup.italic markup.bold string, markup.quote markup.bold string#C4746E
markup.underline#949FB5
markup.quote punctuation.definition.blockquote.markdown#8A7664
markup.quote
string.other.link.title.markdown#B6927B
string.other.link.description.title.markdown#8992A7
constant.other.reference.link.markdown#C4B28A
markup.raw.block#8992A7
markup.raw.block.fenced.markdown#8A7664
punctuation.definition.fenced.markdown#8A7664
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end#C5C9C5
variable.language.fenced.markdown#8A7664
meta.separator#9E9B93
markup.table#C5C9C5
token.info-token#6796E6
token.warn-token#CD9731
token.error-token#F44747
token.debug-token#B267E6
punctuation.definition.variable.php, punctuation.definition.variable.begin.php, source.php punctuation.definition.variable#C08A72

Shiki preview

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

Loading...

Dark Ever - Coding Theme