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#f3f4f6
  • activityBar.border#e5e7eb
  • activityBar.foreground#111827
  • activityBarBadge.background#b91c1c
  • activityBarBadge.foreground#ffffff
  • badge.background#b91c1c
  • badge.foreground#ffffff
  • button.background#b91c1c
  • button.foreground#ffffff
  • button.hoverBackground#991b1b
  • checkbox.background#ffffff
  • checkbox.border#e5e7eb
  • dropdown.background#ffffff
  • dropdown.border#e5e7eb
  • editor.background#ffffff
  • editor.findMatchBackground#fef3c7
  • editor.findMatchHighlightBackground#fef9c3
  • editor.foreground#111827
  • editor.inactiveSelectionBackground#e0e7ff
  • editor.lineHighlightBackground#f3f4f620
  • editor.lineHighlightBorder#e5e7eb
  • editor.rangeHighlightBackground#eff6ff
  • editor.selectionBackground#c7d2fe
  • editorBracketMatch.background#c7d2fe40
  • editorBracketMatch.border#0066cc
  • editorCursor.foreground#111827
  • editorError.foreground#b91c1c
  • editorGroupHeader.tabsBackground#f3f4f6
  • editorGroupHeader.tabsBorder#e5e7eb
  • editorIndentGuide.activeBackground#9ca3af
  • editorIndentGuide.background#e5e7eb
  • editorLineNumber.activeForeground#374151
  • editorLineNumber.foreground#9ca3af
  • editorOverviewRuler.border#e5e7eb
  • editorWarning.foreground#d97706
  • editorWhitespace.foreground#d1d5db
  • focusBorder#0066cc
  • input.background#ffffff
  • input.border#e5e7eb
  • input.foreground#111827
  • inputOption.activeBorder#0066cc
  • list.activeSelectionBackground#e0f2fe
  • list.activeSelectionForeground#111827
  • list.focusBackground#dbeafe
  • list.highlightForeground#0066cc
  • list.hoverBackground#f0f9ff
  • panel.background#ffffff
  • panel.border#e5e7eb
  • panelTitle.activeBorder#b91c1c
  • panelTitle.activeForeground#111827
  • progressBar.background#b91c1c
  • scrollbar.shadow#0000001a
  • selection.background#c7d2fe
  • sideBar.background#f9fafb
  • sideBar.border#e5e7eb
  • sideBar.foreground#111827
  • sideBarSectionHeader.background#f3f4f6
  • sideBarSectionHeader.foreground#111827
  • sideBarTitle.foreground#374151
  • statusBar.background#ffffff
  • statusBar.border#e5e7eb
  • statusBar.debuggingBackground#ffffff
  • statusBar.debuggingForeground#111827
  • statusBar.foreground#111827
  • statusBar.noFolderBackground#ffffff
  • statusBar.noFolderForeground#111827
  • statusBarItem.hoverBackground#f3f4f6
  • statusBarItem.remoteBackground#ffffff
  • statusBarItem.remoteForeground#111827
  • tab.activeBackground#ffffff
  • tab.activeBorder#b91c1c
  • tab.activeForeground#111827
  • tab.border#e5e7eb
  • tab.hoverBackground#f9fafb
  • tab.inactiveBackground#f3f4f6
  • tab.inactiveForeground#6b7280
  • terminal.ansiBlack#374151
  • terminal.ansiBlue#0066cc
  • terminal.ansiBrightBlack#6b7280
  • terminal.ansiBrightBlue#2563eb
  • terminal.ansiBrightCyan#06b6d4
  • terminal.ansiBrightGreen#16a34a
  • terminal.ansiBrightMagenta#7c3aed
  • terminal.ansiBrightRed#dc2626
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#f59e0b
  • terminal.ansiCyan#0891b2
  • terminal.ansiGreen#14532d
  • terminal.ansiMagenta#5b21b6
  • terminal.ansiRed#b91c1c
  • terminal.ansiWhite#f3f4f6
  • terminal.ansiYellow#d97706
  • terminal.background#ffffff
  • terminal.foreground#111827
  • terminalCursor.foreground#111827
  • titleBar.activeBackground#ffffff
  • titleBar.activeForeground#111827
  • titleBar.border#e5e7eb
  • titleBar.inactiveBackground#f9fafb
  • titleBar.inactiveForeground#6b7280
  • widget.shadow#0000001a

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
keyword.control.pyret, keyword.other.pyret, keyword.pyret#b91c1c
comment.line.number-sign.pyret, comment.block.pyret, comment#d97706italic
string.quoted.double.pyret, string.quoted.single.pyret, string.quoted.triple.pyret, string#14532d
constant.language.boolean.pyret, constant.language#2563eb
constant.numeric.decimal.pyret, constant.numeric#1d4ed8
constant.numeric.rough.pyret#2563eb
constant.numeric.rational.pyret#4f46e5
entity.name.function.pyret#0066cc
entity.name.type.pyret, support.type.pyret#5b21b6
variable.parameter.pyret, variable.parameter, variable.other.readwrite.pyret, variable.other.pyret, variable#15803d
variable.other.constant.pyret, constant.other.pyret, constant#0a192f
keyword.operator.pyret, support.other.pyret#111827