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#141415
  • activityBar.border#252530
  • activityBar.foreground#cdcdcd
  • activityBar.inactiveForeground#606079
  • activityBarBadge.background#6e94b2
  • activityBarBadge.foreground#141415
  • badge.background#6e94b2
  • badge.foreground#141415
  • breadcrumb.activeSelectionForeground#6e94b2
  • breadcrumb.background#141415
  • breadcrumb.focusForeground#cdcdcd
  • breadcrumb.foreground#606079
  • breadcrumbPicker.background#1c1c24
  • button.background#252530
  • button.foreground#cdcdcd
  • button.hoverBackground#333738
  • button.secondaryBackground#252530
  • button.secondaryForeground#cdcdcd
  • button.secondaryHoverBackground#333738
  • charts.blue#6e94b2
  • charts.foreground#cdcdcd
  • charts.green#7fa563
  • charts.lines#606079
  • charts.orange#e0a363
  • charts.purple#bb9dbd
  • charts.red#d8647e
  • charts.yellow#f3be7c
  • debugIcon.breakpointForeground#d8647e
  • debugIcon.pauseForeground#f3be7c
  • debugIcon.restartForeground#6e94b2
  • debugIcon.startForeground#7fa563
  • debugIcon.stopForeground#d8647e
  • debugToolBar.background#1c1c24
  • debugToolBar.border#252530
  • diffEditor.diagonalFill#252530
  • diffEditor.insertedLineBackground#7fa5631a
  • diffEditor.insertedTextBackground#7fa5631a
  • diffEditor.insertedTextBorder#00000000
  • diffEditor.removedLineBackground#d8647e1a
  • diffEditor.removedTextBackground#d8647e1a
  • diffEditor.removedTextBorder#00000000
  • dropdown.background#1c1c24
  • dropdown.border#252530
  • dropdown.foreground#cdcdcd
  • editor.background#141415
  • editor.findMatchBackground#405065
  • editor.findMatchHighlightBackground#40506580
  • editor.focusedStackFrameHighlightBackground#7fa56333
  • editor.foreground#cdcdcd
  • editor.inactiveSelectionBackground#33373866
  • editor.lineHighlightBackground#252530
  • editor.selectionBackground#333738aa
  • editor.selectionHighlightBackground#33373866
  • editor.stackFrameHighlightBackground#f3be7c33
  • editor.wordHighlightBackground#333738aa
  • editor.wordHighlightStrongBackground#333738cc
  • editorBracketMatch.background#333738aa
  • editorBracketMatch.border#6e94b2
  • editorCursor.foreground#cdcdcd
  • editorError.background#d8647e1a
  • editorError.border#00000000
  • editorError.foreground#d8647e
  • editorGroup.background#141415
  • editorGroup.border#252530
  • editorGroup.dropBackground#40506580
  • editorGroupHeader.tabsBackground#141415
  • editorGroupHeader.tabsBorder#252530
  • editorGutter.addedBackground#7fa563
  • editorGutter.background#141415
  • editorGutter.deletedBackground#d8647e
  • editorGutter.modifiedBackground#f3be7c
  • editorHint.border#00000000
  • editorHint.foreground#7e98e8
  • editorHoverWidget.background#1c1c24
  • editorHoverWidget.border#252530
  • editorIndentGuide.activeBackground1#606079
  • editorIndentGuide.background1#252530
  • editorInfo.background#7e98e81a
  • editorInfo.border#00000000
  • editorInfo.foreground#7e98e8
  • editorLineNumber.activeForeground#cdcdcd
  • editorLineNumber.foreground#606079
  • editorMarkerNavigation.background#1c1c24
  • editorMarkerNavigationError.background#d8647e
  • editorMarkerNavigationInfo.background#7e98e8
  • editorMarkerNavigationWarning.background#f3be7c
  • editorOverviewRuler.addedForeground#7fa563
  • editorOverviewRuler.border#252530
  • editorOverviewRuler.deletedForeground#d8647e
  • editorOverviewRuler.errorForeground#d8647e
  • editorOverviewRuler.infoForeground#7e98e8
  • editorOverviewRuler.modifiedForeground#f3be7c
  • editorOverviewRuler.warningForeground#f3be7c
  • editorRuler.foreground#252530
  • editorSuggestWidget.background#1c1c24
  • editorSuggestWidget.border#252530
  • editorSuggestWidget.foreground#cdcdcd
  • editorSuggestWidget.highlightForeground#6e94b2
  • editorSuggestWidget.selectedBackground#252530
  • editorWarning.background#f3be7c1a
  • editorWarning.border#00000000
  • editorWarning.foreground#f3be7c
  • editorWidget.background#1c1c24
  • editorWidget.border#252530
  • extensionButton.prominentBackground#6e94b2
  • extensionButton.prominentForeground#141415
  • extensionButton.prominentHoverBackground#7e98e8
  • gitDecoration.addedResourceForeground#7fa563
  • gitDecoration.conflictingResourceForeground#d8647e
  • gitDecoration.deletedResourceForeground#d8647e
  • gitDecoration.ignoredResourceForeground#606079
  • gitDecoration.modifiedResourceForeground#f3be7c
  • gitDecoration.stageDeletedResourceForeground#d8647e
  • gitDecoration.stageModifiedResourceForeground#f3be7c
  • gitDecoration.submoduleResourceForeground#aeaed1
  • gitDecoration.untrackedResourceForeground#7fa563
  • gitlens.gutterBackgroundColor#252530
  • gitlens.gutterForegroundColor#cdcdcd
  • gitlens.trailingLineForegroundColor#606079
  • input.background#1c1c24
  • input.border#252530
  • input.foreground#cdcdcd
  • input.placeholderForeground#606079
  • inputOption.activeBackground#6e94b266
  • inputOption.activeBorder#00000000
  • inputOption.activeForeground#cdcdcd
  • inputValidation.errorBackground#d8647e1a
  • inputValidation.errorBorder#d8647e
  • inputValidation.errorForeground#d8647e
  • inputValidation.infoBackground#7e98e81a
  • inputValidation.infoBorder#7e98e8
  • inputValidation.infoForeground#7e98e8
  • inputValidation.warningBackground#f3be7c1a
  • inputValidation.warningBorder#f3be7c
  • inputValidation.warningForeground#f3be7c
  • list.activeSelectionBackground#252530
  • list.activeSelectionForeground#6e94b2
  • list.errorForeground#d8647e
  • list.focusBackground#252530
  • list.focusForeground#cdcdcd
  • list.highlightForeground#6e94b2
  • list.hoverBackground#25253080
  • list.hoverForeground#cdcdcd
  • list.inactiveSelectionBackground#252530
  • list.inactiveSelectionForeground#cdcdcd
  • list.warningForeground#f3be7c
  • listFilterWidget.background#1c1c24
  • listFilterWidget.noMatchesOutline#d8647e
  • listFilterWidget.outline#252530
  • menu.background#1c1c24
  • menu.border#252530
  • menu.foreground#cdcdcd
  • menu.selectionBackground#252530
  • menu.selectionBorder#00000000
  • menu.selectionForeground#6e94b2
  • menu.separatorBackground#252530
  • merge.commonContentBackground#6060791a
  • merge.commonHeaderBackground#60607933
  • merge.currentContentBackground#7fa5631a
  • merge.currentHeaderBackground#7fa56333
  • merge.incomingContentBackground#6e94b21a
  • merge.incomingHeaderBackground#6e94b233
  • notificationCenter.border#252530
  • notificationCenterHeader.background#1c1c24
  • notificationCenterHeader.foreground#cdcdcd
  • notificationLink.foreground#6e94b2
  • notifications.background#1c1c24
  • notifications.border#252530
  • notifications.foreground#cdcdcd
  • notificationToast.border#252530
  • panel.background#141415
  • panel.border#252530
  • panelSection.border#252530
  • panelSectionHeader.background#141415
  • panelSectionHeader.foreground#cdcdcd
  • panelTitle.activeBorder#6e94b2
  • panelTitle.activeForeground#6e94b2
  • panelTitle.inactiveForeground#606079
  • peekView.border#252530
  • peekViewEditor.background#141415
  • peekViewEditor.matchHighlightBackground#40506580
  • peekViewEditorGutter.background#141415
  • peekViewResult.background#1c1c24
  • peekViewResult.foreground#cdcdcd
  • peekViewResult.matchHighlightBackground#40506580
  • peekViewResult.selectionBackground#252530
  • peekViewResult.selectionForeground#cdcdcd
  • peekViewTitle.background#1c1c24
  • peekViewTitleLabel.foreground#cdcdcd
  • pickerGroup.border#252530
  • pickerGroup.foreground#6e94b2
  • progressBar.background#6e94b2
  • quickInput.background#1c1c24
  • quickInput.foreground#cdcdcd
  • quickInputTitle.background#141415
  • scrollbar.shadow#00000000
  • scrollbarSlider.activeBackground#606079
  • scrollbarSlider.background#33373878
  • scrollbarSlider.hoverBackground#333738aa
  • settings.checkboxBackground#252530
  • settings.checkboxBorder#252530
  • settings.checkboxForeground#cdcdcd
  • settings.dropdownBackground#1c1c24
  • settings.dropdownBorder#252530
  • settings.dropdownForeground#cdcdcd
  • settings.dropdownListBorder#252530
  • settings.headerForeground#6e94b2
  • settings.modifiedItemIndicator#6e94b2
  • settings.numberInputBackground#1c1c24
  • settings.numberInputBorder#252530
  • settings.numberInputForeground#cdcdcd
  • settings.textInputBackground#1c1c24
  • settings.textInputBorder#252530
  • settings.textInputForeground#cdcdcd
  • sideBar.background#141415
  • sideBar.border#252530
  • sideBar.foreground#cdcdcd
  • sideBarSectionHeader.background#141415
  • sideBarSectionHeader.border#252530
  • sideBarSectionHeader.foreground#cdcdcd
  • statusBar.background#141415
  • statusBar.border#252530
  • statusBar.debuggingBackground#d8647e
  • statusBar.debuggingForeground#141415
  • statusBar.foreground#cdcdcd
  • statusBar.noFolderBackground#141415
  • statusBarItem.activeBackground#252530
  • statusBarItem.hoverBackground#252530
  • statusBarItem.prominentBackground#252530
  • statusBarItem.prominentHoverBackground#333738
  • statusBarItem.remoteBackground#6e94b2
  • statusBarItem.remoteForeground#141415
  • symbolIcon.classForeground#9bb4bc
  • symbolIcon.colorForeground#e0a363
  • symbolIcon.constantForeground#aeaed1
  • symbolIcon.constructorForeground#c48282
  • symbolIcon.enumeratorForeground#9bb4bc
  • symbolIcon.enumeratorMemberForeground#9bb4bc
  • symbolIcon.eventForeground#d8647e
  • symbolIcon.fieldForeground#c3c3d5
  • symbolIcon.fileForeground#e8b589
  • symbolIcon.folderForeground#e8b589
  • symbolIcon.functionForeground#c48282
  • symbolIcon.interfaceForeground#9bb4bc
  • symbolIcon.keyForeground#6e94b2
  • symbolIcon.keywordForeground#6e94b2
  • symbolIcon.methodForeground#c48282
  • symbolIcon.moduleForeground#aeaed1
  • symbolIcon.namespaceForeground#9bb4bc
  • symbolIcon.nullForeground#e0a363
  • symbolIcon.numberForeground#e0a363
  • symbolIcon.objectForeground#9bb4bc
  • symbolIcon.operatorForeground#90a0b5
  • symbolIcon.packageForeground#aeaed1
  • symbolIcon.propertyForeground#c3c3d5
  • symbolIcon.referenceForeground#6e94b2
  • symbolIcon.snippetForeground#bb9dbd
  • symbolIcon.stringForeground#e8b589
  • symbolIcon.structForeground#9bb4bc
  • symbolIcon.textForeground#cdcdcd
  • symbolIcon.typeParameterForeground#9bb4bc
  • symbolIcon.unitForeground#e0a363
  • symbolIcon.variableForeground#bb9dbd
  • tab.activeBackground#141415
  • tab.activeBorder#6e94b2
  • tab.activeForeground#6e94b2
  • tab.border#252530
  • tab.hoverBackground#1c1c24
  • tab.hoverForeground#cdcdcd
  • tab.inactiveBackground#141415
  • tab.inactiveForeground#606079
  • tab.unfocusedActiveForeground#cdcdcd
  • tab.unfocusedInactiveForeground#606079
  • terminal.ansiBlack#252530
  • terminal.ansiBlue#6e94b2
  • terminal.ansiBrightBlack#606079
  • terminal.ansiBrightBlue#8ba9c1
  • terminal.ansiBrightCyan#bebeda
  • terminal.ansiBrightGreen#99b782
  • terminal.ansiBrightMagenta#c9b1ca
  • terminal.ansiBrightRed#e08398
  • terminal.ansiBrightWhite#d7d7d7
  • terminal.ansiBrightYellow#f5cb96
  • terminal.ansiCyan#aeaed1
  • terminal.ansiDimWhite#878787
  • terminal.ansiGreen#7fa563
  • terminal.ansiMagenta#bb9dbd
  • terminal.ansiRed#d8647e
  • terminal.ansiWhite#cdcdcd
  • terminal.ansiYellow#f3be7c
  • terminal.background#141415
  • terminal.foreground#cdcdcd
  • terminalCursor.background#141415
  • terminalCursor.foreground#cdcdcd
  • textBlockQuote.background#1c1c24
  • textBlockQuote.border#6e94b2
  • textCodeBlock.background#1c1c24
  • textLink.activeForeground#7e98e8
  • textLink.foreground#6e94b2
  • textPreformat.foreground#e8b589
  • textSeparator.foreground#252530
  • titleBar.activeBackground#141415
  • titleBar.activeForeground#cdcdcd
  • titleBar.border#252530
  • titleBar.inactiveBackground#1c1c24
  • titleBar.inactiveForeground#606079
  • tree.indentGuidesStroke#252530
  • walkThrough.embeddedEditorBackground#141415
  • welcomePage.background#141415
  • welcomePage.buttonBackground#252530
  • welcomePage.buttonHoverBackground#333738

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#606079italic
variable, string constant.other.placeholder#bb9dbd
constant.other.color#e0a363
invalid, invalid.illegal#d8647e
keyword, storage.type, storage.modifier#6e94b2
constant.other.color, punctuation, meta.tag, punctuation.definition.tag, punctuation.separator.inheritance.php, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, punctuation.section.embedded, keyword.control.heredoc-token#90a0b5
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method#c48282
meta.block variable.other#d8647e
support.other.variable, string.other.link#e8b589
constant.numeric, constant.language, support.constant, constant.character, constant.escape, variable.parameter, keyword.other.unit, keyword.other#e0a363
string, constant.other.symbol, constant.other.key, entity.other.inherited-class#e8b589
entity.name.class, entity.name.type.class, support.type, support.class, support.orther.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter#9bb4bc
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#d8647e
variable.language#d8647eitalic
entity.name.method.js#cdcdcd
meta.class-method.js entity.name.function.js, variable.function.constructor#c48282
entity.other.attribute-name#e0a363
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name#e0a363italic
entity.other.attribute-name.class#aeaed1
source.sass keyword.control#6e94b2
markup.inserted#7fa563
markup.deleted#d8647e
markup.changed#e0a363
string.regexp#6e94b2
constant.character.escape#6e94b2
*url*, *link*, *uri*underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#c48282italic
source.js constant.other.object.key.js string.unquoted.label.js#d8647eitalic
source.json meta.structure.dictionary.json support.type.property-name.json#9bb4bc
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#e0a363
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#c48282
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#bb9dbd
text.html.markdown, punctuation.definition.list_item.markdown#cdcdcd
text.html.markdown markup.inline.raw.markdown#c48282
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown#606079
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown#6e94b2
markup.italic#bb9dbditalic
markup.bold, markup.bold string#e0a363bold
markup.bold markup.italic, markup.italic markup.bold, markup.quote markup.bold, markup.bold markup.italic string, markup.italic markup.bold string, markup.quote markup.bold stringitalic bold
markup.underline#f3be7cunderline
markup.quote punctuation.definition.blockquote.markdown#606079
markup.quoteitalic
string.other.link.title.markdown#7e98e8
string.other.link.description.title.markdown#bb9dbd
constant.other.reference.link.markdown#e0a363
markup.raw.block#c48282
markup.raw.block.fenced.markdown#00000050
punctuation.definition.fenced.markdown#00000050
variable.language.fenced.markdown#9bb4bc
meta.separator#6e94b2bold
markup.table#cdcdcd
variable.parameter.function#cdcdcd
support.function#b4d4cf
variable.other.property#c3c3d5
support.type.property-name.css#c3c3d5
support.constant.property-value.css#e0a363
keyword.control.at-rule.css#6e94b2
entity.other.attribute-name.pseudo-class.css#e0a363
Vague Theme (Windsurf) by Xavier Castro - VS Code Theme