Skip to main content
Coding Theme

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#0f161f
  • activityBar.border#131e22
  • activityBar.foreground#c7bfa8B3
  • activityBarBadge.background#6791C9
  • activityBarBadge.foreground#000a0e
  • activityBarTop.background#0f161f
  • activityBarTop.foreground#c7bfa8
  • badge.background#131e22
  • badge.foreground#c7bfa8
  • breadcrumbPicker.background#0d181c
  • button.background#242f33
  • button.foreground#c7bfa8
  • button.hoverBackground#6791C960
  • debugToolBar.background#0f161f
  • diffEditor.insertedTextBackground#8CD7AA1A
  • diffEditor.removedTextBackground#DF5B611A
  • dropdown.background#1c2736
  • dropdown.border#2e425b
  • dropdown.foreground#e4ecf5
  • dropdown.listBackground#1c2736
  • editor.background#0f161f
  • editor.findMatchBackground#313c4080
  • editor.findMatchHighlightBackground#313c404D
  • editor.findRangeHighlightBackground#313c401A
  • editor.foreground#d9d0b8
  • editor.hoverHighlightBackground#313c404D
  • editor.inactiveSelectionBackground#2d456630
  • editor.lineHighlightBackground#1a232c
  • editor.lineHighlightBorder#0000
  • editor.rangeHighlightBackground#131e2280
  • editor.selectionBackground#27405666
  • editor.selectionHighlightBackground#c7bfa822
  • editor.wordHighlightBackground#313c4080
  • editor.wordHighlightStrongBackground#313c4080
  • editorBracketHighlight.foreground1#b98ad6
  • editorBracketHighlight.foreground2#5f86b8
  • editorBracketHighlight.foreground3#6fa88b
  • editorBracketHighlight.foreground4#79b99a
  • editorBracketHighlight.foreground5#d3bf7c
  • editorBracketHighlight.foreground6#d18b6f
  • editorBracketHighlight.unexpectedBracket.foreground#c45a56
  • editorBracketMatch.background#313c4080
  • editorBracketMatch.border#313c4000
  • editorBracketPairGuide.activeBackground1#2a333c
  • editorBracketPairGuide.background1#1a232c
  • editorCodeLens.foreground#3b464a80
  • editorCursor.background#0f161f
  • editorCursor.foreground#78B892
  • editorError.foreground#DF5B61
  • editorGhostText.background#313c4060
  • editorGroup.border#131e22
  • editorGroup.dropBackground#313c404D
  • editorGroupHeader.noTabsBackground#0f161f
  • editorGroupHeader.tabsBackground#0f161f
  • editorGroupHeader.tabsBorder#131e22
  • editorGutter.addedBackground#8CD7AAB3
  • editorGutter.background#0000
  • editorGutter.deletedBackground#DF5B61B3
  • editorGutter.modifiedBackground#7ACFE4B3
  • editorHoverWidget.background#1c2736
  • editorHoverWidget.border#2e425b
  • editorIndentGuide.activeBackground1#1c272b
  • editorIndentGuide.background1#131e2280
  • editorInfo.foreground#6791C9
  • editorLineNumber.activeForeground#D9D7D680
  • editorLineNumber.foreground#39434d
  • editorLink.activeForeground#6791C9
  • editorOverviewRuler.addedForeground#8CD7AA80
  • editorOverviewRuler.border#131e22B3
  • editorOverviewRuler.bracketMatchForeground#D9D7D680
  • editorOverviewRuler.commonContentForeground#D9D7D680
  • editorOverviewRuler.currentContentForeground#6791C9
  • editorOverviewRuler.deletedForeground#DF5B6180
  • editorOverviewRuler.errorForeground#DF5B61E6
  • editorOverviewRuler.findMatchForeground#313c40e9
  • editorOverviewRuler.incomingContentForeground#78B892
  • editorOverviewRuler.infoForeground#6791C980
  • editorOverviewRuler.modifiedForeground#7ACFE480
  • editorOverviewRuler.rangeHighlightForeground#313c4080
  • editorOverviewRuler.selectionHighlightForeground#2d456660
  • editorOverviewRuler.warningForeground#ecd28b80
  • editorOverviewRuler.wordHighlightForeground#313c4080
  • editorOverviewRuler.wordHighlightStrongForeground#313c4080
  • editorRuler.foreground#313c404D
  • editorStickyScroll.shadow#000a0e
  • editorStickyScrollHover.background#313c4080
  • editorSuggestWidget.background#1c2736
  • editorSuggestWidget.border#2e425b
  • editorSuggestWidget.foreground#c7bfa8
  • editorSuggestWidget.highlightForeground#78B892
  • editorSuggestWidget.selectedBackground#313c4080
  • editorWarning.foreground#ecd28bB3
  • editorWhitespace.foreground#313c4080
  • editorWidget.background#141d26
  • editorWidget.border#2e425b
  • errorForeground#DF5B61
  • extensionButton.prominentBackground#78B892
  • extensionButton.prominentHoverBackground#8CD7AA
  • focusBorder#131e22
  • foreground#c7bfa8
  • gitDecoration.addedResourceForeground#8CD7AA
  • gitDecoration.conflictingResourceForeground#BC83E3
  • gitDecoration.deletedResourceForeground#DF5B61
  • gitDecoration.ignoredResourceForeground#9a9485
  • gitDecoration.modifiedResourceForeground#E89982
  • gitDecoration.untrackedResourceForeground#78B892
  • gitlens.closedAutolinkedIssueIconColor#BC83E3
  • gitlens.closedPullRequestIconColor#DF5B61
  • gitlens.decorations.branchAheadForegroundColor#8CD7AA
  • gitlens.decorations.branchBehindForegroundColor#E89982
  • gitlens.decorations.branchDivergedForegroundColor#ecd28b
  • gitlens.decorations.branchMissingUpstreamForegroundColor#DF5B61
  • gitlens.decorations.statusMergingOrRebasingConflictForegroundColor#DF5B61
  • gitlens.decorations.statusMergingOrRebasingForegroundColor#ecd28b
  • gitlens.decorations.workspaceCurrentForegroundColor#8CD7AA
  • gitlens.decorations.workspaceRepoMissingForegroundColor#9a9485
  • gitlens.decorations.workspaceRepoOpenForegroundColor#8CD7AA
  • gitlens.decorations.worktreeHasUncommittedChangesForegroundColor#78B892
  • gitlens.decorations.worktreeMissingForegroundColor#DF5B61
  • gitlens.graphChangesColumnAddedColor#8CD7AA
  • gitlens.graphChangesColumnDeletedColor#DF5B61
  • gitlens.graphLane10Color#78B892
  • gitlens.graphLane1Color#7ACFE4
  • gitlens.graphLane2Color#6791C9
  • gitlens.graphLane3Color#BC83E3
  • gitlens.graphLane4Color#C488EC
  • gitlens.graphLane5Color#78B892
  • gitlens.graphLane6Color#8CD7AA
  • gitlens.graphLane7Color#ecd28b
  • gitlens.graphLane8Color#f6dc95
  • gitlens.graphLane9Color#8CD7AA
  • gitlens.graphMinimapMarkerHeadColor#8CD7AA
  • gitlens.graphMinimapMarkerHighlightsColor#78B892
  • gitlens.graphMinimapMarkerLocalBranchesColor#7ACFE4
  • gitlens.graphMinimapMarkerPullRequestsColor#E89982
  • gitlens.graphMinimapMarkerRemoteBranchesColor#6791C9
  • gitlens.graphMinimapMarkerStashesColor#BC83E3
  • gitlens.graphMinimapMarkerTagsColor#2a333c
  • gitlens.graphMinimapMarkerUpstreamColor#8CD7AA
  • gitlens.graphScrollMarkerHeadColor#8CD7AA
  • gitlens.graphScrollMarkerHighlightsColor#ecd28b
  • gitlens.graphScrollMarkerLocalBranchesColor#7ACFE4
  • gitlens.graphScrollMarkerPullRequestsColor#E89982
  • gitlens.graphScrollMarkerRemoteBranchesColor#6791C9
  • gitlens.graphScrollMarkerStashesColor#BC83E3
  • gitlens.graphScrollMarkerTagsColor#2a333c
  • gitlens.graphScrollMarkerUpstreamColor#78B892
  • gitlens.gutterBackgroundColor#131e22
  • gitlens.gutterForegroundColor#c7bfa8
  • gitlens.gutterUncommittedForegroundColor#6791C9
  • gitlens.launchpadIndicatorAttentionColor#ecd28b
  • gitlens.launchpadIndicatorAttentionHoverColor#f6dc95
  • gitlens.launchpadIndicatorBlockedColor#DF5B61
  • gitlens.launchpadIndicatorBlockedHoverColor#f26e74
  • gitlens.launchpadIndicatorMergeableColor#78B892
  • gitlens.launchpadIndicatorMergeableHoverColor#8CD7AA
  • gitlens.lineHighlightBackgroundColor#131e22
  • gitlens.lineHighlightOverviewRulerColor#6791C9
  • gitlens.mergedPullRequestIconColor#BC83E3
  • gitlens.openAutolinkedIssueIconColor#8CD7AA
  • gitlens.openPullRequestIconColor#8CD7AA
  • gitlens.trailingLineBackgroundColor#0f161fa0
  • gitlens.trailingLineForegroundColor#9a9485
  • gitlens.unpublishedChangesIconColor#8CD7AA
  • gitlens.unpublishedCommitIconColor#8CD7AA
  • gitlens.unpulledChangesIconColor#E89982
  • icon.foreground#c7bfa8
  • input.background#1c2736
  • input.border#2e425b
  • input.foreground#e4ecf5
  • input.placeholderForeground#D9D7D660
  • inputOption.activeBorder#78B89280
  • inputValidation.errorBackground#DF5B6180
  • inputValidation.errorBorder#DF5B6100
  • inputValidation.infoBackground#6791C980
  • inputValidation.infoBorder#6791C9
  • inputValidation.warningBackground#ecd28b80
  • inputValidation.warningBorder#ecd28b
  • list.activeSelectionBackground#1e2d40
  • list.activeSelectionForeground#c7bfa8
  • list.dropBackground#313c4080
  • list.errorForeground#DF5B61E6
  • list.focusBackground#1c272b
  • list.focusForeground#c7bfa8
  • list.highlightForeground#ecd28b
  • list.hoverBackground#1a232c
  • list.hoverForeground#c7bfa8
  • list.inactiveFocusBackground#131e2280
  • list.inactiveSelectionBackground#151e2a
  • list.inactiveSelectionForeground#c7bfa8
  • list.warningForeground#ecd28bB3
  • menu.border#131e22
  • menu.separatorBackground#131e22
  • merge.border#0000
  • merge.currentContentBackground#6791C920
  • merge.currentHeaderBackground#6791C940
  • merge.incomingContentBackground#78B89220
  • merge.incomingHeaderBackground#78B89240
  • notebook.cellBorderColor#131e22
  • notebook.cellEditorBackground#1c2736
  • notebook.focusedCellBorder#78B892
  • notebook.focusedEditorBorder#2a333c
  • panel.background#141d26
  • panel.border#131e22
  • panelTitle.activeBorder#78B892
  • panelTitle.activeForeground#c7bfa8
  • peekView.border#131e22
  • peekViewEditor.background#0d181c
  • peekViewEditor.matchHighlightBackground#313c4080
  • peekViewEditorGutter.background#131e2270
  • peekViewResult.background#0d181c
  • peekViewResult.fileForeground#c7bfa8
  • peekViewResult.lineForeground#c7bfa8
  • peekViewResult.matchHighlightBackground#313c4080
  • peekViewResult.selectionBackground#1c272b80
  • peekViewResult.selectionForeground#c7bfa8
  • peekViewTitle.background#0d181c
  • peekViewTitleDescription.foreground#D9D7D680
  • peekViewTitleLabel.foreground#c7bfa8
  • pickerGroup.foreground#78B892E6
  • progressBar.background#78B892
  • scmGraph.historyItemHoverDefaultLabelForeground#c7bfa8
  • scmGraph.historyItemHoverLabelForeground#c7bfa8
  • scrollbar.shadow#000a0e
  • scrollbarSlider.activeBackground#4f5a5e80
  • scrollbarSlider.background#313c404D
  • scrollbarSlider.hoverBackground#3b464a80
  • selection.background#313c4080
  • sideBar.background#141d26
  • sideBar.border#131e22
  • sideBar.dropBackground#313c404D
  • sideBar.foreground#9a9485
  • sideBarSectionHeader.background#141d26
  • sideBarSectionHeader.foreground#D9D7D6B3
  • sideBarTitle.background#141d26
  • sideBarTitle.foreground#c7bfa8
  • statusBar.background#0f161f
  • statusBar.border#131e22
  • statusBar.debuggingBackground#E89982
  • statusBar.debuggingBorder#0000
  • statusBar.debuggingForeground#000a0e
  • statusBar.foreground#9a9485
  • statusBar.noFolderBackground#0f161f
  • statusBar.noFolderBorder#0000
  • statusBarItem.hoverBackground#131e22
  • statusBarItem.prominentBackground#131e22
  • statusBarItem.prominentHoverBackground#2a333c
  • tab.activeBackground#0f161f
  • tab.activeBorder#78B892
  • tab.activeForeground#c7bfa8
  • tab.border#0f161f00
  • tab.inactiveBackground#0f161f
  • tab.inactiveForeground#9a9485
  • tab.unfocusedActiveBorder#0000
  • tab.unfocusedActiveForeground#9a9485
  • tab.unfocusedInactiveForeground#9a9485
  • terminal.ansiBlack#131e22
  • terminal.ansiBlue#6791C9
  • terminal.ansiBrightBlack#2a333c
  • terminal.ansiBrightBlue#79AAEB
  • terminal.ansiBrightCyan#7ACFE4
  • terminal.ansiBrightGreen#8CD7AA
  • terminal.ansiBrightMagenta#C488EC
  • terminal.ansiBrightRed#f26e74
  • terminal.ansiBrightWhite#c7bfa8
  • terminal.ansiBrightYellow#f6dc95
  • terminal.ansiCyan#67AFC1
  • terminal.ansiGreen#78B892
  • terminal.ansiMagenta#BC83E3
  • terminal.ansiRed#DF5B61
  • terminal.ansiWhite#9a9485
  • terminal.ansiYellow#ecd28b
  • terminal.background#0f161f
  • terminal.foreground#c7bfa8
  • terminal.inactiveSelectionBackground#2d456630
  • terminal.selectionBackground#2d456660
  • terminalCursor.background#D9D7D6
  • terminalCursor.foreground#313c4080
  • textLink.activeForeground#6791C9
  • textLink.foreground#79AAEB
  • titleBar.activeBackground#0f161f
  • titleBar.activeForeground#c7bfa8
  • titleBar.inactiveBackground#0f161f
  • walkThrough.embeddedEditorBackground#0d181c
  • widget.border#131e22
  • widget.shadow#000a0e

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#c7bfa8
emphasisitalic
strongbold
header#458588
comment, punctuation.definition.comment#928374italic
constant, support.constant, variable.arguments#d3869b
constant.rgb-value#c7bfa8
entity.name.selector#86b375
entity.other.attribute-name#e3ad3c
entity.name.tag, punctuation.tag#86b375
invalid, invalid.illegal#cc241d
invalid.deprecated#b16286
meta.selector#86b375
meta.preprocessor#e67e36
meta.preprocessor.string#a7ad3c
meta.preprocessor.numeric#a7ad3c
meta.header.diff#e67e36
storage#e05a4f
storage.type, storage.modifier#e67e36
string#a7ad3c
string.tag#a7ad3c
string.value#a7ad3c
string.regexp#e67e36
string.escape#e05a4f
string.quasi#86b375
string.entity#a7ad3c
object#c7bfa8
module.node#83a598
support.type.property-name#689d6a
keyword#e05a4f
keyword.control#e05a4f
keyword.control.module#86b375
keyword.control.less#d79921
keyword.operator#86b375
keyword.operator.new#e67e36
keyword.other.unit#a7ad3c
metatag.php#e67e36
support.function.git-rebase#689d6a
constant.sha.git-rebase#a7ad3c
meta.type.name, meta.return.type, meta.return-type, meta.cast, meta.type.annotation, support.type, storage.type.cs, variable.class#e3ad3c
variable.this, support.variable#d3869b
entity.name, entity.static, entity.name.class.static.function, entity.name.function, entity.name.class, entity.name.type#e3ad3c
entity.function, entity.name.function.static#86b375
entity.name.function.function-call#86b375
support.function.builtin#e67e36
entity.name.method, entity.name.method.function-call, entity.name.static.function-call#689d6a
brace#d5c4a1
meta.parameter.type.variable, variable.parameter, variable.name, variable.other, variable, string.constant.other.placeholder#83a598
prototype#d3869b
punctuation#a89984
punctuation.quoted#c7bfa8
punctuation.quasi#e05a4f
*url*, *link*, *uri*underline
meta.function.python, entity.name.function.python#86b375
storage.type.function.python, storage.modifier.declaration, storage.type.class.python, storage.type.string.python#e05a4f
storage.type.function.async.python#e05a4f
meta.function-call.generic#83a598
meta.function-call.arguments#d5c4a1
entity.name.function.decorator#e3ad3cbold
constant.other.capsbold
keyword.operator.logical#e05a4f
punctuation.definition.logical-expression#e67e36
string.interpolated.dollar.shell, string.interpolated.backtick.shell#86b375
keyword.control.directive#86b375
support.function.C99#e3ad3c
meta.function.cs, entity.name.function.cs, entity.name.type.namespace.cs#a7ad3c
keyword.other.using.cs, entity.name.variable.field.cs, entity.name.variable.local.cs, variable.other.readwrite.cs#86b375
keyword.other.this.cs, keyword.other.base.cs#d3869b
meta.scope.prerequisites#e3ad3c
entity.name.function.target#a7ad3cbold
storage.modifier.import.java, storage.modifier.package.java#bdae93
keyword.other.import.java, keyword.other.package.java#86b375
storage.type.java#e3ad3c
storage.type.annotation#83a598bold
keyword.other.documentation.javadoc#86b375
comment.block.javadoc variable.parameter.java#a7ad3cbold
source.java variable.other.object, source.java variable.other.definition.java#c7bfa8
meta.function-parameters.lisp#e3ad3c
markup.underlineunderline
string.other.link.title.markdown#928374underline
markup.underline.link#d3869b
markup.bold#e67e36bold
markup.heading#e67e36bold
heading.1.markdown entity.name.section.markdown#e05a4fbold
heading.2.markdown entity.name.section.markdown#e67e36bold
heading.3.markdown entity.name.section.markdown#e3ad3cbold
heading.4.markdown entity.name.section.markdown#a7ad3cbold
heading.5.markdown entity.name.section.markdown#83a598bold
heading.6.markdown entity.name.section.markdown#d3869bbold
markup.italicitalic
markup.inserted#a7ad3c
markup.deleted#d65d0e
markup.changed#e67e36
markup.punctuation.quote.beginning#98971a
markup.punctuation.list.beginning#83a598
markup.inline.raw, markup.fenced_code.block#86b375
string.quoted.double.json#83a598
entity.other.attribute-name.css#e67e36
source.css meta.selector#c7bfa8
support.type.property-name.css#e67e36
entity.other.attribute-name.class#a7ad3c
source.css support.function.transform, source.css support.function.timing-function, source.css support.function.misc#e05a4f
support.property-value, constant.rgb-value, support.property-value.scss, constant.rgb-value.scss#d65d0e
entity.name.tag.css
punctuation.definition.tag#83a598
text.html entity.name.tag, text.html punctuation.tag#86b375bold
source.js variable.language#e67e36
source.ts variable.language#e67e36
source.go storage.type#e3ad3c
source.go entity.name.import#a7ad3c
source.go keyword.package, source.go keyword.import#86b375
source.go keyword.interface, source.go keyword.struct#83a598
source.go entity.name.type#c7bfa8
source.go entity.name.function#d3869b
keyword.control.cucumber.table#83a598
source.reason string.double, source.reason string.regexp#a7ad3c
source.reason keyword.control.less#86b375
source.reason entity.name.function#83a598
source.reason support.property-value, source.reason entity.name.filename#e67e36
source.powershell variable.other.member.powershell#e67e36
source.powershell support.function.powershell#e3ad3c
source.powershell support.function.attribute.powershell#bdae93
source.powershell meta.hashtable.assignment.powershell variable.other.readwrite.powershell#e67e36
support.function.be.latex, support.function.general.tex, support.function.section.latex, support.function.textbf.latex, support.function.textit.latex, support.function.texttt.latex, support.function.emph.latex, support.function.url.latex#e05a4f
support.class.math.block.tex, support.class.math.block.environment.latex#e67e36
keyword.control.preamble.latex, keyword.control.include.latex#d3869b
support.class.latex#86b375
Groovy Nythera (Legacy) by Sumit - VS Code Theme