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#151b26
  • activityBar.foreground#5f97a6
  • activityBar.inactiveForeground#4c5059
  • activityBarBadge.background#5f97a6bf
  • activityBarBadge.foreground#ffffff
  • badge.background#5f97a6bf
  • badge.foreground#ffffff
  • breadcrumb.activeSelectionForeground#e0e0e0
  • breadcrumb.background#0f1520
  • breadcrumb.focusForeground#ededef
  • breadcrumb.foreground#6a6e76
  • breadcrumbPicker.background#151b26
  • button.background#1c5766
  • button.foreground#ffffff
  • button.hoverBackground#336b7a
  • debugExceptionWidget.background#420b0d
  • debugExceptionWidget.border#151b26
  • debugToolBar.background#0f1520
  • descriptionForeground#ccccccb3
  • diffEditor.insertedTextBackground#9bb95533
  • diffEditor.removedTextBackground#ff000033
  • dropdown.background#151b26
  • dropdown.border#151b26
  • dropdown.foreground#ededef
  • editor.background#0f1520
  • editor.findMatchBackground#4b515740
  • editor.findMatchHighlightBackground#4b515740
  • editor.findRangeHighlightBackground#4b515740
  • editor.focusedStackFrameHighlightBackground#4b515740
  • editor.foreground#dadbdd
  • editor.hoverHighlightBackground#4b515740
  • editor.inactiveSelectionBackground#4b515720
  • editor.lineHighlightBackground#151b26
  • editor.lineHighlightBorder#151b26
  • editor.rangeHighlightBackground#4b515740
  • editor.selectionBackground#4b515740
  • editor.selectionHighlightBackground#4b515720
  • editor.snippetFinalTabstopHighlightBorder#4b515740
  • editor.snippetTabstopHighlightBackground#4b515740
  • editor.stackFrameHighlightBackground#4b515740
  • editor.wordHighlightBackground#4b515720
  • editor.wordHighlightStrongBackground#4b515720
  • editorActiveLineNumber.foreground#6a6e76
  • editorBracketMatch.background#4b515720
  • editorBracketMatch.border#7292b1
  • editorCodeLens.foreground#999999
  • editorCursor.foreground#d8dee9
  • editorError.foreground#a04550
  • editorGroup.border#151b26
  • editorGroup.dropBackground#0f1520
  • editorGroupHeader.noTabsBackground#0f1520
  • editorGroupHeader.tabsBackground#151b26
  • editorGutter.addedBackground#000c00
  • editorGutter.background#0f1520
  • editorGutter.commentRangeForeground#c5c5c5
  • editorGutter.deletedBackground#340000
  • editorGutter.modifiedBackground#00010b
  • editorHint.foreground#eeeeeeb3
  • editorHoverWidget.background#151b26
  • editorHoverWidget.border#151b26
  • editorIndentGuide.activeBackground#272c36
  • editorIndentGuide.background#1d232d
  • editorInfo.foreground#008000
  • editorLineNumber.activeForeground#6a6e76
  • editorLineNumber.foreground#4c5059
  • editorLink.activeForeground#4e94ce
  • editorMarkerNavigation.background#2d2d30
  • editorMarkerNavigationError.background#a04550
  • editorMarkerNavigationInfo.background#008000
  • editorMarkerNavigationWarning.background#4d9e4d
  • editorOverviewRuler.addedForeground#1b3308
  • editorOverviewRuler.border#151b26
  • editorOverviewRuler.bracketMatchForeground#a0a0a0
  • editorOverviewRuler.commonContentForeground#60606066
  • editorOverviewRuler.currentContentForeground#40c8ae80
  • editorOverviewRuler.deletedForeground#5e031d
  • editorOverviewRuler.errorForeground#a04550bf
  • editorOverviewRuler.findMatchForeground#f6b94db3
  • editorOverviewRuler.incomingContentForeground#40a6ff80
  • editorOverviewRuler.infoForeground#121288b3
  • editorOverviewRuler.modifiedForeground#292e34
  • editorOverviewRuler.rangeHighlightForeground#007acc99
  • editorOverviewRuler.selectionHighlightForeground#a0a0a0cc
  • editorOverviewRuler.warningForeground#128812b3
  • editorOverviewRuler.wordHighlightForeground#a0a0a0cc
  • editorOverviewRuler.wordHighlightStrongForeground#c0a0c0cc
  • editorPane.background#0f1520
  • editorRuler.foreground#5a5a5a
  • editorSuggestWidget.background#151b26
  • editorSuggestWidget.border#151b26
  • editorSuggestWidget.foreground#ededef
  • editorSuggestWidget.highlightForeground#ededef
  • editorSuggestWidget.selectedBackground#1d232d
  • editorUnnecessaryCode.opacity#000000aa
  • editorWarning.foreground#4d9e4d
  • editorWhitespace.foreground#e3e4e229
  • editorWidget.background#151b26
  • editorWidget.border#151b26
  • errorForeground#a04550
  • extensionButton.prominentBackground#327e36
  • extensionButton.prominentForeground#ffffff
  • extensionButton.prominentHoverBackground#28632b
  • focusBorder#4b5157
  • foreground#dadbdd
  • gitDecoration.addedResourceForeground#81b88b
  • gitDecoration.conflictingResourceForeground#6c6cc4
  • gitDecoration.deletedResourceForeground#c74e39
  • gitDecoration.ignoredResourceForeground#6a6e76
  • gitDecoration.modifiedResourceForeground#a5894d
  • gitDecoration.submoduleResourceForeground#8db9e2
  • gitDecoration.untrackedResourceForeground#7b9566
  • input.background#0f1520
  • input.foreground#ededef
  • input.placeholderForeground#a6a6a6
  • inputOption.activeBorder#5f97a6
  • inputValidation.errorBackground#340000
  • inputValidation.errorBorder#3c0000
  • inputValidation.infoBackground#0f1520
  • inputValidation.infoBorder#323640
  • inputValidation.warningBackground#1f0000
  • inputValidation.warningBorder#260b00
  • list.activeSelectionBackground#1d232d
  • list.activeSelectionForeground#ededef
  • list.dropBackground#0f1520
  • list.errorForeground#a04550
  • list.focusBackground#1d232d
  • list.highlightForeground#ededef
  • list.hoverBackground#1d232d
  • list.inactiveFocusBackground#1d232d
  • list.inactiveSelectionBackground#1d232d
  • list.inactiveSelectionForeground#ededef
  • list.invalidItemForeground#b89500
  • list.warningForeground#4d9e4d
  • menu.background#151b26
  • menu.foreground#b3b5b9
  • menu.selectionBackground#1d232d
  • menu.selectionForeground#ededef
  • menu.separatorBackground#323640
  • menubar.selectionBackground#1d232d
  • menubar.selectionForeground#ededef
  • merge.commonContentBackground#60606029
  • merge.commonHeaderBackground#60606066
  • merge.currentContentBackground#40c8ae33
  • merge.currentHeaderBackground#40c8ae80
  • merge.incomingContentBackground#40a6ff33
  • merge.incomingHeaderBackground#40a6ff80
  • notificationCenterHeader.background#151b26
  • notificationLink.foreground#5f97a6
  • notifications.background#151b26
  • notifications.border#151b26
  • panel.background#151b26
  • panel.border#151b26
  • panelTitle.activeBorder#5f97a6
  • panelTitle.activeForeground#ededef
  • panelTitle.inactiveForeground#a0a2a8
  • peekView.border#151b26
  • peekViewEditor.background#001f33
  • peekViewEditor.matchHighlightBackground#ff8f0099
  • peekViewEditorGutter.background#001f33
  • peekViewResult.background#151b26
  • peekViewResult.fileForeground#ffffff
  • peekViewResult.lineForeground#bbbbbb
  • peekViewResult.matchHighlightBackground#ea5c004d
  • peekViewResult.selectionBackground#3399ff33
  • peekViewResult.selectionForeground#ffffff
  • peekViewTitle.background#0f1520
  • peekViewTitleDescription.foreground#ccccccb3
  • peekViewTitleLabel.foreground#ffffff
  • pickerGroup.border#151b26
  • pickerGroup.foreground#3794ff
  • progressBar.background#0e70c0
  • scrollbar.shadow#000113
  • scrollbarSlider.activeBackground#4c5059bf
  • scrollbarSlider.background#323640bf
  • scrollbarSlider.hoverBackground#3e424cbf
  • settings.checkboxBackground#0f1520
  • settings.checkboxBorder#4c5059
  • settings.checkboxForeground#ededef
  • settings.dropdownBackground#151b26
  • settings.dropdownBorder#151b26
  • settings.dropdownForeground#ededef
  • settings.dropdownListBorder#272c36
  • settings.headerForeground#e4eaf2
  • settings.modifiedItemIndicator#4b5157
  • settings.numberInputBackground#151b26
  • settings.numberInputForeground#ededef
  • settings.textInputBackground#151b26
  • settings.textInputForeground#ededef
  • sideBar.background#151b26
  • sideBar.dropBackground#0f1520
  • sideBar.foreground#a0a2a8
  • sideBarSectionHeader.background#151b26
  • sideBarSectionHeader.foreground#4c5059
  • sideBarTitle.foreground#4c5059
  • statusBar.background#1d232d
  • statusBar.debuggingBackground#690000
  • statusBar.debuggingForeground#a0a2a8
  • statusBar.foreground#a0a2a8
  • statusBar.noFolderBackground#270040
  • statusBar.noFolderForeground#a0a2a8
  • tab.activeBackground#151b26
  • tab.activeBorder#5f97a6
  • tab.activeForeground#ededef
  • tab.activeModifiedBorder#5f97a6bf
  • tab.border#151b26
  • tab.inactiveBackground#151b26
  • tab.inactiveForeground#a0a2a8
  • tab.inactiveModifiedBorder#5f97a6bf
  • tab.unfocusedActiveForeground#ededef
  • tab.unfocusedActiveModifiedBorder#5f97a680
  • tab.unfocusedInactiveForeground#a0a2a8
  • tab.unfocusedInactiveModifiedBorder#5f97a680
  • terminal.ansiBlack#3b4252
  • terminal.ansiBlue#81a1c1
  • terminal.ansiBrightBlack#4c566a
  • terminal.ansiBrightBlue#81a1c1
  • terminal.ansiBrightCyan#8fbcbb
  • terminal.ansiBrightGreen#a3be8c
  • terminal.ansiBrightMagenta#bf99b8
  • terminal.ansiBrightRed#bf616a
  • terminal.ansiBrightWhite#eceff4
  • terminal.ansiBrightYellow#ebcb8b
  • terminal.ansiCyan#88c0d0
  • terminal.ansiGreen#a3be8c
  • terminal.ansiMagenta#bf99b8
  • terminal.ansiRed#bf616a
  • terminal.ansiWhite#e5e9f0
  • terminal.ansiYellow#ebcb8b
  • terminal.background#0f1520
  • terminal.border#151b26
  • terminal.foreground#dadbdd
  • terminal.selectionBackground#4b515740
  • textBlockQuote.background#7f7f7f1a
  • textBlockQuote.border#151b26
  • textCodeBlock.background#0a0a0a66
  • textLink.activeForeground#5f97a6
  • textLink.foreground#5f97a6
  • textPreformat.foreground#bf99b8
  • textSeparator.foreground#ffffff2e
  • titleBar.activeBackground#151b26
  • titleBar.activeForeground#a0a2a8
  • titleBar.inactiveBackground#151b26
  • titleBar.inactiveForeground#4c5059
  • widget.shadow#000616

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
meta.embedded, source.groovy.embedded#DADBDD
emphasisitalic
strongbold
header#000080
comment#4C566A
constant.language#81A1C1
constant.numeric#B48EAD
constant.regexp#EBCB8B
entity.name.tag#81A1C1
entity.name.tag.css#8FBCBB
entity.other.attribute-name#8FBCBB
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#8FBCBB
invalid#F44747
markup.underlineunderline
markup.bold#81A1C1bold
markup.heading#81A1C1bold
markup.italicitalic
markup.inserted#B48EAD
markup.deleted#A3BE8C
markup.changed#81A1C1
punctuation.definition.quote.begin.markdown#6A9955
punctuation.definition.list.begin.markdown#6796E6
markup.inline.raw#A3BE8C
punctuation.definition.tag#ECEFF4
meta.preprocessor#81A1C1
meta.preprocessor.string#A3BE8C
meta.preprocessor.numeric#B48EAD
meta.structure.dictionary.key.python#DADBDD
meta.diff.header#81A1C1
storage#81A1C1
storage.type#81A1C1
storage.modifier#81A1C1
string#A3BE8C
string.tag#A3BE8C
string.value#A3BE8C
string.regexp#A3BE8C
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded#81A1C1
meta.template.expression#D4D4D4
support.type.vendored.property-name, support.type.property-name, variable.css, variable.scss, variable.other.less, source.coffee.embedded#DADBDD
keyword#81A1C1
keyword.control#81A1C1
keyword.operator#81A1C1
keyword.operator.new, keyword.operator.expression, keyword.operator.cast, keyword.operator.sizeof, keyword.operator.instanceof, keyword.operator.logical.python#81A1C1
keyword.other.unit#B48EAD
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php#81A1C1
support.function.git-rebase#88C0D0
constant.sha.git-rebase#B48EAD
storage.modifier.import.java, variable.language.wildcard.java, storage.modifier.package.java#D4D4D4
variable.language#81A1C1
entity.name.function, support.function, support.constant.handlebars#88C0D0
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#8FBCBB
meta.type.cast.expr, meta.type.new.expr, support.constant.math, support.constant.dom, support.constant.json, entity.other.inherited-class#8FBCBB
keyword.control#81A1C1
variable, meta.definition.variable.name, support.variable, entity.name.variable#DADBDD
meta.object-literal.key#DADBDD
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#A3BE8C
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#ECEFF4
constant.character.character-class.regexp, constant.other.character-class.set.regexp, constant.other.character-class.regexp, constant.character.set.regexp#EBCB8B
keyword.operator.or.regexp, keyword.control.anchor.regexp#81A1C1
keyword.operator.quantifier.regexp#B48EAD
constant.character#81A1C1
constant.character.escape#ECEFF4
token.info-token#6796E6
token.warn-token#CD9731
token.error-token#F44747
token.debug-token#B267E6
string.quoted.double.html#A3BE8C
string.template#A3BE8C
storage.type.function#81A1C1
support.class.component.js#81A1C1
variable.parameter#D8DEE9
variable.other.property#DADBDD
support.function, support.constant.handlebars#88C0D0
support.type, support.class, support.constant.math#8FBCBB
support.type.vendored.property-name, support.type.property-name#DADBDD
support.function#88C0D0
variable.other.constant#DADBDD
meta.brace.round.js, meta.brace.square.js, punctuation#ECEFF4
support.type.property-name.json#DADBDD
storage.type.function.arrow.js, storage.type.function.arrow.ts, storage.type.function.arrow.tsx#81A1C1
punctuation.definition.keyword.css, punctuation.definition.directive.c, punctuation.definition.heading.markdown#81A1C1
entity.name.type.class, entity.name.type.module#8FBCBB
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#4C566A
markup.headingnormal
comment, variable.language, variable.parameter, entity.other.attribute-name, keyword, markup.underline.link, storage.modifier, storage.type, string.url, variable.language.super, variable.language.this
keyword.operator, keyword.other.type, storage.modifier.import, storage.modifier.package, storage.type.built-in, storage.type.function.arrow, storage.type.generic, storage.type.java, storage.type.primitive
Best Themes Redefined 🚀 by Lakshit Somani - VS Code Theme