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.

  • actionBar.toggledBackground#383a49
  • activityBar.activeBorder#F9826C
  • activityBar.background#303845
  • activityBar.border#505050
  • activityBar.foreground#D7DAE0
  • activityBar.inactiveForeground#6a737d
  • activityBarBadge.background#528BFF
  • activityBarBadge.foreground#F8FAFD
  • badge.background#528BFF
  • badge.foreground#c8e1ff
  • breadcrumb.activeSelectionForeground#d1d5da
  • breadcrumb.focusForeground#dddddd
  • breadcrumb.foreground#959da5
  • breadcrumbPicker.background#2b3036
  • button.background#176F2C
  • button.foreground#dcffe4
  • button.hoverBackground#22863a
  • button.secondaryBackground#444d56
  • button.secondaryForeground#fff
  • button.secondaryHoverBackground#586069
  • checkbox.background#444d56
  • checkbox.border#505050
  • debugToolBar.background#2c313c
  • descriptionForeground#959da5
  • diffEditor.insertedTextBackground#00809B33
  • diffEditor.removedTextBackground#d73a4930
  • dropdown.background#2C323C
  • dropdown.border#505050
  • dropdown.foreground#dddddd
  • dropdown.listBackground#24292e
  • editor.background#303845
  • editor.findMatchBackground#42557B
  • editor.findMatchBorder#7160e8
  • editor.findMatchHighlightBackground#314365dd
  • editor.focusedStackFrameHighlightBackground#2b6a3033
  • editor.foreground#dddddd
  • editor.inactiveSelectionBackground#3392FF22
  • editor.lineHighlightBackground#404b5c
  • editor.lineHighlightBorder#556278
  • editor.linkedEditingBackground#3392FF22
  • editor.selectionBackground#67769660
  • editor.selectionHighlightBackground#ffffff10
  • editor.selectionHighlightBorder#ddd
  • editor.stackFrameHighlightBackground#C6902625
  • editor.wordHighlightBackground#484e5bdd
  • editor.wordHighlightBorder#7f848e
  • editor.wordHighlightStrongBackground#abb2bf26
  • editor.wordHighlightStrongBorder#7f848e
  • editorBracketMatch.background#515a6b
  • editorBracketMatch.border#515a6b
  • editorCursor.background#ffffffc9
  • editorCursor.foreground#528bff
  • editorError.foreground#c24038
  • editorGroup.border#666666
  • editorGroupHeader.border#505050
  • editorGroupHeader.tabsBackground#2c313c
  • editorGroupHeader.tabsBorder#505050
  • editorGutter.addedBackground#28a745
  • editorGutter.deletedBackground#ea4a5a
  • editorGutter.modifiedBackground#2188ff
  • editorHoverWidget.background#2c313c
  • editorHoverWidget.border#666666
  • editorIndentGuide.activeBackground1#909039
  • editorIndentGuide.background1#626772
  • editorInlayHint.background#5d6e4a
  • editorInlayHint.foreground#dae6e7
  • editorLineNumber.activeForeground#F9826C
  • editorLineNumber.foreground#737984
  • editorMarkerNavigation.background#2c313c
  • editorOverviewRuler.border#505050
  • editorRuler.foreground#abb2bf26
  • editorSuggestWidget.background#2D3440
  • editorSuggestWidget.border#303845
  • editorSuggestWidget.foreground#D8D9DC
  • editorSuggestWidget.selectedBackground#4c5464
  • editorWarning.foreground#ffea7f
  • editorWhitespace.foreground#303845
  • editorWidget.background#2c313c
  • editorWidget.border#505050
  • errorForeground#f97583
  • focusBorder#7160e8
  • foreground#d1d5da
  • gitDecoration.addedResourceForeground#34d058
  • gitDecoration.conflictingResourceForeground#ffab70
  • gitDecoration.deletedResourceForeground#ea4a5a
  • gitDecoration.ignoredResourceForeground#6a737d
  • gitDecoration.modifiedResourceForeground#FFD700
  • gitDecoration.submoduleResourceForeground#6a737d
  • gitDecoration.untrackedResourceForeground#34d058
  • inlineChatInput.border#505050
  • input.background#2c313c
  • input.border#505050
  • input.foreground#dddddd
  • input.placeholderForeground#BBBBBB
  • list.activeSelectionBackground#4c5464
  • list.activeSelectionForeground#d7dae0
  • list.activeSelectionIconForeground#FFF
  • list.dropBackground#383B3D
  • list.focusBackground#4c5464
  • list.highlightForeground#C5C5C5
  • list.hoverBackground#3a4656
  • list.hoverForeground#dddddd
  • list.inactiveFocusBackground#1d2d3e
  • list.inactiveSelectionBackground#4c5464
  • list.inactiveSelectionForeground#d7dae0
  • menu.background#2D3440
  • menu.border#454545
  • menu.foreground#dddddd
  • menu.selectionBackground#0078D4
  • menu.separatorBackground#575658
  • notificationCenterHeader.background#24292e
  • notificationCenterHeader.foreground#959da5
  • notifications.background#2f363d
  • notifications.border#505050
  • notifications.foreground#dddddd
  • notificationsErrorIcon.foreground#ea4a5a
  • notificationsInfoIcon.foreground#3794FF
  • notificationsWarningIcon.foreground#ffab70
  • panel.border#505050
  • panelInput.border#2f363d
  • panelTitle.activeBorder#F9826C
  • panelTitle.activeForeground#dddddd
  • panelTitle.inactiveForeground#959da5
  • peekView.border#A2A8B0
  • peekViewEditor.background#303845
  • peekViewEditor.matchHighlightBackground#455064
  • peekViewResult.background#303842
  • peekViewResult.matchHighlightBackground#ffd33d33
  • peekViewResult.selectionBackground#4c5870
  • peekViewTitle.background#30353B
  • peekViewTitleLabel.foreground#E8EAED
  • pickerGroup.border#575658
  • pickerGroup.foreground#dddddd
  • ports.iconRunningProcessForeground#369432
  • progressBar.background#0366d6
  • quickInput.background#303845
  • quickInput.foreground#dddddd
  • scrollbar.shadow#0008
  • scrollbarSlider.activeBackground#535a69
  • scrollbarSlider.background#535a69
  • scrollbarSlider.hoverBackground#535a69
  • settings.headerForeground#dddddd
  • settings.modifiedItemIndicator#0366d6
  • sideBar.background#2D3440
  • sideBar.border#505050
  • sideBar.foreground#d1d5da
  • sideBarSectionHeader.background#2D3440
  • sideBarSectionHeader.border#505050
  • sideBarSectionHeader.foreground#dddddd
  • sideBarTitle.foreground#dddddd
  • statusBar.background#394254
  • statusBar.border#505050
  • statusBar.debuggingBackground#FD716C
  • statusBar.debuggingBorder#515761
  • statusBar.debuggingForeground#eeeeee
  • statusBar.focusBorder#8292ac
  • statusBar.foreground#9DA5B4
  • statusBar.noFolderBackground#2c313c
  • statusBar.noFolderBorder#505050
  • statusBarItem.focusBorder#8292ac
  • statusBarItem.hoverBackground#59769b
  • statusBarItem.prominentBackground#282e34
  • statusBarItem.remoteBackground#528BFF
  • statusBarItem.remoteForeground#d1d5da
  • tab.activeBackground#3B4252
  • tab.activeBorder#505050
  • tab.activeBorderTop#F9826C
  • tab.border#505050
  • tab.hoverBackground#323842
  • tab.inactiveBackground#2B303B
  • tab.inactiveForeground#DDDEE0
  • tab.lastPinnedBorder#ccc3
  • tab.selectedBackground#222222
  • tab.selectedForeground#ffffffa0
  • tab.unfocusedActiveBorder#505050
  • tab.unfocusedActiveBorderTop#505050
  • tab.unfocusedHoverBackground#323842
  • terminal.ansiBlack#2D3139
  • terminal.ansiBlue#61AFEF
  • terminal.ansiBrightBlack#959da5
  • terminal.ansiBrightBlue#46abe4
  • terminal.ansiBrightCyan#56d4dd
  • terminal.ansiBrightGreen#85e89d
  • terminal.ansiBrightMagenta#CAA6ED
  • terminal.ansiBrightRed#f97583
  • terminal.ansiBrightWhite#fafbfc
  • terminal.ansiBrightYellow#ffea7f
  • terminal.ansiCyan#39c5cf
  • terminal.ansiGreen#92D69E
  • terminal.ansiMagenta#CAA6ED
  • terminal.ansiRed#ea4a5a
  • terminal.ansiWhite#d1d5da
  • terminal.ansiYellow#EBB07A
  • terminal.foreground#C8C8C8
  • terminal.inactiveSelectionBackground#3A3D41
  • terminal.tab.activeBorder#F9826C
  • terminalCursor.background#586069
  • terminalCursor.foreground#8b68b3
  • textBlockQuote.background#24292e
  • textBlockQuote.border#444d56
  • textCodeBlock.background#2f363d
  • textLink.activeForeground#c8e1ff
  • textLink.foreground#3794FF
  • textPreformat.foreground#d1d5da
  • textSeparator.foreground#586069
  • titleBar.activeBackground#303845
  • titleBar.activeForeground#9da5b4
  • titleBar.border#505050
  • titleBar.inactiveBackground#303845
  • titleBar.inactiveForeground#9da5b4
  • tree.indentGuidesStroke#d0fffa
  • widget.border#303031

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
meta.embedded, source.groovy.embedded, string meta.image.inline.markdown, variable.legacy.builtin.python#D4D4D4
emphasisitalic
strongbold
header#000080
comment#6A9955
constant.language#D19A66
constant.numeric, variable.other.enummember, keyword.operator.plus.exponent, keyword.operator.minus.exponent#D19A66
constant.regexp#646695
entity.name.tag#C792EA
entity.name.tag.css, entity.name.tag.less#4EC9C0
entity.other.attribute-name#E3C888
entity.other.attribute-name.class.css, source.css entity.other.attribute-name.class, entity.other.attribute-name.id.css, entity.other.attribute-name.parent-selector.css, entity.other.attribute-name.parent.less, source.css entity.other.attribute-name.pseudo-class, entity.other.attribute-name.pseudo-element.css, source.css.less entity.other.attribute-name.id, entity.other.attribute-name.scss#4EC9C0
invalid#f44747
markup.underlineunderline
markup.bold#C792EAbold
markup.heading#C792EAbold
markup.italicitalic
markup.strikethroughstrikethrough
markup.inserted#b5cea8
markup.deleted#92D69E
markup.changed#C792EA
punctuation.definition.quote.begin.markdown#6A9955
punctuation.definition.list.begin.markdown#6796e6
markup.inline.raw#92D69E
punctuation.definition.tag#808080
meta.preprocessor, entity.name.function.preprocessor#C792EA
meta.preprocessor.string#92D69E
meta.preprocessor.numeric#D19A66
meta.structure.dictionary.key.python#e3c888
meta.diff.header#C792EA
storage#C792EA
storage.type#C792EA
storage.modifier, keyword.operator.noexcept#C792EA
string, meta.embedded.assembly#92D69E
string.tag#92D69E
string.value#92D69E
string.regexp#d16969
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded#C792EA
meta.template.expression#d4d4d4
support.type.vendored.property-name, support.type.property-name, source.css variable, source.coffee.embedded#e3c888
keyword#C792EA
keyword.control#C792EA
keyword.operator#d4d4d4
keyword.operator.new, keyword.operator.expression, keyword.operator.cast, keyword.operator.sizeof, keyword.operator.alignof, keyword.operator.typeid, keyword.operator.alignas, keyword.operator.instanceof, keyword.operator.logical.python, keyword.operator.wordlike#C792EA
keyword.other.unit#b5cea8
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php#C792EA
support.function.git-rebase#e3c888
constant.sha.git-rebase#D19A66
storage.modifier.import.java, variable.language.wildcard.java, storage.modifier.package.java#d4d4d4
variable.language#C792EA
entity.name.function, support.function, support.constant.handlebars, source.powershell variable.other.member, entity.name.operator.custom-literal#61AFEF
support.class, support.type, entity.name.type, entity.name.namespace, entity.other.attribute, entity.name.scope-resolution, entity.name.class, storage.type.numeric.go, storage.type.byte.go, storage.type.boolean.go, storage.type.string.go, storage.type.uintptr.go, storage.type.error.go, storage.type.rune.go, storage.type.cs, storage.type.generic.cs, storage.type.modifier.cs, storage.type.variable.cs, storage.type.annotation.java, storage.type.generic.java, storage.type.java, storage.type.object.array.java, storage.type.primitive.array.java, storage.type.primitive.java, storage.type.token.java, storage.type.groovy, storage.type.annotation.groovy, storage.type.parameters.groovy, storage.type.generic.groovy, storage.type.object.array.groovy, storage.type.primitive.array.groovy, storage.type.primitive.groovy#4EC9B0
meta.type.cast.expr, meta.type.new.expr, support.constant.math, support.constant.dom, support.constant.json, entity.other.inherited-class, punctuation.separator.namespace.ruby#4EC9B0
keyword.control, source.cpp keyword.operator.new, keyword.operator.delete, keyword.other.using, keyword.other.directive.using, keyword.other.operator, entity.name.operator#C792EA
variable, meta.definition.variable.name, support.variable, entity.name.variable, constant.other.placeholder#e3c888
variable.other.constant, variable.other.enummember#ff95b9
meta.object-literal.key#e3c888
support.constant.property-value, support.constant.font-name, support.constant.media-type, support.constant.media, constant.other.color.rgb-value, constant.other.rgb-value, support.constant.color#92D69E
punctuation.definition.group.regexp, punctuation.definition.group.assertion.regexp, punctuation.definition.character-class.regexp, punctuation.character.set.begin.regexp, punctuation.character.set.end.regexp, keyword.operator.negation.regexp, support.other.parenthesis.regexp#92D69E
constant.character.character-class.regexp, constant.other.character-class.set.regexp, constant.other.character-class.regexp, constant.character.set.regexp#d16969
keyword.operator.or.regexp, keyword.control.anchor.regexp#61AFEF
keyword.operator.quantifier.regexp#4EC9C0
constant.character, constant.other.option#C792EA
constant.character.escape#4EC9C0
entity.name.label#C8C8C8
storage.type.annotation.java, entity.name.function.decorator.python, meta.decorator.ts, meta.decorator punctuation.decorator.ts, meta.decorator variable.other.readwrite.ts, meta.decorator.js, meta.decorator punctuation.decorator.js, meta.decorator variable.other.readwrite.js, meta.decorator.js entity.name.function.decorator, meta.decorator.js meta.property-name, storage.type.attribute.cs, meta.attribute.php, meta.annotation.kotlin#BBB529
meta.embedded, source.groovy.embedded, string meta.image.inline.markdown, variable.legacy.builtin.python#D4D4D4
emphasisitalic
strongbold
header#000080
comment#6A9955
constant.language#D19A66
constant.numeric, variable.other.enummember, keyword.operator.plus.exponent, keyword.operator.minus.exponent#D19A66
constant.regexp#646695
entity.name.tag#C792EA
entity.name.tag.css, entity.name.tag.less#4EC9C0
entity.other.attribute-name#E3C888
entity.other.attribute-name.class.css, source.css entity.other.attribute-name.class, entity.other.attribute-name.id.css, entity.other.attribute-name.parent-selector.css, entity.other.attribute-name.parent.less, source.css entity.other.attribute-name.pseudo-class, entity.other.attribute-name.pseudo-element.css, source.css.less entity.other.attribute-name.id, entity.other.attribute-name.scss#4EC9C0
invalid#f44747
markup.underlineunderline
markup.bold#C792EAbold
markup.heading#C792EAbold
markup.italicitalic
markup.strikethroughstrikethrough
markup.inserted#b5cea8
markup.deleted#92D69E
markup.changed#C792EA
punctuation.definition.quote.begin.markdown#6A9955
punctuation.definition.list.begin.markdown#6796e6
markup.inline.raw#92D69E
punctuation.definition.tag#808080
meta.preprocessor, entity.name.function.preprocessor#C792EA
meta.preprocessor.string#92D69E
meta.preprocessor.numeric#D19A66
meta.structure.dictionary.key.python#e3c888
meta.diff.header#C792EA
storage#C792EA
storage.type#C792EA
storage.modifier, keyword.operator.noexcept#C792EA
string, meta.embedded.assembly#92D69E
string.tag#92D69E
string.value#92D69E
string.regexp#d16969
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded#C792EA
meta.template.expression#d4d4d4
support.type.vendored.property-name, support.type.property-name, source.css variable, source.coffee.embedded#e3c888
keyword#C792EA
keyword.control#C792EA
keyword.operator#d4d4d4
keyword.operator.new, keyword.operator.expression, keyword.operator.cast, keyword.operator.sizeof, keyword.operator.alignof, keyword.operator.typeid, keyword.operator.alignas, keyword.operator.instanceof, keyword.operator.logical.python, keyword.operator.wordlike#C792EA
keyword.other.unit#b5cea8
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php#C792EA
support.function.git-rebase#e3c888
constant.sha.git-rebase#D19A66
storage.modifier.import.java, variable.language.wildcard.java, storage.modifier.package.java#d4d4d4
variable.language#C792EA
entity.name.function, support.function, support.constant.handlebars, source.powershell variable.other.member, entity.name.operator.custom-literal#61AFEF
support.class, support.type, entity.name.type, entity.name.namespace, entity.other.attribute, entity.name.scope-resolution, entity.name.class, storage.type.numeric.go, storage.type.byte.go, storage.type.boolean.go, storage.type.string.go, storage.type.uintptr.go, storage.type.error.go, storage.type.rune.go, storage.type.cs, storage.type.generic.cs, storage.type.modifier.cs, storage.type.variable.cs, storage.type.annotation.java, storage.type.generic.java, storage.type.java, storage.type.object.array.java, storage.type.primitive.array.java, storage.type.primitive.java, storage.type.token.java, storage.type.groovy, storage.type.annotation.groovy, storage.type.parameters.groovy, storage.type.generic.groovy, storage.type.object.array.groovy, storage.type.primitive.array.groovy, storage.type.primitive.groovy#4EC9B0
meta.type.cast.expr, meta.type.new.expr, support.constant.math, support.constant.dom, support.constant.json, entity.other.inherited-class, punctuation.separator.namespace.ruby#4EC9B0
keyword.control, source.cpp keyword.operator.new, keyword.operator.delete, keyword.other.using, keyword.other.directive.using, keyword.other.operator, entity.name.operator#C792EA
variable, meta.definition.variable.name, support.variable, entity.name.variable, constant.other.placeholder#e3c888
variable.other.constant, variable.other.enummember#ff95b9
meta.object-literal.key#e3c888
support.constant.property-value, support.constant.font-name, support.constant.media-type, support.constant.media, constant.other.color.rgb-value, constant.other.rgb-value, support.constant.color#92D69E
punctuation.definition.group.regexp, punctuation.definition.group.assertion.regexp, punctuation.definition.character-class.regexp, punctuation.character.set.begin.regexp, punctuation.character.set.end.regexp, keyword.operator.negation.regexp, support.other.parenthesis.regexp#92D69E
constant.character.character-class.regexp, constant.other.character-class.set.regexp, constant.other.character-class.regexp, constant.character.set.regexp#d16969
keyword.operator.or.regexp, keyword.control.anchor.regexp#61AFEF
keyword.operator.quantifier.regexp#4EC9C0
constant.character, constant.other.option#C792EA
constant.character.escape#4EC9C0
entity.name.label#C8C8C8
storage.type.annotation.java, entity.name.function.decorator.python, meta.decorator.ts, meta.decorator punctuation.decorator.ts, meta.decorator variable.other.readwrite.ts, meta.decorator.js, meta.decorator punctuation.decorator.js, meta.decorator variable.other.readwrite.js, meta.decorator.js entity.name.function.decorator, meta.decorator.js meta.property-name, storage.type.attribute.cs, meta.attribute.php, meta.annotation.kotlin#BBB529

Shiki preview

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

Loading...