Skip to main content
CodingTheme

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#242830
  • activityBar.border#2b303a
  • activityBar.foreground#d4d4d4
  • activityBarBadge.background#c34b07
  • activityBarBadge.foreground#ffffffe6
  • badge.background#d04f07
  • badge.foreground#ffffffe6
  • button.background#c34b07
  • button.foreground#ffffffe6
  • button.hoverBackground#d04f07
  • debugExceptionWidget.background#ec353a
  • debugExceptionWidget.border#ec353a
  • diffEditor.insertedTextBackground#69b4691a
  • diffEditor.removedTextBackground#ec353a1a
  • dropdown.background#20242b
  • dropdown.border#282c35
  • dropdown.foreground#d4d4d4
  • dropdown.listBackground#282c35
  • editor.background#282c35
  • editor.findMatchBackground#f2d98c3c
  • editor.findMatchHighlightBackground#ffffff16
  • editor.foreground#d4d4d4
  • editor.inactiveSelectionBackground#ffffff10
  • editor.lineHighlightBackground#ffffff0d
  • editor.rangeHighlightBackground#ffffff16
  • editor.selectionBackground#ffffff1a
  • editor.selectionHighlightBackground#ffffff16
  • editor.wordHighlightBackground#ffffff16
  • editor.wordHighlightStrongBackground#ffffff1a
  • editorBracketMatch.background#ffffff16
  • editorBracketMatch.border#ffffff16
  • editorCodeLens.foreground#ffffff16
  • editorCursor.foreground#de935e
  • editorError.foreground#f4878a
  • editorGroup.border#ffffff12
  • editorGroup.dropBackground#242830cc
  • editorGroupHeader.noTabsBackground#20242b
  • editorGroupHeader.tabsBackground#20242b
  • editorGroupHeader.tabsBorder#2b303a
  • editorGutter.addedBackground#99cc99b3
  • editorGutter.background#2c303a
  • editorGutter.deletedBackground#f2777ab3
  • editorGutter.modifiedBackground#ffcc66b3
  • editorHoverWidget.background#282c35
  • editorLineNumber.activeForeground#ffffff5a
  • editorLineNumber.foreground#ffffff33
  • editorLink.activeForeground#82a3bf
  • editorMarkerNavigation.background#242830
  • editorMarkerNavigationError.background#f2777ab3
  • editorMarkerNavigationWarning.background#ffcc66b3
  • editorOverviewRuler.addedForeground#69b469
  • editorOverviewRuler.border#ffffff12
  • editorOverviewRuler.currentContentForeground#3d7ab81a
  • editorOverviewRuler.deletedForeground#ec353a
  • editorOverviewRuler.errorForeground#ec353a
  • editorOverviewRuler.findMatchForeground#f2d98c3c
  • editorOverviewRuler.incomingContentForeground#ffb41f1a
  • editorOverviewRuler.infoForeground#ffb41f
  • editorOverviewRuler.modifiedForeground#ffb41f
  • editorOverviewRuler.rangeHighlightForeground#ffffff16
  • editorOverviewRuler.selectionHighlightForeground#ffffff16
  • editorOverviewRuler.warningForeground#ffb41f
  • editorOverviewRuler.wordHighlightForeground#ffffff1a
  • editorOverviewRuler.wordHighlightStrongForeground#ffffff1a
  • editorRuler.foreground#ffffff1a
  • editorSuggestWidget.background#242830
  • editorSuggestWidget.border#242830
  • editorSuggestWidget.foreground#d4d4d4
  • editorSuggestWidget.selectedBackground#ffffff26
  • editorWarning.foreground#ffd278
  • editorWhitespace.foreground#ffffff16
  • editorWidget.background#242830
  • editorWidget.border#1d2026
  • errorForeground#f4878a
  • extensionButton.prominentBackground#c34b07
  • extensionButton.prominentForeground#ffffffe6
  • extensionButton.prominentHoverBackground#a94106
  • focusBorder#ffffff33
  • foreground#d4d4d4
  • gitDecoration.conflictingResourceForeground#ffd278
  • gitDecoration.deletedResourceForeground#f4878a
  • gitDecoration.ignoredResourceForeground#d4d4d4a6
  • gitDecoration.modifiedResourceForeground#71a1d0
  • gitDecoration.untrackedResourceForeground#a5d2a5
  • input.background#20242b
  • input.border#282c35
  • input.foreground#d4d4d4
  • input.placeholderForeground#d4d4d4a6
  • inputOption.activeBorder#242830
  • inputValidation.errorBackground#20242b
  • inputValidation.errorBorder#ec353a
  • inputValidation.infoBackground#20242b
  • inputValidation.infoBorder#3d7ab8
  • inputValidation.warningBackground#20242b
  • inputValidation.warningBorder#ffb41f
  • list.activeSelectionBackground#ffffff26
  • list.activeSelectionForeground#ffffff
  • list.dropBackground#ffffff1a
  • list.focusBackground#ffffff33
  • list.focusForeground#ffffff
  • list.highlightForeground#f76716
  • list.hoverBackground#ffffff1a
  • list.hoverForeground#ffffff
  • list.inactiveFocusBackground#ffffff1f
  • list.inactiveSelectionBackground#ffffff21
  • list.inactiveSelectionForeground#ffffff
  • list.invalidItemForeground#f4878a
  • merge.border#ec353a
  • merge.currentContentBackground#3d7ab81a
  • merge.currentHeaderBackground#3d7ab8
  • merge.incomingContentBackground#ffb41f1a
  • merge.incomingHeaderBackground#ffb41f
  • notificationCenter.border#a94106
  • notificationCenterHeader.background#a94106
  • notificationCenterHeader.foreground#ffffffe6
  • notificationLink.foreground#82a3bf
  • notifications.background#1d2026
  • notifications.border#1d2026
  • notifications.foreground#fefefe
  • notificationToast.border#242830
  • panel.background#1d2026
  • panel.border#2b303a
  • panelTitle.activeBorder#a94106
  • panelTitle.activeForeground#fefefe
  • panelTitle.inactiveForeground#aaaaaa
  • peekView.border#242830
  • peekViewEditor.background#282c35
  • peekViewEditor.matchHighlightBackground#ffffff16
  • peekViewEditorGutter.background#282c35
  • peekViewResult.background#282c35
  • peekViewResult.fileForeground#d4d4d4
  • peekViewResult.lineForeground#d4d4d4
  • peekViewResult.matchHighlightBackground#ffffff16
  • peekViewResult.selectionBackground#ffffff1a
  • peekViewResult.selectionForeground#d4d4d4
  • peekViewTitle.background#20242b
  • peekViewTitleDescription.foreground#aaaaaa
  • peekViewTitleLabel.foreground#e9e9e9
  • pickerGroup.border#282c35
  • pickerGroup.foreground#bfbfbf
  • progressBar.background#f76716
  • scrollbar.shadow#121418
  • scrollbarSlider.activeBackground#d4d4d44d
  • scrollbarSlider.background#d4d4d41a
  • scrollbarSlider.hoverBackground#d4d4d433
  • selection.background#6699ccb3
  • sideBar.background#242830
  • sideBar.border#242830
  • sideBar.foreground#d4d4d4
  • sideBarSectionHeader.background#2b303a
  • sideBarSectionHeader.foreground#aaaaaa
  • sideBarTitle.foreground#bfbfbf
  • statusBar.background#1d2026
  • statusBar.border#2b303a
  • statusBar.debuggingBackground#c34b07
  • statusBar.debuggingForeground#ffffffe6
  • statusBar.foreground#ffffffcc
  • statusBar.noFolderBackground#2b303a
  • statusBar.noFolderForeground#aaaaaa
  • statusBarItem.activeBackground#ffffff26
  • statusBarItem.hoverBackground#ffffff1a
  • statusBarItem.prominentBackground#a94106
  • statusBarItem.prominentHoverBackground#d04f07
  • tab.activeBackground#2b303a
  • tab.activeBorder#a94106
  • tab.activeForeground#fefefe
  • tab.border#2b303a
  • tab.hoverBackground#2b303a
  • tab.inactiveBackground#1d2026
  • tab.inactiveForeground#bfbfbf
  • tab.unfocusedActiveForeground#bfbfbf
  • tab.unfocusedHoverBackground#2b303a
  • tab.unfocusedInactiveForeground#aaaaaa
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#427ab3
  • terminal.ansiBrightBlack#686a66
  • terminal.ansiBrightBlue#84b0d8
  • terminal.ansiBrightCyan#37e6e8
  • terminal.ansiBrightGreen#99e343
  • terminal.ansiBrightMagenta#bc94b7
  • terminal.ansiBrightRed#f54235
  • terminal.ansiBrightWhite#f1f1f0
  • terminal.ansiBrightYellow#fdeb61
  • terminal.ansiCyan#00a7aa
  • terminal.ansiGreen#5ea702
  • terminal.ansiMagenta#89658e
  • terminal.ansiRed#d81e00
  • terminal.ansiWhite#dbded8
  • terminal.ansiYellow#cfae00
  • terminal.background#1d2026
  • terminal.foreground#d4d4d4
  • terminal.selectionBackground#c1deff5a
  • titleBar.activeBackground#1d2026
  • titleBar.activeForeground#fefefe
  • titleBar.border#1d2026
  • titleBar.inactiveBackground#282c35
  • titleBar.inactiveForeground#bfbfbf
  • walkThrough.embeddedEditorBackground#242830
  • widget.shadow#121418

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment.line#617ca3italic
comment.block#617ca3italic
comment.block.documentation#92949Eitalic
constant.numeric#d19971
constant.numeric.integer#d19971
constant.numeric.float#d19971
constant.numeric.hex#d19971
constant.numeric.binary#d19971
constant.language#c08888italic
constant.language.boolean#c08888italic
constant.language.null#c08888italic
constant.other#617ca3
constant.character#ffb882
constant.character.escape#ffb882
entity.name.class#d5bc88
entity.name.function#82A3BF
entity.name.function.declaration#82A3BF
entity.name.function.call#82A3BF
entity.name.type#6eafa4
entity.name.variable#b99067
entity.name.constant#617ca3
entity.other.attribute-name#abbad3italic
entity.other.attribute-name.id#af7575
entity.other.attribute-name.class#af7575
entity.other.inherited-class#d5bc88
keyword.control#B295BB
keyword.control.conditional#B294BB
keyword.control.loop#B294BB
keyword.control.exception#B294BB
keyword.control.import#B294BB
keyword.control.export#B294BB
keyword.operator#7bcbbd
keyword.operator.assignment#8ABEB7
keyword.operator.arithmetic#8ABEB7
keyword.operator.logical#72b4a9
keyword.operator.comparison#8ABEB7
keyword.operator.bitwise#8ABEB7
keyword.operator.ternary#8ABEB7
keyword.operator.increment#8ABEB7
keyword.operator.decrement#8ABEB7
keyword.other#6eafa4
keyword.other.unit#d19971
keyword.type#6eafa4
storage.type#B295BB
storage.modifier#b99067
string.quoted.double#FFD278
string.quoted.single#d5bc88
string.quoted.template#FFD278
string.unquoted#FFD278
string.interpolated#FFD278
string.regexp#FFD278
punctuation.definition.string.begin#C8CEC9
punctuation.definition.string.end#C8CEC9
punctuation.definition.string.template.begin#C8CEC9
punctuation.definition.string.template.end#C8CEC9
punctuation.separator#C8CEC9
punctuation.accessor#8ABEB7
punctuation.bracket#C8CEC9
punctuation.bracket.round#C8CEC9
punctuation.bracket.square#C8CEC9
punctuation.bracket.curly#C8CEC9
punctuation.terminator#C8CEC9
markup.bold#E9B36Dbold
markup.italic#E9B36Ditalic
markup.underline#E9B36Dunderline
markup.strikethrough#E9B36Dstrikethrough
markup.quote#ffd280
markup.heading.1#CC6666bold
markup.heading.2#CC6666bold
markup.heading.3#CC6666bold
markup.heading.4#CC6666
markup.heading.5#CC6666
markup.heading.6#CC6666
markup.list.numbered#B2B4B2
markup.list.bullet#B2B4B2
markup.code#C8CEC9
markup.raw#C8CEC9
markup.link#82A3BF
markup.link.url#82A3BF
markup.link.reference#82A3BF
meta.block#888A88
meta.block.scope#888A88
meta.function#92B3CF
meta.function.declaration#92B3CF
meta.function.parameters#A2C3DF
meta.function-call#92B3CF
meta.class#86CFA4
meta.class.declaration#86CFA4
meta.interface#86CFA4
meta.interface.declaration#86CFA4
meta.module#92B3CF
meta.module.declaration#92B3CF
meta.import#C2A5CB
meta.export#C2A5CB
meta.require#B2B4B2
meta.annotation#7896c9
meta.decorator#7896c9
meta.directive#B295BB
variable.parameter#b3e6e4
variable.language#b99067
variable.language.this#b99067
variable.language.self#b99067
variable.other#b99067
variable.other.readwrite#b99067
variable.other.constant#82A3BFbold
variable.other.global#b99067
support.class#d5bc88
support.function#82A3BF
support.constant#d0aa8d
support.type#6eafa4
support.module#82A3BF
invalid.illegal#F4878A
invalid.deprecated#F4878Aitalic
token.error-token#F4878A
token.warn-token#FFD278
token.info-token#71A1D0
token.debug-token#82A3BF
constant.color.aqua#00BCD4
constant.color.black#363A45
constant.color.blue#7260d9
constant.color.fuchsia#E040FB
constant.color.gray#7A7D88
constant.color.green#4CAF50
constant.color.lime#00E676
constant.color.maroon#880E4F
constant.color.navy#9582ea
constant.color.olive#808000
constant.color.orange#FF9800
constant.color.purple#9C27B0
constant.color.red#FF5252
constant.color.silver#B2B5BE
constant.color.teal#4eb9ad
constant.color.white#FFFFFF
constant.color.yellow#dfd577
markup.changed.diff#A5D2A5
markup.deleted.diff#F4878A
markup.inserted.diff#A5D2A5
meta.diff.header#C8CEC9bold
variable.other.diff#b99067
entity.name#eaeaea
markup.ignored#7896c9
markup.untracked#7896c9
markup.raw.block#C8CEC9
markup.inline.raw#C8CEC9
markup.paragraph#B2B4B2
meta.paragraph.list.numbered#B2B4B2
meta.paragraph.blockquote#BEC1BEitalic
meta.block-level#BEC1BEitalic
comment#9799A3italic
punctuation.definition.comment#617ca3
punctuation.definition.bold#E9B36D
punctuation.definition.italic#E9B36D
punctuation.definition.underline#E9B36D
punctuation.definition.strikethrough#E9B36D
punctuation.definition.quote#ffd280
punctuation.definition.heading#CC6666
punctuation.definition.list#B2B4B2
punctuation.definition.code#C8CEC9
punctuation.definition.raw#C8CEC9
punctuation.definition.link#82A3BF
punctuation.separator.key-value#C8CEC9
punctuation.separator.parameter#C8CEC9
punctuation.separator.element#C8CEC9
punctuation.separator.object#C8CEC9
punctuation.separator.array#C8CEC9
punctuation.section.block#C8CEC9
punctuation.section.group#C8CEC9
punctuation.section.braces#C8CEC9
punctuation.section.brackets#C8CEC9
punctuation.section.parens#C8CEC9
entity.name.module#82A3BF
entity.name.namespace#82A3BF
entity.name.enum#82A3BF
entity.name.interface#82A3BF
entity.name.decorator#7896c9
entity.name.annotation#7896c9
variable.other.property#b99067
variable.other.object#b99067
variable.other.member#b99067
variable.other.instance#b99067
variable.other.readwrite.instance#b99067
variable.other.constant.instance#82A3BFbold
variable.language.constructor#b99067
variable.language.super#b99067
keyword.operator.new#7bcbbd
keyword.operator.delete#7bcbbd
keyword.operator.typeof#7bcbbd
keyword.operator.instanceof#7bcbbd
keyword.operator.void#7bcbbd
keyword.operator.expression#7bcbbd
keyword.operator.control.flow#B294BB
keyword.operator.control.exception#B294BB
keyword.operator.control.loop#B294BB
keyword.operator.control.conditional#B294BB
keyword.operator.control.import#B294BB
keyword.operator.control.export#B294BB
keyword.operator.control.directive#B295BB
keyword.operator.control.module#B295BB
keyword.operator.control.class#B295BB
keyword.operator.control.interface#B295BB
entity.name.function.method#82A3BF
entity.name.function.constructor#82A3BF
entity.name.function.setter#82A3BF
entity.name.function.getter#82A3BF
entity.name.type.class#6eafa4
entity.name.type.interface#6eafa4
entity.name.type.enum#6eafa4
entity.name.type.module#6eafa4
entity.name.type.namespace#6eafa4

Shiki preview

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

Loading...