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#1c1c1cff
  • activityBar.dropBackground#151515ff
  • activityBar.foreground#00a88eff
  • activityBar.inactiveForeground#505050ff
  • activityBarBadge.background#00a88ebf
  • activityBarBadge.foreground#ffffffff
  • badge.background#00a88ebf
  • badge.foreground#ffffffff
  • breadcrumb.activeSelectionForeground#e0e0e0
  • breadcrumb.background#151515ff
  • breadcrumb.focusForeground#edededff
  • breadcrumb.foreground#6e6e6eff
  • breadcrumbPicker.background#1c1c1cff
  • button.background#006953ff
  • button.foreground#ffffffff
  • button.hoverBackground#007d66ff
  • debugExceptionWidget.background#420b0d
  • debugExceptionWidget.border#1c1c1cff
  • debugToolBar.background#151515ff
  • descriptionForeground#ccccccb3
  • diffEditor.insertedTextBackground#9bb95533
  • diffEditor.removedTextBackground#ff000033
  • dropdown.background#1c1c1cff
  • dropdown.border#1c1c1cff
  • dropdown.foreground#edededff
  • editor.background#151515ff
  • editor.findMatchBackground#305b8240
  • editor.findMatchHighlightBackground#305b8240
  • editor.findRangeHighlightBackground#305b8240
  • editor.focusedStackFrameHighlightBackground#305b8240
  • editor.foreground#dbdbdbff
  • editor.hoverHighlightBackground#305b8240
  • editor.inactiveSelectionBackground#305b8220
  • editor.lineHighlightBackground#1c1c1cff
  • editor.lineHighlightBorder#1c1c1cff
  • editor.rangeHighlightBackground#305b8240
  • editor.selectionBackground#305b8240
  • editor.selectionHighlightBackground#305b8220
  • editor.snippetFinalTabstopHighlightBorder#305b8240
  • editor.snippetTabstopHighlightBackground#305b8240
  • editor.stackFrameHighlightBackground#305b8240
  • editor.wordHighlightBackground#305b8220
  • editor.wordHighlightStrongBackground#305b8220
  • editorActiveLineNumber.foreground#6e6e6eff
  • editorBracketMatch.background#305b8220
  • editorBracketMatch.border#4a99deff
  • editorCodeLens.foreground#999999
  • editorCursor.foreground#f65683ff
  • editorError.foreground#cf0051ff
  • editorGroup.border#1c1c1cff
  • editorGroup.dropBackground#151515ff
  • editorGroupHeader.noTabsBackground#151515ff
  • editorGroupHeader.tabsBackground#1c1c1cff
  • editorGutter.addedBackground#002106ff
  • editorGutter.background#151515ff
  • editorGutter.commentRangeForeground#c5c5c5
  • editorGutter.deletedBackground#530000ff
  • editorGutter.modifiedBackground#001131ff
  • editorHint.foreground#eeeeeeb3
  • editorHoverWidget.background#1c1c1cff
  • editorHoverWidget.border#1c1c1cff
  • editorIndentGuide.activeBackground#2c2c2cff
  • editorIndentGuide.background#232323ff
  • editorInfo.foreground#008000
  • editorLineNumber.activeForeground#6e6e6eff
  • editorLineNumber.foreground#505050ff
  • editorLink.activeForeground#4e94ce
  • editorMarkerNavigation.background#2d2d30
  • editorMarkerNavigationError.background#cf0051ff
  • editorMarkerNavigationInfo.background#008000
  • editorMarkerNavigationWarning.background#4d9e4d
  • editorOverviewRuler.addedForeground#004432ff
  • editorOverviewRuler.border#1c1c1cff
  • editorOverviewRuler.bracketMatchForeground#a0a0a0
  • editorOverviewRuler.commonContentForeground#60606066
  • editorOverviewRuler.currentContentForeground#40c8ae80
  • editorOverviewRuler.deletedForeground#8a0021ff
  • editorOverviewRuler.errorForeground#cf0051bf
  • editorOverviewRuler.findMatchForeground#f6b94db3
  • editorOverviewRuler.incomingContentForeground#40a6ff80
  • editorOverviewRuler.infoForeground#121288b3
  • editorOverviewRuler.modifiedForeground#00395dff
  • editorOverviewRuler.rangeHighlightForeground#007acc99
  • editorOverviewRuler.selectionHighlightForeground#a0a0a0cc
  • editorOverviewRuler.warningForeground#128812b3
  • editorOverviewRuler.wordHighlightForeground#a0a0a0cc
  • editorOverviewRuler.wordHighlightStrongForeground#c0a0c0cc
  • editorPane.background#151515ff
  • editorRuler.foreground#5a5a5a
  • editorSuggestWidget.background#1c1c1cff
  • editorSuggestWidget.border#1c1c1cff
  • editorSuggestWidget.foreground#edededff
  • editorSuggestWidget.highlightForeground#edededff
  • editorSuggestWidget.selectedBackground#232323ff
  • editorUnnecessaryCode.opacity#000000aa
  • editorWarning.foreground#4d9e4d
  • editorWhitespace.foreground#e3e4e229
  • editorWidget.background#1c1c1cff
  • editorWidget.border#1c1c1cff
  • errorForeground#cf0051ff
  • extensionButton.prominentBackground#327e36
  • extensionButton.prominentForeground#ffffff
  • extensionButton.prominentHoverBackground#28632b
  • focusBorder#305b82ff
  • foreground#dbdbdbff
  • gitDecoration.addedResourceForeground#81b88b
  • gitDecoration.conflictingResourceForeground#6c6cc4
  • gitDecoration.deletedResourceForeground#c74e39
  • gitDecoration.ignoredResourceForeground#6e6e6eff
  • gitDecoration.modifiedResourceForeground#bf8546ff
  • gitDecoration.submoduleResourceForeground#8db9e2
  • gitDecoration.untrackedResourceForeground#00a88eff
  • input.background#151515ff
  • input.foreground#edededff
  • input.placeholderForeground#a6a6a6
  • inputOption.activeBorder#00a88eff
  • inputValidation.errorBackground#4c0000ff
  • inputValidation.errorBorder#630000ff
  • inputValidation.infoBackground#151515ff
  • inputValidation.infoBorder#373737ff
  • inputValidation.warningBackground#2c0000ff
  • inputValidation.warningBorder#380c00ff
  • list.activeSelectionBackground#232323ff
  • list.activeSelectionForeground#edededff
  • list.dropBackground#151515ff
  • list.errorForeground#cf0051ff
  • list.focusBackground#232323ff
  • list.highlightForeground#edededff
  • list.hoverBackground#232323ff
  • list.inactiveFocusBackground#232323ff
  • list.inactiveSelectionBackground#232323ff
  • list.inactiveSelectionForeground#edededff
  • list.invalidItemForeground#b89500
  • list.warningForeground#4d9e4d
  • menu.background#1c1c1cff
  • menu.foreground#b5b5b5ff
  • menu.selectionBackground#232323ff
  • menu.selectionForeground#edededff
  • menu.separatorBackground#373737ff
  • menubar.selectionBackground#232323ff
  • menubar.selectionForeground#edededff
  • merge.commonContentBackground#60606029
  • merge.commonHeaderBackground#60606066
  • merge.currentContentBackground#40c8ae33
  • merge.currentHeaderBackground#40c8ae80
  • merge.incomingContentBackground#40a6ff33
  • merge.incomingHeaderBackground#40a6ff80
  • notificationCenterHeader.background#1c1c1cff
  • notificationLink.foreground#00a88eff
  • notifications.background#1c1c1cff
  • notifications.border#1c1c1cff
  • panel.background#1c1c1cff
  • panel.border#1c1c1cff
  • panel.dropBackground#151515ff
  • panelTitle.activeBorder#00a88eff
  • panelTitle.activeForeground#edededff
  • panelTitle.inactiveForeground#a2a2a2ff
  • peekView.border#1c1c1cff
  • peekViewEditor.background#001f33
  • peekViewEditor.matchHighlightBackground#ff8f0099
  • peekViewEditorGutter.background#001f33
  • peekViewResult.background#1c1c1cff
  • peekViewResult.fileForeground#ffffff
  • peekViewResult.lineForeground#bbbbbb
  • peekViewResult.matchHighlightBackground#ea5c004d
  • peekViewResult.selectionBackground#3399ff33
  • peekViewResult.selectionForeground#ffffff
  • peekViewTitle.background#151515ff
  • peekViewTitleDescription.foreground#ccccccb3
  • peekViewTitleLabel.foreground#ffffff
  • pickerGroup.border#1c1c1cff
  • pickerGroup.foreground#3794ff
  • progressBar.background#0e70c0
  • scrollbar.shadow#000000ff
  • scrollbarSlider.activeBackground#505050bf
  • scrollbarSlider.background#373737bf
  • scrollbarSlider.hoverBackground#434343bf
  • settings.checkboxBackground#151515ff
  • settings.checkboxBorder#505050ff
  • settings.checkboxForeground#edededff
  • settings.dropdownBackground#1c1c1cff
  • settings.dropdownBorder#1c1c1cff
  • settings.dropdownForeground#edededff
  • settings.dropdownListBorder#2c2c2cff
  • settings.headerForeground#c8efffff
  • settings.modifiedItemIndicator#305b82ff
  • settings.numberInputBackground#1c1c1cff
  • settings.numberInputForeground#edededff
  • settings.textInputBackground#1c1c1cff
  • settings.textInputForeground#edededff
  • sideBar.background#1c1c1cff
  • sideBar.dropBackground#151515ff
  • sideBar.foreground#a2a2a2ff
  • sideBarSectionHeader.background#1c1c1cff
  • sideBarSectionHeader.foreground#505050ff
  • sideBarTitle.foreground#505050ff
  • statusBar.background#232323ff
  • statusBar.debuggingBackground#6e0600ff
  • statusBar.debuggingForeground#a2a2a2ff
  • statusBar.foreground#a2a2a2ff
  • statusBar.noFolderBackground#2e0243ff
  • statusBar.noFolderForeground#a2a2a2ff
  • tab.activeBackground#1c1c1cff
  • tab.activeBorder#00a88eff
  • tab.activeForeground#edededff
  • tab.activeModifiedBorder#00a88ebf
  • tab.border#1c1c1cff
  • tab.inactiveBackground#1c1c1cff
  • tab.inactiveForeground#a2a2a2ff
  • tab.inactiveModifiedBorder#00a88ebf
  • tab.unfocusedActiveForeground#edededff
  • tab.unfocusedActiveModifiedBorder#00a88e80
  • tab.unfocusedInactiveForeground#a2a2a2ff
  • tab.unfocusedInactiveModifiedBorder#00a88e80
  • terminal.ansiBlack#151515ff
  • terminal.ansiBlue#5ba8edff
  • terminal.ansiBrightBlack#757575ff
  • terminal.ansiBrightBlue#80c0f3ff
  • terminal.ansiBrightCyan#bcacf3ff
  • terminal.ansiBrightGreen#52f6d9ff
  • terminal.ansiBrightMagenta#f97fb6ff
  • terminal.ansiBrightRed#f73d6fff
  • terminal.ansiBrightWhite#e6e6e6ff
  • terminal.ansiBrightYellow#f9cea1ff
  • terminal.ansiCyan#ae87e1ff
  • terminal.ansiGreen#52f6d9ff
  • terminal.ansiMagenta#f97fb6ff
  • terminal.ansiRed#f73d6fff
  • terminal.ansiWhite#cdcdcdff
  • terminal.ansiYellow#f9ba78ff
  • terminal.background#151515ff
  • terminal.border#1c1c1cff
  • terminal.foreground#dbdbdbff
  • terminal.selectionBackground#305b8240
  • textBlockQuote.background#7f7f7f1a
  • textBlockQuote.border#1c1c1cff
  • textCodeBlock.background#0a0a0a66
  • textLink.activeForeground#00a88eff
  • textLink.foreground#00a88eff
  • textPreformat.foreground#f97fb6ff
  • textSeparator.foreground#ffffff2e
  • titleBar.activeBackground#1c1c1cff
  • titleBar.activeForeground#a2a2a2ff
  • titleBar.inactiveBackground#1c1c1cff
  • titleBar.inactiveForeground#505050ff
  • widget.shadow#070707ff

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
meta.embedded, source.groovy.embedded#e6e6e6ff
emphasisitalic
strongbold
header#000080
comment#6a6b6eff
constant.language#f9ba78ff
constant.numeric#f9ba78ff
constant.regexp#f97fb6ff
entity.name.tag#4a99deff
entity.name.tag.css#f9cea1ff
entity.other.attribute-name#f9ba78ff
entity.other.attribute-name.class.css, entity.other.attribute-name.class.mixin.css, entity.other.attribute-name.id.css, entity.other.attribute-name.parent-selector.css, entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css, source.css.less entity.other.attribute-name.id, entity.other.attribute-name.attribute.scss, entity.other.attribute-name.scss#f9ba78ff
invalid#f44747
markup.underlineunderline
markup.bold#f67cb3ffbold
markup.heading#f67cb3ffbold
markup.italicitalic
markup.inserted#f9ba78ff
markup.deleted#52f6d9ff
markup.changed#f67cb3ff
punctuation.definition.quote.begin.markdown#6A9955
punctuation.definition.list.begin.markdown#6796e6
markup.inline.raw#52f6d9ff
punctuation.definition.tag#909090ff
meta.preprocessor#f67cb3ff
meta.preprocessor.string#52f6d9ff
meta.preprocessor.numeric#f9ba78ff
meta.structure.dictionary.key.python#dbdbdbff
meta.diff.header#f67cb3ff
storage#f67cb3ff
storage.type#f9ba78ff
storage.modifier#f9ba78ff
string#52f6d9ff
string.tag#52f6d9ff
string.value#52f6d9ff
string.regexp#52f6d9ff
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded#e6e6e6ff
meta.template.expression#d4d4d4
support.type.vendored.property-name, support.type.property-name, variable.css, variable.scss, variable.other.less, source.coffee.embedded#e6e6e6ff
keyword#f67cb3ff
keyword.control#f67cb3ff
keyword.operator#e6e6e6ff
keyword.operator.new, keyword.operator.expression, keyword.operator.cast, keyword.operator.sizeof, keyword.operator.instanceof, keyword.operator.logical.python#f67cb3ff
keyword.other.unit#f9ba78ff
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php#f67cb3ff
support.function.git-rebase#80c0f3ff
constant.sha.git-rebase#f9ba78ff
storage.modifier.import.java, variable.language.wildcard.java, storage.modifier.package.java#d4d4d4
variable.language#f67cb3ff
entity.name.function, support.function, support.constant.handlebars#80c0f3ff
meta.return-type, support.class, support.type, entity.name.type, 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#9cc3efff
meta.type.cast.expr, meta.type.new.expr, support.constant.math, support.constant.dom, support.constant.json, entity.other.inherited-class#9cc3efff
keyword.control#f67cb3ff
variable, meta.definition.variable.name, support.variable, entity.name.variable#e6e6e6ff
meta.object-literal.key#dbdbdbff
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#52f6d9ff
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#909090ff
constant.character.character-class.regexp, constant.other.character-class.set.regexp, constant.other.character-class.regexp, constant.character.set.regexp#f97fb6ff
keyword.operator.or.regexp, keyword.control.anchor.regexp#e6e6e6ff
keyword.operator.quantifier.regexp#f9ba78ff
constant.character#f67cb3ff
constant.character.escape#909090ff
token.info-token#6796e6
token.warn-token#cd9731
token.error-token#f44747
token.debug-token#b267e6
string.quoted.double.html#52f6d9ff
string.template#52f6d9ff
storage.type.function#f9ba78ff
support.class.component.js#4a99deff
variable.parameter#bbbbbbff
variable.other.property#e6e6e6ff
support.function, support.constant.handlebars#80c0f3ff
support.type, support.class, support.constant.math#f9cea1ff
support.type.vendored.property-name, support.type.property-name#dbdbdbff
support.function#80c0f3ff
variable.other.constant#f5a0c0ff
meta.brace.round.js, meta.brace.square.js, punctuation#909090ff
support.type.property-name.json#dbdbdbff
storage.type.function.arrow.js, storage.type.function.arrow.ts, storage.type.function.arrow.tsx#e6e6e6ff
punctuation.definition.keyword.css, punctuation.definition.directive.c, punctuation.definition.heading.markdown#f67cb3ff
entity.name.type.class, entity.name.type.module#9cc3efff
punctuation.definition.comment.python, punctuation.definition.comment.js, punctuation.definition.comment.cpp, punctuation.definition.comment.begin.css, punctuation.definition.comment.end.css, punctuation.definition.list.begin.markdown#6a6b6eff
markup.headingnormal

Shiki preview

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

Loading...