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.activeBorder#ffcc66b3
  • activityBar.background#212733
  • activityBar.border#212733
  • activityBar.foreground#707a8ccc
  • activityBar.inactiveForeground#707a8c99
  • activityBarBadge.background#ffcc66
  • activityBarBadge.foreground#212733
  • badge.background#ffcc6633
  • badge.foreground#ffcc66
  • button.background#ffcc66
  • button.foreground#212733
  • button.hoverBackground#fac761
  • button.secondaryBackground#707a8c33
  • button.secondaryForeground#cccac2
  • button.secondaryHoverBackground#707a8c80
  • debugConsoleInputIcon.foreground#ffcc66
  • debugExceptionWidget.background#1c212b
  • debugExceptionWidget.border#171b24
  • debugIcon.breakpointDisabledForeground#f29e7480
  • debugIcon.breakpointForeground#f29e74
  • debugToolBar.background#1c212b
  • descriptionForeground#707a8c
  • diffEditor.diagonalFill#171b24
  • diffEditor.insertedTextBackground#87d96c1f
  • diffEditor.removedTextBackground#f279831f
  • dropdown.background#242936
  • dropdown.border#707a8c45
  • dropdown.foreground#707a8c
  • editor.background#212733
  • editor.findMatchBackground#695380
  • editor.findMatchBorder#695380
  • editor.findMatchHighlightBackground#69538066
  • editor.findMatchHighlightBorder#5c467266
  • editor.findRangeHighlightBackground#69538040
  • editor.foreground#cccac2
  • editor.inactiveSelectionBackground#409fff21
  • editor.lineHighlightBackground#202735
  • editor.rangeHighlightBackground#69538033
  • editor.selectionBackground#409fff40
  • editor.selectionHighlightBackground#87d96c26
  • editor.selectionHighlightBorder#87d96c00
  • editor.snippetTabstopHighlightBackground#87d96c33
  • editor.wordHighlightBackground#80bfff14
  • editor.wordHighlightBorder#80bfff80
  • editor.wordHighlightStrongBackground#87d96c14
  • editor.wordHighlightStrongBorder#87d96c80
  • editorBracketMatch.background#8a91994d
  • editorBracketMatch.border#8a91994d
  • editorCodeLens.foreground#b8cfe680
  • editorCursor.foreground#ffcc66
  • editorError.foreground#ff6666
  • editorGroup.background#1c212b
  • editorGroup.border#171b24
  • editorGroupHeader.noTabsBackground#212733
  • editorGroupHeader.tabsBackground#212733
  • editorGroupHeader.tabsBorder#212733
  • editorGutter.addedBackground#87d96ccc
  • editorGutter.deletedBackground#f27983cc
  • editorGutter.modifiedBackground#80bfffcc
  • editorHoverWidget.background#1c212b
  • editorHoverWidget.border#171b24
  • editorIndentGuide.activeBackground#8a919959
  • editorIndentGuide.background#8a91992e
  • editorLineNumber.activeForeground#8a9199cc
  • editorLineNumber.foreground#8a919966
  • editorLink.activeForeground#ffcc66
  • editorMarkerNavigation.background#1c212b
  • editorOverviewRuler.addedForeground#87d96c
  • editorOverviewRuler.border#171b24
  • editorOverviewRuler.bracketMatchForeground#8a9199b3
  • editorOverviewRuler.deletedForeground#f27983
  • editorOverviewRuler.errorForeground#ff6666
  • editorOverviewRuler.findMatchForeground#695380
  • editorOverviewRuler.modifiedForeground#80bfff
  • editorOverviewRuler.warningForeground#ffcc66
  • editorOverviewRuler.wordHighlightForeground#80bfff66
  • editorOverviewRuler.wordHighlightStrongForeground#87d96c66
  • editorRuler.foreground#8a91992e
  • editorSuggestWidget.background#1c212b
  • editorSuggestWidget.border#171b24
  • editorSuggestWidget.highlightForeground#ffcc66
  • editorSuggestWidget.selectedBackground#63759926
  • editorWarning.foreground#ffcc66
  • editorWhitespace.foreground#8a919966
  • editorWidget.background#1c212b
  • editorWidget.border#171b24
  • errorForeground#ff6666
  • extensionButton.prominentBackground#ffcc66
  • extensionButton.prominentForeground#242936
  • extensionButton.prominentHoverBackground#fac761
  • focusBorder#ffcc66b3
  • foreground#707a8c
  • gitDecoration.conflictingResourceForeground
  • gitDecoration.deletedResourceForeground#f27983b3
  • gitDecoration.ignoredResourceForeground#707a8c80
  • gitDecoration.modifiedResourceForeground#80bfffb3
  • gitDecoration.submoduleResourceForeground#dfbfffb3
  • gitDecoration.untrackedResourceForeground#87d96cb3
  • icon.foreground#707a8c
  • input.background#242936
  • input.border#707a8c45
  • input.foreground#cccac2
  • input.placeholderForeground#707a8c80
  • inputOption.activeBackground#ffcc6633
  • inputOption.activeBorder#ffcc664d
  • inputOption.activeForeground#ffcc66
  • inputValidation.errorBackground#242936
  • inputValidation.errorBorder#ff6666
  • inputValidation.infoBackground#212733
  • inputValidation.infoBorder#5ccfe6
  • inputValidation.warningBackground#212733
  • inputValidation.warningBorder#ffd173
  • keybindingLabel.background#707a8c1a
  • keybindingLabel.border#cccac21a
  • keybindingLabel.bottomBorder#cccac21a
  • keybindingLabel.foreground#cccac2
  • list.activeSelectionBackground#63759926
  • list.activeSelectionForeground#cccac2
  • list.deemphasizedForeground#ff6666
  • list.errorForeground#ff6666
  • list.filterMatchBackground#5c467266
  • list.filterMatchBorder#69538066
  • list.focusBackground#63759926
  • list.focusForeground#cccac2
  • list.focusOutline#63759926
  • list.highlightForeground#ffcc66
  • list.hoverBackground#63759926
  • list.inactiveSelectionBackground#69758c1f
  • list.inactiveSelectionForeground#707a8c
  • list.invalidItemForeground#707a8c4d
  • listFilterWidget.background#1c212b
  • listFilterWidget.noMatchesOutline#ff6666
  • listFilterWidget.outline#ffcc66
  • minimap.background#212733
  • minimap.errorHighlight#ff6666
  • minimap.findMatchHighlight#695380
  • minimap.selectionHighlight#409fff40
  • minimapGutter.addedBackground#87d96c
  • minimapGutter.deletedBackground#f27983
  • minimapGutter.modifiedBackground#80bfff
  • panel.background#212733
  • panel.border#171b24
  • panelTitle.activeBorder#ffcc66
  • panelTitle.activeForeground#cccac2
  • panelTitle.inactiveForeground#707a8c
  • peekView.border#63759926
  • peekViewEditor.background#1c212b
  • peekViewEditor.matchHighlightBackground#69538066
  • peekViewEditor.matchHighlightBorder#5c467266
  • peekViewResult.background#1c212b
  • peekViewResult.fileForeground#cccac2
  • peekViewResult.lineForeground#707a8c
  • peekViewResult.matchHighlightBackground#69538066
  • peekViewResult.selectionBackground#63759926
  • peekViewTitle.background#63759926
  • peekViewTitleDescription.foreground#707a8c
  • peekViewTitleLabel.foreground#cccac2
  • pickerGroup.border#171b24
  • pickerGroup.foreground#707a8c80
  • progressBar.background#ffcc66
  • scrollbar.shadow#171b2400
  • scrollbarSlider.activeBackground#707a8cb3
  • scrollbarSlider.background#707a8c66
  • scrollbarSlider.hoverBackground#707a8c99
  • selection.background#409fff40
  • settings.headerForeground#cccac2
  • settings.modifiedItemIndicator#80bfff
  • sideBar.background#212733
  • sideBar.border#212733
  • sideBarSectionHeader.background#212733
  • sideBarSectionHeader.border#212733
  • sideBarSectionHeader.foreground#707a8c
  • sideBarTitle.foreground#707a8c
  • statusBar.background#212733
  • statusBar.border#212733
  • statusBar.debuggingBackground#f29e74
  • statusBar.debuggingForeground#242936
  • statusBar.foreground#707a8c
  • statusBar.noFolderBackground#1c212b
  • statusBarItem.activeBackground#707a8c33
  • statusBarItem.hoverBackground#707a8c33
  • statusBarItem.prominentBackground#171b24
  • statusBarItem.prominentHoverBackground#00000030
  • statusBarItem.remoteBackground#ffcc66
  • statusBarItem.remoteForeground#242936
  • tab.activeBackground#212733
  • tab.activeBorder#ffcc66
  • tab.activeForeground#cccac2
  • tab.border#212733
  • tab.inactiveBackground#212733
  • tab.inactiveForeground#707a8c
  • tab.unfocusedActiveBorder#707a8c
  • tab.unfocusedActiveForeground#707a8c
  • tab.unfocusedInactiveForeground#707a8c
  • terminal.ansiBlack#171b24
  • terminal.ansiBlue#6dcbfa
  • terminal.ansiBrightBlack#686868
  • terminal.ansiBrightBlue#569CD6
  • terminal.ansiBrightCyan#95e6cb
  • terminal.ansiBrightGreen#d5ff80
  • terminal.ansiBrightMagenta#dfbfff
  • terminal.ansiBrightRed#f28779
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#ffd173
  • terminal.ansiCyan#90e1c6
  • terminal.ansiGreen#87d96c
  • terminal.ansiMagenta#dabafa
  • terminal.ansiRed#ed8274
  • terminal.ansiWhite#c7c7c7
  • terminal.ansiYellow#facc6e
  • terminal.background#212733
  • terminal.foreground#cccac2
  • textBlockQuote.background#1c212b
  • textLink.activeForeground#ffcc66
  • textLink.foreground#ffcc66
  • textPreformat.foreground#cccac2
  • titleBar.activeBackground#212733
  • titleBar.activeForeground#cccac2
  • titleBar.border#212733
  • titleBar.inactiveBackground#212733
  • titleBar.inactiveForeground#707a8c
  • tree.indentGuidesStroke#8a919959
  • walkThrough.embeddedEditorBackground#1c212b
  • welcomePage.buttonBackground#ffcc6666
  • welcomePage.progress.background#1a1f29
  • welcomePage.tileBackground#212733
  • welcomePage.tileShadow#12151cb3
  • widget.shadow#12151cb3

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#cccac2
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#569CD6
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#569CD6
entity.name.tag, meta.tag.sgml#5ccfe6
support.class.component#569CD6
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#569CD6
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#5ccfe6normal
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
markup.raw
markup.raw.inline
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

Shiki preview

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

Loading...

Dull Sun (Dun) - Coding Theme