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#0000
  • activityBar.dropBackground#2aa1987f
  • activityBar.foreground#fdf6e3
  • activityBar.inactiveForeground#2aa198
  • activityBarBadge.background#dc322f
  • activityBarBadge.foreground#ffffec
  • badge.background#002b36
  • badge.foreground#fdf6e3
  • button.background#002b36
  • 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#0000
  • dropdown.foreground#fdf6e3
  • dropdown.listBackground#fdf6e3
  • editor.background#ffffec
  • editor.findMatchBackground#dc322f3f
  • editor.findMatchHighlightBackground#dc322f3f
  • editor.foreground#002b36
  • editor.hoverHighlightBackground#268bd23f
  • editor.inactiveSelectionBackground#fdf6e3
  • editor.lineHighlightBackground#fdf6e3
  • editor.selectionBackground#eee8d5
  • editor.selectionHighlightBackground#268bd23f
  • editorBracketMatch.background#fdf6e3
  • editorBracketMatch.border#2aa198
  • editorCodeLens.foreground#2aa198
  • editorCursor.background#ffffec
  • editorCursor.foreground#dc322f
  • editorError.foreground#cb4b16
  • editorGroup.border#fdf6e3
  • editorGroup.dropBackground#2aa1987f
  • editorGroupHeader.noTabsBackground#ffffec
  • editorGroupHeader.tabsBackground#ffffec
  • editorGroupHeader.tabsBorder#fdf6e3
  • editorGutter.addedBackground#859900
  • editorGutter.deletedBackground#cb4b16
  • editorGutter.modifiedBackground#268bd2
  • editorHint.foreground#859900
  • editorHoverWidget.statusBarBackground#002b36
  • editorIndentGuide.activeBackground#002b36
  • editorIndentGuide.background#eee8d5
  • editorInfo.foreground#268bd2
  • editorLineNumber.activeForeground#586e75
  • editorLineNumber.foreground#2aa198
  • editorLink.activeForeground#6c71c4
  • editorPane.background#002b36
  • editorRuler.foreground#eee8d5
  • editorUnnecessaryCode.border#d33682
  • editorUnnecessaryCode.opacity#000000bf
  • editorWarning.foreground#d33682
  • editorWhitespace.foreground#eee8d5
  • editorWidget.background#fdf6e3
  • editorWidget.border#eee8d5
  • extensionButton.prominentBackground#d33682
  • extensionButton.prominentForeground#fdf6e3
  • extensionButton.prominentHoverBackground#2aa198
  • fsharp.linelens#2aa198
  • input.background#002b36
  • input.foreground#fdf6e3
  • input.placeholderForeground#2aa198
  • list.activeSelectionBackground#002b36
  • list.activeSelectionForeground#fdf6e3
  • list.errorForeground#cb4b16
  • list.highlightForeground#268bd2
  • list.hoverBackground#fdf6e3
  • list.inactiveSelectionBackground#002b36
  • list.inactiveSelectionForeground#fdf6e3
  • list.invalidItemForeground#2aa198
  • list.warningForeground#d33682
  • 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#eee8d5
  • scrollbarSlider.activeBackground#2aa198d4
  • scrollbarSlider.background#002b367f
  • scrollbarSlider.hoverBackground#2aa198ab
  • settings.checkboxBackground#ffffec
  • settings.checkboxBorder#002b36
  • settings.headerForeground#073642
  • settings.modifiedItemIndicator#268bd2
  • sideBar.background#ffffec
  • sideBar.border#fdf6e3
  • sideBar.dropBackground#2aa1987f
  • sideBar.foreground#586e75
  • sideBarSectionHeader.background#fdf6e3
  • sideBarSectionHeader.border#0000
  • sideBarSectionHeader.foreground#073642
  • sideBarTitle.foreground#002b36
  • statusBar.background#002b36
  • statusBar.debuggingBackground#b58900
  • statusBar.foreground#fdf6e3
  • statusBar.noFolderBackground#002b36
  • tab.activeBackground#002b36
  • tab.activeForeground#ffffec
  • tab.border#fdf6e3
  • tab.hoverBorder#002b36
  • tab.inactiveBackground#ffffec
  • tab.inactiveForeground#002b36
  • 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#ffffec
  • terminal.foreground#002b36
  • textLink.activeForeground#268bd2
  • textLink.foreground#6c71c4
  • tree.indentGuidesStroke#2aa198
  • welcomePage.buttonBackground#eee8d5
  • welcomePage.buttonHoverBackground#fdf6e3

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
keyword, compiler_directive.fsharp, support.function.attribute.fsharp#073642bold
comment#2aa198
string#586e75

Shiki preview

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

Loading...