Skip to main content
CodingTheme

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#94a0b2
  • activityBar.background#101010
  • activityBar.border#1d1e21
  • activityBar.dropBackground#1d1e21
  • activityBar.foreground#94a0b2
  • activityBar.inactiveForeground#545c63
  • activityBarBadge.background#94a0b2
  • activityBarBadge.foreground#161616
  • badge.background#3CC3DD
  • badge.foreground#161616
  • breadcrumb.activeSelectionForeground#545c63
  • breadcrumb.focusForeground#94a0b2
  • breadcrumb.foreground#545c63
  • breadcrumbPicker.background#28323a
  • button.background#BEA382
  • button.foreground#101010
  • button.hoverBackground#EBC9A1
  • contrastBorder#ffffff02
  • debugExceptionWidget.background#161616
  • debugExceptionWidget.border#94a0b2
  • debugToolBar.background#161616
  • descriptionForeground#94a0b2
  • diffEditor.insertedTextBackground#19E99E1A
  • diffEditor.insertedTextBorder#19E99E80
  • diffEditor.removedTextBackground#FA00671A
  • diffEditor.removedTextBorder#FA006780
  • dropdown.background#545c63
  • dropdown.border#545c63
  • dropdown.foreground#fff
  • editor.background#101010
  • editor.findMatchBackground#080808cc
  • editor.findMatchHighlightBackground#08080864
  • editor.findRangeHighlightBackground#BEA38280
  • editor.foreground#acb5c3
  • editor.hoverHighlightBackground#1D1E21
  • editor.inactiveSelectionBackground#08080880
  • editor.lineHighlightBackground#08080840
  • editor.lineHighlightBorder#26282b
  • editor.rangeHighlightBackground#FBE15C34
  • editor.selectionBackground#FBE15C4E
  • editor.selectionForeground#2C2E32
  • editor.selectionHighlightBackground#454f5f70
  • editor.wordHighlightBackground#FFFFFF0D
  • editor.wordHighlightStrongBackground#f9d310
  • editorBracketMatch.background#101010
  • editorBracketMatch.border#18788B
  • editorCodeLens.foreground#94a0b2
  • editorCursor.foreground#3CC3DD
  • editorError.border#1d1e21
  • editorError.foreground#FA0067
  • editorGroup.border#101010
  • editorGroup.dropBackground#1d1e21
  • editorGroup.emptyBackground#101010
  • editorGroupHeader.noTabsBackground#1d1e21
  • editorGroupHeader.tabsBackground#161616
  • editorGroupHeader.tabsBorder#1d1e21
  • editorGutter.addedBackground#a28867
  • editorGutter.background#101010
  • editorGutter.deletedBackground#A30043
  • editorGutter.modifiedBackground#18788B
  • editorHoverWidget.background#161616
  • editorHoverWidget.border#1d1e21
  • editorIndentGuide.background#28323a
  • editorLineNumber.foreground#545c63
  • editorLink.activeForeground#94a0b2
  • editorMarkerNavigation.background#101010
  • editorMarkerNavigationError.background#d60058
  • editorMarkerNavigationWarning.background#f9d310
  • editorOverviewRuler.border#1d1e21
  • editorOverviewRuler.commonContentForeground#EFC806
  • editorOverviewRuler.currentContentForeground#a30043
  • editorOverviewRuler.incomingContentForeground#0e9564
  • editorRuler.foreground#1F4662
  • editorSuggestWidget.background#161616
  • editorSuggestWidget.border#161616
  • editorSuggestWidget.foreground#94a0b2
  • editorSuggestWidget.highlightForeground#FBE15C
  • editorSuggestWidget.selectedBackground#26282B
  • editorWarning.border#ffffff00
  • editorWarning.foreground#FBE15C
  • editorWhitespace.foreground#ffffff1a
  • editorWidget.background#161616
  • editorWidget.border#1d1e21
  • errorForeground#FA0067
  • extensionButton.prominentBackground#BEA382
  • extensionButton.prominentForeground#101010
  • extensionButton.prominentHoverBackground#EBC9A1
  • focusBorder#1d1e21
  • foreground#94a0b2
  • gitDecoration.addedResourceForeground#19E99E
  • gitDecoration.conflictingResourceForeground#3CC3DD
  • gitDecoration.deletedResourceForeground#FA0067
  • gitDecoration.ignoredResourceForeground#545c63
  • gitDecoration.modifiedResourceForeground#FBE15C
  • gitDecoration.untrackedResourceForeground#BEA382
  • input.background#1d1e21
  • input.border#1d1e21
  • input.foreground#94a0b2
  • input.placeholderForeground#94a0b2
  • inputOption.activeBorder#d60058
  • inputValidation.errorBackground#FA006734
  • inputValidation.errorBorder#FA006780
  • inputValidation.errorForeground#fff
  • inputValidation.infoBackground#3CC3DD34
  • inputValidation.infoBorder#3CC3DDCC
  • inputValidation.warningBackground#FBE15CCC
  • inputValidation.warningBorder#FBE15C34
  • list.activeSelectionBackground#161616
  • list.activeSelectionForeground#DEE0E2
  • list.dropBackground#1d1e21
  • list.focusBackground#1d1e21
  • list.focusForeground#94a0b2
  • list.highlightForeground#EBC9A1
  • list.hoverBackground#101010
  • list.hoverForeground#94a0b2
  • list.inactiveSelectionBackground#1d1e21
  • list.inactiveSelectionForeground#94a0b2
  • panel.background#080808
  • panel.border#080808
  • panelTitle.activeBorder#545c63
  • panelTitle.activeForeground#4D596A
  • panelTitle.inactiveForeground#94a0b2
  • peekView.border#232425
  • peekViewEditor.background#161616
  • peekViewEditor.matchHighlightBackground#161616
  • peekViewEditorGutter.background#1d1e21
  • peekViewResult.background#161616
  • peekViewResult.fileForeground#94a0b2
  • peekViewResult.lineForeground#fff
  • peekViewResult.matchHighlightBackground#232425
  • peekViewResult.selectionBackground#232425
  • peekViewResult.selectionForeground#fff
  • peekViewTitle.background#161616
  • peekViewTitleDescription.foreground#94a0b2
  • peekViewTitleLabel.foreground#EBC9A1
  • pickerGroup.border#1d1e21
  • pickerGroup.foreground#94a0b2
  • progressBar.background#EBC9A1
  • scrollbar.shadow#00000000
  • scrollbarSlider.activeBackground#1d1e21
  • scrollbarSlider.background#545c6380
  • scrollbarSlider.hoverBackground#545c63CC
  • selection.background#3cc3dd1E
  • sideBar.background#080808
  • sideBar.border#101010
  • sideBar.foreground#868f98
  • sideBarSectionHeader.background#101010
  • sideBarSectionHeader.foreground#677079
  • sideBarTitle.foreground#94a0b2
  • statusBar.background#080808
  • statusBar.border#101010
  • statusBar.debuggingBackground#080808
  • statusBar.debuggingForeground#94a0b2
  • statusBar.foreground#94a0b2
  • statusBar.noFolderBackground#080808
  • statusBar.noFolderForeground#94a0b2
  • statusBarItem.activeBackground#1d1e21
  • statusBarItem.hoverBackground#1d1e21
  • statusBarItem.prominentBackground#080808
  • statusBarItem.prominentHoverBackground#1d1e21
  • tab.activeBackground#101010
  • tab.activeBorder#101010
  • tab.activeForeground#fff
  • tab.border#080808
  • tab.inactiveBackground#080808
  • tab.inactiveForeground#94a0b2
  • tab.unfocusedActiveForeground#94a0b2
  • tab.unfocusedInactiveForeground#4D596A
  • terminal.ansiBlack#2c2e32
  • terminal.ansiBlue#3cc3dd
  • terminal.ansiBrightBlack#393c41
  • terminal.ansiBrightBlue#545c63
  • terminal.ansiBrightCyan#bea382
  • terminal.ansiBrightGreen#19e99e
  • terminal.ansiBrightMagenta#7d8ba1
  • terminal.ansiBrightRed#FF4893
  • terminal.ansiBrightWhite#dee0e2
  • terminal.ansiBrightYellow#fbe15c
  • terminal.ansiCyan#ae926f
  • terminal.ansiGreen#13c887
  • terminal.ansiMagenta#a950cf
  • terminal.ansiRed#fa0067
  • terminal.ansiWhite#E9EaEC
  • terminal.ansiYellow#f9d310
  • terminal.background#080808
  • terminal.foreground#E9EaEC
  • terminalCursor.background#BEA382
  • terminalCursor.foreground#ffffff
  • textBlockQuote.background#080808
  • textBlockQuote.border#101010
  • textCodeBlock.background#080808
  • textLink.activeForeground#545c63
  • textLink.foreground#545c63
  • textPreformat.foreground#545c63
  • textSeparator.foreground#545c63
  • titleBar.activeBackground#080808
  • titleBar.activeForeground#ffffff
  • titleBar.inactiveBackground#101010
  • titleBar.inactiveForeground#ffffff33
  • walkThrough.embeddedEditorBackground#101010
  • welcomePage.buttonBackground#101010
  • welcomePage.buttonHoverBackground#1d1e21
  • widget.shadow#00000026

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#454f5fitalic
variable, string constant.other.placeholder#94a0b2
constant.other.color#ffffff
invalid, invalid.illegal#FA0067
keyword, storage.type, storage.modifier#3CC3DD
keyword.control, constant.other.color, punctuation, meta.tag, punctuation.definition.tag, punctuation.separator.inheritance.php, punctuation.section.embedded, keyword.other.template, keyword.other.substitution#9ca3ab
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter#ccb394
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method#BEA382
meta.block variable.other#7d8ba1
support.other.variable, string.other.link#4D596A
constant.numeric, constant.language, support.constant, constant.character, constant.escape, variable.parameter, keyword.other.unit, keyword.other#FF4893
string, constant.other.symbol, constant.other.key, entity.other.inherited-class, markup.heading, markup.inserted.git_gutter, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js#7d8ba1
entity.name, support.type, support.class, support.orther.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types#FBE15C
support.type#607077
source.css support.type.property-name, source.sass support.type.property-name, source.scss support.type.property-name, source.less support.type.property-name, source.stylus support.type.property-name, source.postcss support.type.property-name#94a0b2
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#a28867
variable.language#7d8ba1italic
entity.name.method.js#3CC3DDitalic
meta.class-method.js entity.name.function.js, variable.function.constructor#3CC3DD
entity.other.attribute-name#ae926f
meta.tag.sgml.doctype#545c63
punctuation.definition.tag.html, punctuation.definition.tag.end.html, punctuation.definition.tag.begin.html#545c63
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name#acb5c3italic
entity.other.attribute-name.class#EBC9A1
source.sass keyword.control, entity.other.attribute-name.id.css, punctuation.definition.entity.css#BEA382
entity.name.tag.css#ae926f
punctuation.definition.constant.css#3cc3ddb0
constant.other.color.rgb-value.hex.css#3cc3ddff
constant.numeric.css, constant.language.css#3cc3dde0
support.constant.property-value.css#3cc3dd
keyword.other.unit.px.css, keyword.other.unit.percentage.css, keyword.other.unit.ms.css, keyword.other.unit.s.css, keyword.other.unit.vh.css, keyword.other.unit.vw.css, keyword.other.unit.deg.css, keyword.other.unit.em.css#3cc3dd80
markup.inserted#EFC806
markup.deleted#D60058
markup.changed#A950CF
string.regexp#85DAEA
constant.character.escape#EFC806
*url*, *link*, *uri*underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#545c63italic
source.js constant.other.object.key.js string.unquoted.label.js#24B5D0italic
source.js meta.import.js, keyword.control.import.js, keyword.control.from.js#24B5D0
source.js keyword.control.export.js#24B5D0
source.js support.class.component.js#BEA382
source.js meta.var.expr.js, storage.type.js#677079
source.js meta.var.expr.js#677079
variable.other.constant.js, variable.other.readwrite.js#ACB5C3
keyword.control.flow.js#24B5D0
source.json meta.structure.dictionary.json support.type.property-name.json#BEA382bold
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#BEA382
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#ae926f
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#545c63
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 meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#677079
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 meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#868f98
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 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#9ca3ab
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 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 meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#b2b8bd
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 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 meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#C3E88D
source.json string, source.json punctuation.definition.string, punctuation.definition.string.end.json, punctuation.definition.string.begin.json#94a0b2
text.html.markdown, punctuation.definition.list_item.markdown#94a0b2
text.html.markdown markup.inline.raw.markdown#C792EA
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown#5e6D82
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown#454f5f
entity.name.section, entity.name.section.markdown#BEA382bold
markup.italic#e9eaecitalic
markup.bold, markup.bold string#e9eaecbold
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 stringbold
markup.underline#3CC3DDunderline
markup.quote punctuation.definition.blockquote.markdown#DEE0E2
markup.quoteitalic
string.other.link.title.markdown#ccb394
string.other.link.description.markdown#ae926f
constant.other.reference.link.markdown#85DAEA
markup.raw.block#DEE0E2
markup.raw.block.fenced.markdown#08080880
punctuation.definition.fenced.markdown#08080840
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end#7d8ba1
variable.language.fenced.markdown#7d8ba1
meta.separator#7d8ba1bold
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#a28867
markup.table#EEFFFF
source.php entity#7d8ba1
variable.other.php, punctuation.definition.variable.php#a28867
source.shell variable.other#ACB5C3

Shiki preview

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

Loading...

Secuoyas VS Code Themes by Secuoyas - VS Code Theme