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#0C0C14
  • activityBar.foreground#C4BCAE
  • activityBar.inactiveForeground#686882
  • activityBarBadge.background#D2B450
  • activityBarBadge.foreground#0C0C14
  • badge.background#D2B450
  • badge.foreground#0C0C14
  • breadcrumb.activeSelectionForeground#D2B450
  • breadcrumb.focusForeground#E8E0D4
  • breadcrumb.foreground#9E978C
  • button.background#D2B450
  • button.foreground#0C0C14
  • button.hoverBackground#E0C888
  • button.secondaryBackground#36364A
  • button.secondaryForeground#E8E0D4
  • debugToolBar.background#13131F
  • dropdown.background#262638
  • dropdown.border#36364A
  • editor.background#1B1B2A
  • editor.findMatchBackground#E0C88855
  • editor.findMatchHighlightBackground#E0C88833
  • editor.foreground#E8E0D4
  • editor.lineHighlightBackground#26263822
  • editor.selectionBackground#E0C88833
  • editor.selectionHighlightBackground#E0C88822
  • editorBracketMatch.background#D2B45033
  • editorBracketMatch.border#D2B45066
  • editorCursor.background#1B1B2A
  • editorCursor.foreground#D2B450
  • editorError.foreground#BB4441
  • editorGroupHeader.tabsBackground#13131F
  • editorGroupHeader.tabsBorder#262638
  • editorGutter.addedBackground#527559
  • editorGutter.deletedBackground#BB4441
  • editorGutter.modifiedBackground#D2B450
  • editorHint.foreground#527559
  • editorIndentGuide.activeBackground#36364A
  • editorIndentGuide.background#262638
  • editorInfo.foreground#5B8AB8
  • editorLineNumber.activeForeground#9E978C
  • editorLineNumber.foreground#46465C
  • editorRuler.foreground#262638
  • editorSuggestWidget.background#13131F
  • editorSuggestWidget.border#36364A
  • editorSuggestWidget.highlightForeground#D2B450
  • editorSuggestWidget.selectedBackground#262638
  • editorWarning.foreground#9F7045
  • editorWhitespace.foreground#36364A
  • editorWidget.background#13131F
  • editorWidget.border#36364A
  • errorForeground#BB4441
  • focusBorder#D2B45066
  • gitDecoration.conflictingResourceForeground#9F7045
  • gitDecoration.deletedResourceForeground#BB4441
  • gitDecoration.ignoredResourceForeground#565670
  • gitDecoration.modifiedResourceForeground#D2B450
  • gitDecoration.untrackedResourceForeground#527559
  • input.background#262638
  • input.border#36364A
  • input.foreground#E8E0D4
  • input.placeholderForeground#686882
  • inputOption.activeBorder#D2B450
  • list.activeSelectionBackground#36364A
  • list.activeSelectionForeground#E8E0D4
  • list.focusHighlightForeground#D2B450
  • list.highlightForeground#D2B450
  • list.hoverBackground#262638
  • list.inactiveSelectionBackground#262638
  • minimap.findMatchHighlight#D2B45066
  • minimap.selectionHighlight#E0C88844
  • notificationCenterHeader.background#13131F
  • notifications.background#13131F
  • notifications.border#36364A
  • panel.background#13131F
  • panel.border#262638
  • panelTitle.activeBorder#D2B450
  • panelTitle.activeForeground#E8E0D4
  • panelTitle.inactiveForeground#9E978C
  • peekView.border#D2B450
  • peekViewEditor.background#13131F
  • peekViewEditor.matchHighlightBackground#E0C88844
  • peekViewResult.background#0C0C14
  • peekViewTitle.background#13131F
  • progressBar.background#D2B450
  • scrollbar.shadow#0C0C1400
  • scrollbarSlider.activeBackground#46465CCC
  • scrollbarSlider.background#46465C66
  • scrollbarSlider.hoverBackground#46465C99
  • settings.headerForeground#E8E0D4
  • settings.modifiedItemIndicator#D2B450
  • sideBar.background#13131F
  • sideBar.border#262638
  • sideBar.foreground#C4BCAE
  • sideBarSectionHeader.background#13131F
  • sideBarSectionHeader.foreground#9E978C
  • sideBarTitle.foreground#E8E0D4
  • statusBar.background#0C0C14
  • statusBar.border#262638
  • statusBar.debuggingBackground#BB4441
  • statusBar.debuggingForeground#E8E0D4
  • statusBar.foreground#9E978C
  • statusBar.noFolderBackground#13131F
  • tab.activeBackground#1B1B2A
  • tab.activeBorderTop#D2B450
  • tab.activeForeground#E8E0D4
  • tab.border#0C0C14
  • tab.inactiveBackground#13131F
  • tab.inactiveForeground#9E978C
  • tab.unfocusedActiveBorderTop#D2B45066
  • terminal.ansiBlack#0C0C14
  • terminal.ansiBlue#5B8AB8
  • terminal.ansiBrightBlack#46465C
  • terminal.ansiBrightBlue#5B8AB8
  • terminal.ansiBrightCyan#527559
  • terminal.ansiBrightGreen#527559
  • terminal.ansiBrightMagenta#C88090
  • terminal.ansiBrightRed#BB4441
  • terminal.ansiBrightWhite#E8E0D4
  • terminal.ansiBrightYellow#E0C888
  • terminal.ansiCyan#527559
  • terminal.ansiGreen#527559
  • terminal.ansiMagenta#C88090
  • terminal.ansiRed#BB4441
  • terminal.ansiWhite#C4BCAE
  • terminal.ansiYellow#D2B450
  • terminal.background#1B1B2A
  • terminal.foreground#E8E0D4
  • textLink.activeForeground#D2B450
  • textLink.foreground#5B8AB8
  • titleBar.activeBackground#0C0C14
  • titleBar.activeForeground#C4BCAE
  • titleBar.border#262638
  • titleBar.inactiveBackground#0C0C14
  • titleBar.inactiveForeground#686882

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#A09058italic
keyword, storage, storage.type, storage.modifier, keyword.control, keyword.operator.new, keyword.operator.expression, keyword.operator.typeof, keyword.operator.instanceof#D2B450bold
entity.name.function, support.function, meta.function-call#5B8AB8
string, punctuation.definition.string#527559
constant.numeric#E85600
constant.language, support.constant, variable.other.constant#E85600
entity.name.type, support.type, support.class, entity.name.class, entity.other.inherited-class#EFE2BE
variable, variable.other, variable.parameter#E8E0D4
keyword.operator, keyword.operator.assignment, keyword.operator.arithmetic, keyword.operator.comparison, keyword.operator.logical, punctuation.separator#527559
variable.other.property, support.variable.property, variable.other.object.property, meta.object-literal.key#C4BCAE
entity.name.tag, punctuation.definition.tag#5B8AB8
entity.other.attribute-name#C88090
invalid, invalid.illegal#BB4441
string.regexp, constant.other.character-class.regexp#9F7045
constant.character.escape#E85600
punctuation.bracket, punctuation.definition.block, meta.brace#9E978C
markup.heading, entity.name.section#D2B450bold
markup.bold#EFE2BEbold
markup.italic#A09058italic
markup.underline.link#5B8AB8
markup.inline.raw, markup.fenced_code.block#E85600
markup.inserted#527559
markup.deleted#BB4441
markup.changed#D2B450
Sakya Theme by mouselee - VS Code Theme