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#7db8cf
  • activityBar.background#dbeaf8
  • activityBar.border#d4e5f5
  • activityBar.foreground#2d5158
  • activityBar.inactiveForeground#95adb8
  • activityBarBadge.background#027c9b
  • activityBarBadge.foreground#fee4ce
  • badge.background#d15123
  • badge.foreground#fee4ce
  • banner.background#c7742a
  • banner.foreground#684b25
  • banner.iconForeground#8cb7bf
  • button.background#9f7e56
  • button.border#00000000
  • button.foreground#290c00
  • button.secondaryBackground#8cb7bf
  • button.secondaryForeground#684b25
  • button.separator#adaaa4
  • charts.blue#1e4950
  • charts.foreground#684b25
  • charts.green#027c9b
  • charts.lines#a29b8f
  • charts.orange#fca02f
  • charts.purple#68d4f1
  • charts.red#d15123
  • charts.yellow#fdd39f
  • diffEditor.border#cbdff0
  • diffEditor.diagonalFill#c1d8eb
  • diffEditor.insertedLineBackground#1e86a64d
  • diffEditor.insertedTextBackground#1e86a64d
  • diffEditor.insertedTextBorder#00000000
  • diffEditor.removedLineBackground#c94a1c4d
  • diffEditor.removedTextBackground#c94a1c4d
  • diffEditor.removedTextBorder#00000000
  • disabledForeground#a29b8f
  • editor.background#dbeaf8
  • editor.foreground#684b25
  • editor.lineHighlightBackground#cee1f2
  • editor.lineHighlightBorder#00000000
  • editor.selectionBackground#8bb2cf
  • editor.selectionForeground#251400
  • editorCursor.foreground#6e2b00
  • editorError.foreground#003b53
  • editorGroup.border#cbdff0
  • editorGroup.dropBackground#c1d8eb
  • editorGroup.dropIntoPromptBackground#c1d8eb
  • editorGroup.dropIntoPromptBorder#00000000
  • editorGroup.dropIntoPromptForeground#a8b4c0
  • editorGroupHeader.tabsBackground#dbeaf8
  • editorGutter.addedBackground#1e86a6
  • editorGutter.deletedBackground#c94a1c
  • editorHoverWidget.background#bdb4a7
  • editorHoverWidget.border#684b2540
  • editorHoverWidget.foreground#684b25
  • editorHoverWidget.highlightForeground#290c00
  • editorHoverWidget.statusBarBackground#dbeaf8
  • editorInfo.foreground#8cb7bf
  • editorLineNumber.activeForeground#9fa8b2
  • editorLineNumber.foreground#a6c5de
  • editorOverviewRuler.addedForeground#1e86a6
  • editorOverviewRuler.deletedForeground#c94a1c
  • editorOverviewRuler.errorForeground#c94a1c
  • editorOverviewRuler.infoForeground#8cb7bf
  • editorOverviewRuler.warningForeground#6e2b00
  • editorRuler.foreground#afcfdd
  • editorWarning.foreground#6e2b00
  • editorWidget.background#bdb4a7
  • editorWidget.border#684b2540
  • editorWidget.foreground#684b25
  • errorForeground#c94a1c
  • focusBorder#99c1d0
  • foreground#684b25
  • gitDecoration.addedResourceForeground#1e86a6
  • gitDecoration.conflictingResourceForeground#c94a1c
  • gitDecoration.deletedResourceForeground#c94a1c
  • gitDecoration.ignoredResourceForeground#684b2566
  • gitDecoration.modifiedResourceForeground#006272
  • gitDecoration.stageDeletedResourceForeground#cd6a48
  • gitDecoration.stageModifiedResourceForeground#2c7d8d
  • gitDecoration.untrackedResourceForeground#6e2b00
  • gitlens.decorations.addedForegroundColor#1e86a6
  • gitlens.decorations.copiedForegroundColor#1e86a6
  • gitlens.decorations.deletedForegroundColor#c94a1c
  • gitlens.decorations.ignoredForegroundColor#adaaa4
  • gitlens.decorations.modifiedForegroundColor#006272
  • gitlens.decorations.untrackedForegroundColor#6e2b00
  • inlineChatDiff.inserted#1e86a633
  • inlineChatDiff.removed#c94a1c33
  • list.activeSelectionBackground#a6c5de
  • list.activeSelectionForeground#290c00
  • list.activeSelectionIconForeground#290c00
  • list.errorForeground#c94a1c
  • list.focusBackground#bbd4e8
  • list.focusForeground#684b25
  • list.focusOutline#00000000
  • list.hoverBackground#c6dbee
  • list.hoverForeground#684b25
  • list.inactiveFocusBackground#c6dbee
  • list.inactiveFocusOutline#00000000
  • list.inactiveSelectionBackground#bbd4e8
  • list.inactiveSelectionForeground#684b25
  • list.inactiveSelectionIconForeground#684b25
  • list.invalidItemForeground#c94a1c
  • list.warningForeground#6e2b00
  • merge.border#cbdff0
  • panel.border#cbdff0
  • problemsErrorIcon.foreground#c94a1c
  • problemsInfoIcon.foreground#8cb7bf
  • problemsWarningIcon.foreground#6e2b00
  • selection.background#8bb2cf
  • sideBar.background#dbeaf8
  • sideBar.border#cbdff0
  • sideBar.foreground#706563
  • sideBarSectionHeader.background#dbeaf8
  • sideBarSectionHeader.foreground#290c00
  • sideBarTitle.foreground#684b25
  • statusBar.background#dbeaf8
  • statusBar.border#00000000
  • statusBar.debuggingBackground#006272
  • statusBar.debuggingBorder#00000000
  • statusBar.debuggingForeground#251400
  • statusBar.foreground#9fa8b2
  • statusBar.noFolderBackground#a4becf
  • statusBar.noFolderBorder#00000000
  • statusBar.noFolderForeground#003b53
  • statusBarItem.activeBackground#290c00
  • statusBarItem.errorBackground#c94a1c
  • statusBarItem.errorForeground#290c00
  • statusBarItem.hoverBackground#c1def8
  • statusBarItem.warningBackground#6e2b00
  • statusBarItem.warningForeground#9f7e56
  • tab.activeBackground#c1def8
  • tab.activeForeground#684b25
  • tab.border#bbd6e1
  • tab.hoverBackground#b4d1dc
  • tab.hoverForeground#827b7c
  • tab.inactiveBackground#dbeaf8
  • tab.inactiveForeground#9fa8b2
  • 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#dbeaf8
  • terminal.foreground#684b25
  • terminal.selectionBackground#8bb2cf
  • terminal.selectionForeground#251400
  • textLink.activeForeground#2d5158
  • textLink.foreground#006272
  • titleBar.activeBackground#c3deee
  • titleBar.activeForeground#446e79
  • titleBar.border#00000000
  • toolbar.activeBackground#d4aaa0
  • toolbar.hoverBackground#d7cacc
  • toolbar.hoverOutline#00000000
  • welcomePage.background#d4e5f5
  • welcomePage.progress.background#a6c5de
  • welcomePage.progress.foreground#006272
  • welcomePage.tileBackground#c1d8eb
  • welcomePage.tileBorder#afb3ba
  • welcomePage.tileHoverBackground#b3cee5
  • widget.border#684b2540
  • widget.shadow#00000066

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
string.template#027c9b
string.template punctuation#50a3b5
template.expression.begin, template.expression.end#027c9b
constant.language#fca02fitalic
constant.numeric#50a3b5
constant.language.json, constant.language.import-export-all#027c9b
variable.other.constant#290c00
support.variable#027c9b
variable, meta.definition.variable entity.name.function#684b25
variable.parameteritalic
variable.object.property, meta.field.declaration string, variable.other.object.property#027c9b
support.variable.property, variable.other.property#027c9b
keyword#fca02f
keyword.control.import, keyword.control.from, keyword.control.export, keyword.control.default#290c00italic
keyword.control.flow#68d4f1italic
variable.language.thisitalic
modifier, support.type.object#027c9b
storage.type, storage.modifier#027c9bitalic
support.module, support.node#684b25italic
entity.name.type, entity.other.inherited-class#290c00
comment#00627266italic
entity.name.function, support.function, meta.definition.method entity.name.function, meta.function entity.name.function#50a3b5
new.expr entity.name.function#290c00bold
support.type#027c9b
support.class#027c9b
entity.name.type.class#027c9b
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
meta.tag, punctuation.definition.tag#027c9b
entity.name.tag#50a3b5
text.html meta.tag#628d98
meta.tag entity.other.attribute-name#027c9bitalic
entity.other.attribute-name#fca02f
source.css support.type#027c9b
source.css entity.name.tag#bbe3ee
source.css entity.other.attribute-name.class#50a3b5
source.css entity.other.attribute-name.id#fee4ce
markup.heading#027c9b
text.html.markdown meta.link.inline, meta.link.reference#684b25
text.html.markdown beginning.punctuation.definition.list#027c9b
markup.italic#9fa8b2italic
markup.bold#290c00bold
markup.bold markup.italic, markup.italic markup.bold#290c00
keyword.other.definition.ini#684b25
entity.name.section.group-title.ini#027c9b
punctuation.definition.tag#50a3b5
entity.name.tag.yaml#68d4f1
storage.modifier.ts, entity.name.type.module.ts, support.type.primitive.ts#50a3b5
source.vue meta.attribute variablebold
entity.name.type.instance.jsdoc#50a3b5
meta.brace, punctuation.definition.parameters, punctuation.definition.block, punctuation.terminator.statement, punctuation.separator.comma, punctuation.separator.parameter, punctuation.section.embedded#00627266
token.info-token#8cb7bf
token.warn-token#fca02f
token.error-token#c94a1c
token.debug-token#027c9b
SeaShells Theme by nemoDreaming - VS Code Theme