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#ff00ff28
  • activityBar.activeBorder#ff00ff
  • activityBar.activeFocusBorder#ff00ff
  • activityBar.background#0d0d0d
  • activityBar.border#ffff00
  • activityBar.foreground#00ffff
  • activityBarBadge.background#bb059a
  • button.background#0d0d0d
  • button.border#ff00ff
  • button.foreground#ff00ff
  • button.hoverBackground#1a1a1a
  • editor.background#0d0d0d
  • editor.findMatchBackground#ff00ff40
  • editor.findMatchHighlightBackground#ff00ff20
  • editor.foreground#7cd3d3
  • editor.lineHighlightBackground#1a1a1a
  • editor.lineHighlightBorder#ff00ff40
  • editor.selectionBackground#ff00ff40
  • editor.selectionHighlightBackground#ff00ff20
  • editor.wordHighlightBackground#ff00ff20
  • editor.wordHighlightStrongBackground#ff00ff40
  • editorBracketMatch.background#ff00ff40
  • editorBracketMatch.border#ff00ff
  • editorCursor.foreground#ff00ff
  • editorGroupHeader.tabsBackground#0d0d0d
  • editorIndentGuide.activeBackground1#ff00ff
  • editorIndentGuide.background1#ff00ff40
  • editorLineNumber.activeForeground#ff00ff
  • editorLineNumber.foreground#ff00ff80
  • editorWhitespace.foreground#ff00ff40
  • input.background#0d0d0d
  • input.border#ff00ff
  • list.activeSelectionBackground#00ffff32
  • list.activeSelectionForeground#00ffff
  • list.activeSelectionIconForeground#00ffff
  • list.focusBackground#00ffff32
  • list.focusForeground#00ffff
  • list.highlightForeground#00ffff28
  • list.hoverBackground#00ffff27
  • sideBar.background#0f0f0fbc
  • sideBar.border#ffff00
  • sideBarSectionHeader.background#0a0a0a
  • sideBarTitle.foreground#bbbbbb
  • statusBar.background#1a1a1a
  • statusBar.debuggingBackground#1a1a1a
  • statusBar.debuggingForeground#ff00ff
  • statusBar.foreground#ff00ff
  • statusBar.noFolderBackground#1a1a1a
  • statusBar.noFolderForeground#ff00ff
  • tab.activeBackground#0d0d0d
  • tab.activeBorder#ff00ff
  • tab.activeBorderTop#01fff7
  • tab.activeForeground#ffff00
  • tab.border#ffff0043
  • tab.inactiveBackground#272727
  • tab.inactiveForeground#ffff0095
  • titleBar.activeBackground#0d0d0d
  • titleBar.activeForeground#ff00ff

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#ff00ff80
variable, string constant.other.placeholder#ff0062
keyword, storage.type, storage.modifier#00ffff
entity.name.function, support.function#9a65fd
string, string.quoted#ffff00
constant.numeric#ff0000
entity.name.type, support.type#00ffff
keyword.control.import, keyword.control.export#ff00ff
entity.name.class, entity.name.type.class#00ffff
meta.decorator, decorator#ff00ff
entity.name.tag#00ffff
entity.other.attribute-name#ff00ff
support.type.property-name.css#00ffff
support.constant.property-value.css#ffff00
entity.other.attribute-name.html#ff00ff
entity.name.tag.html#00ffff
keyword.control, keyword.operator, keyword.other#00ffff
entity.name.function.js, entity.name.function.ts#00ff00
variable.other.readwrite.js, variable.other.readwrite.ts#ff00ff
variable.other.property.js, variable.other.property.ts#ff00ff
variable.other.constant.js, variable.other.constant.ts#ff0000
entity.name.type.class.js, entity.name.type.class.ts#00ffff
entity.name.type.interface.js, entity.name.type.interface.ts#00ffff
entity.name.type.js, entity.name.type.ts#00ffff
meta.decorator.js, meta.decorator.ts, decorator.js, decorator.ts#ff00ff
keyword.control.import.js, keyword.control.import.ts, keyword.control.export.js, keyword.control.export.ts#ff00ff
string.quoted.js, string.quoted.ts#ffff00
constant.numeric.js, constant.numeric.ts#ff0000
comment.line.double-slash.js, comment.line.double-slash.ts#ff00ff80
keyword.operator.js, keyword.operator.ts#00ffff
keyword.control.js, keyword.control.ts#00ffff
storage.type.js, storage.type.ts, storage.modifier.js, storage.modifier.ts#00ffff
support.class.js, support.class.ts, support.function.js, support.function.ts#00ff00
keyword.other.dart#00ffff
keyword.operator.dart#00ffff
keyword.control.dart#ff0062
entity.name.function.dart#ff00ff
variable.other.readwrite.dart#ff00ff
variable.other.property.dart#ff00ff
variable.other.constant.dart#ff0000
entity.name.type.class.dart#00ffff
entity.name.tag.custom.dart#00ffff
string.quoted.dart#ffff00
constant.numeric.dart#ff0000
comment.line.double-slash.dart#ff00ff80
keyword.operator.dart#00ffff
storage.type.dart, storage.modifier.dart#00ffff
support.class.dart, support.function.dart#00ff00
keyword.control.import.dart, keyword.control.export.dart#ff00ff
meta.decorator.dart, decorator.dart#ff00ff
punctuation.definition.decorator.dart#ff00ff
storage.type.annotation.override.dart#b19cd9
entity.name.type.dart, support.type.dart#ffff00
keyword.control.flow.ts#b19cd9
Bernadoque Theme by Wesley Bernadoque - VS Code Theme