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.background#181a1f
  • activityBar.border#0e0f11
  • activityBar.foreground#afb171
  • activityBar.inactiveForeground#5a5a5a
  • activityBarBadge.background#afb171
  • activityBarBadge.foreground#181a1f
  • breadcrumb.activeSelectionForeground#afb171
  • breadcrumb.focusForeground#efdecb
  • breadcrumb.foreground#939393
  • button.background#afb171
  • button.foreground#181a1f
  • button.hoverBackground#9ea162
  • diffEditor.insertedLineBackground#2c3a1fb3
  • diffEditor.insertedTextBackground#8fa36033
  • diffEditor.removedLineBackground#3f2420b3
  • diffEditor.removedTextBackground#d08a4033
  • diffEditorGutter.insertedLineBackground#3a4a27
  • diffEditorGutter.removedLineBackground#4f2d26
  • dropdown.background#1e2127
  • dropdown.border#2a2d35
  • dropdown.foreground#939393
  • editor.background#181a1f
  • editor.findMatchBackground#deac4040
  • editor.findMatchHighlightBackground#deac4020
  • editor.foreground#939393
  • editor.inactiveSelectionBackground#afb17120
  • editor.lineHighlightBackground#20232a
  • editor.selectionBackground#afb17140
  • editor.selectionHighlightBackground#afb17120
  • editor.wordHighlightBackground#afb17120
  • editor.wordHighlightStrongBackground#afb17130
  • editorCursor.foreground#efdecb
  • editorGroupHeader.tabsBackground#151719
  • editorGutter.addedBackground#8fa360
  • editorGutter.deletedBackground#d08a40
  • editorLineNumber.activeForeground#c2b397
  • editorLineNumber.foreground#828282
  • editorSuggestWidget.background#1e2127
  • editorSuggestWidget.border#2a2d35
  • editorSuggestWidget.selectedBackground#afb17120
  • editorWidget.background#1e2127
  • editorWidget.border#2a2d35
  • gitDecoration.conflictingResourceForeground#7976db
  • gitDecoration.deletedResourceForeground#e1b633
  • gitDecoration.ignoredResourceForeground#4a4a4a
  • gitDecoration.modifiedResourceForeground#deac40
  • gitDecoration.untrackedResourceForeground#49d053
  • input.background#1e2127
  • input.border#2a2d35
  • input.foreground#939393
  • input.placeholderForeground#5a5a5a
  • inputOption.activeBorder#afb171
  • list.activeSelectionBackground#afb17120
  • list.activeSelectionForeground#efdecb
  • list.focusBackground#afb17120
  • list.hoverBackground#1e2127
  • list.inactiveSelectionBackground#afb17115
  • panel.background#151719
  • panel.border#0e0f11
  • panelTitle.activeBorder#afb171
  • panelTitle.activeForeground#efdecb
  • panelTitle.inactiveForeground#6a6a6a
  • peekView.border#afb171
  • peekViewEditor.background#1e2127
  • peekViewResult.background#151719
  • peekViewTitle.background#1a1c21
  • scrollbar.shadow#00000050
  • scrollbarSlider.activeBackground#5a5a5a50
  • scrollbarSlider.background#3a3a3a30
  • scrollbarSlider.hoverBackground#4a4a4a40
  • sideBar.background#151719
  • sideBar.border#0e0f11
  • sideBar.foreground#939393
  • sideBarSectionHeader.background#1a1c21
  • sideBarSectionHeader.foreground#afb171
  • sideBarTitle.foreground#efdecb
  • statusBar.background#151719
  • statusBar.border#0e0f11
  • statusBar.foreground#939393
  • statusBar.noFolderBackground#151719
  • statusBarItem.hoverBackground#1e2127
  • tab.activeBackground#181a1f
  • tab.activeBorderTop#afb171
  • tab.activeForeground#efdecb
  • tab.border#0e0f11
  • tab.inactiveBackground#151719
  • tab.inactiveForeground#6a6a6a
  • terminal.ansiBlack#8a94a8
  • terminal.ansiBlue#afb171
  • terminal.ansiBrightBlack#8a94a8
  • terminal.ansiBrightBlue#afb171
  • terminal.ansiBrightCyan#49d053
  • terminal.ansiBrightGreen#d4d64b
  • terminal.ansiBrightMagenta#7976db
  • terminal.ansiBrightRed#e1b633
  • terminal.ansiBrightWhite#efdecb
  • terminal.ansiBrightYellow#deac40
  • terminal.ansiCyan#49d053
  • terminal.ansiGreen#d4d64b
  • terminal.ansiMagenta#7976db
  • terminal.ansiRed#e1b633
  • terminal.ansiWhite#efdecb
  • terminal.ansiYellow#deac40
  • terminal.background#181a1f
  • terminal.foreground#939393
  • titleBar.activeBackground#151719
  • titleBar.activeForeground#939393
  • titleBar.border#0e0f11
  • titleBar.inactiveBackground#151719
  • titleBar.inactiveForeground#6a6a6a
  • tree.indentGuidesStroke#2a2d35

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#5a5a5aitalic
string, string.quoted#d4d64b
constant.numeric, constant.language#deac40
keyword, storage.type, storage.modifier#7976db
entity.name.function, meta.function-call#afb171
variable, variable.other#939393
entity.name.type, entity.name.class, support.class#e1b633
entity.other.attribute-name#49d053
support.function, support.variable, support.constant#afb171
constant.other, constant.character#deac40
keyword.operator, punctuation#939393
invalid, invalid.illegal#e1b633underline
markup.heading#afb171bold
markup.boldbold
markup.italicitalic
markup.underlineunderline
markup.quote#5a5a5aitalic
markup.raw, markup.inline.raw#d4d64b
meta.selector, entity.other.attribute-name.css#49d053
support.type.property-name#afb171
entity.name.tag#e1b633
meta.separator#939393
Curtain Call by stagecodes - VS Code Theme