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#0b152cff
  • activityBar.dropBackground#030c26ff
  • activityBar.foreground#598fecff
  • activityBar.inactiveForeground#444a63ff
  • activityBarBadge.background#598fecbf
  • activityBarBadge.foreground#fbfeffff
  • badge.background#598fecbf
  • badge.foreground#fbfeffff
  • breadcrumb.activeSelectionForeground#e0e0e0
  • breadcrumb.background#030c26ff
  • breadcrumb.focusForeground#e9ecffff
  • breadcrumb.foreground#646982ff
  • breadcrumbPicker.background#0b152cff
  • button.background#0051a6ff
  • button.foreground#fbfeffff
  • button.hoverBackground#1a64bdff
  • debugExceptionWidget.background#420b0d
  • debugExceptionWidget.border#0b152cff
  • debugToolBar.background#030c26ff
  • descriptionForeground#ccccccb3
  • diffEditor.insertedTextBackground#9bb95533
  • diffEditor.removedTextBackground#ff000033
  • dropdown.background#0b152cff
  • dropdown.border#0b152cff
  • dropdown.foreground#e9ecffff
  • editor.background#030c26ff
  • editor.findMatchBackground#2c518b40
  • editor.findMatchHighlightBackground#2c518b40
  • editor.findRangeHighlightBackground#2c518b40
  • editor.focusedStackFrameHighlightBackground#2c518b40
  • editor.foreground#d5d9eeff
  • editor.hoverHighlightBackground#2c518b40
  • editor.inactiveSelectionBackground#2c518b20
  • editor.lineHighlightBackground#0b152cff
  • editor.lineHighlightBorder#0b152cff
  • editor.rangeHighlightBackground#2c518b40
  • editor.selectionBackground#2c518b40
  • editor.selectionHighlightBackground#2c518b20
  • editor.snippetFinalTabstopHighlightBorder#2c518b40
  • editor.snippetTabstopHighlightBackground#2c518b40
  • editor.stackFrameHighlightBackground#2c518b40
  • editor.wordHighlightBackground#2c518b20
  • editor.wordHighlightStrongBackground#2c518b20
  • editorActiveLineNumber.foreground#646982ff
  • editorBracketMatch.background#2c518b20
  • editorBracketMatch.border#598fecff
  • editorCodeLens.foreground#999999
  • editorCursor.foreground#ffcc00ff
  • editorError.foreground#cb0040ff
  • editorGroup.border#0b152cff
  • editorGroup.dropBackground#030c26ff
  • editorGroupHeader.noTabsBackground#030c26ff
  • editorGroupHeader.tabsBackground#0b152cff
  • editorGutter.addedBackground#001100ff
  • editorGutter.background#030c26ff
  • editorGutter.commentRangeForeground#c5c5c5
  • editorGutter.deletedBackground#4e0000ff
  • editorGutter.modifiedBackground#000138ff
  • editorHint.foreground#eeeeeeb3
  • editorHoverWidget.background#0b152cff
  • editorHoverWidget.border#0b152cff
  • editorIndentGuide.activeBackground#1e263eff
  • editorIndentGuide.background#141c35ff
  • editorInfo.foreground#008000
  • editorLineNumber.activeForeground#646982ff
  • editorLineNumber.foreground#444a63ff
  • editorLink.activeForeground#4e94ce
  • editorMarkerNavigation.background#2d2d30
  • editorMarkerNavigationError.background#cb0040ff
  • editorMarkerNavigationInfo.background#008000
  • editorMarkerNavigationWarning.background#4d9e4d
  • editorOverviewRuler.addedForeground#0f3600ff
  • editorOverviewRuler.border#0b152cff
  • editorOverviewRuler.bracketMatchForeground#a0a0a0
  • editorOverviewRuler.commonContentForeground#60606066
  • editorOverviewRuler.currentContentForeground#40c8ae80
  • editorOverviewRuler.deletedForeground#810010ff
  • editorOverviewRuler.errorForeground#cb0040bf
  • editorOverviewRuler.findMatchForeground#f6b94db3
  • editorOverviewRuler.incomingContentForeground#40a6ff80
  • editorOverviewRuler.infoForeground#121288b3
  • editorOverviewRuler.modifiedForeground#002e64ff
  • editorOverviewRuler.rangeHighlightForeground#007acc99
  • editorOverviewRuler.selectionHighlightForeground#a0a0a0cc
  • editorOverviewRuler.warningForeground#128812b3
  • editorOverviewRuler.wordHighlightForeground#a0a0a0cc
  • editorOverviewRuler.wordHighlightStrongForeground#c0a0c0cc
  • editorPane.background#030c26ff
  • editorRuler.foreground#5a5a5a
  • editorSuggestWidget.background#0b152cff
  • editorSuggestWidget.border#0b152cff
  • editorSuggestWidget.foreground#e9ecffff
  • editorSuggestWidget.highlightForeground#e9ecffff
  • editorSuggestWidget.selectedBackground#141c35ff
  • editorUnnecessaryCode.opacity#000000aa
  • editorWarning.foreground#4d9e4d
  • editorWhitespace.foreground#e3e4e229
  • editorWidget.background#0b152cff
  • editorWidget.border#0b152cff
  • errorForeground#cb0040ff
  • extensionButton.prominentBackground#327e36
  • extensionButton.prominentForeground#ffffff
  • extensionButton.prominentHoverBackground#28632b
  • focusBorder#2c518bff
  • foreground#d5d9eeff
  • gitDecoration.addedResourceForeground#81b88b
  • gitDecoration.conflictingResourceForeground#6c6cc4
  • gitDecoration.deletedResourceForeground#c74e39
  • gitDecoration.ignoredResourceForeground#646982ff
  • gitDecoration.modifiedResourceForeground#b58411ff
  • gitDecoration.submoduleResourceForeground#8db9e2
  • gitDecoration.untrackedResourceForeground#709a36ff
  • input.background#030c26ff
  • input.foreground#e9ecffff
  • input.placeholderForeground#a6a6a6
  • inputOption.activeBorder#598fecff
  • inputValidation.errorBackground#4e0000ff
  • inputValidation.errorBorder#590000ff
  • inputValidation.infoBackground#030c26ff
  • inputValidation.infoBorder#2a3049ff
  • inputValidation.warningBackground#2c0000ff
  • inputValidation.warningBorder#310400ff
  • list.activeSelectionBackground#141c35ff
  • list.activeSelectionForeground#e9ecffff
  • list.dropBackground#030c26ff
  • list.errorForeground#cb0040ff
  • list.focusBackground#141c35ff
  • list.highlightForeground#e9ecffff
  • list.hoverBackground#141c35ff
  • list.inactiveFocusBackground#141c35ff
  • list.inactiveSelectionBackground#141c35ff
  • list.inactiveSelectionForeground#e9ecffff
  • list.invalidItemForeground#b89500
  • list.warningForeground#4d9e4d
  • menu.background#0b152cff
  • menu.foreground#aeb2c9ff
  • menu.selectionBackground#141c35ff
  • menu.selectionForeground#e9ecffff
  • menu.separatorBackground#2a3049ff
  • menubar.selectionBackground#141c35ff
  • menubar.selectionForeground#e9ecffff
  • merge.commonContentBackground#60606029
  • merge.commonHeaderBackground#60606066
  • merge.currentContentBackground#40c8ae33
  • merge.currentHeaderBackground#40c8ae80
  • merge.incomingContentBackground#40a6ff33
  • merge.incomingHeaderBackground#40a6ff80
  • notificationCenterHeader.background#0b152cff
  • notificationLink.foreground#598fecff
  • notifications.background#0b152cff
  • notifications.border#0b152cff
  • panel.background#0b152cff
  • panel.border#0b152cff
  • panel.dropBackground#030c26ff
  • panelTitle.activeBorder#598fecff
  • panelTitle.activeForeground#e9ecffff
  • panelTitle.inactiveForeground#9a9fb6ff
  • peekView.border#0b152cff
  • peekViewEditor.background#001f33
  • peekViewEditor.matchHighlightBackground#ff8f0099
  • peekViewEditorGutter.background#001f33
  • peekViewResult.background#0b152cff
  • peekViewResult.fileForeground#ffffff
  • peekViewResult.lineForeground#bbbbbb
  • peekViewResult.matchHighlightBackground#ea5c004d
  • peekViewResult.selectionBackground#3399ff33
  • peekViewResult.selectionForeground#ffffff
  • peekViewTitle.background#030c26ff
  • peekViewTitleDescription.foreground#ccccccb3
  • peekViewTitleLabel.foreground#ffffff
  • pickerGroup.border#0b152cff
  • pickerGroup.foreground#3794ff
  • progressBar.background#0e70c0
  • scrollbar.shadow#00001fff
  • scrollbarSlider.activeBackground#444a63bf
  • scrollbarSlider.background#2a3049bf
  • scrollbarSlider.hoverBackground#363d56bf
  • settings.checkboxBackground#030c26ff
  • settings.checkboxBorder#444a63ff
  • settings.checkboxForeground#e9ecffff
  • settings.dropdownBackground#0b152cff
  • settings.dropdownBorder#0b152cff
  • settings.dropdownForeground#e9ecffff
  • settings.dropdownListBorder#1e263eff
  • settings.headerForeground#ceeaffff
  • settings.modifiedItemIndicator#2c518bff
  • settings.numberInputBackground#0b152cff
  • settings.numberInputForeground#e9ecffff
  • settings.textInputBackground#0b152cff
  • settings.textInputForeground#e9ecffff
  • sideBar.background#0b152cff
  • sideBar.dropBackground#030c26ff
  • sideBar.foreground#9a9fb6ff
  • sideBarSectionHeader.background#0b152cff
  • sideBarSectionHeader.foreground#444a63ff
  • sideBarTitle.foreground#444a63ff
  • statusBar.background#141c35ff
  • statusBar.debuggingBackground#6e0000ff
  • statusBar.debuggingForeground#9a9fb6ff
  • statusBar.foreground#9a9fb6ff
  • statusBar.noFolderBackground#290046ff
  • statusBar.noFolderForeground#9a9fb6ff
  • tab.activeBackground#0b152cff
  • tab.activeBorder#598fecff
  • tab.activeForeground#e9ecffff
  • tab.activeModifiedBorder#598fecbf
  • tab.border#0b152cff
  • tab.inactiveBackground#0b152cff
  • tab.inactiveForeground#9a9fb6ff
  • tab.inactiveModifiedBorder#598fecbf
  • tab.unfocusedActiveForeground#e9ecffff
  • tab.unfocusedActiveModifiedBorder#598fec80
  • tab.unfocusedInactiveForeground#9a9fb6ff
  • tab.unfocusedInactiveModifiedBorder#598fec80
  • terminal.ansiBlack#00000fff
  • terminal.ansiBlue#78aaffff
  • terminal.ansiBrightBlack#636ea0ff
  • terminal.ansiBrightBlue#78aaffff
  • terminal.ansiBrightCyan#73dfffff
  • terminal.ansiBrightGreen#bfea81ff
  • terminal.ansiBrightMagenta#c88df1ff
  • terminal.ansiBrightRed#ff476dff
  • terminal.ansiBrightWhite#faffffff
  • terminal.ansiBrightYellow#ffca5dff
  • terminal.ansiCyan#73dfffff
  • terminal.ansiGreen#bfea81ff
  • terminal.ansiMagenta#c88df1ff
  • terminal.ansiRed#ff476dff
  • terminal.ansiWhite#faffffff
  • terminal.ansiYellow#ffca5dff
  • terminal.background#030c26ff
  • terminal.border#0b152cff
  • terminal.foreground#d5d9eeff
  • terminal.selectionBackground#2c518b40
  • textBlockQuote.background#7f7f7f1a
  • textBlockQuote.border#0b152cff
  • textCodeBlock.background#0a0a0a66
  • textLink.activeForeground#598fecff
  • textLink.foreground#598fecff
  • textPreformat.foreground#c88df1ff
  • textSeparator.foreground#ffffff2e
  • titleBar.activeBackground#0b152cff
  • titleBar.activeForeground#9a9fb6ff
  • titleBar.inactiveBackground#0b152cff
  • titleBar.inactiveForeground#444a63ff
  • widget.shadow#00001fff

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
meta.embedded, source.groovy.embedded#a3acd9ff
emphasisitalic
strongbold
header#000080
comment#636ea0ff
constant.language#ff8764ff
constant.numeric#ff8764ff
constant.regexp#c88df1ff
entity.name.tag#f96a74ff
entity.name.tag.css#ffca5dff
entity.other.attribute-name#cb8ff3ff
entity.other.attribute-name.class.css, entity.other.attribute-name.class.mixin.css, entity.other.attribute-name.id.css, entity.other.attribute-name.parent-selector.css, entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css, source.css.less entity.other.attribute-name.id, entity.other.attribute-name.attribute.scss, entity.other.attribute-name.scss#cb8ff3ff
invalid#f44747
markup.underlineunderline
markup.bold#cb8ff3ffbold
markup.heading#cb8ff3ffbold
markup.italicitalic
markup.inserted#ff8764ff
markup.deleted#bfea81ff
markup.changed#cb8ff3ff
punctuation.definition.quote.begin.markdown#6A9955
punctuation.definition.list.begin.markdown#6796e6
markup.inline.raw#bfea81ff
punctuation.definition.tag#73dfffff
meta.preprocessor#cb8ff3ff
meta.preprocessor.string#bfea81ff
meta.preprocessor.numeric#ff8764ff
meta.structure.dictionary.key.python#d5d9eeff
meta.diff.header#cb8ff3ff
storage#cb8ff3ff
storage.type#cb8ff3ff
storage.modifier#cb8ff3ff
string#bfea81ff
string.tag#bfea81ff
string.value#bfea81ff
string.regexp#bfea81ff
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded#aeb2c9ff
meta.template.expression#d4d4d4
support.type.vendored.property-name, support.type.property-name, variable.css, variable.scss, variable.other.less, source.coffee.embedded#a3acd9ff
keyword#cb8ff3ff
keyword.control#cb8ff3ff
keyword.operator#aeb2c9ff
keyword.operator.new, keyword.operator.expression, keyword.operator.cast, keyword.operator.sizeof, keyword.operator.instanceof, keyword.operator.logical.python#cb8ff3ff
keyword.other.unit#ff8764ff
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php#cb8ff3ff
support.function.git-rebase#78aaffff
constant.sha.git-rebase#ff8764ff
storage.modifier.import.java, variable.language.wildcard.java, storage.modifier.package.java#d4d4d4
variable.language#cb8ff3ff
entity.name.function, support.function, support.constant.handlebars#78aaffff
meta.return-type, support.class, support.type, entity.name.type, entity.name.class, storage.type.numeric.go, storage.type.byte.go, storage.type.boolean.go, storage.type.string.go, storage.type.uintptr.go, storage.type.error.go, storage.type.rune.go, storage.type.cs, storage.type.generic.cs, storage.type.modifier.cs, storage.type.variable.cs, storage.type.annotation.java, storage.type.generic.java, storage.type.java, storage.type.object.array.java, storage.type.primitive.array.java, storage.type.primitive.java, storage.type.token.java, storage.type.groovy, storage.type.annotation.groovy, storage.type.parameters.groovy, storage.type.generic.groovy, storage.type.object.array.groovy, storage.type.primitive.array.groovy, storage.type.primitive.groovy#9fbcffff
meta.type.cast.expr, meta.type.new.expr, support.constant.math, support.constant.dom, support.constant.json, entity.other.inherited-class#9fbcffff
keyword.control#cb8ff3ff
variable, meta.definition.variable.name, support.variable, entity.name.variable#a3acd9ff
meta.object-literal.key#d5d9eeff
support.constant.property-value, support.constant.font-name, support.constant.media-type, support.constant.media, constant.other.color.rgb-value, constant.other.rgb-value, support.constant.color#bfea81ff
punctuation.definition.group.regexp, punctuation.definition.group.assertion.regexp, punctuation.definition.character-class.regexp, punctuation.character.set.begin.regexp, punctuation.character.set.end.regexp, keyword.operator.negation.regexp, support.other.parenthesis.regexp#73dfffff
constant.character.character-class.regexp, constant.other.character-class.set.regexp, constant.other.character-class.regexp, constant.character.set.regexp#c88df1ff
keyword.operator.or.regexp, keyword.control.anchor.regexp#aeb2c9ff
keyword.operator.quantifier.regexp#ff8764ff
constant.character#cb8ff3ff
constant.character.escape#73dfffff
token.info-token#6796e6
token.warn-token#cd9731
token.error-token#f44747
token.debug-token#b267e6
string.quoted.double.html#bfea81ff
string.template#bfea81ff
storage.type.function#cb8ff3ff
support.class.component.js#f96a74ff
variable.parameter#ff476dff
variable.other.property#d5d9eeff
support.function, support.constant.handlebars#78aaffff
support.type, support.class, support.constant.math#ffca5dff
support.type.vendored.property-name, support.type.property-name#d5d9eeff
support.function#78aaffff
variable.other.constant#f96a74ff
meta.brace.round.js, meta.brace.square.js, punctuation#73dfffff
support.type.property-name.json#d5d9eeff
storage.type.function.arrow.js, storage.type.function.arrow.ts, storage.type.function.arrow.tsx#aeb2c9ff
punctuation.definition.keyword.css, punctuation.definition.directive.c, punctuation.definition.heading.markdown#cb8ff3ff
entity.name.type.class, entity.name.type.module#9fbcffff
punctuation.definition.comment.python, punctuation.definition.comment.js, punctuation.definition.comment.cpp, punctuation.definition.comment.begin.css, punctuation.definition.comment.end.css, punctuation.definition.list.begin.markdown#636ea0ff
markup.headingnormal

Shiki preview

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

Loading...