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#3d7ab833
  • merge.incomingContentBackground#ffb41f1a
  • merge.incomingHeaderBackground#ffb41f88
  • 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.block.documentation#A8AAABitalic
comment.block#959795italic
comment.line#959795italic
comment#959795italic
constant.character.escape#d09365
constant.character#ffd782
constant.color.aqua#00BCD4
constant.color.black#363A45
constant.color.blue#7260d9
constant.color.fuchsia#E040FB
constant.color.gray#787B86
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
constant.language.boolean#d3a4a4italic
constant.language.null#CD9494italic
constant.language#c6929eitalic
constant.numeric.binary#d19971
constant.numeric.float#d19971
constant.numeric.hex#d19971
constant.numeric.integer#d19971
constant.numeric#e0aa6d
constant.other#617ca3
entity.name.annotation#7896c9
entity.name.class#d5bc88
entity.name.constant#617ca3
entity.name.decorator#7896c9
entity.name.enum#7594B2
entity.name.function.call#82A3BF
entity.name.function.constructor#82A3BF
entity.name.function.declaration#82A3BF
entity.name.function.getter#82A3BF
entity.name.function.method#82A3BF
entity.name.function.setter#82A3BF
entity.name.function#82A3BF
entity.name.interface#7594B2
entity.name.module#7594B2
entity.name.namespace#7594B2
entity.name.storage.type#6e9fA4italic bold
entity.name.type.class#6eafa4
entity.name.type.enum#6eafa4
entity.name.type.interface#6eafa4
entity.name.type.module#6eafa4
entity.name.type.namespace#6eafa4
entity.name.type#6eafa4italic bold
entity.name.variable#b99067
entity.name#eaeaea
entity.other.attribute-name.class#ba7866
entity.other.attribute-name.id#af7575
entity.other.attribute-name#abbad3italic
entity.other.inherited-class#d5bc88
invalid.deprecated#F4878Aitalic
invalid.illegal#F4878A
keyword.control.conditional#B295BB
keyword.control.exception#B295BB
keyword.control.export#B295BB
keyword.control.import#B295BB
keyword.control.loop#9a7da3italic
keyword.control#B295BB
keyword.operator.arithmetic#8ABEB7
keyword.operator.assignment#8ABEB7
keyword.operator.bitwise#8ABEB7
keyword.operator.comparison#8ABEB7
keyword.operator.control.class#B295BB
keyword.operator.control.conditional#B295BB
keyword.operator.control.directive#B295BB
keyword.operator.control.exception#B295BB
keyword.operator.control.export#B295BB
keyword.operator.control.flow#B295BB
keyword.operator.control.import#B295BB
keyword.operator.control.interface#B295BB
keyword.operator.control.loop#B295BB
keyword.operator.control.module#B295BB
keyword.operator.decrement#8ABEB7
keyword.operator.delete#8ABEB7
keyword.operator.expression#8ABEB7
keyword.operator.increment#8ABEB7
keyword.operator.instanceof#8ABEB7
keyword.operator.logical#94CFC7
keyword.operator.new#7ab9b0
keyword.operator.ternary#8ABEB7
keyword.operator.typeof#8ABEB7
keyword.operator.void#a081e4
keyword.operator#8ABEB7
keyword.other.unit#C08A64
keyword.other#CACECB
keyword.type#6eafa4
markup.bold#E9B36Dbold
markup.changed.diff#A5D2A5
markup.code#B9BEC0
markup.deleted.diff#F4878A
markup.heading.1#CC6666bold
markup.heading.2#CC6666bold
markup.heading.3#CC6666bold
markup.heading.4#D37373
markup.heading.5#DA8080
markup.heading.6#E18D8D
markup.ignored#787B86
markup.inline.raw#B9BEC0
markup.inserted.diff#A5D2A5
markup.italic#F0BC78italic
markup.link.reference#A7D5F0
markup.link.url#A7D5F0
markup.link#A7D5F0
markup.list.bullet#AFB1AF
markup.list.numbered#AFB1AF
markup.paragraph#AFB1AF
markup.quote#ffd280
markup.raw.block#B9BEC0
markup.raw#B9BEC0
markup.strikethrough#D6A15Estrikethrough
markup.underline#E0AA66underline
markup.untracked#787B86
meta.annotation#7896c9
meta.block-level#BCBDBCitalic
meta.block.scope#A3A5A7
meta.block#A3A5A7
meta.class.declaration#A3A5A7
meta.class#A3A5A7
meta.decorator#7896c9
meta.diff.header#D8DADEbold
meta.directive#B295BB
meta.export#A3A5A7
meta.function-call#A3A5A7
meta.function.declaration#A3A5A7
meta.function.parameters#A3A5A7
meta.function#A3A5A7
meta.import#A3A5A7
meta.interface.declaration#A3A5A7
meta.interface#A3A5A7
meta.module.declaration#9e69a5
meta.module#9e69a5
meta.paragraph.blockquote#BCBDBCitalic
meta.paragraph.list.numbered#AFB1AF
meta.require#A3A5A7
punctuation.accessor#94CFC7
punctuation.bracket.curly#C5C9C6
punctuation.bracket.round#C5C9C6
punctuation.bracket.square#C5C9C6
punctuation.bracket#C5C9C6
punctuation.definition.bold#E9B36D
punctuation.definition.code#B9BEC0
punctuation.definition.comment#959795
punctuation.definition.heading#CC6666
punctuation.definition.italic#F0BC78
punctuation.definition.link#A7D5F0
punctuation.definition.list#AFB1AF
punctuation.definition.quote#ffd280
punctuation.definition.raw#B9BEC0
punctuation.definition.strikethrough#D6A15E
punctuation.definition.string.begin#C5C9C6
punctuation.definition.string.end#C5C9C6
punctuation.definition.string.template.begin#C5C9C6
punctuation.definition.string.template.end#C5C9C6
punctuation.definition.underline#E0AA66
punctuation.section.block#C5C9C6
punctuation.section.braces#C5C9C6
punctuation.section.brackets#C5C9C6
punctuation.section.group#C5C9C6
punctuation.section.parens#C5C9C6
punctuation.separator.array#C5C9C6
punctuation.separator.element#C5C9C6
punctuation.separator.key-value#C5C9C6
punctuation.separator.object#C5C9C6
punctuation.separator.parameter#C5C9C6
punctuation.separator#C5C9C6
punctuation.terminator#C5C9C6
storage.modifier#afd6f7
storage.type#b18bcb
string.interpolated#FFD278
string.quoted.double#FFD278
string.quoted.single#FFD278
string.quoted.template#e6bd6d
string.regexp#ceaf71
string.unquoted#FFD278
support.class#d5bc88
support.constant#d0aa8d
support.function#82A3BF
support.module#b184cb
support.type#6eafa4
token.debug-token#7594B2
token.error-token#F4878A
token.info-token#71A1D0
token.warn-token#FFC86A
variable.language.constructor#b99067
variable.language.self#ca8852
variable.language.super#b99067
variable.language.this#d5985c
variable.language#b66b67
variable.other.constant.instance#87CEEBbold
variable.other.constant#87CEEBbold
variable.other.diff#FFDAB9
variable.other.global#FFDAB9
variable.other.instance#FFDAB9
variable.other.member#FFDAB9
variable.other.object#FFDAB9
variable.other.property#FFDAB9
variable.other.readwrite.instance#FFDAB9
variable.other.readwrite#FFDAB9
variable.other#FFDAB9
variable.parameter#c7e492

Shiki preview

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

Loading...

Pine Script v6 by TradesDontLie - VS Code Theme