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#19181a
  • activityBar.foreground#64ffcc
  • activityBarBadge.background#64FFDA
  • activityBarBadge.foreground#000000
  • badge.background#333333
  • badge.foreground#ffffff
  • button.background#2d2a2e
  • button.foreground#64FFcc
  • button.hoverBackground#327f66
  • dropdown.background#333333
  • dropdown.border#333333
  • dropdown.foreground#cafcdf
  • dropdown.listBackground#333333
  • editor.background#2d2a2e
  • editor.findMatchBackground#5b595c
  • editor.findMatchHighlightBackground#403e410c
  • editor.findRangeHighlightBackground#fcfcfa0c
  • editor.foreground#fafbfc
  • editor.hoverHighlightBackground#24486440
  • editor.inactiveSelectionBackground#12243280
  • editor.lineHighlightBackground#24486440
  • editor.rangeHighlightBackground#24486440
  • editor.selectionBackground#326496
  • editor.selectionForeground#244864
  • editor.selectionHighlightBackground#24486440
  • editor.wordHighlightBackground#24486440
  • editor.wordHighlightStrongBackground#24486440
  • editorBracketMatch.background#161616
  • editorBracketMatch.border#00000000
  • editorCodeLens.foreground#ffffff40
  • editorCursor.background#2d2a2e
  • editorCursor.foreground#fafafa
  • editorGroup.border#161616
  • editorGroup.dropBackground#161616d0
  • editorGroupHeader.noTabsBackground#2d2a2e
  • editorGroupHeader.tabsBackground#2d2a2e
  • editorGroupHeader.tabsBorder#2d2a2e00
  • editorIndentGuide.background1#ffffff10
  • editorLineNumber.foreground#646464
  • editorLink.activeForeground#3254B6
  • editorRuler.foreground#ffffff20
  • editorSuggestWidget.highlightForeground#64FFcc
  • editorWhitespace.foreground#ffffff20
  • errorForeground#ff527e
  • focusBorder#00000000
  • foreground#808080
  • input.background#3d3a3e
  • input.foreground#64ffcc
  • input.placeholderForeground#666666
  • list.activeSelectionBackground#303030
  • list.activeSelectionForeground#64ffcb
  • list.dropBackground#327f66
  • list.focusBackground#327f79
  • list.focusForeground#64ffcb
  • list.highlightForeground#64ffcb
  • list.hoverBackground#327f79
  • list.hoverForeground#64ffcb
  • list.inactiveSelectionBackground#303030
  • list.inactiveSelectionForeground#64ffcb
  • list.invalidItemForeground#ff5b9a
  • notificationLink.foreground#64FFcc
  • pickerGroup.foreground#64FFcc
  • progressBar.background#64FFcc
  • scrollbar.shadow#00000080
  • scrollbarSlider.activeBackground#64FFcc80
  • scrollbarSlider.background#64FFcc20
  • scrollbarSlider.hoverBackground#64FFcc40
  • selection.background#326496
  • sideBar.background#221f22
  • sideBar.foreground#82a8a180
  • sideBarSectionHeader.background#221f22
  • sideBarSectionHeader.foreground#808080
  • sideBarTitle.foreground#484848
  • statusBar.background#221f22
  • statusBar.debuggingBackground#327f66
  • statusBar.debuggingForeground#64ffcc
  • statusBar.foreground#64ffcc
  • statusBar.noFolderBackground#221f22
  • statusBarItem.activeBackground#ffffff20
  • statusBarItem.hoverBackground#ffffff10
  • statusBarItem.prominentBackground#ffffff10
  • statusBarItem.prominentHoverBackground#ffffff20
  • tab.activeBackground#2d2a2e
  • tab.activeBorder#64FFcc
  • tab.activeForeground#64FFcc
  • tab.border#242424
  • tab.hoverBackground#2d2a2e
  • tab.hoverBorder#64FFcc
  • tab.inactiveBackground#2d2a2e
  • tab.inactiveForeground#808080
  • tab.unfocusedActiveBorder#327f66
  • tab.unfocusedActiveForeground#646464
  • tab.unfocusedHoverBackground#2d2a2e
  • tab.unfocusedHoverBorder#327f66
  • tab.unfocusedInactiveForeground#646464
  • textBlockQuote.background#2a3f3c
  • textBlockQuote.border#64FFAA
  • textCodeBlock.background#2a3f3c
  • textLink.activeForeground#64FFAA
  • textLink.foreground#64FFDA
  • textPreformat.foreground#64FFAA
  • textSeparator.foreground#64FFAA
  • widget.shadow#00000080

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
source#ffffff
support.type, keyword.type, storage.type, entity.name.type, entity.name.type.alias#59deff
support.function, meta.function-call.generic, entity.name, entity.name.type.class, entity.name.type.namespace, entity.other#3affc4
constant, entity.name.variable.enum-member#bb86ff
variable, support, meta, entity.name.variable#ffffff
variable.parameter, entity.name.variable.parameter, meta.parameters#ffbe69
support.type.property-name#ffdba4
storage.modifier, keyword#ff3d88
keyword.control, entity.name.tag, punctuation.definition.keyword#ff3d88
variable.language#ffc7dd
storage.type.is, keyword.other, keyword.operator#ff88b5bold
invalid#ff5e5e
punctuation, meta.brace#969696
comment, punctuation.definition.comment#646464
string, punctuation.definition.string, entity.name.import, meta.object-literal.key#ffdba4
Aoki by Luizsan - VS Code Theme