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#0f161f
  • activityBar.foreground#D9D7D6B3
  • activityBarBadge.background#6791C9
  • activityBarBadge.foreground#000a0e
  • badge.background#131e22
  • badge.foreground#D9D7D6
  • breadcrumbPicker.background#0d181c
  • button.background#242f33
  • debugToolBar.background#0f161f
  • diffEditor.insertedTextBackground#8CD7AA1A
  • diffEditor.removedTextBackground#DF5B611A
  • dropdown.background#1c2736
  • dropdown.border#2e425b
  • dropdown.foreground#e4ecf5
  • dropdown.listBackground#1c2736
  • editor.background#0f161f
  • editor.findMatchBackground#313c4080
  • editor.findMatchHighlightBackground#313c404D
  • editor.findRangeHighlightBackground#313c401A
  • editor.hoverHighlightBackground#313c404D
  • editor.inactiveSelectionBackground#2d456630
  • editor.lineHighlightBackground#0d181c4D
  • editor.rangeHighlightBackground#131e2280
  • editor.selectionBackground#2d456660
  • editor.selectionHighlightBackground#FFFFFF15
  • editor.wordHighlightBackground#313c4080
  • editor.wordHighlightStrongBackground#313c4080
  • editorBracketMatch.background#313c4080
  • editorBracketMatch.border#313c4000
  • editorCodeLens.foreground#3b464a80
  • editorCursor.background#0f161f
  • editorCursor.foreground#78B892
  • editorError.foreground#DF5B61
  • editorGroup.border#131e22
  • editorGroup.dropBackground#313c404D
  • editorGroupHeader.tabsBackground#0f161f
  • editorGutter.addedBackground#8CD7AAB3
  • editorGutter.deletedBackground#DF5B61B3
  • editorGutter.modifiedBackground#7ACFE4B3
  • editorIndentGuide.activeBackground1#1c272b
  • editorIndentGuide.background1#131e2280
  • editorLineNumber.activeForeground#D9D7D680
  • editorLineNumber.foreground#313c40
  • editorOverviewRuler.addedForeground#8CD7AA80
  • editorOverviewRuler.border#131e22B3
  • editorOverviewRuler.bracketMatchForeground#D9D7D680
  • editorOverviewRuler.deletedForeground#DF5B6180
  • editorOverviewRuler.errorForeground#DF5B61E6
  • editorOverviewRuler.findMatchForeground#313c40e9
  • editorOverviewRuler.modifiedForeground#7ACFE480
  • editorOverviewRuler.warningForeground#ecd28b80
  • editorRuler.foreground#313c404D
  • editorSuggestWidget.highlightForeground#78B892
  • editorWarning.foreground#ecd28bB3
  • editorWidget.background#1c2736
  • editorWidget.border#2e425b
  • errorForeground#DF5B61
  • extensionButton.prominentBackground#78B892
  • extensionButton.prominentHoverBackground#8CD7AA
  • focusBorder#131e22
  • foreground#D9D7D6
  • gitDecoration.addedResourceForeground#8CD7AA
  • gitDecoration.deletedResourceForeground#DF5B61
  • gitDecoration.ignoredResourceForeground#D9D7D64D
  • gitDecoration.modifiedResourceForeground#E89982
  • gitDecoration.untrackedResourceForeground#78B892
  • input.background#1c2736
  • input.border#2e425b
  • input.foreground#e4ecf5
  • inputOption.activeBorder#78B89280
  • inputValidation.errorBackground#DF5B6180
  • inputValidation.errorBorder#DF5B6100
  • list.activeSelectionBackground#1e2d40
  • list.activeSelectionForeground#D9D7D6
  • list.dropBackground#313c4080
  • list.errorForeground#DF5B61E6
  • list.focusBackground#1c272b
  • list.focusForeground#D9D7D6
  • list.highlightForeground#ecd28b
  • list.hoverBackground#131e2280
  • list.hoverForeground#D9D7D6
  • list.inactiveFocusBackground#131e2280
  • list.inactiveSelectionBackground#151e2a
  • list.inactiveSelectionForeground#D9D7D6
  • list.warningForeground#ecd28bB3
  • panel.background#0f161f
  • panelTitle.activeBorder#78B892
  • peekView.border#131e22
  • peekViewEditor.background#0d181c
  • peekViewEditor.matchHighlightBackground#313c4080
  • peekViewResult.background#0d181c
  • peekViewResult.matchHighlightBackground#313c4080
  • peekViewResult.selectionBackground#1c272b80
  • peekViewTitle.background#0d181c
  • pickerGroup.foreground#78B892E6
  • progressBar.background#78B892
  • scrollbar.shadow#000a0e
  • scrollbarSlider.activeBackground#4f5a5e80
  • scrollbarSlider.background#313c404D
  • scrollbarSlider.hoverBackground#3b464a80
  • selection.background#313c4080
  • sideBar.background#0f161f
  • sideBar.dropBackground#313c404D
  • sideBar.foreground#D9D7D680
  • sideBarSectionHeader.background#0f161f
  • sideBarSectionHeader.foreground#D9D7D6B3
  • sideBarTitle.background#0f161f
  • statusBar.background#0f161f
  • statusBar.debuggingBackground#E89982
  • statusBar.debuggingForeground#000a0e
  • statusBar.foreground#D9D7D680
  • statusBar.noFolderBackground#0f161f
  • statusBarItem.hoverBackground#131e22
  • statusBarItem.prominentBackground#131e22
  • statusBarItem.prominentHoverBackground#313c40
  • tab.activeBackground#0f161f
  • tab.activeBorder#78B892
  • tab.border#0f161f00
  • tab.inactiveBackground#0f161f
  • terminal.ansiBlue#6791C9
  • terminal.ansiBrightBlue#79AAEB
  • terminal.ansiBrightCyan#7ACFE4
  • terminal.ansiBrightGreen#8CD7AA
  • terminal.ansiBrightMagenta#C488EC
  • terminal.ansiBrightRed#f26e74
  • terminal.ansiBrightYellow#f6dc95
  • terminal.ansiCyan#67AFC1
  • terminal.ansiGreen#78B892
  • terminal.ansiMagenta#BC83E3
  • terminal.ansiRed#DF5B61
  • terminal.ansiYellow#ecd28b
  • terminal.background#0f161f
  • terminal.foreground#D9D7D6
  • terminal.inactiveSelectionBackground#2d456630
  • terminal.selectionBackground#2d456660
  • terminalCursor.background#D9D7D6
  • terminalCursor.foreground#313c4080
  • textLink.activeForeground#6791C9
  • textLink.foreground#79AAEB
  • titleBar.activeBackground#0f161f
  • titleBar.inactiveBackground#0f161f
  • walkThrough.embeddedEditorBackground#0d181c
  • widget.shadow#000a0e

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#BBBBBB4Ditalic
constant#F09483E6
constant.character.escape#25B0BCE6
entity.name#FAC29AE6
entity.name.function#25B0BCE6
entity.name.tag#E95678E6
entity.name.type, storage.type.cs#FAC29AE6
entity.other.attribute-name#F09483E6
entity.other.inherited-class#FAB795E6
entity.other.attribute-name.id#25B0BCE6
entity.other.attribute-name.pseudo-element, entity.other.attribute-name.pseudo-class#FAB795E6
entity.name.variable, variable#E95678E6
keyword#B877DBE6
keyword.operator#BBBBBB
keyword.operator.new, keyword.operator.expression, keyword.operator.logical, keyword.operator.delete#B877DBE6
keyword.other.unit#F09483E6
markup.quote#FAB795B3italic
markup.heading, entity.name.section#E95678E6
markup.bold#B877DBE6bold
markup.italic#25B0BCE6italic
markup.inline.raw, markup.fenced_code.block#F09483E6
markup.underline.link#FAB795E6
storage#B877DBE6
string.quoted, string.template#FAB795E6
string.regexp#F09483E6
string.other.link#F09483E6
support#FAC29AE6
support.function#25B0BCE6
support.variable#E95678E6
support.type.property-name, meta.object-literal.key#E95678E6
support.type.property-name.css#BBBBBB
variable.language#FAC29AE6italic
variable.parameteritalic
string.template meta.embedded#BBBBBB
punctuation.definition.tag#E95678B3
punctuation.separator#BBBBBB
punctuation.definition.template-expression, punctuation.quasi.element#B877DBE6
punctuation.section.embedded#B877DBE6
punctuation.definition.list#F09483E6
Nythera by Sumit - VS Code Theme