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.activeBorder#00D1FF
  • activityBar.background#111133
  • activityBar.foreground#00D1FF
  • activityBarBadge.background#00D1FF
  • activityBarBadge.foreground#0B0C1A
  • badge.background#00D1FF
  • badge.foreground#0B0C1A
  • button.background#00D1FF
  • button.foreground#0B0C1A
  • button.hoverBackground#33E0FF
  • dropdown.background#151630
  • dropdown.border#00D1FF
  • dropdown.foreground#D0D0D0
  • editor.background#0B0C1A
  • editor.findMatchBackground#FFB84D44
  • editor.findMatchHighlightBackground#FFB84D22
  • editor.foreground#D0D0D0
  • editor.lineHighlightBackground#15163040
  • editor.lineHighlightBorder#15163080
  • editor.selectionBackground#00D1FF33
  • editor.selectionHighlightBackground#00D1FF22
  • editorBracketMatch.background#FFB84D33
  • editorBracketMatch.border#FFB84D
  • editorCursor.foreground#00D1FF
  • editorGroupHeader.tabsBackground#0B0C1A
  • editorIndentGuide.activeBackground#55557788
  • editorIndentGuide.background#33335544
  • editorLineNumber.activeForeground#00D1FF
  • editorLineNumber.foreground#777777
  • editorWhitespace.foreground#555555
  • focusBorder#00D1FF
  • gitDecoration.conflictingResourceForeground#FFEB66
  • gitDecoration.deletedResourceForeground#FF6666
  • gitDecoration.modifiedResourceForeground#00D1FF
  • gitDecoration.untrackedResourceForeground#66FFAA
  • input.background#151630
  • input.border#00D1FF
  • input.foreground#D0D0D0
  • input.placeholderForeground#777777
  • inputOption.activeBorder#00D1FF
  • list.activeSelectionBackground#15163080
  • list.activeSelectionForeground#D0D0D0
  • list.focusBackground#151630
  • list.highlightForeground#00D1FF
  • list.hoverBackground#15163066
  • minimap.background#0B0C1A
  • minimapSlider.activeBackground#FFB84D88
  • minimapSlider.background#FFB84D22
  • minimapSlider.hoverBackground#FFB84D44
  • panel.background#0B0C1A
  • panel.border#151630
  • panelTitle.activeBorder#00D1FF
  • panelTitle.activeForeground#D0D0D0
  • panelTitle.inactiveForeground#777777
  • scrollbar.shadow#00000044
  • scrollbarSlider.activeBackground#00D1FF88
  • scrollbarSlider.background#33335544
  • scrollbarSlider.hoverBackground#33335588
  • sideBar.background#0C0D28
  • sideBar.foreground#D0D0D0
  • sideBarSectionHeader.background#151630
  • sideBarSectionHeader.foreground#00D1FF
  • sideBarTitle.foreground#00D1FF
  • statusBar.background#1A1A33
  • statusBar.debuggingBackground#FFB84D
  • statusBar.foreground#D0D0D0
  • statusBar.noFolderBackground#111133
  • statusBarItem.hoverBackground#00D1FF33
  • tab.activeBackground#151630
  • tab.activeBorder#00D1FF
  • tab.activeForeground#D0D0D0
  • tab.border#0B0C1A
  • tab.inactiveBackground#0B0C1A
  • tab.inactiveForeground#777777
  • terminal.ansiBlue#66AFFF
  • terminal.ansiBrightBlue#99CCFF
  • terminal.ansiBrightCyan#99FFCC
  • terminal.ansiBrightGreen#B3FFB3
  • terminal.ansiBrightMagenta#FFCC99
  • terminal.ansiBrightRed#FF9999
  • terminal.ansiBrightYellow#FFF099
  • terminal.ansiCyan#66FFAA
  • terminal.ansiGreen#99FF99
  • terminal.ansiMagenta#FFB84D
  • terminal.ansiRed#FF6666
  • terminal.ansiYellow#FFEB66
  • terminal.background#0B0C1A
  • terminal.foreground#D0D0D0
  • titleBar.activeBackground#151630
  • titleBar.activeForeground#D0D0D0
  • titleBar.inactiveBackground#0B0C1A
  • titleBar.inactiveForeground#777777

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#5A6378italic
string, string.quoted, string.template#66FFAA
keyword, storage.type, storage.modifier#00D1FFbold
keyword.operator, punctuation.accessor#00D1FF
variable, variable.other#A0A0A0
variable.parameter#A0A0A0italic
entity.name.function, support.function#B0C4FF
meta.function-call#B0C4FF
entity.name.class, entity.name.type.class, support.class#B0B0FFbold
entity.name.type, support.type#00D1FF
entity.name.type.interface#00D1FFitalic
constant.numeric#99FF99
constant, constant.language, constant.character#B0B0B0
constant.language.boolean#00D1FFbold
variable.other.property, support.variable.property#B0B0B0
meta.object-literal.key#B0B0B0
entity.name.tag, punctuation.definition.tag#00D1FF
entity.other.attribute-name#B0B0B0italic
punctuation, meta.brace#D0D0D0
string.regexp#66FFAA
constant.character.escape#B0B0B0
meta.decorator, punctuation.decorator#00D1FF
invalid, invalid.illegal#FF6666strikethrough
markup.heading, entity.name.section#00D1FFbold
markup.bold#00D1FFbold
markup.italic#5A6378italic
markup.underline.link#66FFAA
markup.inline.raw, markup.fenced_code#B0B0B0
support.type.property-name.json#00D1FF
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#66FFAA
support.type.property-name.css#B0B0B0
support.constant.property-value.css#66FFAA
themesmith by CyberBoost - VS Code Theme