Skip to main content
CodingTheme

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#051336
  • activityBar.foreground#16ec5d
  • activityBar.inactiveForeground#0063a5
  • badge.background#0063a5
  • button.background#2b3c5d
  • debugExceptionWidget.background#051336
  • debugExceptionWidget.border#ab395b
  • debugToolBar.background#051336
  • diffEditor.insertedTextBackground#31958a55
  • diffEditor.removedTextBackground#892f4688
  • dropdown.background#181e29
  • dropdown.border#0063a5
  • dropdown.foreground#a8a2a2
  • editor.background#000c18
  • editor.findMatchHighlightBackground#eeeeee44
  • editor.lineHighlightBackground#073642
  • editor.selectionBackground#274642
  • editor.selectionHighlightBackground#005a6faa
  • editor.wordHighlightBackground#004454aa
  • editor.wordHighlightStrongBackground#005a6faa
  • editorCursor.foreground#ddbb88
  • editorGroup.border#2b2b4a
  • editorGroup.dropBackground#25375daa
  • editorGroupHeader.tabsBackground#1c1c2a
  • editorHoverWidget.background#10192c
  • editorHoverWidget.border#10192c
  • editorIndentGuide.activeBackground#204972
  • editorIndentGuide.background#002952
  • editorLineNumber.activeForeground#80a2c2
  • editorLineNumber.foreground#406385
  • editorLink.activeForeground#0063a5
  • editorMarkerNavigation.background#060621
  • editorMarkerNavigationError.background#ab395b
  • editorMarkerNavigationWarning.background#5b7e7a
  • editorSuggestWidget.background#10192c
  • editorSuggestWidget.highlightForeground#ffffff
  • editorSuggestWidget.selectedBackground#0063a5
  • editorWhitespace.foreground#103050
  • editorWidget.background#262641
  • errorForeground#ffeaea
  • extensionButton.prominentBackground#5f8b3b
  • extensionButton.prominentHoverBackground#5f8b3bbb
  • focusBorder#596f99
  • foreground#cccccc
  • input.background#181f2f
  • input.foreground#93a1a1
  • input.placeholderForeground#93a1a1aa
  • inputOption.activeBorder#1d4a87
  • inputValidation.errorBackground#a22d44
  • inputValidation.errorBorder#ab395b
  • inputValidation.infoBackground#051336
  • inputValidation.infoBorder#384078
  • inputValidation.warningBackground#5b7e7a
  • inputValidation.warningBorder#5b7e7a
  • list.activeSelectionBackground#08286b
  • list.dropBackground#041d52
  • list.focusBackground#08286b
  • list.highlightForeground#0063a5
  • list.hoverBackground#061940
  • list.inactiveSelectionBackground#152037
  • menu.selectionBackground#0063a5
  • notificationCenterHeader.background#00152b
  • notificationCenterHeader.foreground#33cccc
  • notifications.background#000e1b
  • notifications.foreground#bbbbbb
  • panel.border#051336
  • panel.dropBackground#ffffff1f
  • panelTitle.activeBorder#16ec5d
  • panelTitle.activeForeground#16ec5d
  • panelTitle.inactiveForeground#e7e7e799
  • peekView.border#2b2b4a
  • peekViewEditor.background#10192c
  • peekViewEditor.matchHighlightBackground#eeeeee33
  • peekViewResult.background#131e35
  • peekViewResult.matchHighlightBackground#eeeeee44
  • peekViewTitle.background#10192c
  • pickerGroup.border#596f99
  • pickerGroup.foreground#596f99
  • progressBar.background#0063a5
  • scrollbar.shadow#515e91aa
  • scrollbarSlider.activeBackground#3b3f5188
  • scrollbarSlider.background#1f2230aa
  • scrollbarSlider.hoverBackground#3b3f5188
  • selection.background#2aa19899
  • sideBar.background#000c18
  • sideBar.border#051336
  • sideBarSectionHeader.background#10192c
  • sideBarTitle.foreground#93a1a1
  • statusBar.background#10192c
  • statusBar.debuggingBackground#10192c
  • statusBar.foreground#93a1a1
  • statusBar.noFolderBackground#10192c
  • statusBarItem.prominentBackground#0063a5
  • statusBarItem.prominentHoverBackground#0063a5dd
  • tab.activeBackground#10192c
  • tab.activeBorder#16ec5d
  • tab.activeForeground#16ec5d
  • tab.border#2b2b4a
  • tab.hoverBackground#181e29
  • tab.inactiveBackground#10192c
  • tab.inactiveForeground#93a1a1
  • terminal.ansiBlack#111111
  • terminal.ansiBlue#bbdaff
  • terminal.ansiBrightBlack#333333
  • terminal.ansiBrightBlue#80baff
  • terminal.ansiBrightCyan#78ffff
  • terminal.ansiBrightGreen#b8f171
  • terminal.ansiBrightMagenta#d778ff
  • terminal.ansiBrightRed#ff7882
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#ffe580
  • terminal.ansiCyan#99ffff
  • terminal.ansiGreen#d1f1a9
  • terminal.ansiMagenta#ebbbff
  • terminal.ansiRed#ff9da4
  • terminal.ansiWhite#cccccc
  • terminal.ansiYellow#ffeead
  • terminal.border#051336
  • terminal.foreground#117bd2
  • titleBar.activeBackground#10192c

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
meta.embedded, source.groovy.embedded#93A1A1
comment#657B83italic
string#2AA198
string.regexp#D30102
constant.numeric#D33682
variable.language, variable.other#268BD2
keyword#859900
storage#93A1A1bold
entity.name.class, entity.name.type#CB4B16
entity.name.function#268BD2
punctuation.definition.variable#859900
punctuation.section.embedded.begin, punctuation.section.embedded.end#D30102
constant.language, meta.preprocessor#B58900
support.function.construct, keyword.other.new#CB4B16
constant.character, constant.other#CB4B16
entity.other.inherited-class#6C71C4
variable.parameter
entity.name.tag#268BD2
punctuation.definition.tag#657B83
entity.other.attribute-name#93A1A1
support.function#268BD2
punctuation.separator.continuation#D30102
support.constant
support.type, support.class#859900
support.type.exception#CB4B16
support.other.variable
invalid
meta.diff, meta.diff.header#E0EDDDitalic
markup.deleted#dc322f
markup.changed#cb4b16
markup.inserted#219186
markup.quote#859900
markup.list#B58900
markup.bold, markup.italic#D33682
markup.inline.raw#2AA198
markup.heading#268BD2
markup.heading.setext#268BD2
token.info-token#6796e6
token.warn-token#cd9731
token.error-token#f44747
token.debug-token#b267e6

Shiki preview

TypeScript sample highlighted with this variant's colors and tokenColors.

Loading...

vadiya-themes by harry-public - VS Code Theme