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#2c2c30
  • contrastBorder#1f1f1f
  • editor.background#1b1c1f
  • editor.foreground#eeffff
  • editor.hoverHighlightBackground#2c2c30
  • editor.wordHighlightBackground#2c2c30
  • editor.wordHighlightStrongBackground#2c2c30
  • editorGroup.border#1f1f1f
  • editorGroupHeader.tabsBackground#202024
  • menu.background#323236
  • menubar.selectionBackground#323236
  • notifications.background#1e1e21
  • panel.background#202024
  • sideBar.background#202024
  • sideBar.border#1f1f1f
  • sideBar.foreground#dddddd
  • sideBarSectionHeader.background#2a2a2e
  • sideBarTitle.foreground#bbbbbb
  • tab.inactiveBackground#232326
  • terminal.background#1b1c1f
  • titleBar.activeBackground#2c2c30

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment, punctuation.definition.comment.begin, punctuation.definition.comment.end#80bf6b
entity.name.function.preprocessor#d7adf7
punctuation.definition.directive, keyword.control.directive#a8a8a8
punctuation.definition.string.begin, punctuation.definition.string.end#ffcd87
string.quoted.double, string.quoted.single.c, string.quoted.other.lt-gt#fcb583
constant.character.escape#fc8391
constant.other.placeholder#fcd483
constant.numeric.decimal, variable.other.enummember, keyword.other.unit.hexadecimal.c, constant.numeric.hexadecimal.c#B5CEA8
entity.name.function#dede9b
keyword.other, storage.modifier, storage.type, keyword.operator.sizeof.c#569CD6
entity.name.type#56d6b8
keyword.control#ce7bd1
punctuation, storage.modifier.array.bracket.square.c, storage.modifier.pointer.cpp, punctuation.separator.pointer-access.c#D4D4D4
variable#d1d1d1
variable.parameter#bababa
variable.other.property#fafafa
punctuation.separator.pointer-access.c#eeffff
Ugg Theme by Uggly Madly - VS Code Theme