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#27272A
  • activityBar.border#363636
  • activityBar.foreground#ffffff
  • activityBarBadge.background#ff0000
  • activityBarBadge.foreground#ffffff
  • badge.background#ff0000
  • badge.foreground#ffffff
  • button.background#ff0000
  • button.foreground#ffffff
  • button.hoverBackground#282828
  • debugExceptionWidget.background#16ac48
  • debugExceptionWidget.border#191e2a
  • debugToolBar.background#282828
  • diffEditor.insertedTextBackground#2c440a44
  • diffEditor.removedTextBackground#f29e7444
  • dropdown.background#0f0f0f
  • dropdown.border#363636
  • dropdown.foreground#ffffff
  • dropdown.listBackground#121212
  • editor.background#0f0f0f
  • editor.findMatchBackground#ff000090
  • editor.findMatchBorder#ff000090
  • editor.findMatchHighlightBackground#ff000044
  • editor.findMatchHighlightBorder#ff000044
  • editor.findRangeHighlightBackground#1f1f1fe8
  • editor.findRangeHighlightBorder#363636ea
  • editor.foreground#fff
  • editor.inactiveSelectionBackground#1f1f1fe8
  • editor.lineHighlightBackground#1f1f1fe8
  • editor.rangeHighlightBackground#1f1f1fe8
  • editor.selectionBackground#ff000044
  • editor.selectionHighlightBackground#ff000044
  • editor.selectionHighlightBorder#ff000044
  • editor.wordHighlightBackground#ff000044
  • editor.wordHighlightStrongBackground#ff000044
  • editorBracketMatch.background#ffffff35
  • editorBracketMatch.border#ffffff35
  • editorCodeLens.foreground#AAA
  • editorCursor.foreground#fff
  • editorError.foreground#ff0000
  • editorGroup.border#363636
  • editorGroup.dropBackground#ffffff35
  • editorGroupHeader.tabsBackground#1f1f1f
  • editorGroupHeader.tabsBorder#363636
  • editorGutter.addedBackground#a6cc7099
  • editorGutter.deletedBackground#f2798399
  • editorGutter.modifiedBackground#77a8d999
  • editorHoverWidget.background#232834
  • editorHoverWidget.border#101521
  • editorIndentGuide.activeBackground#909090
  • editorIndentGuide.background#363636
  • editorLineNumber.activeForeground#fff
  • editorLineNumber.foreground#ffffff35
  • editorLink.activeForeground#ff0000
  • editorMarkerNavigation.background#ff00002c
  • editorOverviewRuler.addedForeground#a6cc7099
  • editorOverviewRuler.border#909090
  • editorOverviewRuler.deletedForeground#f2798399
  • editorOverviewRuler.errorForeground#8b0303
  • editorOverviewRuler.modifiedForeground#77a8d999
  • editorOverviewRuler.warningForeground#ffcc66
  • editorRuler.foreground#363636
  • editorSuggestWidget.background#282828
  • editorSuggestWidget.border#363636
  • editorSuggestWidget.highlightForeground#ffcc66
  • editorSuggestWidget.selectedBackground#1f1f1f
  • editorWarning.foreground#ffcc66
  • editorWhitespace.foreground#363636
  • editorWidget.background#282828
  • extensionButton.prominentBackground#ff0000
  • extensionButton.prominentForeground#fff
  • extensionButton.prominentHoverBackground#282828
  • focusBorder#363636
  • foreground#fff
  • gitDecoration.conflictingResourceForeground#ff0000
  • gitDecoration.deletedResourceForeground#f27983b3
  • gitDecoration.ignoredResourceForeground#485e4f
  • gitDecoration.modifiedResourceForeground#77a8d9b3
  • gitDecoration.submoduleResourceForeground#d4bfffb3
  • gitDecoration.untrackedResourceForeground#a6cc70b3
  • input.background#121212
  • input.border#363636
  • input.foreground#fff
  • input.placeholderForeground#909090
  • inputOption.activeBorder#909090
  • inputValidation.errorBackground#1f1f1f
  • inputValidation.errorBorder#ff0000
  • inputValidation.infoBackground#1f1f1f
  • inputValidation.infoBorder#5ccfe6
  • inputValidation.warningBackground#1f1f1f
  • inputValidation.warningBorder#ffd580
  • list.activeSelectionBackground#ff000044
  • list.activeSelectionForeground#ffffff
  • list.focusBackground#ff000044
  • list.focusForeground#fff
  • list.highlightForeground#ff000044
  • list.hoverBackground#ff000044
  • list.hoverForeground#fff
  • list.inactiveSelectionBackground#ff000022
  • list.inactiveSelectionForeground#fff
  • list.invalidItemForeground#fffb00
  • panel.background#1f1f1f
  • panel.border#363636
  • panelTitle.activeBorder#ff0000
  • panelTitle.activeForeground#ffffff
  • panelTitle.inactiveForeground#ffffff35
  • peekView.border#363636
  • peekViewEditor.background#232834
  • peekViewEditor.matchHighlightBackground#ffcc6633
  • peekViewResult.background#232834
  • peekViewResult.fileForeground#fff
  • peekViewResult.matchHighlightBackground#ffcc6633
  • peekViewTitle.background#232834
  • peekViewTitleDescription.foreground#fff
  • peekViewTitleLabel.foreground#fff
  • pickerGroup.border#191e2a
  • pickerGroup.foreground#484f5e
  • progressBar.background#ff0000
  • scrollbar.shadow#121212
  • scrollbarSlider.activeBackground#ff0000
  • scrollbarSlider.background#282828
  • scrollbarSlider.hoverBackground#8b1b1b
  • selection.background#df1414fd
  • settings.headerForeground#fff
  • settings.modifiedItemIndicator#ff0000
  • sideBar.background#1f1f1f
  • sideBar.border#363636
  • sideBarSectionHeader.background#1f1f1f
  • sideBarSectionHeader.foreground#ffffff
  • sideBarTitle.foreground#ffffff
  • statusBar.background#1f1f1f
  • statusBar.border#363636
  • statusBar.debuggingBackground#ff0000
  • statusBar.debuggingForeground#fff
  • statusBar.foreground#ffffff
  • statusBar.noFolderBackground#1f1f1f
  • statusBarItem.activeBackground#00000050
  • statusBarItem.hoverBackground#00000030
  • statusBarItem.prominentBackground#191e2a
  • statusBarItem.prominentHoverBackground#00000030
  • tab.activeBackground#121212
  • tab.activeBorderTop#ff0000
  • tab.activeForeground#fff
  • tab.border#363636
  • tab.inactiveBackground#282828
  • tab.inactiveForeground#ffffff35
  • tab.unfocusedActiveBorderTop#909090
  • tab.unfocusedActiveForeground#ffffff35
  • tab.unfocusedInactiveForeground#ffffff35
  • terminal.ansiBlack#1f1f1f
  • terminal.ansiBlue#6dcbfa
  • terminal.ansiBrightBlack#686868
  • terminal.ansiBrightBlue#73d0ff
  • terminal.ansiBrightCyan#95e6cb
  • terminal.ansiBrightGreen#3ae374
  • terminal.ansiBrightMagenta#d4bfff
  • terminal.ansiBrightRed#ff3838
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#ffd580
  • terminal.ansiCyan#90e1c6
  • terminal.ansiGreen#a6cc70
  • terminal.ansiMagenta#cfbafa
  • terminal.ansiRed#ff3838
  • terminal.ansiWhite#ffffff
  • terminal.ansiYellow#fad07b
  • terminal.background#1f1f1f
  • terminal.foreground#cbccc6
  • textBlockQuote.background#1f1f1f
  • textLink.activeForeground#fff
  • textLink.foreground#ff0000
  • textPreformat.foreground#ffffff
  • titleBar.activeBackground#1f1f1f
  • titleBar.activeForeground#cbccc6
  • titleBar.border#363636
  • titleBar.inactiveBackground#1f1f1f
  • titleBar.inactiveForeground#ffffff
  • walkThrough.embeddedEditorBackground#09ff00
  • widget.shadow#141925

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#909090italic
string, constant.other.symbol#ffff52ccitalic
string.regexp, constant.character, constant.other#db49ffee
constant.numeric#db49ffee
constant.language#db49ffee
variable#ffffffee
meta.object-literal.key#5CCFE6
entity.name.function#15ff00ee
variable.member#f28779
variable.language#46cbffeeitalic
storage#00bcceee
keyword#ff277aee
keyword.operator#ff277aee
punctuation.separator, punctuation.terminator#ffffffee
punctuation.section#ffffffee
punctuation.accessor#ffffffee
source.java storage.type, source.haskell storage.type, source.c storage.type#73d0ffee
entity.other.inherited-class#5ccfe6ee
storage.type.function#48a7ffeeitalic
source.java storage.type.primitive#00ffddee
entity.name.function#3cffceee
variable.parameter, meta.parameter#bc9bffee
variable.function, variable.annotation, meta.function-call.generic, support.function.go#ff80ffee
support.function, support.macro#f28779
entity.name.import, entity.name.package#bae67eee
entity.name#73d0ffee
entity.name.tag, meta.tag.sgml#ff0088ee
punctuation.definition.tag.end, punctuation.definition.tag.begin, punctuation.definition.tag#5ccfe680
entity.other.attribute-name#5aff55ee
support.constant#ffa77bitalic
support.type, support.class, source.go storage.type#5ccfe6ee
meta.decorator variable.other, meta.decorator punctuation.decorator, storage.type.annotation#ffffffee
invalid#ff3333ee
meta.diff, meta.diff.header#c594c5
source.ruby variable.other.readwrite#53fb6aee
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#73d0ffee
source.css support.type, source.sass support.type, source.scss support.type, source.less support.type, source.stylus support.type#73d0ffaa
support.type.property-name#5ccfe6
constant.numeric.line-number.find-in-files - match#5c6773
constant.numeric.line-number.match#ffa759
entity.name.filename.find-in-files#bae67e
message.error#ff3333
markup.heading, markup.heading entity.name#bae67ebold
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#ff00b3bold
markup.quote#95e6cbitalic
markup.list punctuation.definition.list.begin#ffd580
markup.inserted#a6cc70
markup.changed#77a8d9
markup.deleted#f27983
markup.strike#ffe6b3
markup.table#5ccfe6
text.html.markdown markup.inline.raw#f29e74
text.html.markdown meta.dummy.line-break#5c6773
keyword.control.block#ffffffee
keyword.control.block.transition.ng#DB49FFEEitalic
keyword.control.block.kind.ng#DB49FFEEitalic
control.block.expression.ng#DB49FFEE
punctuation.definition.block.ts, meta.brace.round.ts#DB49FFEEitalic
punctuation.definition.markdown#5c6773
token.info-token#6796e6
token.warn-token#cd9731
token.error-token#f44747
token.debug-token#b267e6

Shiki preview

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

Loading...

Dsmoke Dark Theme - Coding Theme