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

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#616161
constant#d18c66
constant.character.escape.python#c3c3c3
entity.name.function#3193c6
entity.name.tag.yaml#929292
entity.name.type#d5b272
entity.name.function.decorator.python#929292
entity.name.function.support#4da2ad
heading.1.markdown#d19a66bold underline
heading.2.markdown#b06cc5bold underline
heading.3.markdown#4da2adbold underline
heading.4.markdown#d2656ebold underline
heading.5.markdown#05ad97bold underline
heading.6.markdown#3193c6bold underline
keyword#b06cc5
keyword.codetag.notation.python#c3c3c3
keyword.control#d2656e
keyword.operator#c3c3c3
keyword.operator.logical.python#d2656e
markup.bold#c3c3c3bold
markup.deleted.diff#d2656e
markup.fenced_code.block.markdown#616161
markup.inline.raw#c3c3c3
markup.inserted.diff#05ad97
markup.italic#c3c3c3italic
markup.math.block.markdown#4da2ad
markup.math.inline.markdown#c3c3c3
markup.quote#b06cc5
meta.diff.header.git#c3c3c3
meta.diff.header.from-file#d2656e
meta.diff.header.to-file#05ad97
meta.diff.index.git#c3c3c3
meta.diff.range.unified#d5b272
meta.function-call#4da2ad
meta.function-call.arguments#929292
meta.function-call.c#929292
meta.link.inline.markdown#3193c6underline
punctuation.definition.list.begin.markdown#616161
punctuation.definition.subshell.single.shell#b06cc5
punctuation.definition.variable#d5b272
storage#b06cc5
string#05ad97
string.quoted.double.shell#929292
string.quoted.single.shell#929292
string.unquoted.argument.shell#929292
string.other.link.title.markdown#3193c6
support#4da2ad
support.function#4da2ad
support.function.magic.python#3193c6
support.type.property-name#929292
support.type.python#4da2ad
support.type.exception.python#929292
support.variable.magic.python#3193c6
variable.key.dotenv#b06cc5
variable.language.special.self.python#d5b272
variable.other.assignment.shell#d18c66
variable.other.normal.shell#d5b272
variable.other.readwrite.batchfile#d5b272
variable.parameter.batchfile#d18c66
variable.parameter.function#929292
variable.parameter.function-call#05ad97
Flat GOOI Material by ilyag88 - VS Code Theme