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#ee9b00
  • activityBar.background#242423
  • activityBar.border#1f1f1e
  • activityBar.foreground#e9d8a6cc
  • activityBar.inactiveForeground#e9d8a677
  • activityBarBadge.background#ee9b00
  • activityBarBadge.foreground#140d00
  • badge.background#ee9b0033
  • badge.foreground#ee9b00
  • button.background#ee9b00
  • button.foreground#140d00
  • button.hoverBackground#ffa90a
  • button.secondaryBackground#e9d8a633
  • button.secondaryForeground#efe2be
  • button.secondaryHoverBackground#e9d8a680
  • debugConsoleInputIcon.foreground#ee9b00
  • debugExceptionWidget.background#1f1f1e
  • debugExceptionWidget.border#151514
  • debugIcon.breakpointDisabledForeground#ee655980
  • debugIcon.breakpointForeground#ee6559
  • debugToolBar.background#1f1f1e
  • descriptionForeground#e9d8a6
  • diffEditor.diagonalFill#151514
  • diffEditor.insertedTextBackground#7fdd401f
  • diffEditor.removedTextBackground#b921131f
  • dropdown.background#343432
  • dropdown.border#e9d8a645
  • dropdown.foreground#e9d8a6
  • editor.background#242423
  • editor.findMatchBackground#005f73
  • editor.findMatchBorder#005f73
  • editor.findMatchHighlightBackground#005f7366
  • editor.findMatchHighlightBorder#00aacc66
  • editor.findRangeHighlightBackground#005f7340
  • editor.foreground#efe2be
  • editor.inactiveSelectionBackground#94d2bd21
  • editor.lineHighlightBackground#2c2c2b
  • editor.rangeHighlightBackground#005f7333
  • editor.selectionBackground#94d2bd40
  • editor.selectionHighlightBackground#7fdd4026
  • editor.selectionHighlightBorder#7fdd4000
  • editor.snippetTabstopHighlightBackground#7fdd4033
  • editor.wordHighlightBackground#0a939614
  • editor.wordHighlightBorder#0a939680
  • editor.wordHighlightStrongBackground#7fdd4014
  • editor.wordHighlightStrongBorder#7fdd4080
  • editorBracketHighlight.foreground1#ffb01f
  • editorBracketHighlight.foreground2#f14f04
  • editorBracketHighlight.foreground3#0cbdc0
  • editorBracketHighlight.unexpectedBracket.foreground#de2817
  • editorBracketMatch.background#e7d39d4d
  • editorBracketMatch.border#e7d39d4d
  • editorCodeLens.foreground#b6cec680
  • editorCursor.foreground#ee9b00
  • editorError.foreground#eb4c3d
  • editorGroup.border#151514
  • editorGroupHeader.noTabsBackground#242423
  • editorGroupHeader.tabsBackground#242423
  • editorGroupHeader.tabsBorder#242423
  • editorGutter.addedBackground#7fdd40cc
  • editorGutter.deletedBackground#b92113cc
  • editorGutter.modifiedBackground#0cbdc0cc
  • editorHoverWidget.background#1f1f1e
  • editorHoverWidget.border#151514
  • editorIndentGuide.activeBackground1#e7d39d59
  • editorIndentGuide.background1#e7d39d2e
  • editorInfo.foreground#0fe3e6
  • editorLineNumber.activeForeground#e7d39dcc
  • editorLineNumber.foreground#e7d39d66
  • editorLink.activeForeground#ee9b00
  • editorMarkerNavigation.background#1f1f1e
  • editorMarkerNavigationError.background#eb4c3d
  • editorMarkerNavigationError.headerBackground#eb4c3d1a
  • editorMarkerNavigationInfo.background#0fe3e6
  • editorMarkerNavigationInfo.headerBackground#0fe3e61a
  • editorMarkerNavigationWarning.background#ee9b00
  • editorMarkerNavigationWarning.headerBackground#ee9b001a
  • editorOverviewRuler.addedForeground#7fdd40
  • editorOverviewRuler.border#151514
  • editorOverviewRuler.bracketMatchForeground#e7d39db3
  • editorOverviewRuler.deletedForeground#b92113
  • editorOverviewRuler.errorForeground#eb4c3d
  • editorOverviewRuler.findMatchForeground#005f73cc
  • editorOverviewRuler.infoForeground#0fe3e6
  • editorOverviewRuler.modifiedForeground#0cbdc0
  • editorOverviewRuler.warningForeground#ee9b00
  • editorOverviewRuler.wordHighlightForeground#0a939666
  • editorOverviewRuler.wordHighlightStrongForeground#7fdd4066
  • editorRuler.foreground#e7d39d2e
  • editorSuggestWidget.background#1f1f1e
  • editorSuggestWidget.border#151514
  • editorSuggestWidget.highlightForeground#ee9b00
  • editorSuggestWidget.selectedBackground#66665c26
  • editorWarning.foreground#ee9b00
  • editorWhitespace.foreground#e7d39d66
  • editorWidget.background#1f1f1e
  • editorWidget.border#151514
  • errorForeground#eb4c3d
  • extensionButton.prominentBackground#ee9b00
  • extensionButton.prominentForeground#140d00
  • extensionButton.prominentHoverBackground#ffa90a
  • focusBorder#ee9b00b3
  • foreground#e9d8a6
  • gitDecoration.conflictingResourceForeground#ff0000
  • gitDecoration.deletedResourceForeground#b92113b3
  • gitDecoration.ignoredResourceForeground#e9d8a680
  • gitDecoration.modifiedResourceForeground#0cbdc0ee
  • gitDecoration.submoduleResourceForeground#db95ceb3
  • gitDecoration.untrackedResourceForeground#7fdd40b3
  • icon.foreground#e9d8a6
  • input.background#343432
  • input.border#e9d8a645
  • input.foreground#efe2be
  • input.placeholderForeground#e9d8a680
  • inputOption.activeBackground#ee9b0033
  • inputOption.activeBorder#ee9b004d
  • inputOption.activeForeground#ee9b00
  • inputValidation.errorBackground#343432
  • inputValidation.errorBorder#eb4c3d
  • inputValidation.infoBackground#242423
  • inputValidation.infoBorder#0fe3e6
  • inputValidation.warningBackground#242423
  • inputValidation.warningBorder#ffcd70
  • keybindingLabel.background#e9d8a61a
  • keybindingLabel.border#efe2be1a
  • keybindingLabel.bottomBorder#efe2be1a
  • keybindingLabel.foreground#efe2be
  • list.activeSelectionBackground#66665c26
  • list.activeSelectionForeground#efe2be
  • list.deemphasizedForeground#eb4c3d
  • list.errorForeground#eb4c3d
  • list.filterMatchBackground#00aacc66
  • list.filterMatchBorder#005f7366
  • list.focusBackground#66665c26
  • list.focusForeground#efe2be
  • list.focusOutline#66665c26
  • list.highlightForeground#ee9b00
  • list.hoverBackground#66665c26
  • list.inactiveSelectionBackground#7c7c791f
  • list.inactiveSelectionForeground#e9d8a6
  • list.invalidItemForeground#e9d8a64d
  • listFilterWidget.background#1f1f1e
  • listFilterWidget.noMatchesOutline#eb4c3d
  • listFilterWidget.outline#ee9b00
  • minimap.background#242423
  • minimap.errorHighlight#eb4c3d
  • minimap.findMatchHighlight#005f73cc
  • minimap.infoHighlight#0fe3e6
  • minimap.selectionHighlight#94d2bd40
  • minimapGutter.addedBackground#7fdd40
  • minimapGutter.deletedBackground#b92113
  • minimapGutter.modifiedBackground#0cbdc0
  • notificationsErrorIcon.foreground#eb4c3d
  • notificationsInfoIcon.foreground#0fe3e6
  • notificationsWarningIcon.foreground#ee9b00
  • panel.background#242423
  • panel.border#1f1f1e
  • panelTitle.activeBorder#ee9b00
  • panelTitle.activeForeground#efe2be
  • panelTitle.inactiveForeground#e9d8a6
  • peekView.border#66665c26
  • peekViewEditor.background#1f1f1e
  • peekViewEditor.matchHighlightBackground#005f7366
  • peekViewEditor.matchHighlightBorder#00aacc66
  • peekViewResult.background#1f1f1e
  • peekViewResult.fileForeground#efe2be
  • peekViewResult.lineForeground#e9d8a6
  • peekViewResult.matchHighlightBackground#005f7366
  • peekViewResult.selectionBackground#66665c26
  • peekViewTitle.background#66665c26
  • peekViewTitleDescription.foreground#e9d8a6
  • peekViewTitleLabel.foreground#efe2be
  • pickerGroup.border#151514
  • pickerGroup.foreground#e9d8a680
  • problemsErrorIcon.foreground#eb4c3d
  • problemsInfoIcon.foreground#0fe3e6
  • problemsWarningIcon.foreground#ee9b00
  • progressBar.background#ee9b00
  • scrollbar.shadow#15151433
  • scrollbarSlider.activeBackground#e9d8a6b3
  • scrollbarSlider.background#e9d8a666
  • scrollbarSlider.hoverBackground#e9d8a699
  • selection.background#94d2bd40
  • settings.headerForeground#efe2be
  • settings.modifiedItemIndicator#0cbdc0
  • sideBar.background#242423
  • sideBar.border#1f1f1e
  • sideBarSectionHeader.background#242423
  • sideBarSectionHeader.border#242423
  • sideBarSectionHeader.foreground#e9d8a6
  • sideBarTitle.foreground#e9d8a6
  • statusBar.background#242423
  • statusBar.border#1f1f1e
  • statusBar.debuggingBackground#ee6559
  • statusBar.debuggingForeground#343432
  • statusBar.foreground#e9d8a6
  • statusBar.noFolderBackground#1f1f1e
  • statusBarItem.activeBackground#e9d8a633
  • statusBarItem.hoverBackground#e9d8a633
  • statusBarItem.prominentBackground#151514
  • statusBarItem.prominentHoverBackground#00000030
  • statusBarItem.remoteBackground#ee9b00
  • statusBarItem.remoteForeground#140d00
  • tab.activeBackground#242423
  • tab.activeBorder#242423
  • tab.activeBorderTop#ee9b00
  • tab.activeForeground#efe2be
  • tab.border#1f1f1e
  • tab.inactiveBackground#343432
  • tab.inactiveForeground#e9d8a6
  • tab.unfocusedActiveBorder#e9d8a6
  • tab.unfocusedActiveForeground#e9d8a6
  • tab.unfocusedInactiveForeground#e9d8a6
  • terminal.ansiBlack#151514
  • terminal.ansiBlue#00ccf5
  • terminal.ansiBrightBlack#535350
  • terminal.ansiBrightBlue#47e0ff
  • terminal.ansiBrightCyan#52f1f4
  • terminal.ansiBrightGreen#99db43
  • terminal.ansiBrightMagenta#db95ce
  • terminal.ansiBrightRed#ee6559
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#ffcd70
  • terminal.ansiCyan#19edf0
  • terminal.ansiGreen#7abc24
  • terminal.ansiMagenta#d076c0
  • terminal.ansiRed#e83221
  • terminal.ansiWhite#ebddad
  • terminal.ansiYellow#ffb833
  • terminal.background#242423
  • terminal.foreground#efe2be
  • textBlockQuote.background#1f1f1e
  • textLink.activeForeground#ee9b00
  • textLink.foreground#ee9b00
  • textPreformat.foreground#efe2be
  • titleBar.activeBackground#242423
  • titleBar.activeForeground#efe2be
  • titleBar.border#1f1f1e
  • titleBar.inactiveBackground#242423
  • titleBar.inactiveForeground#e9d8a6
  • tree.indentGuidesStroke#e7d39d59
  • walkThrough.embeddedEditorBackground#1f1f1e
  • welcomePage.progress.background#2c2c2b
  • welcomePage.tileBackground#242423
  • widget.shadow#151514b3

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#B8CFE680italic
string, constant.other.symbol#D5FF80
string.regexp, constant.character, constant.other#95E6CB
constant.numeric#DFBFFF
constant.language#DFBFFF
variable, variable.parameter.function-call#CCCAC2
variable.member#F28779
variable.language#5CCFE6italic
storage#FFAD66
keyword#FFAD66
keyword.operator#F29E74
punctuation.separator, punctuation.terminator#CCCAC2B3
punctuation.section#CCCAC2
punctuation.accessor#F29E74
punctuation.definition.template-expression#FFAD66
punctuation.section.embedded#FFAD66
meta.embedded#CCCAC2
source.java storage.type, source.haskell storage.type, source.c storage.type#73D0FF
entity.other.inherited-class#5CCFE6
storage.type.function#FFAD66
source.java storage.type.primitive#5CCFE6
entity.name.function#FFD173
variable.parameter, meta.parameter#DFBFFF
variable.function, variable.annotation, meta.function-call.generic, support.function.go#FFD173
support.function, support.macro#F28779
entity.name.import, entity.name.package#D5FF80
entity.name#73D0FF
entity.name.tag, meta.tag.sgml#5CCFE6
support.class.component#73D0FF
punctuation.definition.tag.end, punctuation.definition.tag.begin, punctuation.definition.tag#5CCFE680
entity.other.attribute-name#FFD173
support.constant#F29E74italic
support.type, support.class, source.go storage.type#5CCFE6
meta.decorator variable.other, meta.decorator punctuation.decorator, storage.type.annotation#FFDFB3
invalid#FF6666
meta.diff, meta.diff.header#C594C5
source.ruby variable.other.readwrite#FFD173
source.css entity.name.tag, source.sass entity.name.tag, source.scss entity.name.tag, source.less entity.name.tag, source.stylus entity.name.tag#73D0FF
source.css support.type, source.sass support.type, source.scss support.type, source.less support.type, source.stylus support.type#B8CFE680
support.type.property-name#5CCFE6
constant.numeric.line-number.find-in-files - match#B8CFE680
constant.numeric.line-number.match#FFAD66
entity.name.filename.find-in-files#D5FF80
message.error#FF6666
markup.heading, markup.heading entity.name#D5FF80bold
markup.underline.link, string.other.link#5CCFE6
markup.italic#F28779italic
markup.bold#F28779bold
markup.italic markup.bold, markup.bold markup.italicbold italic
meta.separator#B8CFE680bold
markup.quote#95E6CBitalic
markup.list punctuation.definition.list.begin#FFD173
markup.inserted#87D96C
markup.changed#80BFFF
markup.deleted#F27983
markup.strike#FFDFB3
markup.table#5CCFE6
text.html.markdown markup.inline.raw#F29E74
text.html.markdown meta.dummy.line-break#B8CFE680
punctuation.definition.markdown#B8CFE680
comment#B6CEC680italic
string, constant.other.symbol#7ABC24
string.regexp, constant.character, constant.other#52F1F4
constant.numeric#FC834A
constant.language#FC834A
variable, variable.parameter.function-call#EFE2BE
variable.member#EE6559
variable.language#0FE3E6italic
storage#FDA349
keyword#FDA349
keyword.operator#EE6559
punctuation.separator, punctuation.terminator#EFE2BEB3
punctuation.section#EFE2BE
punctuation.accessor#EE6559
punctuation.definition.template-expression#FDA349
punctuation.section.embedded#FDA349
meta.embedded#EFE2BE
source.java storage.type, source.haskell storage.type, source.c storage.type#0FE3E6
entity.other.inherited-class#0FE3E6
storage.type.function#FDA349
source.java storage.type.primitive#0FE3E6
entity.name.function#FFCD70
variable.parameter, meta.parameter#FC834A
variable.function, variable.annotation, meta.function-call.generic, support.function.go#FFCD70
support.function, support.macro#EE6559
entity.name.import, entity.name.package#7ABC24
entity.name#0FE3E6
entity.name.tag, meta.tag.sgml#0FE3E6
support.class.component#0FE3E6
punctuation.definition.tag.end, punctuation.definition.tag.begin, punctuation.definition.tag#0FE2E6BB
entity.other.attribute-name#FFCD70
support.constant#FC834Aitalic
support.type, support.class, source.go storage.type#0FE3E6
meta.decorator variable.other, meta.decorator punctuation.decorator, storage.type.annotation#F7F1DE
invalid#EB4C3D
meta.diff, meta.diff.header#C594C5
source.ruby variable.other.readwrite#FFCD70
source.css entity.name.tag, source.sass entity.name.tag, source.scss entity.name.tag, source.less entity.name.tag, source.stylus entity.name.tag#0FE3E6
source.css support.type, source.sass support.type, source.scss support.type, source.less support.type, source.stylus support.type#B6CEC680
support.type.property-name#0FE3E6
constant.numeric.line-number.find-in-files - match#B6CEC680
constant.numeric.line-number.match#FDA349
entity.name.filename.find-in-files#7ABC24
message.error#EB4C3D
markup.heading, markup.heading entity.name#7ABC24bold
markup.underline.link, string.other.link#0FE3E6
markup.italic#EE6559italic
markup.bold#EE6559bold
markup.italic markup.bold, markup.bold markup.italicbold italic
meta.separator#B6CEC680bold
markup.quote#52F1F4italic
markup.list punctuation.definition.list.begin#FFCD70
markup.inserted#7FDD40
markup.changed#0A9396
markup.deleted#B92113
markup.strike#F7F1DE
markup.table#0FE3E6
text.html.markdown markup.inline.raw#FC834A
text.html.markdown meta.dummy.line-break#B6CEC680
punctuation.definition.markdown#B6CEC680
token.info-token#708DFF
token.warn-token#FFB01F
token.error-token#DE2817
token.debug-token#EE2F75

Shiki preview

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

Loading...

Duck Story - Coding Theme