Skip to main content
CodingTheme

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#002b36
  • activityBar.border#073642
  • activityBar.dropBackground#2aa1987f
  • activityBar.foreground#fdf6e3
  • activityBar.inactiveForeground#2aa198
  • activityBarBadge.background#dc322f
  • activityBarBadge.foreground#ffffec
  • badge.background#586e75
  • badge.foreground#fdf6e3
  • button.background#073642
  • button.foreground#fdf6e3
  • button.hoverBackground#2aa198
  • debugToolBar.background#fdf6e3
  • debugToolBar.border#eee8d5
  • diffEditor.border#fdf6e3
  • diffEditor.insertedTextBackground#85990033
  • diffEditor.removedTextBackground#cb4b1633
  • dropdown.background#002b36
  • dropdown.border#073642
  • dropdown.foreground#fdf6e3
  • dropdown.listBackground#073642
  • editor.background#002b36
  • editor.findMatchBackground#dc322f3f
  • editor.findMatchHighlightBackground#dc322f3f
  • editor.foreground#ffffec
  • editor.hoverHighlightBackground#268bd23f
  • editor.inactiveSelectionBackground#dc322f5e
  • editor.lineHighlightBackground#073642
  • editor.selectionBackground#dc322f7f
  • editor.selectionHighlightBackground#268bd23f
  • editorBracketMatch.background#073642
  • editorBracketMatch.border#2aa198
  • editorCodeLens.foreground#2aa198
  • editorCursor.background#ffffec
  • editorCursor.foreground#dc322f
  • editorError.foreground#cb4b16
  • editorGroup.border#073642
  • editorGroup.dropBackground#2aa1987f
  • editorGroupHeader.noTabsBackground#002b36
  • editorGroupHeader.tabsBackground#002b36
  • editorGroupHeader.tabsBorder#073642
  • editorGutter.addedBackground#859900
  • editorGutter.deletedBackground#cb4b16
  • editorGutter.modifiedBackground#268bd2
  • editorHint.foreground#859900
  • editorHoverWidget.statusBarBackground#fdf6e3
  • editorIndentGuide.activeBackground#002b36
  • editorIndentGuide.background#eee8d5
  • editorInfo.foreground#268bd2
  • editorLineNumber.activeForeground#2aa198
  • editorLineNumber.foreground#586e75
  • editorLink.activeForeground#6c71c4
  • editorPane.background#002b36
  • editorRuler.foreground#dc322fad
  • editorUnnecessaryCode.border#d33682
  • editorUnnecessaryCode.opacity#000000bf
  • editorWarning.foreground#d33682
  • editorWhitespace.foreground#dc322fad
  • editorWidget.background#073642
  • editorWidget.border#586e75
  • extensionButton.prominentBackground#d33682
  • extensionButton.prominentForeground#fdf6e3
  • extensionButton.prominentHoverBackground#2aa198
  • fsharp.linelens#2aa198
  • input.background#002b36
  • input.border#073642
  • input.foreground#fdf6e3
  • input.placeholderForeground#2aa198
  • list.activeSelectionBackground#073642
  • list.activeSelectionForeground#fdf6e3
  • list.errorForeground#cb4b16
  • list.highlightForeground#268bd2
  • list.hoverBackground#073642
  • list.inactiveSelectionBackground#073642
  • list.inactiveSelectionForeground#fdf6e3
  • list.invalidItemForeground#2aa198
  • list.warningForeground#d33682
  • notifications.background#073642
  • notifications.foreground#fdf6e3
  • panel.border#fdf6e3
  • panelTitle.activeBorder#002b36
  • peekView.border#002b36
  • peekViewEditor.background#fdf6e3
  • peekViewEditor.matchHighlightBackground#dc322f3f
  • peekViewEditorGutter.background#eee8d5
  • peekViewResult.background#002b36
  • peekViewResult.fileForeground#fdf6e3
  • peekViewResult.lineForeground#eee8d5
  • peekViewResult.selectionBackground#586e75
  • peekViewResult.selectionForeground#fdf6e3
  • peekViewTitle.background#002b36
  • peekViewTitleDescription.foreground#eee8d5
  • peekViewTitleLabel.foreground#fdf6e3
  • scrollbar.shadow#d33682
  • scrollbarSlider.activeBackground#ffffecd4
  • scrollbarSlider.background#ffffec7f
  • scrollbarSlider.hoverBackground#ffffecab
  • settings.checkboxBackground#002b36
  • settings.checkboxBorder#2aa198
  • settings.headerForeground#fdf6e3
  • settings.modifiedItemIndicator#268bd2
  • sideBar.background#002b36
  • sideBar.border#073642
  • sideBar.dropBackground#2aa1987f
  • sideBar.foreground#fdf6e3
  • sideBarSectionHeader.background#002b36
  • sideBarSectionHeader.border#073642
  • sideBarSectionHeader.foreground#fdf6e3
  • sideBarTitle.foreground#fdf6e3
  • statusBar.background#002b36
  • statusBar.debuggingBackground#b58900
  • statusBar.foreground#fdf6e3
  • statusBar.noFolderBackground#002b36
  • tab.activeBackground#ffffec
  • tab.activeForeground#002b36
  • tab.border#073642
  • tab.hoverBorder#002b36
  • tab.inactiveBackground#002b36
  • tab.inactiveForeground#fdf6e3
  • tab.unfocusedActiveBackground#073642
  • terminal.ansiBlack#073642
  • terminal.ansiBlue#268bd2
  • terminal.ansiBrightBlack#002b36
  • terminal.ansiBrightBlue#839496
  • terminal.ansiBrightCyan#93a1a1
  • terminal.ansiBrightGreen#586e75
  • terminal.ansiBrightMagenta#6c71c4
  • terminal.ansiBrightRed#cb4b16
  • terminal.ansiBrightWhite#fdf6e3
  • terminal.ansiBrightYellow#657b83
  • terminal.ansiCyan#2aa198
  • terminal.ansiGreen#859900
  • terminal.ansiMagenta#d33682
  • terminal.ansiRed#dc322f
  • terminal.ansiWhite#eee8d5
  • terminal.ansiYellow#b58900
  • terminal.background#002b36
  • terminal.foreground#ffffec
  • textLink.activeForeground#268bd2
  • textLink.foreground#6c71c4
  • tree.indentGuidesStroke#2aa198
  • welcomePage.buttonBackground#073642
  • welcomePage.buttonHoverBackground#2aa198

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
keyword, compiler_directive.fsharp, support.function.attribute.fsharp#eee8d5bold
comment#2aa198
string#93a1a1

Shiki preview

TypeScript sample highlighted with this variant's colors and tokenColors.

Loading...

Solarized ZERO by Aksamyt - VS Code Theme