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.activeBorder#19D08AFF
  • activityBar.background#111D1EFF
  • activityBar.border#111D1EFF
  • activityBar.foreground#639caa
  • activityBar.inactiveForeground#517680FF
  • activityBarBadge.background#19D08AFF
  • activityBarBadge.foreground#111D1EFF
  • badge.background#19D08AFF
  • badge.foreground#111D1EFF
  • button.background#19D08AFF
  • button.foreground#111D1EFF
  • button.hoverBackground#17C281FF
  • debugToolBar.background#111D1EFF
  • diffEditor.insertedTextBackground#66BB6620
  • diffEditor.removedTextBackground#BB666620
  • dropdown.background#1D3133FF
  • dropdown.border#223e43
  • dropdown.foreground#639caa
  • editor.background#111D1EFF
  • editor.findMatchBackground#19D08A44
  • editor.findMatchHighlightBackground#19D08A22
  • editor.foreground#639caa
  • editor.lineHighlightBackground#162426
  • editor.lineHighlightBorder#162426
  • editor.selectionBackground#76C8CD14
  • editor.selectionHighlightBackground#76C8CD14
  • editor.wordHighlightBackground#76C8CD14
  • editor.wordHighlightStrongBackground#76C8CD28
  • editorBracketMatch.background#19D08A33
  • editorBracketMatch.border#19D08AFF
  • editorCursor.foreground#19D08AFF
  • editorError.foreground#BB6666FF
  • editorGroup.border#223e43
  • editorGroupHeader.tabsBackground#0E1819FF
  • editorGutter.addedBackground#66BB6680
  • editorGutter.deletedBackground#BB666680
  • editorGutter.modifiedBackground#2A99B580
  • editorHoverWidget.background#1D3133FF
  • editorHoverWidget.border#223e43
  • editorIndentGuide.activeBackground#223e43
  • editorIndentGuide.background#162426
  • editorInfo.foreground#2A99B5FF
  • editorLineNumber.activeForeground#17C281FF
  • editorLineNumber.foreground#223e43
  • editorLink.activeForeground#19D08AFF
  • editorOverviewRuler.addedForeground#66BB6680
  • editorOverviewRuler.deletedForeground#BB666680
  • editorOverviewRuler.errorForeground#BB6666FF
  • editorOverviewRuler.modifiedForeground#2A99B580
  • editorOverviewRuler.warningForeground#BBB466FF
  • editorRuler.foreground#223e43
  • editorSuggestWidget.background#1D3133FF
  • editorSuggestWidget.border#223e43
  • editorSuggestWidget.foreground#639caa
  • editorSuggestWidget.highlightForeground#19D08AFF
  • editorSuggestWidget.selectedBackground#162426
  • editorWarning.foreground#BBB466FF
  • editorWhitespace.foreground#223e43
  • editorWidget.background#1D3133FF
  • editorWidget.border#223e43
  • focusBorder#19D08AFF
  • foreground#639caa
  • gitDecoration.addedResourceForeground#66BB66FF
  • gitDecoration.conflictingResourceForeground#BBB466FF
  • gitDecoration.deletedResourceForeground#BB6666FF
  • gitDecoration.ignoredResourceForeground#517680FF
  • gitDecoration.modifiedResourceForeground#2A99B5FF
  • gitDecoration.untrackedResourceForeground#19D08AFF
  • input.background#1D3133FF
  • input.border#223e43
  • input.foreground#639caa
  • input.placeholderForeground#517680FF
  • inputOption.activeBorder#19D08AFF
  • inputValidation.errorBackground#BB6666FF
  • inputValidation.errorBorder#BB6666FF
  • inputValidation.infoBackground#2A99B5FF
  • inputValidation.infoBorder#2A99B5FF
  • inputValidation.warningBackground#BBB466FF
  • inputValidation.warningBorder#BBB466FF
  • list.activeSelectionBackground#162426
  • list.activeSelectionForeground#19D08AFF
  • list.focusBackground#162426
  • list.focusForeground#19D08AFF
  • list.highlightForeground#19D08AFF
  • list.hoverBackground#162426
  • list.hoverForeground#639caa
  • list.inactiveSelectionBackground#162426
  • list.inactiveSelectionForeground#639caa
  • menu.background#1D3133FF
  • menu.foreground#639caa
  • menu.selectionBackground#162426
  • menu.selectionForeground#19D08AFF
  • menubar.selectionBackground#162426
  • menubar.selectionForeground#19D08AFF
  • minimap.errorHighlight#BB6666FF
  • minimap.findMatchHighlight#19D08A44
  • minimap.selectionHighlight#76C8CD14
  • minimap.warningHighlight#BBB466FF
  • notificationCenter.border#223e43
  • notificationCenterHeader.background#1D3133FF
  • notificationCenterHeader.foreground#639caa
  • notifications.background#1D3133FF
  • notifications.border#223e43
  • notifications.foreground#639caa
  • notificationsErrorIcon.foreground#BB6666FF
  • notificationsInfoIcon.foreground#2A99B5FF
  • notificationsWarningIcon.foreground#BBB466FF
  • panel.background#111D1EFF
  • panel.border#223e43
  • panelTitle.activeBorder#19D08AFF
  • panelTitle.activeForeground#639caa
  • panelTitle.inactiveForeground#517680FF
  • peekView.border#19D08AFF
  • peekViewEditor.background#1D3133FF
  • peekViewEditor.matchHighlightBackground#19D08A44
  • peekViewResult.background#0E1819FF
  • peekViewResult.matchHighlightBackground#19D08A44
  • peekViewResult.selectionBackground#162426
  • peekViewTitle.background#1D3133FF
  • peekViewTitleDescription.foreground#517680FF
  • peekViewTitleLabel.foreground#639caa
  • pickerGroup.border#223e43
  • pickerGroup.foreground#19D08AFF
  • progressBar.background#19D08AFF
  • scrollbar.shadow#00000000
  • scrollbarSlider.activeBackground#19D08A80
  • scrollbarSlider.background#19D08A40
  • scrollbarSlider.hoverBackground#19D08A60
  • selection.background#76C8CD14
  • settings.checkboxBackground#1D3133FF
  • settings.checkboxBorder#223e43
  • settings.checkboxForeground#639caa
  • settings.dropdownBackground#1D3133FF
  • settings.dropdownBorder#223e43
  • settings.dropdownForeground#639caa
  • settings.headerForeground#19D08AFF
  • settings.modifiedItemIndicator#19D08AFF
  • settings.numberInputBackground#1D3133FF
  • settings.numberInputBorder#223e43
  • settings.numberInputForeground#639caa
  • settings.textInputBackground#1D3133FF
  • settings.textInputBorder#223e43
  • settings.textInputForeground#639caa
  • sideBar.background#0E1819FF
  • sideBar.border#111D1EFF
  • sideBar.foreground#639caa
  • sideBarSectionHeader.background#111D1EFF
  • sideBarSectionHeader.border#223e43
  • sideBarSectionHeader.foreground#639caa
  • sideBarTitle.foreground#517680FF
  • statusBar.background#111D1EFF
  • statusBar.debuggingBackground#BB6666FF
  • statusBar.debuggingForeground#111D1EFF
  • statusBar.foreground#517680FF
  • statusBar.noFolderBackground#111D1EFF
  • statusBar.noFolderForeground#517680FF
  • statusBarItem.activeBackground#19D08A40
  • statusBarItem.hoverBackground#19D08A20
  • statusBarItem.prominentBackground#19D08AFF
  • statusBarItem.prominentForeground#111D1EFF
  • statusBarItem.prominentHoverBackground#17C281FF
  • statusBarItem.remoteBackground#19D08AFF
  • statusBarItem.remoteForeground#111D1EFF
  • tab.activeBackground#111D1EFF
  • tab.activeBorder#19D08AFF
  • tab.activeForeground#639caa
  • tab.border#0E1819FF
  • tab.inactiveBackground#0E1819FF
  • tab.inactiveForeground#517680FF
  • tab.unfocusedActiveBorder#223e43
  • tab.unfocusedActiveForeground#517680FF
  • terminal.ansiBlack#111D1EFF
  • terminal.ansiBlue#2A99B5FF
  • terminal.ansiBrightBlack#223e43
  • terminal.ansiBrightBlue#4DB8D9FF
  • terminal.ansiBrightCyan#19D08AFF
  • terminal.ansiBrightGreen#66BB66FF
  • terminal.ansiBrightMagenta#BB66BBFF
  • terminal.ansiBrightRed#DD7777FF
  • terminal.ansiBrightWhite#639caa
  • terminal.ansiBrightYellow#BBB466FF
  • terminal.ansiCyan#17C281FF
  • terminal.ansiGreen#66BB66FF
  • terminal.ansiMagenta#BB66BBFF
  • terminal.ansiRed#BB6666FF
  • terminal.ansiWhite#517680FF
  • terminal.ansiYellow#BBB466FF
  • terminal.background#111D1EFF
  • terminal.foreground#639caa
  • terminalCursor.foreground#19D08AFF
  • textBlockQuote.background#1D3133FF
  • textBlockQuote.border#19D08AFF
  • textCodeBlock.background#1D3133FF
  • textLink.activeForeground#17C281FF
  • textLink.foreground#19D08AFF
  • textPreformat.foreground#639caa
  • textSeparator.foreground#223e43
  • titleBar.activeBackground#111D1EFF
  • titleBar.activeForeground#639caa
  • titleBar.border#111D1EFF
  • titleBar.inactiveBackground#0E1819FF
  • titleBar.inactiveForeground#517680FF
  • widget.shadow#00000040

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
—#D5CED9—
comment, punctuation.definition.comment, string.quoted.docstring, comment.block.documentation#A0A1A7cc—
variable.parameter.function, meta.jsx.children, meta.block, meta.tag.attributes, entity.name.section.markdown, markup.heading.setext#D5CED9—
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, punctuation.definition.tag, variable.other.readwrite, variable.other.object, variable.other.constant, entity.name.tag, entity.other.attribute-name#00e8c6—
constant.numeric, constant.language, constant.character, constant.escape, keyword.unit, 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#f39c12—
entity.name.function, support.function, support.constant.handlebars, source.powershell variable.other.member, entity.name.operator.custom-literal, support.class, support.type, entity.name.type, entity.name.namespace, entity.other.attribute, entity.name.scope-resolution, 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, meta.type.cast.expr, meta.type.new.expr, support.constant.math, support.constant.dom, support.constant.json, entity.other.inherited-class, entity.name.tag.yaml, support.type.property-name.json#FFE66D—
variable.language, entity.name.section.markdown, markup.heading.setext.1.markdown, markup.heading.setext.2.markdown#ff00aa—
punctuation.section.embedded, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, entity.name.tag.html#f92672—
storage, storage.type, storage.modifier, keyword, keyword.control, constant.other.color, punctuation.definition.tag, markup.underline.link.markdown#c74ded—
string.regexp, constant.character.escape, markup.changed, markup.changed.git_gutter#7cb7ff—
constant.character, constant.other, support.constant, support.variable, markup.deleted.diff, markup.deleted, markup.deleted.git_gutter#ee5d43—
string, constant.other.symbol, constant.other.key, markup.raw.inline, markup.inserted.diff, markup.inserted, markup.inserted.git_gutter#96E072—
entity.other.inherited-class—underline
Oceans of Andromeda by Sampan Verma - VS Code Theme