Skip to main content
Coding Theme

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.activeBackground#1f2938
  • activityBar.activeBorder#e8c896
  • activityBar.background#151a26
  • activityBar.foreground#8ba4ba
  • activityBar.inactiveForeground#4a5866
  • activityBarBadge.background#7ab0e0
  • activityBarBadge.foreground#1c2333
  • badge.background#7ab0e0
  • badge.foreground#1c2333
  • breadcrumb.background#1c2333
  • breadcrumb.focusForeground#d4dae3
  • breadcrumb.foreground#8ba4ba
  • button.background#7ab0e0
  • button.foreground#1c2333
  • button.hoverBackground#8fc0ea
  • dropdown.background#1f2535
  • dropdown.border#3a4555
  • dropdown.foreground#d4dae3
  • editor.background#1c2333
  • editor.findMatchBackground#e8c89690
  • editor.findMatchHighlightBackground#e8c89640
  • editor.foreground#d4dae3
  • editor.lineHighlightBackground#1f2635
  • editor.selectionBackground#4a6a8f70
  • editor.selectionHighlightBackground#2e4a6d50
  • editor.wordHighlightBackground#2e4a6d70
  • editor.wordHighlightStrongBackground#3d5a7f70
  • editorBracketMatch.background#7ab0e040
  • editorBracketMatch.border#7ab0e0
  • editorCursor.foreground#e8c896
  • editorGroup.border#3a4555
  • editorGroupHeader.tabsBackground#151a26
  • editorGutter.addedBackground#5fa88a
  • editorGutter.background#1c2333
  • editorGutter.deletedBackground#d66863
  • editorGutter.modifiedBackground#e8c896
  • editorHoverWidget.background#252b3a
  • editorHoverWidget.border#3a4555
  • editorIndentGuide.activeBackground1#7ab0e090
  • editorIndentGuide.background1#3a455530
  • editorLineNumber.activeForeground#8ba4ba
  • editorLineNumber.foreground#4a5866
  • editorRuler.foreground#3a4555
  • editorSuggestWidget.background#252b3a
  • editorSuggestWidget.border#3a4555
  • editorSuggestWidget.foreground#d4dae3
  • editorSuggestWidget.highlightForeground#7ab0e0
  • editorSuggestWidget.selectedBackground#3d5a7f
  • editorWhitespace.foreground#3a4555
  • editorWidget.background#252b3a
  • editorWidget.border#3a4555
  • input.background#252b3a
  • input.border#3a4555
  • input.foreground#d4dae3
  • input.placeholderForeground#4a5866
  • list.activeSelectionBackground#7ab0e050
  • list.activeSelectionForeground#f0f4f8
  • list.focusBackground#7ab0e030
  • list.hoverBackground#2a303f50
  • list.inactiveSelectionBackground#3d5a7f40
  • menu.background#252b3a
  • menu.border#3a4555
  • menu.foreground#d4dae3
  • menu.selectionBackground#7ab0e050
  • menu.selectionForeground#f0f4f8
  • menu.separatorBackground#3a4555
  • menubar.selectionBackground#7ab0e050
  • menubar.selectionBorder#e8c896
  • menubar.selectionForeground#f0f4f8
  • panel.background#1c2333
  • panel.border#3a4555
  • panelTitle.activeForeground#d4dae3
  • panelTitle.inactiveForeground#8ba4ba
  • peekView.border#e8c896
  • peekViewEditor.background#1c2333
  • peekViewResult.background#252b3a
  • progressBar.background#e8c896
  • scrollbar.shadow#00000060
  • scrollbarSlider.activeBackground#7ab0e070
  • scrollbarSlider.background#4a586650
  • scrollbarSlider.hoverBackground#8ba4ba50
  • searchEditor.findMatchBackground#e8c89650
  • searchEditor.findMatchBorder#e8c896
  • sideBar.background#151a26
  • sideBar.border#3a4555
  • sideBar.foreground#8ba4ba
  • sideBarSectionHeader.background#1c2333
  • sideBarSectionHeader.foreground#d4dae3
  • sideBarTitle.foreground#d4dae3
  • statusBar.background#151a26
  • statusBar.debuggingBackground#2a3f5f
  • statusBar.debuggingBorder#7ab0e0
  • statusBar.debuggingForeground#7ab0e0
  • statusBar.foreground#8ba4ba
  • statusBar.noFolderBackground#151a26
  • statusBarItem.activeBackground#7ab0e050
  • statusBarItem.errorBackground#d66863
  • statusBarItem.errorForeground#f0f4f8
  • statusBarItem.hoverBackground#2a303f
  • statusBarItem.prominentBackground#e8c896
  • statusBarItem.prominentForeground#1c2333
  • statusBarItem.prominentHoverBackground#f0d4a8
  • statusBarItem.warningBackground#e8c896
  • statusBarItem.warningForeground#1c2333
  • tab.activeBackground#1c2333
  • tab.activeBorderTop#e8c896
  • tab.activeForeground#d4dae3
  • tab.border#3a4555
  • tab.hoverBackground#1f2938
  • tab.hoverForeground#d4dae3
  • tab.inactiveBackground#151a26
  • tab.inactiveForeground#8ba4ba
  • tab.unfocusedActiveBackground#1c2333
  • tab.unfocusedActiveBorder#4a5866
  • tab.unfocusedActiveForeground#8ba4ba
  • tab.unfocusedInactiveBackground#151a26
  • tab.unfocusedInactiveForeground#4a5866
  • terminal.background#1c2333
  • terminal.foreground#d4dae3
  • terminalCursor.background#1c2333
  • terminalCursor.foreground#e8c896
  • titleBar.activeBackground#151a26
  • titleBar.activeForeground#d4dae3
  • titleBar.inactiveBackground#1c2333
  • titleBar.inactiveForeground#4a5866
  • tree.indentGuidesStroke#3a4555
  • widget.shadow#00000060

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#6a7f8fitalic
variable, string constant.other.placeholder#d4dae3
constant, entity.name.constant#d4b87a
entity, entity.name#7ab0e0
invalid, invalid.illegal#d66863
keyword, storage.type, storage.modifier#8fb5d4
keyword.operator, punctuation#9dc8e8
string#9dc8b5
constant.numeric#e8c896
constant.language#d4b87a
constant.character, constant.other#d4b87a
variable#d4dae3
keyword#8fb5d4
storage#8fb5d4
storage.type#7ab0e0italic
entity.name.class#7ab0e0underline
entity.name.function#7ab0e0
variable.parameter#e8c896
entity.name.tag#d4a0ba
entity.other.attribute-name#7ab0e0
support.function#7ab0e0
support.constant#d4b87a
support.type, support.class#7ab0e0
support.other.variable
invalid#d66863
invalid.deprecated#d66863
meta.structure.dictionary.json string.quoted.double.json#9dc8b5
meta.diff, meta.diff.header#b89fc7
markup.deleted#d66863
markup.inserted#5fa88a
markup.changed#e8c896
token.info-token#7ab0e0
token.warn-token#e8c896
token.error-token#d66863
token.debug-token#b89fc7
keyword.control.import, keyword.control.export, keyword.control.from#8fb5d4italic
The Rain Witch Theme by Torikkyun - VS Code Theme