Skip to main content
Coding Theme

Color themes

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.activeBackground#E1E1E1
  • activityBar.activeBorder#3574F0
  • activityBar.background#F2F2F2
  • activityBar.border#E1E1E1
  • activityBar.foreground#1F2329
  • activityBar.inactiveForeground#6C707E
  • activityBarBadge.background#3574F0
  • activityBarBadge.foreground#FFFFFF
  • button.background#3574F0
  • button.foreground#FFFFFF
  • button.hoverBackground#315FBD
  • descriptionForeground#6C707E
  • disabledForeground#9DA0A8
  • dropdown.background#FFFFFF
  • dropdown.border#B7BAC1
  • dropdown.foreground#1F2329
  • editor.background#FFFFFF
  • editor.findMatchBackground#F2C55C88
  • editor.findMatchBorder#B88A18
  • editor.findMatchHighlightBackground#F7DA8A88
  • editor.foreground#1F2329
  • editor.inactiveSelectionBackground#D4E4FF99
  • editor.lineHighlightBackground#F5F6F7
  • editor.lineHighlightBorder#F5F6F7
  • editor.selectionBackground#A6C8FF
  • editor.selectionHighlightBackground#D4E4FF88
  • editor.wordHighlightBackground#D4E4FF77
  • editor.wordHighlightStrongBackground#A6C8FF77
  • editorBracketMatch.background#EBECF0
  • editorBracketMatch.border#9DA0A8
  • editorCodeLens.foreground#818594
  • editorCursor.foreground#000000
  • editorGroup.border#E1E1E1
  • editorGroupHeader.tabsBackground#F7F8FA
  • editorGroupHeader.tabsBorder#E1E1E1
  • editorGutter.background#FFFFFF
  • editorHoverWidget.background#FFFFFF
  • editorHoverWidget.border#C9CCD2
  • editorHoverWidget.foreground#1F2329
  • editorIndentGuide.activeBackground1#B7BAC1
  • editorIndentGuide.background1#E1E1E1
  • editorInlayHint.background#EBECF0
  • editorInlayHint.foreground#6C707E
  • editorInlayHint.parameterBackground#EBECF0
  • editorInlayHint.parameterForeground#6C707E
  • editorInlayHint.typeBackground#EBECF0
  • editorInlayHint.typeForeground#6C707E
  • editorLightBulb.foreground#B88A18
  • editorLineNumber.activeForeground#6C707E
  • editorLineNumber.foreground#A4A6AD
  • editorSuggestWidget.background#FFFFFF
  • editorSuggestWidget.border#C9CCD2
  • editorSuggestWidget.foreground#1F2329
  • editorSuggestWidget.highlightForeground#315FBD
  • editorSuggestWidget.selectedBackground#D4E4FF
  • editorWhitespace.foreground#D5D7DA
  • errorForeground#D91526
  • errorLens.errorForeground#D91526
  • errorLens.errorMessageBackground#D9152614
  • errorLens.errorRangeBackground#D9152614
  • errorLens.hintForeground#067D17
  • errorLens.hintMessageBackground#067D1714
  • errorLens.hintRangeBackground#067D1714
  • errorLens.infoForeground#315FBD
  • errorLens.infoMessageBackground#315FBD14
  • errorLens.infoRangeBackground#315FBD14
  • errorLens.warningForeground#B88A18
  • errorLens.warningMessageBackground#B88A1814
  • errorLens.warningRangeBackground#B88A1814
  • focusBorder#3574F0
  • foreground#1F2329
  • gitDecoration.addedResourceForeground#067D17
  • gitDecoration.conflictingResourceForeground#B88A18
  • gitDecoration.deletedResourceForeground#D91526
  • gitDecoration.ignoredResourceForeground#9DA0A8
  • gitDecoration.modifiedResourceForeground#315FBD
  • gitDecoration.renamedResourceForeground#00627A
  • gitDecoration.untrackedResourceForeground#067D17
  • icon.foreground#5A5D63
  • input.background#FFFFFF
  • input.border#B7BAC1
  • input.foreground#1F2329
  • input.placeholderForeground#818594
  • list.activeSelectionBackground#D4E4FF
  • list.activeSelectionForeground#1F2329
  • list.focusBackground#D4E4FF
  • list.focusForeground#1F2329
  • list.highlightForeground#315FBD
  • list.hoverBackground#EBECF0
  • list.hoverForeground#1F2329
  • list.inactiveSelectionBackground#E7EFFC
  • list.inactiveSelectionForeground#1F2329
  • menu.background#FFFFFF
  • menu.foreground#1F2329
  • menu.selectionBackground#D4E4FF
  • menu.selectionForeground#1F2329
  • menu.separatorBackground#E1E1E1
  • notifications.background#FFFFFF
  • notifications.border#C9CCD2
  • notifications.foreground#1F2329
  • panel.background#FFFFFF
  • panel.border#E1E1E1
  • panelTitle.activeBorder#3574F0
  • panelTitle.activeForeground#1F2329
  • panelTitle.inactiveForeground#6C707E
  • quickInput.background#FFFFFF
  • quickInput.foreground#1F2329
  • quickInputList.focusBackground#D4E4FF
  • scrollbar.shadow#00000000
  • scrollbarSlider.activeBackground#5A5D6388
  • scrollbarSlider.background#81859444
  • scrollbarSlider.hoverBackground#6C707E66
  • selection.background#D4E4FF
  • sideBar.background#F7F8FA
  • sideBar.border#E1E1E1
  • sideBar.foreground#1F2329
  • sideBarSectionHeader.background#F7F8FA
  • sideBarSectionHeader.border#E1E1E1
  • sideBarSectionHeader.foreground#1F2329
  • sideBarTitle.foreground#1F2329
  • statusBar.background#F2F2F2
  • statusBar.border#E1E1E1
  • statusBar.debuggingBackground#E69C2C
  • statusBar.debuggingForeground#1F2329
  • statusBar.foreground#1F2329
  • statusBarItem.hoverBackground#E1E1E1
  • tab.activeBackground#DDE9FC
  • tab.activeBorder#DDE9FC
  • tab.activeBorderTop#3574F0
  • tab.activeForeground#1F2329
  • tab.border#F7F8FA
  • tab.hoverBackground#EBECF0
  • tab.inactiveBackground#F7F8FA
  • tab.inactiveForeground#5A5D63
  • terminal.background#FFFFFF
  • terminal.findMatchBackground#E7A928CC
  • terminal.findMatchBorder#8A650F
  • terminal.findMatchHighlightBackground#F2C55C99
  • terminal.findMatchHighlightBorder#B88A18
  • terminal.foreground#1F2329
  • terminalCursor.foreground#000000
  • terminalOverviewRuler.findMatchForeground#B88A18
  • titleBar.activeBackground#F2F2F2
  • titleBar.activeForeground#1F2329
  • titleBar.border#E1E1E1
  • titleBar.inactiveBackground#F2F2F2
  • titleBar.inactiveForeground#6C707E
  • tree.indentGuidesStroke#C9CCD2
  • widget.shadow#00000022

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#8C8C8C
keyword, storage.type, storage.modifier, keyword.control#0033B3
string#067D17
constant.numeric, constant.language.boolean, constant.language.nil#1750EB
entity.name.function, entity.name.type, entity.name.class, entity.name.struct, entity.name.interface#00627A
support.function, variable.function, entity.name.namespace, entity.name.package#7A7A43
constant.other, variable.other.constant#871094
invalid#D91526
Goland Style by Boyce - VS Code Theme