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#111214
  • activityBar.border#00000000
  • activityBar.foreground#C5C8C6
  • activityBar.inactiveForeground#63666E
  • breadcrumb.activeSelectionForeground#C5C8C6
  • breadcrumb.background#17191b
  • breadcrumb.focusForeground#DE935F
  • breadcrumb.foreground#C5C8C6
  • dropdown.background#111214
  • dropdown.border#373B41
  • dropdown.foreground#C5C8C6
  • editor.background#17191b
  • editor.foreground#C5C8C6
  • editor.inactiveSelectionBackground#282A2E50
  • editor.lineHighlightBackground#373B4180
  • editor.lineHighlightBorder#00000000
  • editor.selectionBackground#373B41C0
  • editorBracketMatch.background#81A2BE40
  • editorBracketMatch.border#81A2BE2E
  • editorCursor.foreground#8ABEB7
  • editorError.foreground#C66
  • editorGroup.background#17191b
  • editorGroup.emptyBackground#17191b
  • editorGroupHeader.border#00000000
  • editorGroupHeader.noTabsBackground#17191b
  • editorGroupHeader.tabsBackground#17191b
  • editorGutter.addedBackground#17191b
  • editorGutter.background#17191b
  • editorGutter.deletedBackground#17191b
  • editorGutter.modifiedBackground#17191b
  • editorIndentGuide.activeBackground#F0C67480
  • editorIndentGuide.background#373B41
  • editorInfo.foreground#81A2BE
  • editorLineNumber.activeForeground#FFFFFF
  • editorLineNumber.foreground#63666E
  • editorPane.background#17191b
  • editorWarning.foreground#F0C674
  • editorWhitespace.foreground#4D5057
  • editorWidget.background#111214
  • editorWidget.border#373B41
  • editorWidget.foreground#C5C8C6
  • gitDecoration.addedResourceForeground#B5BD68
  • gitDecoration.conflictingResourceForeground#DE935F
  • gitDecoration.deletedResourceForeground#CC6666
  • gitDecoration.ignoredResourceForeground#63666E
  • gitDecoration.modifiedResourceForeground#F0C674
  • gitDecoration.submoduleResourceForeground#8ABEB7
  • gitDecoration.untrackedResourceForeground#B5BD68
  • input.background#17191b
  • input.border#373B41
  • input.foreground#C5C8C6
  • input.placeholderForeground#63666E
  • list.activeSelectionBackground#282A2E
  • list.activeSelectionForeground#C5C8C6
  • list.focusBackground#282A2E
  • list.highlightForeground#DE935F
  • list.hoverBackground#1C1D1F
  • list.inactiveSelectionBackground#282A2E
  • menu.background#111214
  • menu.border#373B41
  • menu.foreground#C5C8C6
  • menu.selectionBackground#282A2E
  • minimap.background#17191b
  • panel.background#111214
  • panel.border#00000000
  • panelTitle.activeForeground#C5C8C6
  • panelTitle.inactiveForeground#63666E
  • scrollbar.shadow#00000000
  • scrollbarSlider.activeBackground#63666E80
  • scrollbarSlider.background#373B4180
  • scrollbarSlider.hoverBackground#4D505780
  • sideBar.background#111214
  • sideBar.border#00000000
  • sideBar.foreground#C5C8C6
  • sideBarSectionHeader.background#111214
  • sideBarSectionHeader.border#00000000
  • statusBar.background#111214
  • statusBar.border#00000000
  • statusBar.debuggingBackground#111214
  • statusBar.foreground#C5C8C6
  • statusBar.noFolderBackground#111214
  • tab.activeBackground#161719
  • tab.activeForeground#C5C8C6
  • tab.border#00000000
  • tab.hoverBackground#1C1D1F
  • tab.inactiveBackground#111214
  • tab.inactiveForeground#63666E
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#81A2BE
  • terminal.ansiBrightBlack#FFFFFF40
  • terminal.ansiBrightBlue#7094B2
  • terminal.ansiBrightCyan#7BB2AA
  • terminal.ansiBrightGreen#AAB257
  • terminal.ansiBrightMagenta#A383AD
  • terminal.ansiBrightRed#FF5B69
  • terminal.ansiBrightWhite#F2F2F2
  • terminal.ansiBrightYellow#EAB85B
  • terminal.ansiCyan#8ABEB7
  • terminal.ansiGreen#B5BD68
  • terminal.ansiMagenta#B294BB
  • terminal.ansiRed#FF9DA4
  • terminal.ansiWhite#CCCCCC
  • terminal.ansiYellow#F0C674
  • terminal.background#17191b
  • terminal.border#00000000
  • terminal.foreground#C5C8C6
  • terminal.selectionBackground#373B41C0
  • terminalCursor.foreground#8ABEB7
  • titleBar.activeBackground#111214
  • titleBar.activeForeground#C5C8C6
  • titleBar.border#00000000
  • titleBar.inactiveBackground#111214
  • titleBar.inactiveForeground#63666E
  • workbench.editor.background#17191b

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#969896
string, string.quoted#B5BD68
constant.numeric, constant.language.boolean#DE935F
variable, variable.other.readwrite#C5C8C6
variable.parameter, variable.parameter.function, meta.parameter#81A2BE
variable.other.property, variable.object.property, meta.object-literal.key, support.variable.property#DE935F
entity.name.function, support.function, meta.function-call, variable.function#85B7B1
entity.name.type, entity.name.type.class, entity.name.type.struct, entity.name.type.enum, support.type, support.class, storage.type, meta.type.identifier, meta.return.type, meta.class.identifier, entity.other.inherited-class#DE935F
meta.generic, meta.generic-name, meta.template.argument, meta.type.parameters#F0C674
keyword, keyword.control, keyword.operator, keyword.declaration, keyword.control.flow, keyword.control.import, keyword.control.exception, keyword.return#B294BB
storage.modifier, storage.type, storage.class, storage.function#B294BB
entity.name.tag, meta.tag, punctuation.definition.tag#92B2CA
attribute.name, entity.other.attribute-name#F0C674
punctuation, meta.brace, meta.delimiter#C5C8C6
Tomorrow Night Rusty by n3tw4lk3r - VS Code Theme