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#2c2e32f5
  • actionBar.toggledForeground#dbdee3ff
  • actionBar.toggledHoverBackground#27292dff
  • activityBar.activeBorder#d0d9dfff
  • activityBar.background#000000ff
  • activityBar.border#202225ff
  • activityBar.foreground#dbdee3ff
  • activityBar.inactiveForeground#7e8085ff
  • activityBarBadge.background#d0d9dfff
  • activityBarBadge.foreground#000000ff
  • badge.background#d0d9dfff
  • badge.foreground#000000ff
  • button.background#d0d9dfff
  • button.foreground#000000ff
  • button.hoverBackground#e4edf3ff
  • button.secondaryBackground#000101ff
  • button.secondaryForeground#dbdee3ff
  • button.secondaryHoverBackground#030305ff
  • checkbox.background#141619ff
  • checkbox.border#202225ff
  • checkbox.foreground#dbdee3ff
  • debugIcon.breakpointCurrentStackframeForeground#d0d9dfff
  • debugIcon.breakpointDisabledForeground#e9a69266
  • debugIcon.breakpointForeground#e9a692ff
  • debugIcon.breakpointStackframeForeground#99e09eff
  • debugIcon.breakpointUnverifiedForeground#e9a69266
  • descriptionForeground#7e8085ff
  • diffEditor.insertedLineBackground#99e09e1f
  • diffEditor.insertedTextBackground#99e09e33
  • diffEditor.removedLineBackground#e9a6921f
  • diffEditor.removedTextBackground#e9a69238
  • diffEditorGutter.insertedLineBackground#99e09e29
  • diffEditorGutter.removedLineBackground#e9a69229
  • disabledForeground#7e8085ff
  • dropdown.background#141619ff
  • dropdown.border#202225ff
  • dropdown.foreground#dbdee3ff
  • editor.background#171a21ff
  • editor.findMatchBackground#e4edf359
  • editor.findMatchBorder#202225ff
  • editor.foreground#faffffff
  • editor.inactiveSelectionBackground#22262dff
  • editor.lineHighlightBackground#0001014d
  • editor.placeholder.foreground#7e8085ff
  • editor.rangeHighlightBackground#01020333
  • editor.selectionBackground#272b32ff
  • editor.selectionHighlightBackground#e4edf333
  • editorBracketMatch.border#202225ff
  • editorCursor.background#171a21ff
  • editorCursor.foreground#dbdee3ff
  • editorError.foreground#e9a692ff
  • editorGhostText.foreground#7e8085ff
  • editorGroup.border#202225ff
  • editorGroupHeader.border#202225ff
  • editorGroupHeader.tabsBackground#000000ff
  • editorGroupHeader.tabsBorder#202225ff
  • editorGroupHeader.tabsForeground#dbdee3ff
  • editorGutter.addedBackground#99e09eff
  • editorGutter.background#0c0d11ff
  • editorGutter.breakpointCountForeground#e9a692ff
  • editorGutter.breakpointDisabledForeground#e9a69266
  • editorGutter.breakpointForeground#e9a692ff
  • editorGutter.breakpointUnverifiedForeground#e9a69266
  • editorGutter.deletedBackground#e9a692ff
  • editorGutter.modifiedBackground#d0d9dfff
  • editorHoverWidget.background#141619ff
  • editorHoverWidget.border#202225ff
  • editorHoverWidget.foreground#dbdee3ff
  • editorIndentGuide.activeBackground1#333539ff
  • editorIndentGuide.background1#202225b3
  • editorInfo.foreground#eaf3faff
  • editorLineNumber.activeForeground#faffffff
  • editorLineNumber.foreground#9a9fa880
  • editorSuggestWidget.background#141619ff
  • editorSuggestWidget.border#202225ff
  • editorSuggestWidget.foreground#dbdee3ff
  • editorSuggestWidget.highlightForeground#d0d9dfff
  • editorSuggestWidget.selectedBackground#e4edf333
  • editorWarning.foreground#ffccb8ff
  • editorWhitespace.foreground#202225b3
  • editorWidget.background#141619ff
  • editorWidget.foreground#dbdee3ff
  • editorWidget.resizeBorder#202225ff
  • focusBorder#d0d9dfff
  • foreground#dbdee3ff
  • gitDecoration.addedResourceForeground#99e09eff
  • gitDecoration.conflictingResourceForeground#a092e9ff
  • gitDecoration.deletedResourceForeground#e9a692ff
  • gitDecoration.ignoredResourceForeground#7e8085ff
  • gitDecoration.modifiedResourceForeground#7198eeff
  • gitDecoration.renamedResourceForeground#7198eeff
  • gitDecoration.stageDeletedResourceForeground#e9a692ff
  • gitDecoration.stageModifiedResourceForeground#7198eeff
  • gitDecoration.submoduleResourceForeground#7e8085ff
  • gitDecoration.untrackedResourceForeground#99e09eff
  • icon.foreground#dbdee3ff
  • inlineChat.background#141619ff
  • inlineChat.border#d0d9dfff
  • inlineChat.foreground#dbdee3ff
  • inlineChatInput.background#141619ff
  • inlineChatInput.border#202225ff
  • inlineChatInput.focusBorder#d0d9dfff
  • inlineChatInput.placeholderForeground#7e8085ff
  • input.background#141619ff
  • input.border#202225ff
  • input.foreground#dbdee3ff
  • input.placeholderForeground#7e8085ff
  • inputOption.activeBackground#2c2e32f5
  • inputOption.activeBorder#00000000
  • inputOption.activeForeground#dbdee3ff
  • inputOption.hoverBackground#27292dff
  • list.activeSelectionBackground#2c2e32f5
  • list.activeSelectionForeground#dbdee3ff
  • list.activeSelectionIconForeground#7e8085ff
  • list.deemphasizedForeground#7e8085ff
  • list.errorForeground#e9a692ff
  • list.focusAndSelectionOutline#00000000
  • list.focusBackground#2c2e32f5
  • list.focusForeground#dbdee3ff
  • list.focusOutline#00000000
  • list.highlightForeground#d0d9dfff
  • list.hoverBackground#27292dff
  • list.hoverForeground#dbdee3ff
  • list.inactiveFocusOutline#00000000
  • list.inactiveSelectionBackground#27292de6
  • list.inactiveSelectionForeground#dbdee3ff
  • list.inactiveSelectionIconForeground#7e8085ff
  • list.warningForeground#eed097ff
  • menu.background#141619ff
  • menu.border#202225ff
  • menu.foreground#dbdee3ff
  • menu.selectionBackground#e4edf34d
  • menu.selectionForeground#dbdee3ff
  • menu.separatorBackground#202225ff
  • notificationCenter.border#202225ff
  • notificationCenterHeader.background#141619ff
  • notificationCenterHeader.foreground#dbdee3ff
  • notifications.background#141619ff
  • notifications.border#202225ff
  • notifications.foreground#dbdee3ff
  • notificationToast.border#202225ff
  • panel.background#000000ff
  • panel.border#202225ff
  • panelInput.border#202225ff
  • panelSection.border#202225ff
  • panelTitle.activeBorder#d0d9dfff
  • panelTitle.activeForeground#dbdee3ff
  • panelTitle.inactiveForeground#7e8085ff
  • pickerGroup.border#202225ff
  • pickerGroup.foreground#7e8085ff
  • sash.border#202225ff
  • sash.hoverBorder#d0d9dfff
  • scrollbar.shadow#171a2173
  • scrollbarSlider.activeBackground#7b8089f5
  • scrollbarSlider.background#535860c7
  • scrollbarSlider.hoverBackground#6a6e77e6
  • sideBar.background#000000ff
  • sideBar.border#202225ff
  • sideBar.foreground#dbdee3ff
  • sideBarSectionHeader.background#00000000
  • sideBarSectionHeader.border#202225ff
  • sideBarSectionHeader.foreground#dbdee3ff
  • sideBarTitle.foreground#dbdee3ff
  • statusBar.background#000000ff
  • statusBar.border#202225ff
  • statusBar.debuggingBackground#000000ff
  • statusBar.debuggingForeground#dbdee3ff
  • statusBar.foreground#dbdee3ff
  • statusBar.noFolderBackground#000000ff
  • statusBar.noFolderForeground#dbdee3ff
  • statusBarItem.errorBackground#000000ff
  • statusBarItem.errorForeground#e9a692ff
  • statusBarItem.hoverBackground#27292dff
  • statusBarItem.prominentBackground#010203d9
  • statusBarItem.prominentForeground#dbdee3ff
  • statusBarItem.prominentHoverBackground#050608f2
  • statusBarItem.remoteBackground#000000ff
  • statusBarItem.remoteForeground#d0d9dfff
  • statusBarItem.warningBackground#000000ff
  • statusBarItem.warningForeground#eed097ff
  • tab.activeBackground#000000ff
  • tab.activeBorder#d0d9dfff
  • tab.activeForeground#dbdee3ff
  • tab.border#202225ff
  • tab.inactiveBackground#000000ff
  • tab.inactiveForeground#7e8085ff
  • terminal.ansiBlack#17181d
  • terminal.ansiBlue#7198ee
  • terminal.ansiBrightBlack#424a59
  • terminal.ansiBrightBlue#7198ee
  • terminal.ansiBrightCyan#6DDED5
  • terminal.ansiBrightGreen#99e09e
  • terminal.ansiBrightMagenta#C792E9
  • terminal.ansiBrightRed#E9A692
  • terminal.ansiBrightWhite#d0d9df
  • terminal.ansiBrightYellow#EED097
  • terminal.ansiCyan#6DDED5
  • terminal.ansiGreen#99e09e
  • terminal.ansiMagenta#A092E9
  • terminal.ansiRed#E9A692
  • terminal.ansiWhite#d0d9df
  • terminal.ansiYellow#EED097
  • terminal.background#000000ff
  • terminal.foreground#dbdee3ff
  • terminal.selectionBackground#e4edf340
  • terminal.tab.activeBorder#d0d9dfff
  • terminalCursor.background#d0d9dfff
  • terminalCursor.foreground#dbdee3ff
  • textLink.foreground#d0d9dfff
  • titleBar.activeBackground#000000ff
  • titleBar.activeForeground#dbdee3ff
  • titleBar.border#202225ff
  • titleBar.inactiveBackground#000000ff
  • titleBar.inactiveForeground#7e8085ff
  • toolbar.hoverBackground#27292dff
  • tree.inactiveIndentGuidesStroke#202225ff
  • tree.indentGuidesStroke#202225ff
  • widget.shadow#00000000

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
source.ts, constant.numeric, meta.rule.lexer.antlr#EED097—
keyword, keyword.control, storage.modifier.ts, support.class.promise, storage.modifier.async, entity.name.tag.wildcard, storage.type, storage.modifier.sql#eb7eb3—
string, punctuation.definition.string.begin,punctuation.definition.string.end#E9A692—
punctuation, keyword.operator.type.annotation, keyword.operator.assignment, meta.brace.round, meta.brace.square, meta.rule.parser.antlr, keyword.operator.key-value.rust, keyword.operator.access.dot.rust#424a59—
variable.other, variable.other.object.tsx, storage.type.function.antlr, constant.other.antlr, meta.interpolation.rust#d0d9df—
entity.name.type, entity.other.inherited-class.ts, support.type, keyword.other.unit, storage.type.sql#6DDED5italic
entity.name.type—italic bold
source.go storage.type#6DDED5italic
entity.name.function, variable.scss, entity.name.rule.antlr#7198ee—
meta.definition.function, entity.name.rule.antlr, storage.type.var.antlr, entity.name.function.rust—bold
variable.object.property, meta.object-literal.key, variable.parameter, entity.other.attribute-name.tsx, entity.other.attribute-name.html, support.type.property-name.css, variable.other.property.go, meta.function.definition.rust variable.other.rust, support.variable.property#8a9fb4
keyword.operator, punctuation.accessor.optional#99e09e—
comment, punctuation.definition.comment#586378italic
support.class.component.tsx, entity.other.attribute-name.id.css, entity.other.attribute-name.class.css, storage.type.var.antlr, constant.other.table-name.sql#C792E9—
entity.name.tag.html, entity.name.tag.tsx, entity.name.tag.css, meta.attribute.rust, constant.other.database-name.sql#A092E9—
Stentor by Stentor - VS Code Theme