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.activeBackground#000000
  • activityBar.background#000000
  • activityBar.border#000000
  • activityBar.foreground#ffffff
  • activityBar.inactiveForeground#ffffff7f
  • activityBarBadge.background#000000
  • activityBarBadge.foreground#ffffff
  • badge.background#000000
  • badge.foreground#ffffff
  • breadcrumb.background#000000
  • breadcrumb.focusForeground#ffffff
  • breadcrumb.foreground#ffffff7f
  • button.background#060606
  • button.foreground#ffffff7f
  • button.hoverBackground#060606
  • button.secondaryBackground#060606
  • button.secondaryForeground#ffffff7f
  • button.secondaryHoverBackground#060606
  • debugToolBar.background#000000
  • debugToolBar.border#000000
  • diffEditor.border#000000
  • diffEditor.insertedTextBackground#111111
  • diffEditor.insertedTextBorder#00000000
  • diffEditor.removedTextBackground#111111
  • diffEditor.removedTextBorder#00000000
  • editor.background#000000
  • editor.findMatchBackground#1d1d1d
  • editor.findMatchBorder#434343
  • editor.findMatchHighlightBackground#1d1d1d
  • editor.findMatchHighlightBorder#434343
  • editor.findRangeHighlightBackground#111111
  • editor.findRangeHighlightBorder#00000000
  • editor.foldBackground#1d1d1d
  • editor.foreground#ffffff7f
  • editor.hoverHighlightBackground#1d1d1d
  • editor.inactiveSelectionBackground#1d1d1d
  • editor.lineHighlightBackground#000000
  • editor.lineHighlightBorder#000000
  • editor.rangeHighlightBackground#1d1d1d
  • editor.rangeHighlightBorder#434343
  • editor.selectionBackground#1d1d1d
  • editor.selectionHighlightBackground#1d1d1d
  • editor.selectionHighlightBorder#434343
  • editor.wordHighlightBackground#1d1d1d
  • editor.wordHighlightBorder#434343
  • editor.wordHighlightStrongBackground#1d1d1d
  • editorBracketMatch.background#1d1d1d
  • editorBracketMatch.border#434343
  • editorCodeLens.foreground#ffffff7f
  • editorCursor.background#000000
  • editorCursor.foreground#ffffff7f
  • editorError.background#00000000
  • editorError.border#00000000
  • editorError.foreground#ff00007f
  • editorGroup.border#000000
  • editorGroupHeader.border#000000
  • editorGroupHeader.tabsBackground#000000
  • editorGroupHeader.tabsBorder#000000
  • editorGutter.addedBackground#000000
  • editorGutter.background#000000
  • editorGutter.deletedBackground#000000
  • editorGutter.foldingControlForeground#ffffff7f
  • editorGutter.modifiedBackground#000000
  • editorHoverWidget.background#1d1d1d
  • editorHoverWidget.border#434343
  • editorHoverWidget.foreground#ffffff7f
  • editorIndentGuide.activeBackground1#00000000
  • editorIndentGuide.background1#00000000
  • editorInfo.background#00000000
  • editorInfo.border#00000000
  • editorInfo.foreground#ffffff7f
  • editorLineNumber.activeForeground#ffffff
  • editorLineNumber.foreground#ffffff7f
  • editorLink.activeForeground#ffffff
  • editorOverviewRuler.background#00000000
  • editorOverviewRuler.border#00000000
  • editorRuler.foreground#00000000
  • editorSuggestWidget.background#1d1d1d
  • editorSuggestWidget.border#434343
  • editorSuggestWidget.foreground#ffffff7f
  • editorSuggestWidget.highlightForeground#ffffff
  • editorSuggestWidget.selectedBackground#434343
  • editorWarning.background#00000000
  • editorWarning.border#00000000
  • editorWarning.foreground#ffff007f
  • editorWhitespace.foreground#00000000
  • editorWidget.background#000000
  • editorWidget.foreground#ffffff7f
  • editorWidget.resizeBorder#000000
  • focusBorder#000000
  • foreground#ffffff
  • gitDecoration.addedResourceForeground#ffffff7f
  • gitDecoration.conflictingResourceForeground#ffffff7f
  • gitDecoration.deletedResourceForeground#ffffff7f
  • gitDecoration.ignoredResourceForeground#ffffff7f
  • gitDecoration.modifiedResourceForeground#ffffff7f
  • gitDecoration.stageDeletedResourceForeground#ffffff7f
  • gitDecoration.stageModifiedResourceForeground#ffffff7f
  • gitDecoration.submoduleResourceForeground#ffffff7f
  • gitDecoration.untrackedResourceForeground#ffffff7f
  • input.background#000000
  • input.border#000000
  • input.foreground#ffffff
  • input.placeholderForeground#ffffff7f
  • inputOption.activeBackground#000000
  • inputOption.activeBorder#000000
  • inputOption.activeForeground#ffffff
  • list.activeSelectionBackground#000000
  • list.activeSelectionForeground#ffffff
  • list.dropBackground#000000
  • list.focusBackground#000000
  • list.focusForeground#ffffff7f
  • list.highlightForeground#ffffff
  • list.hoverBackground#000000
  • list.hoverForeground#ffffff
  • list.inactiveSelectionBackground#000000
  • list.inactiveSelectionForeground#ffffff7f
  • listFilterWidget.background#000000
  • listFilterWidget.noMatchesOutline#ffffff7f
  • listFilterWidget.outline#ffffff7f
  • menu.background#000000
  • menu.border#000000
  • menu.foreground#ffffff7f
  • menu.selectionBackground#000000
  • menu.selectionBorder#000000
  • menu.selectionForeground#ffffff
  • menu.separatorBackground#000000
  • menubar.selectionBackground#000000
  • menubar.selectionBorder#000000
  • menubar.selectionForeground#ffffff
  • notificationCenter.border#000000
  • notificationCenterHeader.background#000000
  • notificationCenterHeader.foreground#ffffff
  • notifications.background#000000
  • notifications.border#000000
  • notifications.foreground#ffffff
  • notificationsErrorIcon.foreground#ff00007f
  • notificationsInfoIcon.foreground#ffffff7f
  • notificationsWarningIcon.foreground#ffff007f
  • panel.background#000000
  • panel.border#000000
  • panelTitle.activeBorder#000000
  • panelTitle.activeForeground#ffffff
  • panelTitle.inactiveForeground#ffffff7f
  • pickerGroup.border#000000
  • pickerGroup.foreground#ffffff7f
  • progressBar.background#ffffff
  • scrollbar.shadow#060606
  • scrollbarSlider.activeBackground#060606
  • scrollbarSlider.background#060606
  • scrollbarSlider.hoverBackground#060606
  • selection.background#000000
  • sideBar.background#000000
  • sideBar.border#000000
  • sideBar.foreground#ffffff7f
  • sideBarSectionHeader.background#000000
  • sideBarSectionHeader.border#000000
  • sideBarSectionHeader.foreground#ffffff
  • statusBar.background#000000
  • statusBar.border#000000
  • statusBar.foreground#ffffff7f
  • statusBar.noFolderBackground#000000
  • statusBarItem.hoverForeground#ffffff
  • statusBarItem.remoteBackground#000000
  • statusBarItem.remoteForeground#ffffff7f
  • statusBarItem.remoteHoverForeground#ffffff
  • tab.activeBorder#000000
  • tab.activeBorderTop#000000
  • tab.activeForeground#ffffff
  • tab.border#000000
  • tab.hoverForeground#ffffff
  • tab.inactiveBackground#000000
  • tab.inactiveForeground#ffffff7f
  • terminal.border#00000000
  • terminal.foreground#ffffff7f
  • terminal.integrated.cursorStyleunderline
  • terminal.selectionBackground#060606
  • terminal.selectionForeground#ffffff
  • terminalCursor.background#000000
  • terminalCursor.foreground#ffffff7f
  • titleBar.activeBackground#000000
  • titleBar.activeForeground#ffffff
  • titleBar.inactiveBackground#000000
  • titleBar.inactiveForeground#ffffff
  • tree.indentGuidesStroke#00000000
  • widget.shadow#000000

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
emphasisitalic
strongbold
meta.diff.header#ffffff
comment#ffffff
constant.language#ffffff
constant.numeric, constant.other.color.rgb-value, constant.other.rgb-value, support.constant.color#ffffff
constant.regexp#ffffff
entity.name.tag#ffffff
entity.name.tag.css#ffffff
entity.other.attribute-name#ffffff
source.css entity.other.attribute-name, source.css.less entity.other.attribute-name.id, source.scss entity.other.attribute-name#ffffff
invalid#ff0000
markup.underlineunderline
markup.boldbold
markup.heading#ffffff
markup.italicitalic
markup.inserted#ffffff
markup.deleted#ffffff
markup.changed#ffffff
meta.selector#ffffff
punctuation.definition.tag#ffffff
meta.preprocessor#ffffff
meta.preprocessor.string#ffffff
meta.preprocessor.numeric#ffffff
meta.structure.dictionary.key.python#ffffff
storage#ffffff
storage.type#ffffff
storage.modifier#ffffff
string#ffffff
string.tag#ffffff
string.value#ffffff
string.regexp#ffffff
punctuation.definition.template-expression.begin.js, punctuation.definition.template-expression.begin.ts, punctuation.definition.template-expression.end.ts, punctuation.definition.template-expression.end.js#ffffff
support.type.vendored.property-name, support.type.property-name, variable.css, variable.scss, variable.other.less#ffffff
keyword#ffffff
keyword.control#ffffff
keyword.operator#ffffff
keyword.operator.new, keyword.operator.expression, keyword.operator.cast, keyword.operator.sizeof, keyword.operator.logical.python#ffffff
keyword.other.unit#ffffff
support.function.git-rebase#ffffff
constant.sha.git-rebase#ffffff
storage.modifier.import.java, variable.language.wildcard.java, storage.modifier.package.java#ffffff
variable.language.this#ffffff
entity.name.function, support.function, support.constant.handlebars#ffffff
meta.return-type, support.class, support.type, entity.name.type, entity.name.class, source.cs storage.type#ffffff
meta.type.cast.expr, meta.type.new.expr, support.constant.math, support.constant.dom, support.constant.json, entity.other.inherited-class#ffffff
keyword.control#ffffff
variable, meta.definition.variable.name, support.variable#ffffff7f
meta.object-literal.key, meta.object-literal.key entity.name.function#ffffff7f
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#ffffff
string.quoted.double.json#ffffff7f
ThemeDatabase All Themes by enes ozturk - VS Code Theme