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#181818
  • activityBar.border#b2b2b200
  • activityBar.foreground#b2b2b2
  • activityBarBadge.background#58a9c1
  • activityBarBadge.foreground#000000
  • badge.background#00000080
  • badge.foreground#545454
  • breadcrumb.activeSelectionForeground#58a9c1
  • breadcrumb.background#181818
  • breadcrumb.focusForeground#b2b2b2
  • breadcrumb.foreground#b2b2b280
  • breadcrumbPicker.background#181818
  • button.background#b2b2b240
  • button.foreground#e2e2e2
  • button.hoverBackground#b2b2b280
  • button.secondaryBackground#b2b2b240
  • button.secondaryForeground#e2e2e2
  • button.secondaryHoverBackground#b2b2b280
  • debugToolBar.background#181818
  • diffEditor.insertedTextBackground#c3e88d15
  • diffEditor.removedTextBackground#ff537020
  • dropdown.background#181818
  • dropdown.border#b2b2b220
  • editor.background#181818
  • editor.foreground#b2b2b2
  • editor.lineHighlightBackground#00000000
  • editor.lineHighlightBorder#00000000
  • editor.selectionBackground#b2b2b240
  • editor.selectionHighlightBackground#b2b2b240
  • editor.wordHighlightTextBackground#ffcc0028
  • editorBracketHighlight.foreground1#e2e2e2
  • editorBracketHighlight.foreground2#e2e2e2
  • editorBracketHighlight.foreground3#e2e2e2
  • editorBracketHighlight.foreground4#e2e2e2
  • editorBracketHighlight.foreground5#e2e2e2
  • editorBracketHighlight.foreground6#e2e2e2
  • editorBracketMatch.background#181818
  • editorBracketMatch.border#ffcc0050
  • editorCursor.background#000000
  • editorCursor.foreground#e2e2e2
  • editorError.foreground#ff537070
  • editorGroup.border#b2b2b220
  • editorGroupHeader.noTabsBackground#181818
  • editorGroupHeader.tabsBackground#181818
  • editorGutter.addedBackground#c3e88d60
  • editorGutter.deletedBackground#ff537060
  • editorGutter.modifiedBackground#82aaff60
  • editorHoverWidget.background#181818
  • editorHoverWidget.border#b2b2b220
  • editorIndentGuide.activeBackground1#b2b2b240
  • editorIndentGuide.background1#b2b2b220
  • editorLineNumber.activeForeground#b2b2b2
  • editorLineNumber.foreground#b2b2b240
  • editorLink.activeForeground#58a9c1
  • editorMarkerNavigation.background#b2b2b205
  • editorOverviewRuler.border#181818
  • editorRuler.foreground#b2b2b220
  • editorSuggestWidget.background#181818
  • editorSuggestWidget.border#b2b2b220
  • editorSuggestWidget.foreground#b2b2b2
  • editorSuggestWidget.highlightForeground#58a9c1
  • editorSuggestWidget.selectedBackground#00000080
  • editorWarning.foreground#c3e88d70
  • editorWhitespace.foreground#b2b2b240
  • editorWidget.background#181818
  • editorWidget.border#b2b2b220
  • editorWidget.resizeBorder#58a9c1
  • extensionButton.prominentBackground#c3e88dc0
  • extensionButton.prominentHoverBackground#c3e88d
  • focusBorder#b2b2b200
  • gitDecoration.addedResourceForeground#ffcb6bc0
  • gitDecoration.conflictingResourceForeground#7753a8c0
  • gitDecoration.deletedResourceForeground#ff5370c0
  • gitDecoration.ignoredResourceForeground#b2b2b280
  • gitDecoration.modifiedResourceForeground#82aaffc0
  • gitDecoration.untrackedResourceForeground#c3e88dc0
  • icon.foreground#b2b2b2
  • input.background#181818
  • input.border#b2b2b240
  • input.foreground#b2b2b2
  • input.placeholderForeground#b2b2b280
  • inputOption.activeBackground#b2b2b200
  • inputOption.activeBorder#58a9c1
  • inputOption.activeForeground#b2b2b2
  • inputValidation.errorBorder#ff537050
  • inputValidation.infoBorder#82aaff50
  • inputValidation.warningBorder#ffcb6b50
  • list.activeSelectionBackground#181818
  • list.activeSelectionForeground#58a9c1
  • list.focusBackground#b2b2b220
  • list.focusForeground#b2b2b2
  • list.highlightForeground#58a9c1
  • list.hoverBackground#181818
  • list.hoverForeground#b2b2b2
  • list.inactiveSelectionBackground#00000080
  • list.inactiveSelectionForeground#58a9c1
  • listFilterWidget.background#00000080
  • listFilterWidget.noMatchesOutline#00000080
  • listFilterWidget.outline#00000080
  • menu.background#181818
  • menu.foreground#b2b2b2
  • menu.selectionBackground#00000080
  • menu.selectionBorder#00000080
  • menu.selectionForeground#58a9c1
  • menu.separatorBackground#b2b2b2
  • menubar.selectionBackground#00000080
  • menubar.selectionBorder#00000080
  • menubar.selectionForeground#58a9c1
  • notebook.cellBorderColor#b2b2b220
  • notebook.focusedCellBorder#b2b2b220
  • notebook.focusedEditorBorder#b2b2b240
  • notificationLink.foreground#58a9c1
  • notifications.background#181818
  • notifications.foreground#b2b2b2
  • panel.background#181818
  • panel.border#b2b2b220
  • panelTitle.activeBorder#58a9c1
  • panelTitle.activeForeground#b2b2b2
  • panelTitle.inactiveForeground#b2b2b2
  • peekView.border#00000080
  • peekViewEditor.background#b2b2b205
  • peekViewEditor.matchHighlightBackground#b2b2b240
  • peekViewEditorGutter.background#b2b2b205
  • peekViewResult.background#b2b2b205
  • peekViewResult.matchHighlightBackground#b2b2b240
  • peekViewResult.selectionBackground#b2b2b240
  • peekViewTitle.background#b2b2b205
  • peekViewTitleDescription.foreground#b2b2b240
  • pickerGroup.foreground#58a9c1
  • progressBar.background#58a9c1
  • scrollbar.shadow#18181800
  • scrollbarSlider.activeBackground#b2b2b2c0
  • scrollbarSlider.background#b2b2b280
  • scrollbarSlider.hoverBackground#b2b2b2c0
  • selection.background#b2b2b240
  • settings.checkboxBackground#181818
  • settings.checkboxForeground#b2b2b2
  • settings.dropdownBackground#181818
  • settings.dropdownForeground#b2b2b2
  • settings.headerForeground#58a9c1
  • settings.modifiedItemIndicator#58a9c1
  • settings.numberInputBackground#181818
  • settings.numberInputForeground#b2b2b2
  • settings.textInputBackground#181818
  • settings.textInputForeground#b2b2b2
  • sideBar.background#181818
  • sideBar.border#b2b2b220
  • sideBar.foreground#b2b2b2
  • sideBarSectionHeader.background#181818
  • sideBarSectionHeader.border#b2b2b220
  • sideBarTitle.foreground#b2b2b2
  • statusBar.background#181818
  • statusBar.border#b2b2b200
  • statusBar.debuggingBackground#7753a8c0
  • statusBar.debuggingForeground#b2b2b2
  • statusBar.focusBorder#b2b2b200
  • statusBar.foreground#b2b2b280
  • statusBar.noFolderBackground#181818
  • statusBarItem.remoteBackground#b2b2b240
  • statusBarItem.remoteForeground#b2b2b2
  • statusBarItem.remoteHoverBackground#58a9c140
  • statusBarItem.remoteHoverForeground#b2b2b2
  • tab.activeBorder#58a9c1
  • tab.activeForeground#b2b2b2
  • tab.activeModifiedBorder#b2b2b280
  • tab.border#b2b2b200
  • tab.inactiveBackground#181818
  • tab.inactiveForeground#b2b2b280
  • tab.unfocusedActiveBorder#545454
  • tab.unfocusedActiveForeground#b2b2b2
  • terminal.ansiBlack#404040
  • terminal.ansiBlue#0b96ea
  • terminal.ansiBrightBlack#545454
  • terminal.ansiBrightBlue#0b96ea
  • terminal.ansiBrightCyan#11cedf
  • terminal.ansiBrightGreen#90d511
  • terminal.ansiBrightMagenta#7753a8
  • terminal.ansiBrightRed#ef200b
  • terminal.ansiBrightWhite#dbdbdb
  • terminal.ansiBrightYellow#efb610
  • terminal.ansiCyan#11cedf
  • terminal.ansiGreen#90d511
  • terminal.ansiMagenta#7753a8
  • terminal.ansiRed#ef200b
  • terminal.ansiWhite#dbdbdb
  • terminal.ansiYellow#efb610
  • textLink.activeForeground#58a9c1
  • textLink.foreground#58a9c1
  • titleBar.activeBackground#181818
  • titleBar.activeForeground#b2b2b2
  • titleBar.border#b2b2b200
  • titleBar.inactiveBackground#181818
  • titleBar.inactiveForeground#b2b2b280
  • tree.inactiveIndentGuidesStroke#b2b2b220
  • tree.indentGuidesStroke#b2b2b240
  • widget.shadow#00000080

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#717171
constant#e59a66
constant.character.escape.python#e2e2e2
entity.name.function#31b3e6
entity.name.tag.yaml#b2b2b2
entity.name.type#e5c272
entity.name.function.decorator.python#b2b2b2
entity.name.function.support#4dc2cd
heading.1.markdown#e59a66bold underline
heading.2.markdown#d07ce5bold underline
heading.3.markdown#4dc2cdbold underline
heading.4.markdown#f2757ebold underline
heading.5.markdown#25cba5bold underline
heading.6.markdown#31b3e6bold underline
keyword#d07ce5
keyword.codetag.notation.python#e2e2e2
keyword.control#f2757e
keyword.operator#e2e2e2
keyword.operator.logical.python#f2757e
markup.bold#e2e2e2bold
markup.deleted.diff#f2757e
markup.fenced_code.block.markdown#717171
markup.inline.raw#e2e2e2
markup.inserted.diff#25cba5
markup.italic#e2e2e2italic
markup.math.block.markdown#4dc2cd
markup.math.inline.markdown#e2e2e2
markup.quote#d07ce5
meta.diff.header.git#e2e2e2
meta.diff.header.from-file#f2757e
meta.diff.header.to-file#25cba5
meta.diff.index.git#e2e2e2
meta.diff.range.unified#e5c272
meta.function-call#4dc2cd
meta.function-call.arguments#b2b2b2
meta.function-call.c#b2b2b2
meta.link.inline.markdown#31b3e6underline
punctuation.definition.list.begin.markdown#717171
punctuation.definition.subshell.single.shell#d07ce5
punctuation.definition.variable#e5c272
storage#d07ce5
string#25cba5
string.quoted.double.shell#b2b2b2
string.quoted.single.shell#b2b2b2
string.unquoted.argument.shell#b2b2b2
string.other.link.title.markdown#31b3e6
support#4dc2cd
support.function#4dc2cd
support.function.magic.python#31b3e6
support.type.property-name#b2b2b2
support.type.python#4dc2cd
support.type.exception.python#b2b2b2
support.variable.magic.python#31b3e6
variable.key.dotenv#d07ce5
variable.language.special.self.python#e5c272
variable.other.assignment.shell#d18c66
variable.other.normal.shell#e5c272
variable.other.readwrite.batchfile#e5c272
variable.parameter.batchfile#d18c66
variable.parameter.function#b2b2b2
variable.parameter.function-call#25cba5