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#18071F
  • activityBar.dropBackground#B040E9
  • activityBar.foreground#AF95B9
  • activityBarBadge.background#B040E9
  • badge.background#B040E9
  • button.background#B040E985
  • button.hoverBackground#B040E9
  • debugExceptionWidget.background#25102E
  • debugExceptionWidget.border#fc644d
  • debugToolBar.background#18071F
  • diffEditor.insertedTextBackground#a5f69c20
  • diffEditor.removedTextBackground#fc644d20
  • dropdown.background#432e51
  • editor.background#2C1437
  • editor.findMatchBackground#B040E950
  • editor.findMatchHighlightBackground#B040E975
  • editor.foreground#f0ecf2
  • editor.hoverHighlightBackground#af95b950
  • editor.lineHighlightBackground#432e5185
  • editor.lineHighlightBorder#4c315850
  • editor.rangeHighlightBackground#432e51
  • editor.selectionBackground#af95b950
  • editor.selectionHighlightBackground#af95b950
  • editor.wordHighlightBackground#AF95B950
  • editor.wordHighlightStrongBackground#AF95B950
  • editorBracketMatch.background#25102e
  • editorBracketMatch.border#AF95B9
  • editorCodeLens.foreground#AF95B980
  • editorCursor.foreground#ffffff
  • editorError.foreground#fc644d
  • editorGroup.background#25102e
  • editorGroup.dropBackground#25102e
  • editorGroupHeader.tabsBackground#25102e
  • editorGutter.addedBackground#45c758bb
  • editorGutter.deletedBackground#c91e1ebb
  • editorGutter.modifiedBackground#B040E9
  • editorHoverWidget.background#25102e
  • editorHoverWidget.border#25102e
  • editorIndentGuide.background#432e51
  • editorLineNumber.foreground#432e51
  • editorLink.activeForeground#B040E9
  • editorOverviewRuler.border#432e51
  • editorRuler.foreground#432e51
  • editorSuggestWidget.background#25102e
  • editorSuggestWidget.border#25102e
  • editorSuggestWidget.highlightForeground#B040E9
  • editorSuggestWidget.selectedBackground#432e51
  • editorWarning.foreground#ff9f2e
  • editorWhitespace.foreground#432e51
  • editorWidget.background#25102e
  • errorForeground#B040E9
  • extensionButton.prominentBackground#B040E970
  • extensionButton.prominentHoverBackground#B040E9
  • focusBorder#af95b920
  • foreground#AC95B5
  • input.background#432e51
  • input.foreground#F0ECF2
  • input.placeholderForeground#AF95B9
  • inputOption.activeBorder#B040E9
  • inputValidation.errorBackground#2C1437
  • inputValidation.errorBorder#fc644d
  • inputValidation.infoBackground#2C1437
  • inputValidation.infoBorder#b040e9
  • inputValidation.warningBackground#2C1437
  • inputValidation.warningBorder#ff9f2e
  • list.activeSelectionBackground#AF95B980
  • list.activeSelectionForeground#F0ECF2
  • list.dropBackground#50395470
  • list.focusBackground#18071F
  • list.highlightForeground#B040E9
  • list.hoverBackground#200924
  • list.inactiveFocusBackground#AF95B950
  • list.inactiveSelectionBackground#50395470
  • list.inactiveSelectionForeground#AC95B5
  • merge.border#B040E9
  • merge.currentContentBackground#AF95B940
  • merge.currentHeaderBackground#AF95B9bb
  • merge.incomingContentBackground#B040E940
  • merge.incomingHeaderBackground#B040E9bb
  • notificationLink.foreground#B040E9
  • panel.background#25102e
  • panel.border#2c1437
  • panelTitle.activeBorder#af95b960
  • panelTitle.inactiveForeground#AF95B9
  • peekView.border#432e51
  • peekViewEditor.background#50395470
  • peekViewEditor.matchHighlightBackground#B040E950
  • peekViewResult.background#50395470
  • peekViewResult.matchHighlightBackground#B040E950
  • peekViewResult.selectionBackground#AF95B980
  • peekViewTitle.background#AF95B980
  • peekViewTitleDescription.foreground#AF95B9
  • pickerGroup.border#432e51
  • pickerGroup.foreground#B040E9
  • progressBar.background#B040E9
  • scrollbar.shadow#25102e
  • scrollbarSlider.activeBackground#AF95B9cc
  • scrollbarSlider.background#AF95B977
  • scrollbarSlider.hoverBackground#AF95B9aa
  • selection.background#af95b950
  • sideBar.background#25102E
  • sideBar.border#2c1437
  • sideBarSectionHeader.background#432e51
  • statusBar.background#18071F
  • statusBar.debuggingBackground#B040E9
  • statusBar.debuggingForeground#F0ECF2
  • statusBar.foreground#F0ECF2AD
  • statusBar.noFolderBackground#432e51
  • statusBarItem.activeBackground#432e51
  • statusBarItem.hoverBackground#432e5180
  • statusBarItem.prominentBackground#432e51
  • statusBarItem.prominentHoverBackground#25102e
  • tab.activeBackground#2C1437
  • tab.activeBorder#B040E9
  • tab.activeForeground#F0ECF2
  • tab.border#25102E
  • tab.inactiveBackground#25102E
  • tab.inactiveForeground#AF95B9
  • textLink.foreground#B040E9
  • titleBar.activeBackground#25102e
  • walkThrough.embeddedEditorBackground#25102e
  • widget.shadow#18071F

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#d5ced9ff
comment, markup.quote.markdown#64566B
meta.template.expression.js, constant.name.attribute.tag.jade, punctuation.definition.metadata.markdown, punctuation.definition.string.end.markdown, punctuation.definition.string.begin.markdown#D5CED9
variable, support.variable, entity.name.tag.yaml, constant.character.entity.html, source.css entity.name.tag.reference, beginning.punctuation.definition.list.markdown, source.css entity.other.attribute-name.parent-selector, meta.structure.dictionary.json support.type.property-name#FC644D
markup.bold, constant.numeric, meta.group.regexp, constant.other.php, support.constant.ext.php, constant.other.class.php, support.constant.core.php, fenced_code.block.language, constant.other.caps.python, entity.other.attribute-name, support.type.exception.python, source.css keyword.other.unit#ff9f2e
markup.list, text.xml string, entity.name.type, support.function, text.html string, meta.at-rule.extend, entity.name.function, entity.other.inherited-class, entity.other.keyframe-offset.css, text.html.markdown string.quoted, meta.function-call.generic.python, meta.at-rule.extend support.constant, entity.other.attribute-name.class.jade, source.css entity.other.attribute-name, text.xml punctuation.definition.string, text.html punctuation.definition.string#e9d7a5
markup.heading, entity.name.tag, variable.language.this.js, variable.language.special.self.python#ff99c6
punctuation.definition.interpolation, punctuation.section.embedded.end.php, punctuation.section.embedded.end.ruby, punctuation.section.embedded.begin.php, punctuation.section.embedded.begin.ruby, punctuation.definition.template-expression#f92672
storage, keyword, meta.link, meta.image, markup.italic, source.js support.type#c668ba
string.regexp#3b79c7
constant, support.class, keyword.operator, support.constant, text.html.markdown string, source.css support.function, source.php support.function, support.function.magic.python, entity.other.attribute-name.id#74d3de
string, text.html.php string, markup.inline.raw, punctuation.definition.string, punctuation.definition.markdown, text.html meta.embedded source.js string, text.html.php punctuation.definition.string, text.html meta.embedded source.js punctuation.definition.string#a5f69c
entity.other.inherited-classunderline
token.info-token#6796e6
token.warn-token#cd9731
token.error-token#f44747
token.debug-token#b267e6
Styncy by goncy - VS Code Theme