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#074b5f
  • activityBar.background#0c1923
  • activityBar.border#0d1d28
  • activityBar.foreground#87acb4
  • activityBar.inactiveForeground#3d545d
  • activityBarBadge.background#027c9b
  • activityBarBadge.foreground#fee4ce
  • badge.background#d15123
  • badge.foreground#fee4ce
  • banner.background#9d5200
  • banner.foreground#deb88d
  • banner.iconForeground#1e4950
  • button.background#84653e
  • button.border#00000000
  • button.foreground#fee4ce
  • button.secondaryBackground#1e4950
  • button.secondaryForeground#deb88d
  • button.separator#60594d
  • charts.blue#1e4950
  • charts.foreground#deb88d
  • charts.green#027c9b
  • charts.lines#756958
  • charts.orange#fca02f
  • charts.purple#68d4f1
  • charts.red#d15123
  • charts.yellow#fdd39f
  • diffEditor.border#0f222f
  • diffEditor.diagonalFill#122938
  • diffEditor.insertedLineBackground#027c9b4d
  • diffEditor.insertedTextBackground#027c9b4d
  • diffEditor.insertedTextBorder#00000000
  • diffEditor.removedLineBackground#d151234d
  • diffEditor.removedTextBackground#d151234d
  • diffEditor.removedTextBorder#00000000
  • disabledForeground#756958
  • editor.background#0c1923
  • editor.foreground#deb88d
  • editor.lineHighlightBackground#0f212d
  • editor.lineHighlightBorder#00000000
  • editor.selectionBackground#1e4962
  • editor.selectionForeground#fee4ce
  • editorCursor.foreground#fca02f
  • editorError.foreground#68d4f1
  • editorGroup.border#0f222f
  • editorGroup.dropBackground#122938
  • editorGroup.dropIntoPromptBackground#122938
  • editorGroup.dropIntoPromptBorder#00000000
  • editorGroup.dropIntoPromptForeground#37434c
  • editorGroupHeader.tabsBackground#0c1923
  • editorGutter.addedBackground#027c9b
  • editorGutter.deletedBackground#d15123
  • editorHoverWidget.background#483f31
  • editorHoverWidget.border#deb88d40
  • editorHoverWidget.foreground#deb88d
  • editorHoverWidget.highlightForeground#fee4ce
  • editorHoverWidget.statusBarBackground#0c1923
  • editorInfo.foreground#1e4950
  • editorLineNumber.activeForeground#434b53
  • editorLineNumber.foreground#17384c
  • editorOverviewRuler.addedForeground#027c9b
  • editorOverviewRuler.deletedForeground#d15123
  • editorOverviewRuler.errorForeground#d15123
  • editorOverviewRuler.infoForeground#1e4950
  • editorOverviewRuler.warningForeground#fca02f
  • editorRuler.foreground#1a3540
  • editorWarning.foreground#fca02f
  • editorWidget.background#483f31
  • editorWidget.border#deb88d40
  • editorWidget.foreground#deb88d
  • errorForeground#d15123
  • focusBorder#20424f
  • foreground#deb88d
  • gitDecoration.addedResourceForeground#027c9b
  • gitDecoration.conflictingResourceForeground#d15123
  • gitDecoration.deletedResourceForeground#d15123
  • gitDecoration.ignoredResourceForeground#deb88d66
  • gitDecoration.modifiedResourceForeground#50a3b5
  • gitDecoration.stageDeletedResourceForeground#aa4623
  • gitDecoration.stageModifiedResourceForeground#428798
  • gitDecoration.untrackedResourceForeground#fca02f
  • gitlens.decorations.addedForegroundColor#027c9b
  • gitlens.decorations.copiedForegroundColor#027c9b
  • gitlens.decorations.deletedForegroundColor#d15123
  • gitlens.decorations.ignoredForegroundColor#60594d
  • gitlens.decorations.modifiedForegroundColor#50a3b5
  • gitlens.decorations.untrackedForegroundColor#fca02f
  • inlineChatDiff.inserted#027c9b33
  • inlineChatDiff.removed#d1512333
  • list.activeSelectionBackground#17384c
  • list.activeSelectionForeground#fee4ce
  • list.activeSelectionIconForeground#fee4ce
  • list.errorForeground#d15123
  • list.focusBackground#132c3c
  • list.focusForeground#deb88d
  • list.focusOutline#00000000
  • list.hoverBackground#102533
  • list.hoverForeground#deb88d
  • list.inactiveFocusBackground#102533
  • list.inactiveFocusOutline#00000000
  • list.inactiveSelectionBackground#132c3c
  • list.inactiveSelectionForeground#deb88d
  • list.inactiveSelectionIconForeground#deb88d
  • list.invalidItemForeground#d15123
  • list.warningForeground#fca02f
  • merge.border#0f222f
  • panel.border#0f222f
  • problemsErrorIcon.foreground#d15123
  • problemsInfoIcon.foreground#1e4950
  • problemsWarningIcon.foreground#fca02f
  • selection.background#1e4962
  • sideBar.background#0c1923
  • sideBar.border#0f222f
  • sideBar.foreground#9d938a
  • sideBarSectionHeader.background#0c1923
  • sideBarSectionHeader.foreground#fee4ce
  • sideBarTitle.foreground#deb88d
  • statusBar.background#0c1923
  • statusBar.border#00000000
  • statusBar.debuggingBackground#50a3b5
  • statusBar.debuggingBorder#00000000
  • statusBar.debuggingForeground#fee4ce
  • statusBar.foreground#434b53
  • statusBar.noFolderBackground#234857
  • statusBar.noFolderBorder#00000000
  • statusBar.noFolderForeground#68d4f1
  • statusBarItem.activeBackground#fee4ce
  • statusBarItem.errorBackground#d15123
  • statusBarItem.errorForeground#fee4ce
  • statusBarItem.hoverBackground#002437
  • statusBarItem.warningBackground#fca02f
  • statusBarItem.warningForeground#84653e
  • tab.activeBackground#002437
  • tab.activeForeground#deb88d
  • tab.border#132c35
  • tab.hoverBackground#15313a
  • tab.hoverForeground#857f79
  • tab.inactiveBackground#0c1923
  • tab.inactiveForeground#434b53
  • terminal.ansiBlack#17384c
  • terminal.ansiBlue#1e4950
  • terminal.ansiBrightBlack#434b53
  • terminal.ansiBrightBlue#1bbcdd
  • terminal.ansiBrightCyan#87acb4
  • terminal.ansiBrightGreen#628d98
  • terminal.ansiBrightMagenta#bbe3ee
  • terminal.ansiBrightRed#d48678
  • terminal.ansiBrightWhite#fee4ce
  • terminal.ansiBrightYellow#fdd39f
  • terminal.ansiCyan#50a3b5
  • terminal.ansiGreen#027c9b
  • terminal.ansiMagenta#68d4f1
  • terminal.ansiRed#d15123
  • terminal.ansiWhite#deb88d
  • terminal.ansiYellow#fca02f
  • terminal.background#0c1923
  • terminal.foreground#deb88d
  • terminal.selectionBackground#1e4962
  • terminal.selectionForeground#fee4ce
  • textLink.activeForeground#87acb4
  • textLink.foreground#50a3b5
  • titleBar.activeBackground#0b2532
  • titleBar.activeForeground#628d98
  • titleBar.border#00000000
  • toolbar.activeBackground#5b2f23
  • toolbar.hoverBackground#332423
  • toolbar.hoverOutline#00000000
  • welcomePage.background#0d1d28
  • welcomePage.progress.background#17384c
  • welcomePage.progress.foreground#50a3b5
  • welcomePage.tileBackground#122938
  • welcomePage.tileBorder#494c4e
  • welcomePage.tileHoverBackground#143042
  • widget.border#deb88d40
  • widget.shadow#00000066

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
string#deb88d
string.template#027c9b
string.template punctuation#50a3b5
constant.language#fca02fitalic
constant.numeric#50a3b5
constant.language.json, constant.language.import-export-all#027c9b
support.class#50a3b5
support.variable#deb88d
variable, meta.definition.variable entity.name.function#deb88d
source.vue meta.attribute variablebold
variable.parameteritalic
variable.object.property, meta.field.declaration string, variable.other.object.property#027c9b
support.variable.property, variable.other.property#68d4f1
variable.other.constant#fee4ce
variable.language.thisitalic
modifier, support.type.object#027c9b
keyword#fca02f
keyword.control.loop, keyword.control.conditional, keyword.control.trycatch#fca02f
keyword.control.import, keyword.control.from, keyword.control.export, keyword.control.default#fee4ceitalic
keyword.control.flow#68d4f1italic
entity.name.function, support.function#50a3b5
new.expr entity.name.function#fee4cebold
storage.type, storage.modifier#027c9bitalic
support.module, support.node#deb88ditalic
support.type#68d4f1
entity.name.type, entity.other.inherited-class#fee4ce
comment#50a3b566italic
entity.name.type.class#68d4f1
meta.definition.method entity.name.function#50a3b5
meta.function entity.name.function#50a3b5
template.expression.begin, template.expression.end#027c9b
entity.name.tag.yaml#68d4f1
meta.object-literal.key, meta.object-literal.key string, support.type.property-name.json, meta.attribute entity.name, meta.attribute punctuation.separator.label#50a3b5italic
entity.other.attribute-name.class#027c9b
entity.other.attribute-name.id#50a3b5
source.css#fca02f
meta.tag, punctuation.definition.tag#027c9b
entity.name.tag#50a3b5
meta.tag entity.other.attribute-name#027c9bitalic
entity.other.attribute-name#fca02f
markup.heading#027c9b
text.html.markdown meta.link.inline, meta.link.reference#deb88d
text.html.markdown beginning.punctuation.definition.list#027c9b
markup.italic#434b53italic
markup.bold#fee4cebold
markup.bold markup.italic, markup.italic markup.bold#fee4ce
keyword.other.definition.ini#deb88d
entity.name.section.group-title.ini#027c9b
punctuation.definition.tag#50a3b5
storage.modifier.ts, entity.name.type.module.ts, support.type.primitive.ts#50a3b5
entity.name.type.instance.jsdoc#50a3b5
punctuation.separator.parameter#50a3b566
meta.brace, punctuation.definition.parameters, punctuation.definition.block, punctuation.terminator.statement, punctuation.separator.comma, punctuation.section.embedded#50a3b566
token.info-token#1e4950
token.warn-token#fca02f
token.error-token#d15123
token.debug-token#027c9b
SeaShells Theme by nemoDreaming - VS Code Theme