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#21252b
  • activityBar.border#181a1f
  • activityBar.foreground#abb2bf
  • activityBarBadge.background#528bff
  • activityBarBadge.foreground#ffffff
  • badge.background#4d78cc
  • badge.foreground#ffffff
  • button.background#4d78cc
  • button.foreground#ffffff
  • button.hoverBackground#608bdf
  • checkbox.background#1d1f23
  • checkbox.border#181a1f
  • dropdown.background#1d1f23
  • dropdown.border#181a1f
  • editor.background#282c34
  • editor.findMatchBackground#42557b
  • editor.findMatchHighlightBackground#314365
  • editor.foreground#abb2bf
  • editor.inactiveSelectionBackground#353b45
  • editor.lineHighlightBackground#2c313c
  • editor.lineHighlightBorder#2c313c
  • editor.rangeHighlightBackground#2c313c
  • editor.selectionBackground#3e4451
  • editorBracketMatch.background#3e4451
  • editorBracketMatch.border#61afef
  • editorCursor.foreground#528bff
  • editorError.foreground#f44747
  • editorGroupHeader.tabsBackground#21252b
  • editorGroupHeader.tabsBorder#181a1f
  • editorIndentGuide.activeBackground#5c6370
  • editorIndentGuide.background#3b4048
  • editorLineNumber.activeForeground#abb2bf
  • editorLineNumber.foreground#4b5263
  • editorOverviewRuler.border#181a1f
  • editorWarning.foreground#cca700
  • editorWhitespace.foreground#3b4048
  • focusBorder#528bff
  • input.background#1d1f23
  • input.border#181a1f
  • input.foreground#abb2bf
  • inputOption.activeBorder#528bff
  • list.activeSelectionBackground#2c313c
  • list.activeSelectionForeground#d7dae0
  • list.focusBackground#323842
  • list.highlightForeground#61afef
  • list.hoverBackground#2c313c
  • panel.background#21252b
  • panel.border#181a1f
  • panelTitle.activeBorder#61afef
  • panelTitle.activeForeground#abb2bf
  • progressBar.background#61afef
  • scrollbar.shadow#0000004d
  • selection.background#3e4451
  • sideBar.background#21252b
  • sideBar.border#181a1f
  • sideBar.foreground#abb2bf
  • sideBarSectionHeader.background#282c34
  • sideBarSectionHeader.foreground#abb2bf
  • sideBarTitle.foreground#abb2bf
  • statusBar.background#21252b
  • statusBar.border#181a1f
  • statusBar.debuggingBackground#cc6633
  • statusBar.foreground#9da5b4
  • statusBar.noFolderBackground#21252b
  • statusBarItem.hoverBackground#2c313c
  • tab.activeBackground#282c34
  • tab.activeBorder#61afef
  • tab.activeForeground#abb2bf
  • tab.border#181a1f
  • tab.hoverBackground#2c313c
  • tab.inactiveBackground#21252b
  • tab.inactiveForeground#5c6370
  • terminal.ansiBlack#1e2127
  • terminal.ansiBlue#61afef
  • terminal.ansiBrightBlack#5c6370
  • terminal.ansiBrightBlue#61afef
  • terminal.ansiBrightCyan#56b6c2
  • terminal.ansiBrightGreen#98c379
  • terminal.ansiBrightMagenta#c678dd
  • terminal.ansiBrightRed#e06c75
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#d19a66
  • terminal.ansiCyan#56b6c2
  • terminal.ansiGreen#98c379
  • terminal.ansiMagenta#c678dd
  • terminal.ansiRed#e06c75
  • terminal.ansiWhite#abb2bf
  • terminal.ansiYellow#d19a66
  • terminal.background#282c34
  • terminal.foreground#abb2bf
  • terminalCursor.foreground#528bff
  • titleBar.activeBackground#21252b
  • titleBar.activeForeground#9da5b4
  • titleBar.border#181a1f
  • titleBar.inactiveBackground#21252b
  • titleBar.inactiveForeground#5c6370
  • widget.shadow#0000004d

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
keyword.control.pyret, keyword.other.pyret, keyword.pyret#c678dd
comment.line.number-sign.pyret, comment.block.pyret, comment#7f848eitalic
string.quoted.double.pyret, string.quoted.single.pyret, string.quoted.triple.pyret, string#98c379
constant.language.boolean.pyret, constant.language#d19a66
constant.numeric.decimal.pyret, constant.numeric#d19a66
constant.numeric.rough.pyret#d19a66
constant.numeric.rational.pyret#d19a66
entity.name.function.pyret#61afef
entity.name.type.pyret, support.type.pyret#e5c07b
variable.other.constant.pyret, constant.other.pyret, constant#d19a66
variable.other.readwrite.pyret, variable.other.pyret#abb2bf
keyword.operator.pyret, support.other.pyret#56b6c2