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#f0f0f0
  • activityBar.foreground#121417
  • activityBarBadge.background#1b79bf
  • activityBarBadge.foreground#FFFFFF
  • badge.background#1b79bf
  • badge.foreground#FFFFFF
  • button.background#5871EF
  • button.foreground#FFFFFF
  • button.hoverBackground#6B83ED
  • diffEditor.insertedTextBackground#00809B33
  • dropdown.background#FFFFFF
  • dropdown.border#DBDBDC
  • editor.background#f4f7fa
  • editor.findMatchHighlightBackground#1b79bf33
  • editor.foreground#000
  • editor.lineHighlightBackground#383A420C
  • editor.selectionBackground#d7d4f0
  • editorCursor.foreground#1b79bf
  • editorGroup.background#EAEAEB
  • editorGroup.border#DBDBDC
  • editorGroupHeader.tabsBackground#EAEAEB
  • editorGutter.background#f7f7f7
  • editorHoverWidget.background#EAEAEB
  • editorHoverWidget.border#DBDBDC
  • editorIndentGuide.activeBackground#626772
  • editorIndentGuide.background#383A4233
  • editorLineNumber.activeForeground#383A42
  • editorLineNumber.foreground#9D9D9F
  • editorRuler.foreground#383A4233
  • editorSuggestWidget.background#EAEAEB
  • editorSuggestWidget.border#DBDBDC
  • editorSuggestWidget.selectedBackground#FFFFFF
  • editorWhitespace.foreground#383A4233
  • editorWidget.background#EAEAEB
  • editorWidget.border#d7d4f0
  • extensionButton.prominentBackground#3BBA54
  • extensionButton.prominentHoverBackground#4CC263
  • focusBorder#1b79bf
  • input.background#FFFFFF
  • input.border#DBDBDC
  • list.activeSelectionBackground#DBDBDC
  • list.activeSelectionForeground#232324
  • list.focusBackground#DBDBDC
  • list.highlightForeground#121417
  • list.hoverBackground#DBDBDC66
  • list.inactiveSelectionBackground#DBDBDC
  • list.inactiveSelectionForeground#232324
  • notification.background#333333
  • peekView.border#1b79bf
  • peekViewEditor.background#FFFFFF
  • peekViewResult.background#EAEAEB
  • peekViewResult.selectionBackground#DBDBDC
  • peekViewTitle.background#FFFFFF
  • pickerGroup.border#1b79bf
  • scrollbarSlider.activeBackground#747D9180
  • scrollbarSlider.background#4E566680
  • scrollbarSlider.hoverBackground#5A637580
  • sideBar.background#EAEAEB
  • sideBarSectionHeader.background#f4f7fa
  • statusBar.background#EAEAEB
  • statusBar.debuggingForeground#FFFFFF
  • statusBar.foreground#424243
  • statusBar.noFolderBackground#EAEAEB
  • statusBarItem.hoverBackground#DBDBDC
  • tab.activeBackground#f4f7fa
  • tab.activeForeground#121417
  • tab.border#DBDBDC
  • tab.inactiveBackground#EAEAEB
  • titleBar.activeBackground#10466e
  • titleBar.activeForeground#fff
  • titleBar.inactiveBackground#EAEAEB
  • titleBar.inactiveForeground#424243

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#dd0516italic
comment.block.preprocessor#AAAAAA
comment.documentation, comment.block.documentation#448C27
invalid.illegal#660000
keyword.operator#777777
source.c keyword.operator#8e369e
source.cpp keyword.operator#8e369e
keyword, storage#ff7017
storage.type, support.type#8e369e
constant.language, support.constant, variable.language#555
variable, support.variable#000
entity.name.function, support.function#000
entity.name.type, entity.other.inherited-class, support.class#7A3E9D
entity.name.exception#660000
entity.name.sectionbold
constant.numeric, constant.character, constant#AB6526
string#3dae3b
constant.character.escape#777777
string.regexp#4B83CD
constant.other.symbol#AB6526
punctuation#777777
Groklike (Unofficial) by Liam Saliba - VS Code Theme